Design tokens v1.2
Design tokens are a great way to ensure design consistency and speed up development. They provide a shared language that designers and developers can use to communicate design decisions and ensure that everyone is on the same page. Design tokens also make it easier to make global changes to an application's design, as all of the values are stored in a single place.
With design tokens, small changes can be quickly implemented across an entire application. Design tokens also help to reduce the amount of code that needs to be written and maintained, as the same values can be reused throughout the application.
| Token | Value |
|---|---|
| --r-font-family | -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial sans-serif |
| --r-font-family-mono | 'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace |
| --r-font-size-7xl | 4.875rem |
| --r-font-size-6xl | 3.25rem |
| --r-font-size-5xl | 2.5rem |
| --r-font-size-4xl | 2.125rem |
| --r-font-size-3xl | 1.75rem |
| --r-font-size-2xl | 1.5rem |
| --r-font-size-xl | 1.25rem |
| --r-font-size-l | 1rem |
| --r-font-size-m | 0.875rem |
| --r-font-size-s | 0.75rem |
| --r-font-line-height-7xl | 6rem |
| --r-font-line-height-6xl | 3.875rem |
| --r-font-line-height-5xl | 3.125rem |
| --r-font-line-height-4xl | 2.875rem |
| --r-font-line-height-3xl | 2.25rem |
| --r-font-line-height-2xl | 2rem |
| --r-font-line-height-xl | 1.75rem |
| --r-font-line-height-l | 1.5rem |
| --r-font-line-height-m | 1.25rem |
| --r-font-line-height-s | 1rem |
| --r-font-weight-regular | 400 |
| --r-font-weight-medium | 500 |
| --r-font-weight-semi-bold | 600 |
| --r-font-weight-bold | 700 |
| --r-font-weight-extra-bold | 800 |
| Token | Value |
|---|---|
| --r-mono-0 | #FFFFFF |
| --r-mono-100 | #000000 |
| --r-background | #F5F5F5 |
| --r-background-hover | #E0E0E0 |
| --r-surface | #FFFFFF |
| --r-surface-secondary | #F9F9F9 |
| --r-surface-tertiary | #F5F5F5 |
| --r-surface-hover | #F5F5F5 |
| --r-surface-success | #DDF5E0 |
| --r-surface-success-muted | #F2FBF2 |
| --r-surface-warning | #FCF0BF |
| --r-surface-warning-muted | #FDF9E5 |
| --r-surface-danger | #FBE1E1 |
| --r-surface-danger-muted | #FDF3F3 |
| --r-surface-info | #E1E9FA |
| --r-surface-info-muted | #F3F6FD |
| --r-surface-dark | #4C5361 |
| --r-surface-dark-hover | #414753 |
| --r-primary | #0044D4 |
| --r-primary-hover | #093AA5 |
| --r-complementary-success | #22BC32 |
| --r-complementary-success-hover | #1EA02B |
| --r-complementary-success-dark | #0C4112 |
| --r-complementary-warning | #F1C400 |
| --r-complementary-warning-hover | #CDA700 |
| --r-complementary-warning-dark | #544400 |
| --r-complementary-danger | #E53935 |
| --r-complementary-danger-hover | #C3302D |
| --r-complementary-danger-dark | #501412 |
| --r-complementary-info | #3B6EDE |
| --r-complementary-info-hover | #325DBD |
| --r-complementary-info-dark | #182C59 |
| --r-border | #DDDDDD |
| --r-border-muted | #E8E8E8 |
| --r-border-strong | #C9C9C9 |
| --r-border-strong-hover | #9E9E9E |
| --r-border-success | #6FD37A |
| --r-border-warning | #F2CA1A |
| --r-border-danger | #E6423F |
| --r-border-info | #7FA0E9 |
| --r-border-dark | #363A44 |
| --r-icon | #484848 |
| --r-icon-hover | #232323 |
| --r-icon-on-surface | #FFFFFF |
| --r-text | #1a1a1a |
| --r-text-on-surface | #FFFFFF |
| --r-text-muted | #5f5f5f |
| --r-overlay | #1A1A1A66 |
| --r-focus | #3D79FC |
| Token | Value |
|---|---|
| --r-space-0 | 0 |
| --r-space-1 | 0.125rem |
| --r-space-2 | 0.25rem |
| --r-space-3 | 0.5rem |
| --r-space-4 | 0.75rem |
| --r-space-5 | 1rem |
| --r-space-6 | 1.25rem |
| --r-space-7 | 1.5rem |
| --r-space-8 | 1.75rem |
| --r-space-9 | 2rem |
| --r-space-10 | 2.5rem |
| --r-space-11 | 3rem |
| --r-space-12 | 4rem |
| --r-space-13 | 5rem |
| --r-space-14 | 7.5rem |
| --r-space-15 | 10rem |
| Token | Value |
|---|---|
| --r-border-radius-1 | 0.125rem |
| --r-border-radius-2 | 0.25rem |
| --r-border-radius-3 | 0.5rem |
| --r-border-radius-25 | 0.375rem |
| --r-border-radius-pill | 624.9375rem |
| --r-border-radius-circle | 50% |
| Token | Value |
|---|---|
| --r-shadow-0 | none |
| --r-shadow-10 | 0 1px 2px 0 rgba(100, 100, 100, 0.24), 0 4px 4px 0 rgba(100, 100, 100, 0.05) |
| --r-shadow-20 | 0 7px 14px 0 rgba(100, 100, 100, 0.15), 0 3px 6px 0 rgba(100, 100, 100, 0.07) |
| --r-shadow-30 | 0 3px 6px 0 rgba(100, 100, 100, 0.2), 0 7px 14px 0 rgba(100, 100, 100, 0.35) |
| --r-shadow-40 | 0 20px 40px -8px rgba(100, 100, 100, 0.18), 0 3px 6px 0 rgba(100, 100, 100, 0.07) |
| --r-shadow-inset-10 | 0 0 0 1px rgba(100, 100, 100, 0.03), 0 1px 2px 0 rgba(100, 100, 100, 0.24), 0 4px 4px 0 rgba(100, 100, 100, 0.05) |
| --r-shadow-inset-20 | 0 0 0 1px rgba(100, 100, 100, 0.09), 0 7px 14px 0 rgba(100, 100, 100, 0.15), 0 3px 6px 0 rgba(100, 100, 100, 0.07) |
| Token | Value |
|---|---|
| --r-z-index-5 | 50 |
| --r-z-index-10 | 100 |
| --r-z-index-15 | 150 |
| --r-z-index-20 | 200 |
| --r-z-index-25 | 250 |
| --r-z-index-30 | 300 |
| --r-z-index-35 | 350 |
| --r-z-index-40 | 400 |
| --r-z-index-45 | 450 |
| --r-z-index-50 | 500 |
| --r-z-index-55 | 550 |
| --r-z-index-60 | 600 |
| --r-z-index-65 | 650 |
| --r-z-index-70 | 700 |
| Token | Value |
|---|---|
| --r-motion-linear | cubic-bezier(0, 0, 1, 1) |
| --r-motion-ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
| --r-motion-ease-in | cubic-bezier(0.42, 0, 1, 1) |
| --r-motion-ease-out | cubic-bezier(0, 0, 0.58, 1) |
| --r-motion-ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
| --r-motion-duration-0 | 0 |
| --r-motion-duration-50 | 50ms |
| --r-motion-duration-100 | 100ms |
| --r-motion-duration-150 | 150ms |
| --r-motion-duration-200 | 200ms |
| --r-motion-duration-300 | 300ms |
| --r-motion-duration-400 | 400ms |
| --r-motion-duration-500 | 500ms |
| Token | Value |
|---|---|
| --r-breakpoints-xs | 576px |
| --r-breakpoints-s | 768px |
| --r-breakpoints-m | 1040px |
| --r-breakpoints-l | 1200px |
| --r-breakpoints-xl | 1400px |