Color
One neutral ramp and one accent. Every token has a semantic alias, so product code never references a raw hex.
Typography
Geist for interface text, Geist Mono for numbers and code. Five sizes, two weights.
Spacing
A 4-pixel base. Components use the scale, never arbitrary values.
Button
Four variants, one shape. Icons go on the trailing side only.
<Button variant="primary">Primary</Button>
<Button variant="danger">Delete</Button>Badge
Status only. Never use a badge as a button.
Card
One level of elevation. Cards never nest inside cards.
Due in 6 days. $1,240.00 to Halden Supply.
View invoiceToast
Bottom-left, four seconds, one at a time. Success and error only; informational messages live inline.
Input
Label above, helper below, error replaces helper. Focus ring is two pixels, never a glow.
Forms
Rules for composing inputs into a form.
Single column. Labels above. Group related fields with a heading. One primary action at the end.
Placeholder text as the label. Two primary buttons. Disabling the submit button before the user has tried.
Empty states
Every list has one. Say what belongs here and give the first action.
Invoices you send will appear here.
Create an invoice