Design System
All UI components used across the platform. Black & white meta-modernism.
Colors
Foreground
#000000
Background
#ffffff
Muted
#737373
Border
#e5e5e5
Surface
#fafafa
Danger
#dc2626
Success
#16a34a
Typography
Heading 4XL — Geist Sans
Heading 3XL
Heading 2XL
Heading LG
Body text — The default paragraph style
Small text — Captions and labels
LABEL — Section headers
Monospace — Code and values
Buttons
Variants
Sizes
Badges
DefaultSuccessDangerMuted
Inputs
This field is required
Table
| ID | Name | Status | Value |
|---|---|---|---|
| 1 | Alpha Item | active | 120 |
| 2 | Beta Item | draft | 85 |
| 3 | Gamma Item | active | 340 |
Empty state:
| ID | Name | Status | Value |
|---|---|---|---|
| No items found | |||
Modal
Page Header
Example Title
This is how page headers look
Empty State
Nothing here
This is shown when there's no data to display.
Design Principles
Sharp corners. No border-radius. Modernist geometry.
Black & white only. Brands bring their own color through product photos.
Uppercase labels. Gallery-style section headers with wide letter spacing.
Generous whitespace. Let content breathe. Less is more.
Typography-driven. Geist Sans for headings, mono for values.