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