Design tokens v2
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-color-neutral-0 | #FFFFFF |
| --r-color-neutral-50 | #F8FAFC |
| --r-color-neutral-100 | #F1F5F9 |
| --r-color-neutral-150 | #E8EDF4 |
| --r-color-neutral-200 | #E0E6EF |
| --r-color-neutral-250 | #D7DEE8 |
| --r-color-neutral-300 | #CBD5E1 |
| --r-color-neutral-350 | #AFBCCC |
| --r-color-neutral-400 | #94A3B8 |
| --r-color-neutral-500 | #64748B |
| --r-color-neutral-600 | #475569 |
| --r-color-neutral-650 | #3D4A5F |
| --r-color-neutral-700 | #334155 |
| --r-color-neutral-750 | #28344A |
| --r-color-neutral-800 | #182137 |
| --r-color-neutral-850 | #0C1424 |
| --r-color-neutral-900 | #020617 |
| --r-color-primary-50 | #E1EBFF |
| --r-color-primary-100 | #A5C6FF |
| --r-color-primary-200 | #76A0FF |
| --r-color-primary-300 | #4878EE |
| --r-color-primary-400 | #2A55E4 |
| --r-color-primary-500 | #0044D4 |
| --r-color-primary-600 | #0036AA |
| --r-color-primary-700 | #00297F |
| --r-color-primary-800 | #001B55 |
| --r-color-primary-900 | #000D2A |
| --r-color-success-50 | #F0FDF4 |
| --r-color-success-100 | #DCFCE7 |
| --r-color-success-200 | #BBF7D0 |
| --r-color-success-300 | #86EFAC |
| --r-color-success-400 | #4ADE80 |
| --r-color-success-500 | #22C55E |
| --r-color-success-600 | #16A34A |
| --r-color-success-700 | #15803D |
| --r-color-success-800 | #166534 |
| --r-color-success-900 | #052E16 |
| --r-color-warning-50 | #FFFBEB |
| --r-color-warning-100 | #FEF3C7 |
| --r-color-warning-200 | #FDE68A |
| --r-color-warning-300 | #FCD34D |
| --r-color-warning-400 | #FBBF24 |
| --r-color-warning-500 | #F59E0B |
| --r-color-warning-600 | #D97706 |
| --r-color-warning-700 | #B45309 |
| --r-color-warning-800 | #92400E |
| --r-color-warning-900 | #451A03 |
| --r-color-danger-50 | #FEF2F2 |
| --r-color-danger-100 | #FEE2E2 |
| --r-color-danger-200 | #FECACA |
| --r-color-danger-300 | #FCA5A5 |
| --r-color-danger-400 | #F87171 |
| --r-color-danger-500 | #EF4444 |
| --r-color-danger-600 | #DC2626 |
| --r-color-danger-700 | #B91C1C |
| --r-color-danger-800 | #991B1B |
| --r-color-danger-900 | #450A0A |
| --r-color-info-50 | #F0F9FF |
| --r-color-info-100 | #E0F2FE |
| --r-color-info-200 | #BAE6FD |
| --r-color-info-300 | #7DD3FC |
| --r-color-info-400 | #38BDF8 |
| --r-color-info-500 | #0EA5E9 |
| --r-color-info-600 | #0284C7 |
| --r-color-info-700 | #0369A1 |
| --r-color-info-800 | #075985 |
| --r-color-info-900 | #082F49 |
| --r-primary | var(--r-color-primary-500) |
| --r-primary-hover | var(--r-color-primary-600) |
| --r-primary-muted | var(--r-color-primary-50) |
| --r-background | var(--r-color-neutral-100) |
| --r-background-hover | var(--r-color-neutral-200) |
| --r-surface | var(--r-color-neutral-0) |
| --r-surface-hover | var(--r-color-neutral-100) |
| --r-surface-selected | var(--r-color-neutral-150) |
| --r-surface-sunken | var(--r-color-neutral-50) |
| --r-surface-sunken-hover | var(--r-color-neutral-150) |
| --r-surface-sunken-selected | var(--r-color-neutral-200) |
| --r-surface-disabled | var(--r-color-neutral-100) |
| --r-surface-inverse | var(--r-color-neutral-800) |
| --r-surface-success | var(--r-color-success-700) |
| --r-surface-success-hover | var(--r-color-success-800) |
| --r-surface-success-muted | var(--r-color-success-100) |
| --r-surface-warning | var(--r-color-warning-700) |
| --r-surface-warning-hover | var(--r-color-warning-800) |
| --r-surface-warning-muted | var(--r-color-warning-100) |
| --r-surface-danger | var(--r-color-danger-600) |
| --r-surface-danger-hover | var(--r-color-danger-700) |
| --r-surface-danger-muted | var(--r-color-danger-100) |
| --r-surface-info | var(--r-color-info-700) |
| --r-surface-info-hover | var(--r-color-info-800) |
| --r-surface-info-muted | var(--r-color-info-100) |
| --r-text | var(--r-color-neutral-800) |
| --r-text-muted | var(--r-color-neutral-600) |
| --r-text-disabled | var(--r-color-neutral-500) |
| --r-text-placeholder | var(--r-color-neutral-500) |
| --r-text-link | var(--r-color-primary-500) |
| --r-text-link-hover | var(--r-color-primary-700) |
| --r-text-on-color | var(--r-color-neutral-0) |
| --r-text-primary | var(--r-color-primary-500) |
| --r-text-success | var(--r-color-success-800) |
| --r-text-warning | var(--r-color-warning-700) |
| --r-text-danger | var(--r-color-danger-700) |
| --r-text-info | var(--r-color-info-800) |
| --r-icon | var(--r-color-neutral-700) |
| --r-icon-muted | var(--r-color-neutral-500) |
| --r-icon-on-color | var(--r-color-neutral-0) |
| --r-icon-primary | var(--r-color-primary-500) |
| --r-icon-success | var(--r-color-success-800) |
| --r-icon-warning | var(--r-color-warning-700) |
| --r-icon-danger | var(--r-color-danger-700) |
| --r-icon-info | var(--r-color-info-800) |
| --r-border | var(--r-color-neutral-250) |
| --r-border-muted | var(--r-color-neutral-150) |
| --r-border-strong | var(--r-color-neutral-350) |
| --r-border-stronger | var(--r-color-neutral-400) |
| --r-border-disabled | var(--r-color-neutral-250) |
| --r-border-inverse | var(--r-color-neutral-900) |
| --r-border-primary | var(--r-color-primary-500) |
| --r-border-success | var(--r-color-success-700) |
| --r-border-warning | var(--r-color-warning-700) |
| --r-border-danger | var(--r-color-danger-700) |
| --r-border-info | var(--r-color-info-700) |
| --r-focus | var(--r-color-primary-400) |
| --r-overlay | #02061780 |
| 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.375rem |
| --r-border-radius-4 | 0.5rem |
| --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(2, 6, 23, 0.18), 0 4px 4px 0 rgba(2, 6, 23, 0.04) |
| --r-shadow-20 | 0 7px 14px 0 rgba(2, 6, 23, 0.11), 0 3px 6px 0 rgba(2, 6, 23, 0.05) |
| --r-shadow-30 | 0 3px 6px 0 rgba(2, 6, 23, 0.15), 0 7px 14px 0 rgba(2, 6, 23, 0.26) |
| --r-shadow-40 | 0 20px 40px -8px rgba(2, 6, 23, 0.13), 0 3px 6px 0 rgba(2, 6, 23, 0.05) |
| --r-shadow-inset-10 | 0 0 0 1px rgba(2, 6, 23, 0.02), 0 1px 2px 0 rgba(2, 6, 23, 0.18), 0 4px 4px 0 rgba(2, 6, 23, 0.04) |
| --r-shadow-inset-20 | 0 0 0 1px rgba(2, 6, 23, 0.07), 0 7px 14px 0 rgba(2, 6, 23, 0.11), 0 3px 6px 0 rgba(2, 6, 23, 0.05) |
| 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 |
| --r-z-index-100 | 1000 |
| 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 |