Foundations

Fluxion foundations document the token layers that define the public system contract today: colors, spacing, radius and typography.

These pages are built from tokens.json, resolved against the Figma variable source, and organized so designers and developers can read the system through the same structure.

How to read Foundations

Start with the right layer

Read primitives as the raw scale, semantic tokens as intent, modes as explicit theme outputs and custom tokens as stable product-facing decisions.

Use canonicalPath publicly

canonicalPath is the public reference used in documentation and code-facing material, but it should always stay paired with figmaName for traceability.

Treat Foundations as the base contract

Colors, spacing, radius and typography define the shared token model that future component pages will build on.

What foundations cover

primitives: raw values and scales promoted from TailwindCSS V2
semantic: intent-driven tokens promoted from Theme V2
modes: explicit light and dark outputs promoted from Mode V2
custom: stable product-facing decisions promoted from Custom V2

Documentation map

FoundationsColors

Primitive palette, semantic roles and mode-resolved outputs.

FoundationsSpacing

Primitive intervals plus desktop and mobile layout spacing.

FoundationsRadius

Primitive radius scale and semantic rounding tokens.

FoundationsTypography

Font families, weights, scale and heading presets.

Editorial principles

Figma remains the source of truth for naming, values and structure.
Documentation uses canonicalPath as the public contract without hiding figmaName.
Legacy collections are excluded from the public docs surface.
Mode V2/custom/* is excluded from Fluxion public documentation.