# 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

```css
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)