Design Tokens
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. They can be used in place of hard-coded values in order to maintain a scalable and consistent visual system for user interfaces.
Design tokens are also used to facilitate the use of a design system across different platforms by allowing teams to share and sync visual design attributes across all their products.
Corncob’s design tokens are broadly categorized into the following groups:
Foundation Tokens
Foundation tokens are the core visual design attributes that form the basis of the design system. They include colors, typography, spacing, and other fundamental design elements. An example of a foundation token would be the primary color palette, which defines the main colors used throughout the design system. These tokens are typically defined at a global level and are used as the building blocks for creating more specific design elements in the design system.
/* Example of a foundation token for the blue color palette */
:root {
--cc-gray-10: #f7f6f3;
--cc-gray-20: #e7e2d7;
--cc-gray-30: #d1ccbe;
--cc-gray-40: #b5b0a4;
--cc-gray-50: #928e84;
--cc-gray-60: #747169;
--cc-gray-70: #595751;
--cc-gray-80: #44423d;
--cc-gray-90: #32302c;
--cc-gray-100: #23211f;
}Common Tokens
Common tokens are the visual design attributes that are commonly used across multiple components in the design system. They include things like border radius, shadow styles, and other design elements that are shared across different components. These may inherit values from the foundation tokens, but they are more specific to the needs of the components in the design system.
/* Example of a common token for border color */
:root {
--cc-border--color: var(--cc-gray-70);
}Component Tokens
Component tokens are the visual design attributes that are specific to individual components in the design system. They include things like button colors, input field styles, and other component-specific design elements. These may inherit values from both the foundation and common tokens, but they are tailored to the specific needs of each component in the design system.
/* Example of a component token for the button border color */
:root {
--cc-button--border-color: var(--cc-border--color);
}