Tokens overview
Tokens are representations of design decisions. They abstract raw values into scalable, meaningful, and readable labels spanning across teams and platforms.
![](https://images.prismic.io/ebayevo/ZmKsmpm069VX1iVM_tokens_I8501-24529-4786-15677.png?auto=format%2Ccompress&fit=max&w=3840&q=100)
Tokens progress in specificity from raw values to core tokens, semantic tokens, and component tokens.
Tokens apply to a variety of value types, including:
- Color
- Typography
- Spacing
- Sizing
- Radius
- Opacity
- Stroke width
- Effects
![A graphic that moves from values and names leading up to a final blue primary cta button component. From top to bottom reads Raw: #0968F6, Core: blue.core.500, Semantic: background.accent, and Component: btn.container.background.primary.](https://images.prismic.io/ebayevo/ZmKsk5m069VX1iVE_tokens_I10227-292748-4525-11331.png?auto=format%2Ccompress&fit=max&w=3840&q=100)
Object | |
---|---|
Component | Element |
|
|
Base | ||
---|---|---|
Category | Behavior | Property |
|
|
|
Modifier | |||
---|---|---|---|
Variant | State | Scale | Context |
|
|
|
|
Backgrounds and foregrounds
The majority of tokens used are semantic tokens for background and foreground elements. Semantic colors like attention and success have corresponding foreground tokens like on-attention and on-success. This ensures color combinations are used appropriately and remain accessible.
Examples of backgrounds:
- Page background
- Button container
- Banner container
Examples of foregrounds:
- Icons
- Text
![A section alert with token highlights. The background is a vibrant red called “background.attention. The foreground text is “foreground.on-attention”.](https://images.prismic.io/ebayevo/ZmKslJm069VX1iVF_tokens_I8501-24537-4525-11331.png?auto=format%2Ccompress&fit=max&w=3840&q=100)
Platform agnostic
Tokens are platform agnostic. The names remain similar despite slight alterations to the naming structure. The design library uses dots as separators with all letters lowercase, but can be converted to a preferred platform convention like dashes or camelCase.
Tokens simplify documentation of design decisions and make sharing across teams easier. They establish a common language for styles and intention across all users of the system.
![A visual hierarchy graphic. From left to right Figma points to a pill shape with the token “foreground.success” in it. The pill points and branches out to 3 items. From top to bottom is IOS, Android, and {less}.](https://images.prismic.io/ebayevo/ZmKslpm069VX1iVI_tokens_I8501-24538-4525-11331.png?auto=format%2Ccompress&fit=max&w=3840&q=100)
Theming
A single token can point to different values depending on the context. The context can be a change in device theme, form factor, or accessibility settings.
When a context changes, the reference values are updated automatically and the changes cascade throughout the system.
![The background.secondary token points to core.neutral.200 in light mode and core.neutral.800 in dark mode. These core tokens point to #F7F7F7 and #191919, respectively.](https://images.prismic.io/ebayevo/ZmKsl5m069VX1iVK_tokens_I10227-290096-4525-11331.png?auto=format%2Ccompress&fit=max&w=3840&q=100)
Page composition
Here’s an example of how tokens are used throughout a page. Background elements like containers and frames can stack on top of each other. Foreground elements, like text and icons, sit on top of backgrounds. Lastly, border elements include container strokes and dividers.
![A UI screen with token pill graphics pointing to elements. “background.secondaryOnElevated” points to an icon button background in the top nav bar. “border.strong” points to a tab underline. “background.secondary” points to a gray background under the top portion of content. A variety of other tokens point to buttons, foreground text, backgrounds, attention and accent colors, and borders.](https://images.prismic.io/ebayevo/ZmKsmZm069VX1iVL_tokens_I10227-290112-4525-11340-3626-50811.png?auto=format%2Ccompress&fit=max&w=3840&q=100)
Date | Notes |
---|---|
Jun, 2024 |
|