fete/spec/design-system.md

Design System

This document defines the visual design language for fete. All frontend implementation must follow these specifications.

Principles

• Mobile-first / App-native feel — not a classic website. Think installed app, not browser page.
• Desktop: centered narrow column (max ~480px), gradient background fills the rest.
• Generous whitespace — elements breathe, nothing cramped.
• WCAG AA contrast as baseline for all color choices.
• Accessibility is a baseline requirement — not an afterthought (per project statutes).

Color Palette: Electric Dusk

Chosen for best balance of style, broad appeal, and accessibility.

Role	Hex	Description
Gradient Start	#F06292	Pink
Gradient Mid	#AB47BC	Purple
Gradient End	#5C6BC0	Indigo blue
Accent (CTAs)	#FF7043	Deep orange
Text (light mode)	#1C1C1E	Near black
Text (dark mode)	#FFFFFF	White
Surface (light)	#FFF5F8	Pinkish white
Surface (dark)	#1B1730	Deep indigo-black
Card (light)	#FFFFFF	White
Card (dark)	#2A2545	Muted indigo

Primary Gradient

background: linear-gradient(135deg, #F06292 0%, #AB47BC 50%, #5C6BC0 100%);

Usage Rules

• Gradient for hero/splash areas and page backgrounds — not as direct text background for body copy.
• Cards and content areas use solid surface colors with high-contrast text.
• Accent color (#FF7043) for primary action buttons with dark text (#1C1C1E).
• White text on gradient mid/end passes WCAG AA (4.82:1 and 4.86:1).
• White text on gradient start passes AA-large (3.06:1) — use for headings 18px+ only.

Typography: Sora

Contemporary geometric sans-serif with slightly rounded terminals. Modern and friendly without being childish.

• Font: Sora
• License: SIL Open Font License 1.1 (OFL)
• Source: https://github.com/sora-xor/sora-font
• Format: Self-hosted WOFF2. No external CDN. No Google Fonts.
• Weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold)

Weight Usage

Context	Weight	Size guideline
Body text	400	0.85–1rem
Labels	600–700	0.8–0.9rem
Headlines	700–800	1.2–1.6rem
Buttons	700–800	1rem
Small/meta text	400–500	0.75–0.85rem

Component Patterns

Card-Style Form Fields

• Rounded corners (border-radius: 14px)
• Generous padding (0.9rem 1rem)
• White/card-colored background on gradient pages
• Subtle shadow (box-shadow: 0 2px 8px rgba(0,0,0,0.1))
• Bold label (font-weight 700), regular-weight input text

Buttons

• Rounded corners matching card fields (border-radius: 14px)
• Accent color background with dark text
• Bold/ExtraBold weight (700–800)
• Subtle shadow for depth

Layout

• Mobile: full-width content with horizontal padding (~1.2rem)
• Desktop: centered column, max-width ~480px, gradient background fills viewport
• Vertical spacing between elements: ~0.75rem (compact), ~1.2rem (sections)