Tokens

Design tokens are the single source of truth. Defined in tokens.css, consumed via CSS custom properties and lib/ui.ts constants.

Neutral scale

Warm sand-tinted greys. All UI chrome uses this scale.

--bg
Canvas#FAF9F5Page background
--n50
Elevated#FDFCFACard backgrounds
--n200
Hover#F2F0EAHover states, sand fill
--n400
Border#E8E5DCAll borders, dividers
--n600
Muted#76726ALabels, section headers
--n800
Secondary#6B6760Descriptions, units, metadata
--n1050
Strong#383633Focus ring, text selection
--n1100
Dark surface#2A2826Code blocks, dark panels
--n1150
Primary#131211Primary text, active states

Semantic colors

For badges, alerts, and status indicators. Never for text.

--positiveGood / up
--negativeBad / down
--warningCaution
--infoInformational

Typography

Satoshi for everything. Weight communicates hierarchy.

Satoshi 400Normal — Body text, nav items, input text, unselected toggles
Satoshi 450Book — Units, metadata, descriptions, subtitles
Satoshi 500Medium — Badges, form labels, buttons
Satoshi 550Strong — Section headers, card titles, values, active tabs
// Import from lib/ui.ts
import { WEIGHT } from '@ramtt/ui'

WEIGHT.normal  // font-normal (400)
WEIGHT.book    // font-[450]
WEIGHT.medium  // font-medium (500)
WEIGHT.strong  // font-[550]

Spacing

Fixed scale: 4, 8, 12, 16, 20, 24, 32px.

4
8
12
16
20
24
32

Radius

Four radii. Nothing else.

sm
4px
md
5px
lg
12px
xl
16px

Borders

0.5px everywhere. Two variants: default (--n400) and subtle (--n200).

BORDER.default
BORDER.subtle
import { BORDER } from '@ramtt/ui'

BORDER.default  // border-[0.5px] border-[var(--n400)]
BORDER.subtle   // border-[0.5px] border-[var(--n200)]