Foundations
Colors, type, icons, spacing, shadows, and the brand marks that every component inherits from. Tokens follow the shadcn/ui naming contract so any community component drops in unmodified.
Two brand palettes, one semantic layer.
Forest (the dark green) and Lime (the contrast accent) are the two BTNG colours. Every component reads semantic tokens — background, foreground, primary, accent, border — which remap automatically between light and dark modes.
Brand
A single monochrome green ramp. Every background, text, and border in the system is drawn from this scale. In light mode --primary is 950; in dark it flips to 400 so the button pops against the near-black background.
Lime
The full Tailwind Lime palette, for contrast-banging CTAs and their hover tints. --accent is bound to --lime-300 in both modes.
Semantic tokens
What every component reads. Toggle light/dark in the header to watch them remap.
Surface
Action
Text
Border
Display and Text, Geist Variable throughout.
Display (72 → 24) handles marketing headlines with -2% letter-spacing on the four largest steps; Text (20 → 12) handles body and UI. One font family. Weight is 400 for UI, bold restored inside .prose.
Display
tight tracking on 72/60/48/36Text
Phosphor Icons, regular weight unless state says otherwise.
Render at size-4 for inline UI, size-5 for touch targets, size-6 for primary actions. Reserve weight='fill' for selected or active state.
Weights
Four-pixel base, Tailwind defaults.
Standard Tailwind spacing — no custom tokens. One density per page: comfortable (gap-6 / p-6) for marketing, compact (gap-4 / p-4) for product UI.
Radii
The base --radius is 4px. shadcn's calc ladder derives the rest.
Standard Tailwind elevation.
shadow-xs through shadow-2xl. Never stack more than two shadows on a single surface. Buttons combine their own inset with a whisper of outer drop.
Idle interactive surfaces
Hovered cards
Dropdowns, popovers
Floating panels
Dialogs
Heavy overlays
Marketing hero elevation
Backdrop blurs
Four native Tailwind backdrop-blur-* utilities. Each tile shows the named radius applied over the same colour field.
One wordmark, one mark, both theme-aware.
The wordmark uses fill=currentColor so it tracks the surrounding text token. The square mark is a fixed-colour asset served from Next.js app/icon.svg for favicons.
fill=currentColor, tracks --foreground.
Served as app/icon.svg and app/apple-icon.png. Fixed colour for favicons.