Design systemDesign tokens, in motion.
Every color, type ramp, radius, and shadow that ships with the product. Source of truth lives in app/globals.css; utilities are exposed through tailwind.config.ts.
Brand palette
indigo
indigo-deep
indigo-press
indigo-soft
coral
coral-deep
coral-press
coral-soft
teal
teal-deep
teal-soft
amber
amber-deep
amber-soft
Neutrals — cool / violet-tinted
ink-0
ink-50
ink-100
ink-200
ink-300
ink-400
ink-500
ink-600
ink-700
ink-800
ink-900
Semantic roles
--fg-1 (primary text)
--fg-2 (secondary text)
--fg-3 (tertiary / hint)
--fg-link
--bg-page
--bg-surface (cards)
--bg-sunken (hover surface)
--bg-dark (hero / modals)
--border-hairline
--border-strong
--border-focus
Three families, one clear job each
Skills, explained.
In plain English.
The h1 — 40/1.1 600
The h2 — 30/1.2 600
The h3 — 22/1.3 600
The h4 — 17/1.35 600
Body large — Ask a question the way you’d ask a teammate.
Body — Default for product copy. 15/1.55 400.
Small — supporting metadata, captions.0.92 match · senior · bangalore
// hackathon · team
01 · The problemLabel — form fields, nav, dense rows
Caption — secondary metadata
Strict 4px base
From hairline chips to hero cards
--r-xs
4px
--r-sm
6px
--r-md
10px
--r-lg
14px
--r-xl
22px
--r-pill
999px
Indigo-tinted, never neutral grey
--shadow-1
Resting cards, inputs
--shadow-2
Raised, hover lift
--shadow-3
Popovers, dropdowns
--shadow-4
Modals, sheets
Logo lockups
Brand glows
Soft radial color glows are the brand’s signature illustration style. On dark backgrounds, use mix-blend-mode: screen for the luminous effect. Never more than two glows in the same composition.
