Our design tokens are engineered to be readable and easy to understand, while providing a robust system able to handle the demands of every application we throw at it. A basic way to think about a design token is that it takes a single value, fits it into a system, and then applies that system throughout our different applications.
Color
Our color system is our most robust and comprehensive level of tokens, and has the most considerations across our applications. Some key points to consider in our color system:
- Colors are assigned a name (red or blue) and numeric value. Numeric values range from zero (0) for the lightest colors in the palette to 1000 for the darkest.
- Brand colors are always assigned 500 in our system
- Numbers with transparency are indicated by a dash after the primary number. The number after the dash is the level of opacity (i.e. 500-16 is color 500, 16% opacity). These are used as highlights, selection / hover states, scrims, and more.
Core Colors
| Name | Value |
|---|---|
| 50 | #EBF3FE |
| 100 | #BED9FD |
| 200 | #9EC6FD |
| 300 | #7DB2FC |
| 400 | #5D9FFB |
| 500 | #3C8CFA |
| 500-16 | #3C8CFA29 |
| 500-48 | #3C8CFA7A |
| 500-72 | #3C8CFAB8 |
| 500-96 | #3C8CFAF5 |
| 600 | #3275D0 |
| 700 | #285DA7 |
| 800 | #1E467D |
Semantic / Theme Colors
Semantic colors show the application of our core colors to a theme. Naming should make it easy to understand the contextual usage of each token. For example, base-brand is used for button backgrounds, and content-on-brand would be used for icons and text appearing on that background
Content colors are for text, icons, and other elements users are expected to read or recognize.
| Name | Value |
|---|---|
| content-primary | grey-700 |
| content-secondary | grey-600 |
| content-on-primary | grey-50 |
| content-on-secondary | grey-300 |
| content-on-brand | grey-25 |
| content-link | blue-500 |
| content-accent | red-500 |
| content-brand | blue-500 |
| content-disabled | grey-300 |
| content-inactive | grey-300 |
| content-light | grey-25 |
| content-dark | grey-700 |
| content-on-light | grey-700 |
| content-on-dark | grey-25 |
| content-invalid | red-500 |
| content-success | green-500 |
Spacing
Our spacing grid uses base increments of 4px, creating the core spacing system. We then adapt this into a semantic sizing system to ensure consistency in execution and usage. Elements with similar content should be spaced closely together, while content shifts and breaks should be spaced further apart.
Our semantic system leverages gestalt principles to ensure like content is perceived as such by the user, and has horizontal and vertical tokens to ensure proper spacing, rhythm, and flow of content.
Horizontal
spacing-marginis used for left & right edges, ensuring content maintains consistent horizontal width- STACK
spacing-gutteris used for spacing between items horizontally- STACK
- Gutter
Vertical
spacing-stackis the smallest increment of vertical spacing, used for elements that are tightly correlated (like chapter headings and their content). Stack can also be used between paragraphs, lists, and images within a content section.- STACK
spacing-rhythmis used for related items in a group, that are not quite as closely related. Think subsections of a chapter: these would be separated by rhythm- STACK
spacing-flowis used for the space between separate sections of content. For example, the different chapters on this page are separated by the flow value.- STACK
spacing-generousandspacing-extremeare used when larger values are needed for delineation between discrete sections of content. Use them sparingly.
Our vertical spacing system also solves the pesky problem of trying to choose top or bottom spacing on an element
Semantic Spacing
Our semantic sizes are provided for reference below. The size value references the core size, found in the subsequent table. Note that semantic values change based on the screen width where they're used, generally getting larger with the screen.
Core Spacing
Our core sizes are provided for reference below. REM values should be used at all times, though the base pixel size is also provided for applications where REM is not able to be used (like Figma).
Sizing
Our sizing system allows for clear, easy-to-understand element and container sizing to ensure consistency and legibility across all applications.
Core Sizing
Core sizes are the defined, explicit sizes our system is built from. In web use, we use REM values to ensure accessibility and scalability for all users.
Content
Our main use of semantic sizing is for the content we display for users.
sizing-contentis the base width for all content containers in our system.sizing-content-wrapperis used to create padding and backgrounds for content containers.sizing-lineis used to set lines of text for maximum readability. It creates lines of approximately 60 characters (11-15 words).sizing-line-halfcreates a value of one-half the standard line length, good for footnotes and smaller content where the default line length would be too long for optimum readability.sizing-iconis used for default icon sizes. It defaults to 1.5rem (24px).
Line & Border
Lines and borders are used to create visual separation between content, and are defined by their thickness. They are used to create visual hierarchy and guide the user's eye.
Typography
Our type system leverages the type scale defined in our foundations for a clear, defined hierarchy of content.
- --font-footnote: var(--font-xs);
- --font-caption: var(--font-sm);
- --font-body: var(--font-base);
- --font-title: var(--font-3xl);
- --font-subtitle: var(--font-2xl);
- --font-chapter: var(--font-xl);
- --font-section: var(--font-lg);
- --font-display: var(--font-5xl);