Design Tokens
Design tokens are visual atoms that represent style values ranging from colors, size, spacing, and radius to be used across platforms to create consistency and cohesion.
General Color Tokens
Our tokens have a range of visual emphasis that can be applied to your designs. Common visual weights include; Emphasis, Regular, Subtle, Brand and Brand Alt. These weights can be applied to borders, text, and graphics. Product and content designers can leverage these various token styles to provide hierarchy and visual distinction to support the content message.
Surface
| Token Name | Light | Dark |
|---|---|---|
| Base | Gray/200 | Deep Blue/900 |
| Foreground | White | Deep Blue/Surface Blue/800 SB-8 |
| Foreground-Subtle | Gray/100 | Deep Blue/Surface Blue/800 SB-4 |
| Foreground-Brand | Brand/Bright-Blue | Brand/Bright-Blue |
| Foreground-Brand-Alt | Brand/Deep-Blue | Brand/Deep-Blue |
Status
Examples of status tokens on surface foreground.
| Token Name | Light | Dark |
|---|---|---|
| Information | Bright Blue/600 | Bright Blue/400 |
| Information Subtle | Bright Blue/100 | Bright Blue/Mix/400 M-84 |
| Success | Green/600 | Green/400 |
| Success Subtle | Green/100 | Green/Mix/400 M-84 |
| Caution | Orange/600 | Orange/400 |
| Caution Subtle | Orange/100 | Orange/Mix/400 M-84 |
| Critical | Red/600 | Red/400 |
| Critical Subtle | Red/100 | Red/Mix/400 M-84 |
| Neutral | Gray/600 | Gray/400 |
| Neutral Subtle | Gray/100 | Gray/Mix/400 M-84 |
Border Color
Examples of general border tokens on surface foreground.
| Token Name | Light | Dark |
|---|---|---|
| None | Color/None | Color/None |
| Emphasis | Gray/500 | Deep Blue/400 |
| Regular | Gray/400 | Deep Blue/Tint/700 T-76 |
| Subtle | Gray/300 | Deep Blue/Tint/700 T-88 |
| Brand | Brand/Bright Blue | Brand/Bright Blue |
| Brand Alt | Brand/Deep Blue | Bright Blue/200 |
Text Color
Examples of general text tokens on surface foreground.
| Token Name | Light | Dark |
|---|---|---|
| Emphasis | Gray/900 | Gray/100 |
| Regular | Gray/800 | Gray/200 |
| Subtle | Gray/700 | Gray/300 |
| Brand | Brand/Bright Blue | Brand/Bright Blue |
| Brand Alt | Deep Blue/900 | Bright Blue/200 |
| Link | Bright Blue/Shade/600 S8 | Bright Blue/400 |
Graphic Color
Examples of general graphic tokens on surface foreground.
| Token Name | Light | Dark |
|---|---|---|
| Emphasis | Gray/900 | Gray/100 |
| Regular | Gray/800 | Gray/200 |
| Subtle | Gray/700 | Gray/300 |
| Minimal | Gray/600 | Gray/400 |
| Brand | Brand/Bright Blue | Brand/Bright Blue |
| Brand Alt | Brand/Deep Blue | Bright Blue/200 |
| Brand Logo | Brand/Bright Blue | Black and White/White |
| Graphic Link | Bright Blue//600 S8 | Bright Blue/400 |
Interactive Surfaces
Primary State Surface
| Token Name | Light | Dark |
|---|---|---|
| Primary/Background/Default | Bright Blue/600 | Bright Blue/600 |
| Primary/Background/Hover | Bright Blue/Shade/600 S-88 | Bright Blue/Shade/600 S-88 |
| Primary/Background/Pressed | Bright Blue/Shade/600 S-84 | Bright Blue/Shade/600 S-84 |
| Primary/Background/Disabled | Gray/300 | Surface Blue/700 SB-12 |
Secondary State Tokens
| Token Name | Light | Dark |
|---|---|---|
| Secondary/Background/Default | White | Deep Blue/600 M-16 |
| Secondary/Background/Hover | Bright Blue/Tint/600 T-12 | Deep Blue/600 M-32 |
| Secondary/Background/Pressed | Bright Blue/Tint/600 T16 | Deep Blue/600 M-48 |
| Secondary/Background/Disabled | Gray/300 | Surface Blue/700 SB-12 |
Tertiary State Tokens
| Token Name | Light | Dark |
|---|---|---|
| Tertiary/Background/Default | Color/None | Color/None |
| Tertiary/Background/Hover | Bright Blue/Tint/600 T-8 | Deep Blue/Surface Blue/800 SB-4 |
| Tertiary/Background/Pressed | Bright Blue/Tint/600 T-12 | Deep Blue/Surface Blue/800 SB-8 |
| Theme-Gray/Tertiary/Background/Default | Color/None | Color/None |
| Theme-Gray/Tertiary/Background/Hover | Gray/Shade/100 S-96 | Deep Blue/Surface Blue/800 SB-4 |
| Theme-Gray/Tertiary/Background/Pressed | Gray/Shade/100 S-92 | Deep Blue/Surface Blue/800 SB-8 |
| Tertiary/Background/Disabled | None | None |
Primitives
Brand Colors
Bright-Blue
#006FCF
Light-Blue-Accent
#66A9E2
Deep-Blue
#00175A
White
#FFFFFF
Black
#000000
Gray
#A7A8AA
System/Brand (Overlap)
Bright Blue
| Token Name | Color |
|---|---|
| Bright Blue/100 | #EDF7FF |
| Bright Blue/200 | #B5D7F4 |
| Bright Blue/300 | #83BAEB |
| Bright Blue/400 | #56A1E3 |
| Bright Blue/500 | #2987D9 |
| Bright Blue/600 | #006FCF |
| Bright Blue/700 | #00559E |
| Bright Blue/800 | #003A6E |
| Bright Blue/900 | #001D3E |
| Bright Blue/Tint 600 T-4 | #F5F9FD |
| Bright Blue/Tint 600 T-8 | #EBF3FB |
| Bright Blue/Tint 600 T-12 | #E0EEF9 |
| Bright Blue/Tint 600 T-16 | #D6E8F7 |
| Bright Blue/Tint 400 T-92 | #64A9E5 |
| Bright Blue/Shade 600 S-92 | #0066BE |
| Bright Blue/Shade 600 S-88 | #0062B6 |
| Bright Blue/Shade 600 S-84 | #0062B6 |
| Bright Blue/Mix 400 M-68 | #224372 |
| Bright Blue/Mix 400 M-84 | #152D58 |
Deep Blue
| Token Name | Color |
|---|---|
| Deep Blue/100 | #E0E4F1 |
| Deep Blue/200 | #A7B3D9 |
| Deep Blue/300 | #7789Bf |
| Deep Blue/400 | #4C63A6 |
| Deep Blue/500 | #2B438C |
| Deep Blue/600 | #112A73 |
| Deep Blue/700 | #00175A |
| Deep Blue/800 | #000F3C |
| Deep Blue/900 | #00081F |
| Deep Blue/Tint 700 T-8 | #EBECF2 |
| Deep Blue/Tint 700 T-64 | #52618F |
| Deep Blue/Tint 700 T-76 | #3D4F82 |
| Deep Blue/Tint 700 T-88 | #1F336E |
| Deep Blue/Surface Blue 800 SB-4 | #09173D |
| Deep Blue/Surface Blue 800 SB-8 | #101B3D |
| Deep Blue/Surface Blue 800 SB-12 | #2D3654 |
| Deep Blue/Surface Blue 800 SB-32 | #5C647B |
| Deep-Blue/Surface Blue/600 M-16 | #0D2854 |
| Deep-Blue/Surface Blue/600 M-32 | #0B2247 |
| Deep-Blue/Surface Blue/600 M-48 | #0A1E3F |
Gray
| Token Name | Color |
|---|---|
| Gray/100 | #FBFBFB |
| Gray/200 | #F4F4F4 |
| Gray/300 | #E0E0E0 |
| Gray/400 | #BDBDBD |
| Gray/500 | #8C8C8C |
| Gray/600 | #737373 |
| Gray/700 | #595959 |
| Gray/800 | #3D3D3D |
| Gray/900 | #262626 |
| Gray/Shade/100 S-4 | #F1F1F1 |
| Gray/Shade/100 S-8 | #E7E7E7 |
| Gray/Mix/400 M-68 | #434C66 |
| Gray/Mix/400 M-84 | #263251 |
Green
| Token Name | Color |
|---|---|
| Green/100 | #F2FCF8 |
| Green/200 | #BAE8D5 |
| Green/300 | #87D4B4 |
| Green/400 | #5CBF96 |
| Green/500 | #37AB7A |
| Green/600 | #189662 |
| Green/700 | #00804A |
| Green/800 | #005934 |
| Green/900 | #00361F |
| Green/Tint/600 T-8 | #EBF5F1 |
| Green/Mix/400 M-68 | #244D59 |
| Green/Mix/400 M-84 | #16324B |
Orange
| Token Name | Color |
|---|---|
| Orange/100 | #FFF6ED |
| Orange/200 | #F9DDC0 |
| Orange/300 | #F4C393 |
| Orange/400 | #EEAA67 |
| Orange/500 | #E9913A |
| Orange/600 | #E3660D |
| Orange/700 | #B5530D |
| Orange/800 | #8C410C |
| Orange/900 | #612F0C |
| Orange/Tint/600 T-8 | #FDF3EC |
| Orange/Mix/400 M-68 | #52464A |
| Orange/Mix/400 M-84 | #2E2F44 |
Red
| Token Name | Color |
|---|---|
| Red/100 | #FFEDE8 |
| Red/200 | #F0BFAF |
| Red/300 | #E0947B |
| Red/400 | #D46E4E |
| Red/500 | #C44B25 |
| Red/600 | #B41601 |
| Red/700 | #9C2601 |
| Red/800 | #822001 |
| Red/900 | #6C1A01 |
| Red/Tint/600 T-8 | #F9ECEB |
| Red/Mix/400 M-68 | #4A3342 |
| Red/Mix/400 M-84 | #292540 |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.