Files

nitrix 6aeb4b8bca Migrate project artifacts to spec-kit format

- Move cross-cutting docs (personas, design system, implementation phases,
  Ideen.md) to .specify/memory/
- Move cross-cutting research and plans to .specify/memory/research/ and
  .specify/memory/plans/
- Extract 5 setup tasks from spec/setup-tasks.md into individual
  specs/001-005/spec.md files with spec-kit template format
- Extract 20 user stories from spec/userstories.md into individual
  specs/006-026/spec.md files with spec-kit template format
- Relocate feature-specific research and plan docs into specs/[feature]/
- Add spec-kit constitution, templates, scripts, and slash commands
- Slim down CLAUDE.md to Claude-Code-specific config, delegate principles
  to .specify/memory/constitution.md
- Update ralph.sh with stream-json output and per-iteration logging
- Delete old spec/ and docs/agents/ directories
- Gitignore Ralph iteration JSONL logs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-06 20:19:41 +01:00

3.3 KiB

Raw Blame History

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)

3.3 KiB Raw Blame History Unescape Escape