Design tokens are the foundational elements of a design system. They store UI design decisions in a technology agnostic way (instead of hard coded values) to maintain consistency and scalability for our visual UI system.
Token Storage
Our tokens are stored in our github repo as a json file and we use Figma along with Figma Tokens plug-in to manage and create tokens. We have documentation in figma pages currently.
Token Tiers
Tokens are commonly split into different levels and each level has specific use cases and adds a specific capability to the design system.
Tier 1 — <Global/Core/Fundamental> Tokens
Stores the primitive values represented by context-agnostic names and is mainly responsible for the look of the final product by defining all values that can be directly used.
Tier 2 — <Alias/Semantic/Theme> Tokens
Inherits Tier 1 tokens to describe intended use and purpose for specific context and would be used the most throughout the projects and products. Represent choices or intent that appears in multiple places.
Tier 3 — <Component> Tokens
Often inherits Tier 2 tokens and is tied to specific component values (or overwrites). Allows teams to be as specific as possible in components.
Colors
These are the overarching mozilla brand colors and they may be aliased for their intended usage and/or themed according to product/project usage.
Typography
Text is a key part of UI so we have a set of typographic elements as tokens to help set font families, weights, sizes, line height, letter spacing, text case, text decoration and paragraph spacing.
Border Width & Radius
Border tokens are used to applying border styles to set fix widths and/or set fix radii to round corners for appropriate proportions and consistent values. These may be used in various combinations and applications within components or independently.
Box Shadow
Box Shadow tokens set shadows styles consistently to cast shadows from UI elements for consistent styling that are reusable.
Spacing
Space tokens are used when building components to set fixed spaces to create appropriate proportions and spatial relationships. These may also be used for spacial relationships around or in between multiple components.
Sizing
Size tokens are used to set fixed element sizes and can be used for both width and height properties to create consistent proportions and spatial relationships.
Opacity
Opacity tokens are used when applying opacity to styles or components to set fix opacities for consistent values.