Library / Primitives

Primitives

Composable building blocks. Buttons and form inputs today; cards, icons, and other primitives land as the design system hardens.

Primitives

Composable building blocks. Buttons here; forms, cards, icons coming next.

Buttons

Four variants, four sizes, five states. Pill geometry from Planar; colors and focus ring from Journey tokens. Tinted variant accepts any of the 11 category palettes via a category prop.

Variants × sizes (default state)

primary

secondary (neutral cream)

tinted (category-aware, default: indigo)

ghost

States (md size)

primary

tinted

ghost

Icon slots (md size)

Tinted by category (md size)

The tinted variant takes a category prop. Each category renders as bg-[category]-50 with text-[category]-700 on default state and bg-[category]-100 on hover.

Interactive loading

Click the button to simulate an async submission. The loading state preserves width and replaces the label with a spinning Phosphor CircleNotch.

Form inputs

Five inputs (text, textarea, select, checkbox, radio) across six states. Filled cream-100 chassis with no border on default. Geist Mono uppercase labels above. Visual states only; validation and submission are wired by the consuming form.

Text input — states

INVALID EMAIL

Text input — icon slots

Textarea — states

MIN 20 CHARACTERS

Select — states

REQUIRED

Checkbox — states

Radio — states