ADR-010
Styleguide
Every design token and shared static component, on fixture data — the single surface for tuning the whole visual system. Collections are empty this phase; nothing below is real content.
Colour — semantic tokens
bg
surface
text
text-muted
primary
primary-fill
secondary
rule
border
Colour — primitive ramps
100 (lightest tint) → 500 (base) → 900 (darkest shade). Generated byscripts/generate-tokens.mjs.
Contrast audit findings
- Raw terracotta-500 on warm-white text: 4.31:1 (fails 4.5:1) → button fill uses terracotta-600 (5.62:1)
- Raw stone-500 as muted text on parchment: 3.26:1 (fails) → muted text uses stone-700 (5.84:1)
- Raw brass-500 as a rule on parchment: 2.29:1 (fails even 3:1) → rules use brass-700 (4.32:1)
Typography
Fraunces display 4xl
Fraunces display 2xl
Hanken Grotesk text lg
Hanken Grotesk text base — body copy at 17px, ~1.65 line-height.
Hanken Grotesk text sm — muted caption.
Spacing & radius
Button
- NIDHI-registered · Ministry of Tourism pledge
- Registered Pvt Ltd · est. 2018
- TripAdvisor 5.0
- Permits handled · 24/7 assistance
JourneyCard
DestinationTile
ResponsiveImage
Section — inverse background
The dark atmospheric mapping (.theme-inverse) — a semantic swap, not a rebuild (ADR-010).