The building blocks
Foundations
Foundations create consistent, accessible experiences across Open Point and Social Point. They include our design tokens and visual styles — the decisions every component is built on.
Design tokens
The single source of truth. Every colour, size, and spacing decision is named, stored, and themed here.
One system, every theme
Primitive tokens store raw values; semantic tokens alias them to roles like
--orbit-btn and --orbit-ink. This two-layer model is what makes
theming — light, dark, Open Point, Social Point — mechanical rather than manual.
Styles
The visual language — the perceptual and spatial systems every component is built from.
Colour
Seven chromatic ramps and one neutral, built on a perceptual lightness curve for predictable contrast.
Typography
A display face and a text face paired with a fluid type scale from 11px to 80px.
Spacing
A base-4 spatial scale from 2px to 96px, so layout rhythm is consistent without manual arithmetic.
Radius
Five corner tokens from sharp (0) to fully rounded (9999px) for a coherent family feel.