Design System

Design System

UI direction is locked. Don't propose color alternates or add card chrome.

Five fundamentals (aligned with the web "vanguard" system):

1. Editorial serif display — Instrument Serif headlines; size + tracking, not weight. Italic for the accent word.
2. Mono for labels + numerals — scores, ₹ amounts, dates, stats (JetBrains Mono / system mono fallback).
3. Hairlines, not card chrome — 1pt separators; no drop-shadowed cards framing content.
4. Lime is signal, never decoration — one lime element per screen (primary CTA, score, live packet).
5. Warm black + soft glass — #0A0A0A ground; iOS 26 Liquid Glass on controls; content stays opaque.

Use the tokens

Never .padding(.horizontal, 20) or .font(.system(size: 14)).

Ramp	File	Examples
Spacing	Theme/Layout.swift	Space.xs…xxl (4 / 8 / 12 / 16 / 24 / 32)
Type	Theme/Typography.swift	AppType.display*, .title, .body, .mono*
Size	Theme/Layout.swift	Size.buttonMinHeight, avatars, rings, heroes
Color	Theme/Tokens.swift	Color.bg, .ink, .brand (#C8FF00), .accent, status

Brand colors (aligned)

Role	Token	Value
Ground	Color.bg	#0A0A0A
Ink	Color.ink	#F5F5F5
Lime (brand)	Color.brand	#C8FF00
Violet	Color.accent	#7C5CFF
Good / Warm / Hot	Color.good / .warm / .hot	status only

Bookability tiers via Color.tier(forScore:) — Elite ≥90 / Trusted ≥75 / Rising ≥60 / New.

Non-negotiables

• Hairline / no card chrome
• Mono numbers everywhere money/score/count appears
• Editorial serif for hero headlines only (Welcome, Discover, Confirmed, …)
• One signal pill per card max
• Generous section gaps (Space.xl / xxl)
• Photo-forward, not gradient-forward

Anti-patterns

• Glassmorphism everywhere
• Bordered card stacks
• Stacked headers (small-caps + big title + bell)
• More than 3 colors per screen
• Lime as decoration / borders

Canonical bridge doc: DESIGN_ALIGNMENT.md. Preferences: HANDOFF.md §8.