Foundations

The Moments foundations are the design tokens every component is built from. They follow three tiers:

• Core — the raw primitive values (a hex ramp, a spacing scale, font sizes). Named by scale, e.g. --moments-core-colour-primary-500.
• Semantic — role-based tokens that reference a core token and carry intent (e.g. --moments-semantic-colour-text-base-default). Colour semantics are theme-aware: the same token points at a different core step in light vs dark.
• Component — per-component tokens (documented on each component, not here).

The token tables are generated from the token source (tokens/*.json) — the same files Style Dictionary compiles into dist/. Edit tokens in Tokens Studio and regenerate with npm run docs:foundations. For each token you'll see its CSS variable and value; for semantic tokens, which core token it resolves to.

How to name properties and write component guidelines lives in Standards.

The foundations

• Colour — core hex ramps + semantic roles (text, border, container background, icon, reactive, feedback…), light & dark.
• Typography — core primitives (family, size, weight, line-height, letter-spacing) + semantic composite styles.
• Spacing — gap / padding / margin scale.
• Opacity — the opacity scale (core only).
• Sizing — element and component dimensions (general, icon…).
• Border Radius — corner radii.
• Border Width — stroke widths for borders and focus rings.
• Box Shadow — elevation (no tokens defined yet).
• Aspect Ratio — media/image container ratios.

Companion: Token framework (why tokens, the three tiers and how each is named) and Token workflow (how to add, rename, or deprecate a token).