Kit
The tokens and recipes every screen is built from.
Colour tokens
- --backgroundThe cream ground. Page, top bar, bottom bar.
- --cardWhite. Every panel that holds content.
- --mutedHover rows, quiet fills.
- --secondaryThe active tab.
- --borderHairlines. Dark enough to see on cream.
- --foregroundText. Also the primary button.
- --muted-foregroundSecond-line text, labels.
- --successMoney in, approved, healthy.
- --warningNeeds a look.
- --destructiveFailed, blocked, delete.
- --informationA neutral note.
Type
Page title. 20px, 600.
Section title. 14px, 600.
Body. 14px. Geist Sans.
Second line and labels. 12px, muted.
$12,843.16 · JE-1042 · Geist Mono, tabular numbers.
Buttons, fields, states
PostedLearningFailedNoteNew
Empty state
A dashed box, one line, one hint. No picture.