III — SYSTEM
Components
Minimal, reusable building blocks. If it doesn’t add meaning, delete it.
Buttons
Hierarchy comes from contrast + spacing, not gradients or effects.
Primary
Ghost
| Prop | Type | Default |
|---|---|---|
| variant | "primary" | "ghost" | "primary" |
| href | string? | — |
| children | ReactNode | — |
Badges
Status indicators and labels. Small, pill-shaped, no noise.
DefaultNewArchive
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "accent" | "muted" | "default" |
Cards
One idea per surface. If it needs a paragraph, it’s two cards.
Rule
One idea per surface
A card is a single concept container. If it needs a paragraph, it’s two cards.
Rule
Borders are structural
Use borders to organize information, not to decorate.
Example
Event preview
Title + date + single accent stripe. Nothing else needed.
Minimal card
No kicker. Just title and content. Still works.
Inputs
Clean form elements. Focus ring uses the accent color. Labels in mono caps.
Dividers & Spacing
Horizontal rules use 2px weight with the pink accent for section breaks, or 1px gray for within-section separation.
Section divider (accent)
Content divider (neutral)
Mono Labels
Small uppercase monospaced labels used for kickers, section IDs, and metadata. Apply the mono class.
NR. 1 / 2026
III — SYSTEM
Category label
Anti-patterns
Things that break the system. If you see these, something went wrong.
- Multiple accents in one composition.
- Random icons, stickers, dividers that don’t clarify content.
- Low-contrast UI chrome (thin light-gray text on white).
- Over-rounding everything — keep
--cx-radiusintentional. - Buttons with both fill + border (pick one hierarchy signal).
- Cards with more than one idea crammed in.