Design system
Tokens and components for clo.id. Axis colors follow the clo-core working palette. Full write-up:docs/DESIGN.md in the repo.
Gallery for contributors. Not CLO theory — chrome only.
Brand
clo.id
Hero-level on home; compact in the header.
Axis colors
N #6741d9 S #e8590c T #1971c2 F #2f9e44
Neutrals
bg surface ink line ok danger
Toggle light/dark from the header control.
Typography
Display · Source Serif 4
Lede · short supporting sentence.
Body · Source Sans 3. Short sentences. One idea per section.
Mono · −850N +650F −450T +250S
Buttons
Form field
Accepts Unicode minus (−) and ASCII hyphen (-).
- Example error style (not a live check)
Token chips
−850N+650F−450T+250S
Panel & callout
Panel surface for examples and tables.
“A weight is one fixed value per diameter, set at birth. There are four of them: N, S, T and F.”
Lattice
Ego 1–4 bold solid polygon. Shadow 5–8 lighter tint, dashed. No quadrant names.
Plan docs
- Product plan:
docs/PLAN.md - Design system write-up:
docs/DESIGN.md - CLO source:
content/clo-core-2026-11-14.md