Foundations
The tokens everything else is built on. The palette is derived from the national flag's colours but tuned so every documented pair meets its WCAG contrast target.
Semantic colour
These are the tokens you use in practice — named by intent, not by hue.
Primitive ramps
The raw colour ramps the semantic tokens point at, derived from the flag colours.
blue
gray
red
green
yellow
Spacing
An 8px-based scale (with a 4px half-step) — the single biggest fix for inconsistent layouts.
space-1
space-2
space-3
space-4
space-5
space-6
space-7
space-8
Type scale
A modular scale on a 16px base, set in Public Sans (SIL OFL).
Display 800 — Sa enn size ki bon. (Kreol)
Heading 600 — Sa enn size ki bon. (Kreol)
Subheading 400 — Sa enn size ki bon. (Kreol)
Body 300 — Sa enn size ki bon. (Kreol)
Small 200 — Sa enn size ki bon. (Kreol)