Fluxion Design System

Fluxion is the public documentation layer for the system defined in Figma.

Fluxion turns the current design system into a readable, scalable contract for design and development. Figma remains the source of truth. The docs exist to explain the system, expose stable public naming and make token usage easier to understand across teams.

Browse foundations Open components

Figma = source of truth
canonicalPath = public path
figmaName = original variable

For designers

Start in Figma, then use Fluxion Docs to validate what is stable and public.

Design work should begin from the source system in Figma. The docs help you understand which layer a token belongs to, how it is exposed publicly and what should be handed off as a stable system reference.

Use semantic and mode tokens for product decisions before reaching for raw primitives.
Use documentation to confirm canonical naming without losing the original Figma variable reference.
Use the public docs to align handoff language with development.

For developers

Build from canonical paths while keeping the original Figma token visible.

Engineering should consume the public documentation layer through canonicalPath while preserving figmaName as the trace back to source. This keeps implementation stable without disconnecting code from design.

Use canonicalPath as the code-facing reference in documentation and implementation notes.
Keep figmaName visible so any token can be traced back to the Figma file without guesswork.
Use semantic and mode-resolved layers for product work instead of hardcoding raw values.

For teams

Use Fluxion as the shared interpretation layer between design, code and content.

Fluxion Docs is not a second source of truth. It is the public interpretation layer that makes the system readable, scalable and easier to govern across functions.

Figma remains authoritative for variable names, collections, modes and values.
The docs define the public model, grouping and editorial contract for the system.
Components can be added later without changing the navigation or naming model.

Naming contract

Three references, one shared system language.

Fluxion makes the naming model explicit so teams can understand what stays in Figma, what becomes public naming and how both references are shown together throughout the documentation.

FigmaSource of truth

Figma defines the original variable names, collections, modes and values. Fluxion Docs should document that system, not fork it.

canonicalPathPublic system path

canonicalPath is the stable public path used in documentation and code-facing references. It gives the system a predictable language outside the Figma file.

figmaNameOriginal variable name

figmaName preserves the original variable reference from Figma so every documented token can be traced back to its source.

Documentation architecture

Foundations are live. Components are prepared as the next layer.

Fluxion currently documents colors, spacing, radius and typography as the public foundations of the system. The `Components` section is already scaffolded so the site can grow without changing navigation, editorial structure or naming rules.

FoundationsColors

Primitive palette, semantic roles and mode-resolved outputs.

FoundationsSpacing

Primitive intervals plus stable desktop and mobile layout spacing.

FoundationsRadius

Primitive radius scale and semantic rounding roles.

FoundationsTypography

Families, weights, scale and heading presets.

Prepared nextComponents

Scaffolded for future component documentation and guidance.