Styleguide
Phase 0 components in both themes. Every colour and size comes from tokens.css; compare against the Plinth canvas.
Buttons
Primary, secondary, tertiary, destructive, destructive-secondary · sm 32 / md 40 / lg 48 · loading, disabled
Status pills, tags, badges
Colour never alone: dot or icon plus label. Five statuses, never a sixth.
Stat tiles
One number, one comparison, one sentence. Delta coloured by sentiment, value never coloured.
Queue items
Plain sentence, context, suggested action. Tapping the row opens the record.
Table
Sort, selection, priority columns, mobile card fallback below 768px. Numbers right-aligned, never centred.
Toasts, alerts
Inverse toast bottom-left, 4 s; undo defers the commit 8 s; errors persist.
Approval card → receipt
Summary in sentences, one primary action, then the card becomes the receipt in place.
- Reference
- INV-48213
- Category
- Meat & fish
- Requested by
- Priya
Buttons
Primary, secondary, tertiary, destructive, destructive-secondary · sm 32 / md 40 / lg 48 · loading, disabled
Status pills, tags, badges
Colour never alone: dot or icon plus label. Five statuses, never a sixth.
Stat tiles
One number, one comparison, one sentence. Delta coloured by sentiment, value never coloured.
Queue items
Plain sentence, context, suggested action. Tapping the row opens the record.
Table
Sort, selection, priority columns, mobile card fallback below 768px. Numbers right-aligned, never centred.
Toasts, alerts
Inverse toast bottom-left, 4 s; undo defers the commit 8 s; errors persist.
Approval card → receipt
Summary in sentences, one primary action, then the card becomes the receipt in place.
- Reference
- INV-48213
- Category
- Meat & fish
- Requested by
- Priya
Tokens (from tokens.css)
Left swatch light, right swatch dark. Compare with the Plinth canvas Foundations board.