Design system

The Aura look book

A living style guide rendered straight from the code — bright white surfaces, one confident mint accent, slate ink, soft elevation. Click any swatch to copy its hex. The written spec lives in docs/DESIGN-SYSTEM.md.

Color — surfaces

Bright, layered light. Cards sit on white; sections alternate with a faint tinted wash.

Color — ink

Rich slate, never pure black.

Color — accent

The mint-green signature. Used deliberately: one clear action per view.

Color — signals

Reserved for meaning: passing/failing guardrails, score tiers, data series. Not decoration.

Typography

Plus Jakarta Sans for display, Geist Sans for body, Geist Mono for every figure.

Display / Boldfont-display · 800
Heading / Semiboldfont-display · 600
Body copy — the quick brown fox jumps over the lazy dog.font-sans · 400
Muted secondary text for descriptions and captions.text-muted
₹1,24,560.75 · 18.4% · 0.42tabular · mono
Eyebrow label.eyebrow

Buttons

One primitive, four variants, three sizes. Every button in Aura comes from <Button> or buttonVariants().

primary

The one main CTA. Solid mint, white text.

secondary

Paired alternative. White, hairline.

ghost

Toolbars, tertiary actions.

subtle

Low-emphasis affirmative chip.

Elevation & radii

Soft, neutral-cool shadows. Cards round at 2xl; pills and buttons are fully round.

shadow-xs
shadow-sm
shadow-md
shadow-lg

Components

Domain primitives built on the tokens — score tiers and guardrail verdicts.

Score pill
88%
64%
32%
Verdict badge
Aligned
Meets the guardrail
Watch
Borderline — keep watching
Divergent
Breaks from the thesis
No data
Nothing to assert