Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Tokens

    Tokens overview

    Token layers, the naming rule and how tokens become CSS variables.

    What a token is

    Section titled “What a token is”

    A token is a name given to a design decision: “background of the primary action”, “gap between cards”, “short transition duration”. Components never write a value directly; they use these names. A value then changes in one place and reaches every component at once.

    Layers

    Section titled “Layers”
    Layer Example Used by
    Raw value red.700, dimension.12 Only the meaning layer; component and screen code do not use it
    Meaning color.action.danger.default, space.md Components and screens
    Component badge.height.md, button.padding-inline.md Only the component concerned

    A brand pack changes the raw values (for example the brand colour scale). The meaning and component layers keep the same names in every brand, which is why component code does not change when the brand changes.

    Naming

    Section titled “Naming”

    Token names are written as dotted paths in the source and become --bigbang- prefixed, hyphenated variables in CSS:

    color.action.danger-subtle.hovered  →  --bigbang-color-action-danger-subtle-hovered

    Colour names carry the role first (surface, text, icon, border, action, status), then the tone and last the state (default, hovered, pressed, disabled).

    Source and output

    Section titled “Source and output”

    Tokens are kept in JSON files in the W3C design token format (DTCG) and built with Style Dictionary into separate CSS and JSON files per brand and mode. Light and dark mode share the same names; only the values change. Contrast tests check on every build that text and interface pairs meet the WCAG 2.2 thresholds.

    Next step

    Section titled “Next step”