Color
All color values come from CSS custom properties declared under @theme in app/globals.css. Use semantic tokens, not raw hex.
Surface
bg
--color-bg
surface
--color-surface
sidebar
--color-sidebar
sidebar-active
--color-sidebar-active
Text
text
--color-text
text-muted
--color-text-muted
text-subtle
--color-text-subtle
Border
border
--color-border
border-strong
--color-border-strong
Brand
primary
--color-primary
primary-hover
--color-primary-hover
Semantic — success / info / warn / danger
success
--color-success
success-soft
--color-success-soft
info
--color-info
info-soft
--color-info-soft
warn
--color-warn
warn-soft
--color-warn-soft
danger
--color-danger
danger-soft
--color-danger-soft
Typography
Geist Sans + Geist Mono. Sizes are Tailwind tokens — stick to them rather than introducing arbitrary values.
| Style | Class | Sample |
|---|---|---|
| Display | text-3xl font-semibold tracking-tight | B2BHub |
| Title | text-xl font-semibold tracking-tight | Purchase Order #PO-2024-000567 |
| Heading | text-lg font-semibold | Section heading |
| Subheading | text-sm font-semibold | Card subhead |
| Body | text-sm | Standard paragraph body — used in tables, cards, descriptions. |
| Small | text-xs | Helper text, breadcrumbs, captions |
| Tiny | text-[11px] | Timestamps, metadata |
| Mono | text-xs font-mono | PO-2024-000567 |
Spacing
4-pixel baseline. Use Tailwind spacing tokens (p-2, gap-4, etc.) — these correspond to the values below.
Radius
sm
6px
md
8px
lg
12px
xl
16px
full
9999px
Shadow
shadow-sm
shadow-md
shadow-lg
shadow-xl