Style Guide
Brand tokens and UI recipes used across the app. Click any swatch, preview, or class string to copy it.
Colors
Text
Page heading
text-2xl font-semibold tracking-tight text-navy-900
Section title
text-sm font-semibold text-navy-900
Body text
text-sm text-navy-900
Muted / helper text
text-sm text-navy-700
Inline link
font-medium text-navy-900 underline underline-offset-2
Error message
text-sm text-crimson-600
Backgrounds
Page background
bg-custard text-navy-900
Card surface
rounded-md border border-navy-900/15 bg-white
Code / snippet block
Empty state
Buttons
rounded-md bg-navy-900 px-3 py-2 text-sm font-medium text-custard hover:bg-navy-800
rounded-md border border-navy-900/20 px-3 py-2 text-sm text-navy-900 hover:bg-gold-400/40
rounded-md bg-tangerine-500 px-3 py-2 text-sm font-medium text-navy-900 hover:bg-tangerine-600
rounded-md bg-crimson-600 px-3 py-2 text-sm font-medium text-white hover:bg-crimson-700
Inputs
w-full rounded-md border border-navy-900/25 px-3 py-2 text-sm outline-none focus:border-tangerine-500 focus:ring-1 focus:ring-tangerine-500
mb-1 block text-sm font-medium text-navy-800
Cards
Card with header
Section body content.
- Label
- Value
- john@example.com
Modal panel
Dialog shell used by task forms.
Alerts and extras
Error alert
Success alert
text copied!!!
GET
POST
PUT
DELETE