Remove Vue scaffolding and add design system foundation
Strip default Vue components (HelloWorld, TheWelcome, icons, AboutView), base.css, and placeholder assets. Add Sora font (self-hosted WOFF2), Electric Dusk color palette, and design system spec. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
85
spec/design-system.md
Normal file
85
spec/design-system.md
Normal file
@@ -0,0 +1,85 @@
|
||||
# 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)
|
||||
Reference in New Issue
Block a user