foundations
Design Tokens (scss)
Design Tokens are the platform-specific translations of the JSON values that are the result of the agreed-upon base values
Color
| Component | Example |
|---|---|
$color-black-base | #000000 |
$color-blue-10 | #e0f3ff |
$color-blue-100 | #00283d |
$color-blue-20 | #ade2fe |
$color-blue-30 | #68c3f5 |
$color-blue-40 | #2da2e3 |
$color-blue-50 | #0280c6 |
$color-blue-60 | #00649c |
$color-blue-70 | #004c75 |
$color-blue-80 | #003958 |
$color-blue-90 | #002d46 |
$color-blue-base | #0280c6 |
$color-blue-dark | #00649c |
$color-blue-light | #2da2e3 |
$color-green-10 | #e0ffe0 |
$color-green-100 | #003601 |
$color-green-20 | #b2f9b4 |
$color-green-30 | #74eb76 |
$color-green-40 | #40d342 |
$color-green-50 | #1ab11d |
$color-green-60 | #048907 |
$color-green-70 | #006402 |
$color-green-80 | #005a02 |
$color-green-90 | #003b01 |
$color-green-base | #1ab11d |
$color-green-dark | #048907 |
$color-green-light | #40d342 |
$color-grey-10 | #f2f2f2 |
$color-grey-100 | #1a1a1a |
$color-grey-20 | #e6e6e6 |
$color-grey-30 | #cccccc |
$color-grey-40 | #b3b3b3 |
$color-grey-50 | #999999 |
$color-grey-60 | #808080 |
$color-grey-70 | #666666 |
$color-grey-80 | #4d4d4d |
$color-grey-90 | #333333 |
$color-grey-base | #999999 |
$color-grey-dark | #808080 |
$color-grey-light | #b3b3b3 |
$color-marketing-10 | #fffbe6 |
$color-marketing-100 | #050400 |
$color-marketing-20 | #f9eeb2 |
$color-marketing-30 | #f0df80 |
$color-marketing-40 | #e1cc55 |
$color-marketing-50 | #ccb534 |
$color-marketing-60 | #b09a1d |
$color-marketing-70 | #8a770d |
$color-marketing-80 | #5e5104 |
$color-marketing-90 | #302901 |
$color-marketing-base | #ccb534 |
$color-marketing-dark | #b09a1d |
$color-marketing-light | #e1cc55 |
$color-orange-10 | #fff4e6 |
$color-orange-100 | #4d2b00 |
$color-orange-20 | #ffe9c7 |
$color-orange-30 | #ffdea8 |
$color-orange-40 | #ffc066 |
$color-orange-50 | #ffa024 |
$color-orange-60 | #e98400 |
$color-orange-70 | #cc7300 |
$color-orange-80 | #a75e00 |
$color-orange-90 | #7b4600 |
$color-orange-base | #ffa024 |
$color-orange-dark | #e98400 |
$color-orange-light | #ffc066 |
$color-primary-10 | #ffe6e6 |
$color-primary-100 | #4d0000 |
$color-primary-20 | #f8c8c8 |
$color-primary-30 | #f0acac |
$color-primary-40 | #e37373 |
$color-primary-50 | #d23e3e |
$color-primary-60 | #c51111 |
$color-primary-70 | #b10b0b |
$color-primary-80 | #950606 |
$color-primary-90 | #720202 |
$color-primary-base | #d23e3e |
$color-primary-dark | #c51111 |
$color-primary-light | #e37373 |
$color-red-10 | #ffebeb |
$color-red-100 | #870002 |
$color-red-20 | #fdb5b6 |
$color-red-30 | #f97a7d |
$color-red-40 | #f2494c |
$color-red-50 | #e92326 |
$color-red-60 | #dd070b |
$color-red-70 | #cd0003 |
$color-red-80 | #b80003 |
$color-red-90 | #a00003 |
$color-red-base | #e92326 |
$color-red-dark | #cd0003 |
$color-red-light | #f97a7d |
$color-secondary-10 | #e6f3ff |
$color-secondary-100 | #002140 |
$color-secondary-20 | #b3d8fb |
$color-secondary-30 | #82bcf3 |
$color-secondary-40 | #58a2e8 |
$color-secondary-50 | #378ad8 |
$color-secondary-60 | #2074c2 |
$color-secondary-70 | #105da6 |
$color-secondary-80 | #064784 |
$color-secondary-90 | #023361 |
$color-secondary-base | #2074c2 |
$color-secondary-dark | #105da6 |
$color-secondary-light | #378ad8 |
$color-tertiary-10 | #e6fff5 |
$color-tertiary-100 | #004027 |
$color-tertiary-20 | #b3fbdf |
$color-tertiary-30 | #82f3c8 |
$color-tertiary-40 | #58e8b1 |
$color-tertiary-50 | #37d89b |
$color-tertiary-60 | #20c284 |
$color-tertiary-70 | #10a66c |
$color-tertiary-80 | #068454 |
$color-tertiary-90 | #02613c |
$color-tertiary-base | #37d89b |
$color-tertiary-dark | #20c284 |
$color-tertiary-light | #58e8b1 |
$color-text-10 | #000000 |
$color-text-100 | #ffffff |
$color-text-20 | #000000 |
$color-text-30 | #000000 |
$color-text-40 | #000000 |
$color-text-50 | #000000 |
$color-text-60 | #ffffff |
$color-text-70 | #ffffff |
$color-text-80 | #ffffff |
$color-text-90 | #ffffff |
$color-text-black-base | #ffffff |
$color-text-blue-10 | #000000 |
$color-text-blue-100 | #ffffff |
$color-text-blue-20 | #000000 |
$color-text-blue-30 | #000000 |
$color-text-blue-40 | #000000 |
$color-text-blue-50 | #000000 |
$color-text-blue-60 | #ffffff |
$color-text-blue-70 | #ffffff |
$color-text-blue-80 | #ffffff |
$color-text-blue-90 | #ffffff |
$color-text-blue-base | #000000 |
$color-text-blue-dark | #ffffff |
$color-text-blue-light | #000000 |
$color-text-green-10 | #000000 |
$color-text-green-100 | #ffffff |
$color-text-green-20 | #000000 |
$color-text-green-30 | #000000 |
$color-text-green-40 | #000000 |
$color-text-green-50 | #000000 |
$color-text-green-60 | #ffffff |
$color-text-green-70 | #ffffff |
$color-text-green-80 | #ffffff |
$color-text-green-90 | #ffffff |
$color-text-green-base | #000000 |
$color-text-green-dark | #ffffff |
$color-text-green-light | #000000 |
$color-text-grey-10 | #000000 |
$color-text-grey-100 | #ffffff |
$color-text-grey-20 | #000000 |
$color-text-grey-30 | #000000 |
$color-text-grey-40 | #000000 |
$color-text-grey-50 | #000000 |
$color-text-grey-60 | #000000 |
$color-text-grey-70 | #ffffff |
$color-text-grey-80 | #ffffff |
$color-text-grey-90 | #ffffff |
$color-text-grey-base | #000000 |
$color-text-grey-dark | #000000 |
$color-text-grey-light | #000000 |
$color-text-marketing-10 | #000000 |
$color-text-marketing-100 | #ffffff |
$color-text-marketing-20 | #000000 |
$color-text-marketing-30 | #000000 |
$color-text-marketing-40 | #000000 |
$color-text-marketing-50 | #000000 |
$color-text-marketing-60 | #000000 |
$color-text-marketing-70 | #000000 |
$color-text-marketing-80 | #ffffff |
$color-text-marketing-90 | #ffffff |
$color-text-marketing-base | #000000 |
$color-text-marketing-dark | #000000 |
$color-text-marketing-light | #000000 |
$color-text-orange-10 | #000000 |
$color-text-orange-100 | #ffffff |
$color-text-orange-20 | #000000 |
$color-text-orange-30 | #000000 |
$color-text-orange-40 | #000000 |
$color-text-orange-50 | #000000 |
$color-text-orange-60 | #ffffff |
$color-text-orange-70 | #ffffff |
$color-text-orange-80 | #ffffff |
$color-text-orange-90 | #ffffff |
$color-text-orange-base | #000000 |
$color-text-orange-dark | #ffffff |
$color-text-orange-light | #000000 |
$color-text-primary-10 | #000000 |
$color-text-primary-100 | #ffffff |
$color-text-primary-20 | #000000 |
$color-text-primary-30 | #000000 |
$color-text-primary-40 | #000000 |
$color-text-primary-50 | #ffffff |
$color-text-primary-60 | #ffffff |
$color-text-primary-70 | #ffffff |
$color-text-primary-80 | #ffffff |
$color-text-primary-90 | #ffffff |
$color-text-primary-base | #ffffff |
$color-text-primary-dark | #ffffff |
$color-text-primary-light | #000000 |
$color-text-red-10 | #000000 |
$color-text-red-100 | #ffffff |
$color-text-red-20 | #000000 |
$color-text-red-30 | #000000 |
$color-text-red-40 | #000000 |
$color-text-red-50 | #000000 |
$color-text-red-60 | #ffffff |
$color-text-red-70 | #ffffff |
$color-text-red-80 | #ffffff |
$color-text-red-90 | #ffffff |
$color-text-red-base | #000000 |
$color-text-red-dark | #ffffff |
$color-text-red-light | #000000 |
$color-text-secondary-10 | #000000 |
$color-text-secondary-100 | #ffffff |
$color-text-secondary-20 | #000000 |
$color-text-secondary-30 | #000000 |
$color-text-secondary-40 | #000000 |
$color-text-secondary-50 | #000000 |
$color-text-secondary-60 | #ffffff |
$color-text-secondary-70 | #ffffff |
$color-text-secondary-80 | #ffffff |
$color-text-secondary-90 | #ffffff |
$color-text-secondary-base | #ffffff |
$color-text-secondary-dark | #ffffff |
$color-text-secondary-light | #000000 |
$color-text-tertiary-10 | #000000 |
$color-text-tertiary-100 | #ffffff |
$color-text-tertiary-20 | #000000 |
$color-text-tertiary-30 | #000000 |
$color-text-tertiary-40 | #000000 |
$color-text-tertiary-50 | #000000 |
$color-text-tertiary-60 | #000000 |
$color-text-tertiary-70 | #000000 |
$color-text-tertiary-80 | #ffffff |
$color-text-tertiary-90 | #ffffff |
$color-text-tertiary-base | #000000 |
$color-text-tertiary-dark | #000000 |
$color-text-tertiary-light | #000000 |
$color-text-white-base | #000000 |
$color-white-base | #ffffff |
Space
| Component | Example |
|---|---|
$space-1 | 2px |
$space-2 | 4px |
$space-3 | 8px |
$space-4 | 12px |
$space-5 | 16px |
$space-6 | 24px |
$space-7 | 32px |
$space-8 | 40px |
$space-9 | 48px |
$space-10 | 64px |
$space-11 | 96px |
Z-index
| Component | Example |
|---|---|
$z-index-100 | tooltip |
$z-index-200 | menu |
$z-index-300 | popover |
$z-index-400 | sticky content |
$z-index-500 | sheet |
$z-index-600 | modal backdrop |
$z-index-700 | modal sheet |
$z-index-800 | modal (dialog, alert, page, full screen) |
$z-index-900 | toast |
Shadows
| Component | Example |
|---|---|
$shadow-0 | none |
$shadow-1 | 0 2px 4px 0 rgba(0,0,0,0.12) |
$shadow-2 | 0 2px 7px 0 rgba(0,0,0,0.28) |
$shadow-3 | 0 7px 14px 0 rgba(0,0,0,0.28) |
$shadow-4 | 0 14px 28px 0 rgba(0,0,0,0.28) |
$shadow-inset-1 | inset 0 1px 10px 0 rgba(0,0,0,0.24) |
$shadow-inset-2 | inset 0 1px 15px 0 rgba(0,0,0,0.28) |
Grid
| Component | Example |
|---|---|
$grid-breakpoint-large | 1024px |
$grid-breakpoint-large-max | 1319px |
$grid-breakpoint-medium | 768px |
$grid-breakpoint-medium-max | 1023px |
$grid-breakpoint-small | 375px |
$grid-breakpoint-small-max | 767px |
$grid-breakpoint-x-large | 1320px |
$grid-breakpoint-x-small | - |
$grid-breakpoint-x-small-max | 374px |
$grid-gutter | 16px |
$grid-wrap-fluid | calc(100% - 32px) |
$grid-wrap-static | 1200px |
Typography
Font-family
| Component | Example |
|---|---|
$font-family-brand-primary | Aa 'Roboto Slab', 'Roboto Slab Fallback', serif |
$font-family-brand-secondary | Aa 'Roboto', 'Roboto Fallback', sans-serif |
$font-family-system | Aa -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Font-weight
| Component | Example |
|---|---|
$font-weight-bold | Aa 700 |
$font-weight-medium | Aa 500 |
$font-weight-regular | Aa 400 |
Line-height
| Component | Example |
|---|---|
$line-height-3-x-large use font.heading, font.paragraph, font.caption instead | Aa 44px |
$line-height-4-x-large use font.heading, font.paragraph, font.caption instead | Aa 48px |
$line-height-large use font.heading, font.paragraph, font.caption instead | Aa 28px |
$line-height-medium use font.heading, font.paragraph, font.caption instead | Aa 24px |
$line-height-small use font.heading, font.paragraph, font.caption instead | Aa 20px |
$line-height-x-large use font.heading, font.paragraph, font.caption instead | Aa 32px |
$line-height-x-small use font.heading, font.paragraph, font.caption instead | Aa 16px |
$line-height-xx-large use font.heading, font.paragraph, font.caption instead | Aa 40px |
Font-size (type scale)
| Component | Example |
|---|---|
$font-size-3-x-large use font.heading, font.paragraph, font.caption instead | Aa 24px |
$font-size-4-x-large use font.heading, font.paragraph, font.caption instead | Aa 28px |
$font-size-5-x-large use font.heading, font.paragraph, font.caption instead | Aa 32px |
$font-size-6-x-large use font.heading, font.paragraph, font.caption instead | Aa 40px |
$font-size-large use font.heading, font.paragraph, font.caption instead | Aa 18px |
$font-size-medium use font.heading, font.paragraph, font.caption instead | Aa 16px |
$font-size-small use font.heading, font.paragraph, font.caption instead | Aa 14px |
$font-size-x-large use font.heading, font.paragraph, font.caption instead | Aa 20px |
$font-size-x-small use font.heading, font.paragraph, font.caption instead | Aa 12px |
$font-size-xx-large use font.heading, font.paragraph, font.caption instead | Aa 22px |
Font System
| Component | Example |
|---|---|
$font-caption-1-line-height | 1.1429 |
$font-caption-1-size | 14px |
$font-caption-2-line-height | 1.3333 |
$font-caption-2-size | 12px |
$font-heading-1-large-line-height | 1.3 |
$font-heading-1-large-size | 40px |
$font-heading-1-line-height | 1.375 |
$font-heading-1-size | 32px |
$font-heading-1-weight | 700 |
$font-heading-2-large-line-height | 1.25 |
$font-heading-2-large-size | 32px |
$font-heading-2-line-height | 1.2857 |
$font-heading-2-size | 28px |
$font-heading-2-weight | 700 |
$font-heading-3-large-line-height | 1.2857 |
$font-heading-3-large-size | 28px |
$font-heading-3-line-height | 1.3333 |
$font-heading-3-size | 24px |
$font-heading-3-weight | 700 |
$font-heading-4-large-line-height | 1.2727 |
$font-heading-4-large-size | 22px |
$font-heading-4-line-height | 1.2727 |
$font-heading-4-size | 22px |
$font-heading-4-weight | 700 |
$font-heading-5-large-line-height | 1.3333 |
$font-heading-5-large-size | 18px |
$font-heading-5-line-height | 1.3333 |
$font-heading-5-size | 18px |
$font-heading-5-weight | 700 |
$font-heading-6-large-line-height | 1.25 |
$font-heading-6-large-size | 16px |
$font-heading-6-line-height | 1.25 |
$font-heading-6-size | 16px |
$font-heading-6-weight | 700 |
$font-paragraph-large-line-height | 1.5556 |
$font-paragraph-large-size | 18px |
$font-paragraph-line-height | 1.5 |
$font-paragraph-size | 16px |
Border Radius
| Component | Example |
|---|---|
$border-radius-0 | 0px |
$border-radius-1 | 2px |
$border-radius-10 | 64px |
$border-radius-11 | 96px |
$border-radius-2 | 4px |
$border-radius-3 | 8px |
$border-radius-4 | 12px |
$border-radius-5 | 16px |
$border-radius-6 | 24px |
$border-radius-7 | 32px |
$border-radius-8 | 40px |
$border-radius-9 | 48px |
$border-radius-fill | 50% |
$border-radius-sides | 9999px |
Overlays
| Component | Example |
|---|---|
$overlay-fill | rgba(0, 0, 0, 0.33) |
$overlay-gradient-linear-fade-to-bottom | linear-gradient(-180deg, rgba(0, 0, 0, 0.33) 0%, rgba(255, 255, 255, 0) 100%) |
$overlay-gradient-linear-fade-to-top | linear-gradient(-180deg, rgba(213, 219, 224, 0) 0%, rgba(0, 0, 0, 0.33) 100%) |
Motion
| Component | Example |
|---|---|
$motion-duration-fast | Hover me! 200ms |
$motion-duration-loop | Hover me! 1200ms |
$motion-duration-medium | Hover me! 300ms |
$motion-duration-slow | Hover me! 500ms |
Icon
| Component | Example |
|---|---|
$icon-large | 28px |
$icon-medium | 24px |
$icon-small | 16px |
$icon-x-large | 32px |