Foundations
Themes
The same components, the same tokens, five looks. Nothing below required a component to change — each is a handful of attributes on the root element.
White Reset
The system as it ships. Paper ground, hairline rules, serif headings, and the accent is ink.
Deploys
passing| Branch | Build |
|---|---|
| main | 2m 14s |
| codex/themes | 1m 02s |
Broadsheet
Warm stock, square corners, firm rules. A newspaper reads as a grid of boxes, not a stack of cards.
Deploys
passing| Branch | Build |
|---|---|
| main | 2m 14s |
| codex/themes | 1m 02s |
Console
Cool ground, tight rows, quick motion, one interface face. Everything a dense operational screen wants.
Deploys
passing| Branch | Build |
|---|---|
| main | 2m 14s |
| codex/themes | 1m 02s |
Salon
Round corners, quiet rules, the serif carried into the body. A reading surface rather than a working one.
Deploys
passing| Branch | Build |
|---|---|
| main | 2m 14s |
| codex/themes | 1m 02s |
Clinic
Paper ground and one grotesk, with nothing warm in it. Softened corners keep it from reading as a form.
Deploys
passing| Branch | Build |
|---|---|
| main | 2m 14s |
| codex/themes | 1m 02s |
The axes
A preset is a combination of these, not a block of its own, so a look nobody shipped is still reachable.
- Surface — data-surface
- Paper · Warm · Cool
- Corners — data-radius
- Sharp · Soft · Round
- Rules — data-rules
- Quiet · Hairline · Firm
- Type — data-type
- Editorial · Grotesk · Bookish
- Motion — data-motion
- Still · Calm · Snappy
- Density — data-density
- Comfortable · Compact