Terms are defined in the context of this system. Some terms (like collection or mode) are Figma-specific concepts. Others (like alias) are general token system terminology.
| Term | Definition |
|---|---|
| Design Token | A named variable that stores a single design value (color, size, duration, etc.). Serves as the contract between design tools and code. Example: brand-color = #9333EA. |
| Primitive Token | A Tier 1 token that holds a raw, literal value. It has no semantic meaning on its own. Example: purple-600: #9333EA. Never referenced directly by components. |
| Alias Token | A token whose value is a reference to another token rather than a raw value. Example: brand-color: {purple-600}. Aliases create the chain between tiers. |
| Semantic Token | A Tier 2 token that gives meaning to a primitive. Names describe usage intent, not appearance. Example: brand-color (not purple). |
| Component Token | A Tier 3 token scoped to a specific component. References semantic tokens. Example: button-height: 40px, button-disabled-bg: {disabled-surface}. |
| Collection | A named group of related tokens in Figma Variables. Each collection has one or more modes. Example: Primitives / Color, Button / Size. |
| Mode | A named variant of a collection. Switching a mode changes all tokens in that collection to their mode-specific values. Examples: Light/Dark for semantic colors, sm/md/lg for size. |
| Scope | The boundary within which a collection mode applies. In Figma, a mode set on a frame applies to all children of that frame unless overridden. In CSS, equivalent to the cascade scope of a custom property. |
| Color Family | A named group of colors representing one user intent. CocoKits has 7: neutral, brand, info, success, warning, danger, contrast. Each family has exactly 6 color roles. |
| Color Role | One of the 6 standard uses within a color family: color, on-color, container, on-container, outline, focus. Inspired by Material Design 3. |
| Component Type | The visual recipe/style variant of a component. Examples: primary, outline, basic, light for Button. Determines which color roles are used where. |
| Structural Token | A component token whose value never changes with color family — it is fixed regardless of whether color="brand" or color="danger" is set. Lives in the Structure collection. Example: toggle-thumb (always white). |
| Figma Variable | Figma's implementation of design tokens. A variable stores one value (color, number, string, boolean) and can be bound to a node's property. Equivalent to a CSS custom property in code. |
| Figma Style | A reusable preset in Figma that bundles multiple properties (e.g., font-family + font-size + line-height for a text style). Unlike variables, styles group multiple properties. Can have their own properties bound to variables. |
| Variable Mode Inheritance | In Figma, modes cascade from parent frames to children. The nearest ancestor with an explicit mode set wins. In CSS, the equivalent is how custom properties inherit through the DOM. |
| Tier | One of the three levels in the CocoKits token hierarchy. Tier 1 = Primitives (raw values), Tier 2 = Semantic (meaningful aliases), Tier 3 = Component (contextual aliases). Each tier only references the tier immediately above it. |
| CSS Custom Property | The code equivalent of a Figma variable. A CSS variable (--brand-color: #9333EA) that can be referenced with var(--brand-color). Used to implement token values in all CSS/SCSS code. |
| Brand Palette | A Tier 2 collection that maps raw primitive colors to brand-specific tokens (brand-base, info-light, etc.). Switching the Brand Palette mode changes the entire color scheme of the UI while semantic tokens remain unchanged. |
Figma vs Code Terminology
In Figma: collection = group of variables, mode = variant. In CSS: custom property = individual variable, data attribute = mode switch (e.g.,
[data-cck-theme="dark"]). The token names are identical in both systems.