Tokens
Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences.
Introduction
Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.
Global Tokens
Global tokens are the primitive values in our design language, represented by context-agnostic names. Our color palette, animation, typography, and dimension values are all recorded as global tokens. These can be directly used, and are inherited by all other token types.
Use global tokens sparingly.
Global tokens are the easiest to reference for the various attributes in Voyager. While they’re the building blocks, they’re also the token type that is the least tied to the logic of our design language. Only use global tokens when there are no aliases for your use case.
Alias Tokens
Alias tokens relate to a specific context or abstraction. Aliases help communicate the intended purpose of a token, and are effective when a value with a single intent will appear in multiple places.
Component-specific tokens
Component-specific tokens are an exhaustive representation of every value associated with a component. They often inherit from alias tokens, but are named in a way that allows engineering teams to be as specific as possible in applying tokens in component development.
Colors
Type
| Token | Example | Global Token |
|---|---|---|
|
$qw-text-color
Body text color. |
$qw-gray-8 | |
|
$qw-text-color-subtle
Color for text that is purposefully de-emphasized to create visual hierarchy. |
$qw-gray-6 | |
|
$qw-text-color-contrast
Color for text that is purposefully emphasized to create visual hierarchy. |
$qw-gray-10 | |
|
$qw-link-color
Link text color |
$qw-blue-6 | |
|
$qw-text-color-danger
Danger text color |
$qw-red-6 |
Background
| Token | Example | Global Token |
|---|---|---|
|
$qw-background-color
Default background color for the app. |
$qw-gray-1 | |
|
$qw-content-background
Background color for cards, boxes, tables, and other content areas. |
$white | |
|
$qw-content-background-subtle
Background color to define subtle difference from content areas, i.e. table headers, section footers, etc. |
$qw-gray-0 |
Border colors
| Token | Example | Global Token |
|---|---|---|
$qw-border-color
Default border color |
$qw-gray-2 | |
$qw-border-color-danger
Error border color |
$qw-danger |
Navigation
| Token | Example | Global Token |
|---|---|---|
|
$color-background-primary-nav
Deprecated |
$qw-gray-10 | |
|
$color-text-primary-nav
Deprecated |
$qw-gray-2 | |
|
$color-background-secondary-nav
Deprecated |
$qw-blue-1 | |
|
$color-text-secondary-nav
Deprecated |
$qw-blue-7 |
Status
| Token | Example | Global Token |
|---|---|---|
|
$color-status-neutral
Indicates inactive states (paused, archived, draft, etc) |
$qw-gray-7 | |
|
$color-status-info
Semantic informative status indicator (active, in use, etc) |
$qw-info | |
|
$color-status-danger
Semantic negative status indicator (error, past due, etc) |
$qw-danger | |
|
$color-status-success
Semantic positive status indicator (approved, complete, etc) |
$qw-success | |
|
$color-status-warning
Semantic warning/notice status indicator (at risk, pending, etc) |
$qw-warning |
Product Features
| Token | Example | Global Token |
|---|---|---|
|
$feature-color-1on1
Color for icons representing 1-on-1s |
$qw-blue-5 | |
|
$feature-color-recognition
Color for icons representing Recognition |
$qw-yellow-6 | |
|
$feature-color-goals
Color for icons representing Goals |
$qw-red-4 | |
|
$feature-color-goals-org
Color for icons representing Organizational Goals |
#FFAB00 | |
|
$feature-color-goals-dept
Color for icons representing Departmental/Team Goals |
$qw-green-4 | |
|
$feature-color-goals-personal
Color for icons representing Personal Goals |
$qw-blue-5 | |
|
$feature-color-goals-observing
Color for icons representing Observed Goals |
$qw-gray-7 | |
|
$feature-color-survey
Color for icons representing Surveys |
$qw-orange-6 | |
|
$feature-color-feedback
Color for icons representing Feedback |
$qw-green-4 | |
|
$feature-color-talent
Color for icons representing Talent Reviews |
$qw-purple-4 | |
|
$feature-color-utility
Color for icons representing Settings and utilities |
$qw-gray-7 | |
|
$feature-color-beta
Color for icons representing features that are in Beta |
$qw-blue-7 |
Component-specific tokens
Tabs
| Token | Example | Global Token |
|---|---|---|
|
$color-tab-bar-background
Deprecated |
$white | |
|
$color-tab-bar-background-active
Deprecated |
$white | |
|
$color-tab-bar-background-hover
Deprecated |
$qw-gray-2 | |
|
$color-tab-bar-border
Color for bottom border of tab group |
$qw-gray-1 | |
|
$color-tab-text
Color for default text in a tab group |
$qw-gray-7 | |
|
$color-tab-border-active
Color for bottom border of active tab |
$qw-blue-5 | |
|
$color-tab-bar-text-active
Color for text of active tab |
$qw-link-color | |
|
$color-tab-bar-icon
Deprecated
|
$qw-gray-3 | |
|
$color-tab-bar-icon-active
Deprecated |
$qw-gray-6 |
Avatars
| Token | Example | Global Token |
|---|---|---|
|
$color-avatar-text
Color for avatar text |
$qw-gray-7 | |
|
$color-avatar-border
Color for avatar border |
$qw-gray-3 |
Forms
| Token | Value | Global token |
|---|---|---|
|
$color-input-background
Input background color |
$white | |
|
$color-input-text
Deprecated |
$qw-text-color | |
|
$color-input-focus-border
Color of border when checkboxes & radio buttons are focused |
$qw-blue-5 | |
|
$color-input-focus-shadow
Color of outline when checkboxes & radio buttons are focused |
$qw-blue-3 | |
|
$color-checkbox-background
Background color of checkbox & radio button |
$white | |
|
$color-checkbox-background-checked
Background color of selected checkbox & radio button |
$white | |
|
$color-checkbox-border
Border color of unselected checkbox & radio button |
$qw-gray-3 | |
|
$color-checkbox-border-checked
Border color of selected checkbox & radio button |
$qw-blue-6 | |
|
$color-checkbox-color
Color of checkmark and dot in checkboxes and radio buttons |
$qw-blue-6 | |
|
$color-checkbox-primary-background
Background color of selected high importance Informational checkbox & radio button |
$qw-info | |
|
$color-checkbox-success-background
Background color of selected high importance Success checkbox & radio button |
$qw-success | |
|
$color-checkbox-danger-background
Background color of selected high importance Negative checkbox & radio button |
$qw-danger | |
| $checkbox-size | 16px | — |
Typography
| Token | Value |
|---|---|
| $font-family-text | -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
| $font-family-heading | Lato, sans-serif |
| $font-size-base | 14px |
| $font-size-heading-1 | 22-29px |
| $font-size-heading-2 | 19.9-24px |
| $font-size-heading-3 | 17.7-20px |
| $font-size-heading-4 | 15.75-16.8px |
| $font-size-heading-5 | 14px |
| $font-weight-light | 300 |
| $font-weight-regular | 400 |
| $font-weight-bold | 700 |
| $form-label-weight | Bold |
Line Height
| Token | Value |
|---|---|
| $line-height-heading-1 | 36px |
| $line-height-heading-2 | 32px |
| $line-height-heading-3 | 28px |
| $line-height-heading-4 | 24px |
| $line-height-heading-5 | 20px |
| $line-height-text | 1.4285 |
| $line-height-text-tight | 1.2 |
| $line-height-text-loose | 1.8 |
| $line-height-reset | 1 |
Spacing
| Token | Value | Example |
|---|---|---|
|
$spacer
This is the basis for all other sizes, eight multiples or factors |
8px | |
| $spacer-xs | 2px | |
| $spacer-sm | 4px | |
| $spacer-md | 8px | |
| $spacer-lg | 16px | |
| $spacer-xl | 32px | |
| $spacer-xxl | 64px | |
| $spacer-container | 16px | |
| $spacer-header-bottom | 2px | |
| $spacer-list-items | 4px | |
| $spacer-paragraph | 16px | |
| $spacer-input-label | 8px | |
| $spacer-table-cell | 8px | |
| $spacer-table-cell-tight | 4px |
Media Queries
| Token | Value |
|---|---|
| $breakpoint-xs | 480px |
| $breakpoint-sm | 768px |
| $breakpoint-md | 992px |
| $breakpoint-lg | 1200px |
Border radius
| Token | Value | Global token |
|---|---|---|
| $border-radius-alert | 8px | $border-radius-lg |
| $border-radius-checkbox | 2px | $border-radius-sm |
| $border-radius-content-container | 16px | $border-radius-xl |
| $border-radius-button | 4px | $border-radius-base |
| $border-radius-modal | 8px | $border-radius-lg |
| $border-radius-pill | 2px | $border-radius-sm |
| $border-radius-table | 4px | $border-radius-base |
|
$border-radius-base
Global token |
4px | |
|
$border-radius-sm
Global token |
2px | |
|
$border-radius-lg
Global token |
8px | |
|
$border-radius-lg
Global token |
16px | |
|
$border-radius-circle
Global token |
50% |