Tokens
All tokens
Every value in the system, generated from tokens/tokens.json. Change a value there and every page, swatch and component on this site follows.
- ColorPrimitive ramps, and the semantic colors components use in all four modes: SuperCoach and Coach, light and dark. Components only ever use semantic tokens.
- TypographyFont families, sizes, weights, line heights and letter spacing. Shown at a 16px root.
- SpacingSpacing steps on a 4px unit, and the breakpoints layouts respond to.
- RadiusCorner radius scale for product UI.
- ShadowElevation shadows for light and dark surfaces. The same utility switches ink with the mode.
- MotionDurations and easing curves. Press play to compare.
- Z-indexNamed stacking layers. Use a layer, never a raw number.
Search all tokens
238 of 238 tokens
| Token | Type | Value | Use |
|---|---|---|---|
| semantic/background | Semantic color | Light white #FFFFFF · Dark neutral-950 #191919 | |
| semantic/foreground | Semantic color | Light neutral-950 #191919 · Dark neutral-50 #F7F8F9 | |
| semantic/foreground-secondary | Semantic color | Light neutral-700 #4A4A4A · Dark neutral-300 #D4D4D5 | |
| semantic/card | Semantic color | Light white #FFFFFF · Dark neutral-900 #252525 | |
| semantic/card-foreground | Semantic color | Light neutral-950 #191919 · Dark neutral-50 #F7F8F9 | |
| semantic/popover | Semantic color | Light white #FFFFFF · Dark neutral-900 #252525 | |
| semantic/popover-foreground | Semantic color | Light neutral-950 #191919 · Dark neutral-50 #F7F8F9 | |
| semantic/primary | Semantic color | SuperCoach light brand-600 #2A46CB · SuperCoach dark brand-500 #466AE9 · Coach light orange-500 #FF6D38 · Coach dark orange-500 #FF6D38 | |
| semantic/primary-foreground | Semantic color | white #FFFFFF | |
| semantic/secondary | Semantic color | SuperCoach light lime-300 #A7F840 · SuperCoach dark lime-300 #A7F840 · Coach light neutral-100 #F0F0F2 · Coach dark neutral-800 #333333 | |
| semantic/secondary-foreground | Semantic color | SuperCoach light neutral-950 #191919 · SuperCoach dark neutral-950 #191919 · Coach light neutral-800 #333333 · Coach dark neutral-50 #F7F8F9 | |
| semantic/muted | Semantic color | Light neutral-100 #F0F0F2 · Dark neutral-800 #333333 | |
| semantic/muted-foreground | Semantic color | Light neutral-600 #636363 · Dark neutral-400 #A4A4A4 | |
| semantic/accent | Semantic color | SuperCoach light brand-50 #F1F5FE · SuperCoach dark brand-950 #061045 · Coach light orange-50 #FFF7EF · Coach dark orange-950 #44120E | |
| semantic/accent-foreground | Semantic color | SuperCoach light brand-700 #1F35AA · SuperCoach dark brand-200 #C2D4FF · Coach light orange-700 #CB2F1F · Coach dark orange-200 #FFD6AB | |
| semantic/destructive | Semantic color | red-600 #DC2626 | |
| semantic/destructive-foreground | Semantic color | white #FFFFFF | |
| semantic/destructive-subtle | Semantic color | Light red-50 #FEF2F2 · Dark red-950 #450A0A | |
| semantic/destructive-text | Semantic color | Light red-700 #B91C1C · Dark red-300 #FCA5A5 | |
| semantic/success | Semantic color | Light green-600 #16A34A · Dark green-500 #22C55E | |
| semantic/success-subtle | Semantic color | Light green-50 #F0FDF4 · Dark green-950 #052E16 | |
| semantic/success-text | Semantic color | Light green-700 #15803D · Dark green-300 #86EFAC | |
| semantic/warning | Semantic color | Light amber-500 #F59E0B · Dark amber-400 #FBBF24 | |
| semantic/warning-subtle | Semantic color | Light amber-50 #FFFBEB · Dark amber-950 #451A03 | |
| semantic/warning-text | Semantic color | Light amber-800 #92400E · Dark amber-300 #FCD34D | |
| semantic/info | Semantic color | Light blue-700 #1D4ED8 · Dark blue-400 #60A5FA | |
| semantic/info-subtle | Semantic color | Light blue-50 #EFF6FF · Dark blue-950 #172554 | |
| semantic/ai | Semantic color | Light violet-ai-500 #7C5CBF · Dark violet-ai-300 #BDA9F6 | |
| semantic/ai-foreground | Semantic color | Light violet-ai-700 #5F3F9E · Dark violet-ai-300 #BDA9F6 | |
| semantic/link | Semantic color | SuperCoach light brand-600 #2A46CB · SuperCoach dark brand-300 #99B5FF · Coach light orange-700 #CB2F1F · Coach dark orange-300 #FFB977 | |
| semantic/border | Semantic color | Light neutral-200 #E6E7E8 · Dark neutral-800 #333333 | |
| semantic/border-strong | Semantic color | Light neutral-300 #D4D4D5 · Dark neutral-700 #4A4A4A | |
| semantic/input | Semantic color | Light neutral-200 #E6E7E8 · Dark neutral-800 #333333 | |
| semantic/ring | Semantic color | SuperCoach light brand-600 #2A46CB · SuperCoach dark brand-400 #678DFF · Coach light orange-500 #FF6D38 · Coach dark orange-400 #FF8948 | |
| semantic/chart-1 | Semantic color | SuperCoach light brand-600 #2A46CB · SuperCoach dark brand-400 #678DFF · Coach light orange-500 #FF6D38 · Coach dark orange-400 #FF8948 | |
| semantic/chart-2 | Semantic color | SuperCoach light lime-600 #52A701 · SuperCoach dark lime-300 #A7F840 · Coach light green-700 #15803D · Coach dark green-400 #4ADE80 | |
| semantic/chart-3 | Semantic color | SuperCoach light navy-900 #1C3657 · SuperCoach dark navy-300 #AFBFD5 · Coach light orange-400 #FF8948 · Coach dark orange-200 #FFD6AB | |
| semantic/chart-4 | Semantic color | sand #FFBF51 | |
| semantic/chart-5 | Semantic color | Light maroon #7D1A31 · Dark beige #CAC4B8 | |
| semantic/sidebar | Semantic color | SuperCoach light neutral-950 #191919 · SuperCoach dark black #000000 · Coach light neutral-900 #252525 · Coach dark black #000000 | |
| semantic/sidebar-foreground | Semantic color | Light white #FFFFFF · Dark neutral-50 #F7F8F9 | |
| semantic/sidebar-primary | Semantic color | SuperCoach lime-300 #A7F840 · Coach orange-500 #FF6D38 | |
| semantic/sidebar-primary-foreground | Semantic color | neutral-950 #191919 | |
| semantic/sidebar-accent | Semantic color | neutral-800 #333333 | |
| semantic/sidebar-accent-foreground | Semantic color | Light white #FFFFFF · Dark neutral-50 #F7F8F9 | |
| semantic/sidebar-border | Semantic color | SuperCoach light neutral-800 #333333 · SuperCoach dark neutral-800 #333333 · Coach light neutral-700 #4A4A4A · Coach dark neutral-800 #333333 | |
| semantic/sidebar-ring | Semantic color | SuperCoach light lime-300 #A7F840 · SuperCoach dark lime-300 #A7F840 · Coach light orange-500 #FF6D38 · Coach dark orange-400 #FF8948 | |
| primitives/white | Color primitive | #FFFFFF | |
| primitives/black | Color primitive | #000000 | |
| primitives/neutral-50 | Color primitive | #F7F8F9 | |
| primitives/neutral-100 | Color primitive | #F0F0F2 | |
| primitives/neutral-200 | Color primitive | #E6E7E8 | |
| primitives/neutral-300 | Color primitive | #D4D4D5 | |
| primitives/neutral-400 | Color primitive | #A4A4A4 | |
| primitives/neutral-500 | Color primitive | #808080 | |
| primitives/neutral-600 | Color primitive | #636363 | |
| primitives/neutral-700 | Color primitive | #4A4A4A | |
| primitives/neutral-800 | Color primitive | #333333 | |
| primitives/neutral-900 | Color primitive | #252525 | |
| primitives/neutral-950 | Color primitive | #191919 | |
| primitives/brand-50 | Color primitive | #F1F5FE | |
| primitives/brand-100 | Color primitive | #DFE8FE | |
| primitives/brand-200 | Color primitive | #C2D4FF | |
| primitives/brand-300 | Color primitive | #99B5FF | |
| primitives/brand-400 | Color primitive | #678DFF | |
| primitives/brand-500 | Color primitive | #466AE9 | |
| primitives/brand-600 | Color primitive | #2A46CB | |
| primitives/brand-700 | Color primitive | #1F35AA | |
| primitives/brand-800 | Color primitive | #162889 | |
| primitives/brand-900 | Color primitive | #0F1E67 | |
| primitives/brand-950 | Color primitive | #061045 | |
| primitives/lime-50 | Color primitive | #F5FFE8 | |
| primitives/lime-100 | Color primitive | #E8FDCD | |
| primitives/lime-200 | Color primitive | #D1FB9E | |
| primitives/lime-300 | Color primitive | #A7F840 | |
| primitives/lime-400 | Color primitive | #88E900 | |
| primitives/lime-500 | Color primitive | #6DD100 | |
| primitives/lime-600 | Color primitive | #52A701 | |
| primitives/lime-700 | Color primitive | #3D7F01 | |
| primitives/lime-800 | Color primitive | #35640E | |
| primitives/lime-900 | Color primitive | #2F5515 | |
| primitives/lime-950 | Color primitive | #152F06 | |
| primitives/red-50 | Color primitive | #FEF2F2 | |
| primitives/red-100 | Color primitive | #FEE2E2 | |
| primitives/red-200 | Color primitive | #FECACA | |
| primitives/red-300 | Color primitive | #FCA5A5 | |
| primitives/red-400 | Color primitive | #F87171 | |
| primitives/red-500 | Color primitive | #EF4444 | |
| primitives/red-600 | Color primitive | #DC2626 | |
| primitives/red-700 | Color primitive | #B91C1C | |
| primitives/red-800 | Color primitive | #991B1B | |
| primitives/red-900 | Color primitive | #7F1D1D | |
| primitives/green-50 | Color primitive | #F0FDF4 | |
| primitives/green-100 | Color primitive | #DCFCE7 | |
| primitives/green-200 | Color primitive | #BBF7D0 | |
| primitives/green-300 | Color primitive | #86EFAC | |
| primitives/green-400 | Color primitive | #4ADE80 | |
| primitives/green-500 | Color primitive | #22C55E | |
| primitives/green-600 | Color primitive | #16A34A | |
| primitives/green-700 | Color primitive | #15803D | |
| primitives/green-800 | Color primitive | #166534 | |
| primitives/green-900 | Color primitive | #14532D | |
| primitives/amber-50 | Color primitive | #FFFBEB | |
| primitives/amber-100 | Color primitive | #FEF3C7 | |
| primitives/amber-200 | Color primitive | #FDE68A | |
| primitives/amber-300 | Color primitive | #FCD34D | |
| primitives/amber-400 | Color primitive | #FBBF24 | |
| primitives/amber-500 | Color primitive | #F59E0B | |
| primitives/amber-600 | Color primitive | #D97706 | |
| primitives/amber-700 | Color primitive | #B45309 | |
| primitives/amber-800 | Color primitive | #92400E | |
| primitives/amber-900 | Color primitive | #78350F | |
| primitives/blue-50 | Color primitive | #EFF6FF | |
| primitives/blue-100 | Color primitive | #DBEAFE | |
| primitives/blue-200 | Color primitive | #BFDBFE | |
| primitives/blue-300 | Color primitive | #93C5FD | |
| primitives/blue-400 | Color primitive | #60A5FA | |
| primitives/blue-500 | Color primitive | #3B82F6 | |
| primitives/blue-600 | Color primitive | #2563EB | |
| primitives/blue-700 | Color primitive | #1D4ED8 | |
| primitives/blue-800 | Color primitive | #1E40AF | |
| primitives/blue-900 | Color primitive | #1E3A8A | |
| primitives/orange-50 | Color primitive | #FFF7EF | |
| primitives/orange-100 | Color primitive | #FEEDD8 | |
| primitives/orange-200 | Color primitive | #FFD6AB | |
| primitives/orange-300 | Color primitive | #FFB977 | |
| primitives/orange-400 | Color primitive | #FF8948 | |
| primitives/orange-500 | Color primitive | #FF6D38 | |
| primitives/orange-600 | Color primitive | #F7421F | |
| primitives/orange-700 | Color primitive | #CB2F1F | |
| primitives/orange-800 | Color primitive | #A02920 | |
| primitives/orange-900 | Color primitive | #7F281D | |
| primitives/orange-950 | Color primitive | #44120E | |
| primitives/navy-50 | Color primitive | #F3F7FC | |
| primitives/navy-100 | Color primitive | #E4ECF6 | |
| primitives/navy-200 | Color primitive | #CCD9E9 | |
| primitives/navy-300 | Color primitive | #AFBFD5 | |
| primitives/navy-400 | Color primitive | #8BA0BC | |
| primitives/navy-500 | Color primitive | #6982A3 | |
| primitives/navy-600 | Color primitive | #496589 | |
| primitives/navy-700 | Color primitive | #365175 | |
| primitives/navy-800 | Color primitive | #274162 | |
| primitives/navy-900 | Color primitive | #1C3657 | |
| primitives/navy-950 | Color primitive | #09192C | |
| primitives/beige | Color primitive | #CAC4B8 | |
| primitives/sand | Color primitive | #FFBF51 | |
| primitives/maroon | Color primitive | #7D1A31 | |
| primitives/violet-ai-500 | Color primitive | #7C5CBF | |
| primitives/violet-ai-700 | Color primitive | #5F3F9E | |
| primitives/violet-ai-50 | Color primitive | #F2EFF9 | |
| primitives/red-950 | Color primitive | #450A0A | |
| primitives/green-950 | Color primitive | #052E16 | |
| primitives/amber-950 | Color primitive | #451A03 | |
| primitives/blue-950 | Color primitive | #172554 | |
| primitives/violet-ai-300 | Color primitive | #BDA9F6 | |
| primitives/violet-ai-950 | Color primitive | #261743 | |
| radius/none | radius | 0px | |
| radius/sm | radius | 4px | |
| radius/md | radius | 6px | |
| radius/lg | radius | 8px | |
| radius/xl | radius | 12px | |
| radius/2xl | radius | 16px | |
| radius/full | radius | 9999px | |
| spacing/0 | spacing | 0px | |
| spacing/1 | spacing | 4px | |
| spacing/2 | spacing | 8px | |
| spacing/3 | spacing | 12px | |
| spacing/4 | spacing | 16px | |
| spacing/5 | spacing | 20px | |
| spacing/6 | spacing | 24px | |
| spacing/7 | spacing | 28px | |
| spacing/8 | spacing | 32px | |
| spacing/10 | spacing | 40px | |
| spacing/12 | spacing | 48px | |
| spacing/14 | spacing | 56px | |
| spacing/16 | spacing | 64px | |
| spacing/20 | spacing | 80px | |
| spacing/24 | spacing | 96px | |
| spacing/0.5 | spacing | 2px | |
| spacing/1.5 | spacing | 6px | |
| spacing/2.5 | spacing | 10px | |
| font-size/xs | font-size | 12px | |
| font-size/sm | font-size | 14px | |
| font-size/base | font-size | 16px | |
| font-size/lg | font-size | 18px | |
| font-size/xl | font-size | 20px | |
| font-size/2xl | font-size | 24px | |
| font-size/3xl | font-size | 30px | |
| font-size/4xl | font-size | 36px | |
| line-height/none | line-height | 1 | |
| line-height/tight | line-height | 1.25 | |
| line-height/snug | line-height | 1.375 | |
| line-height/normal | line-height | 1.5 | |
| letter-spacing/tight | letter-spacing | -0.02em | |
| letter-spacing/normal | letter-spacing | 0em | |
| letter-spacing/wide | letter-spacing | 0.04em | |
| duration/fast | duration | 150ms | |
| duration/base | duration | 200ms | |
| duration/slow | duration | 300ms | |
| font-weight/light | font-weight | 300 | |
| font-weight/regular | font-weight | 400 | |
| font-weight/medium | font-weight | 500 | |
| font-weight/semibold | font-weight | 600 | |
| font-weight/bold | font-weight | 700 | |
| font-family/latin | font-family | Plus Jakarta Sans, system-ui, sans-serif | |
| font-family/arabic | font-family | IBM Plex Sans Arabic, system-ui, sans-serif | |
| font-family/mono | font-family | ui-monospace, SFMono-Regular, Menlo, monospace | |
| shadow/xs | shadow | 0 1px 2px 0 rgb(16 24 40 / 0.05) | |
| shadow/sm | shadow | 0 1px 3px 0 rgb(16 24 40 / 0.10), 0 1px 2px 0 rgb(16 24 40 / 0.06) | |
| shadow/md | shadow | 0 4px 8px -2px rgb(16 24 40 / 0.10), 0 2px 4px -2px rgb(16 24 40 / 0.06) | |
| shadow/lg | shadow | 0 12px 16px -4px rgb(16 24 40 / 0.08), 0 4px 6px -2px rgb(16 24 40 / 0.03) | |
| shadow/xl | shadow | 0 20px 24px -4px rgb(16 24 40 / 0.08), 0 8px 8px -4px rgb(16 24 40 / 0.03) | |
| shadow/2xl | shadow | 0 24px 48px -12px rgb(16 24 40 / 0.18) | |
| shadow-dark/xs | shadow-dark | 0 1px 2px 0 rgb(0 0 0 / 0.40) | |
| shadow-dark/sm | shadow-dark | 0 1px 3px 0 rgb(0 0 0 / 0.50), 0 0 0 1px rgb(255 255 255 / 0.04) | |
| shadow-dark/md | shadow-dark | 0 4px 8px -2px rgb(0 0 0 / 0.50), 0 0 0 1px rgb(255 255 255 / 0.05) | |
| shadow-dark/lg | shadow-dark | 0 12px 16px -4px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.05) | |
| shadow-dark/xl | shadow-dark | 0 20px 24px -4px rgb(0 0 0 / 0.60), 0 0 0 1px rgb(255 255 255 / 0.06) | |
| shadow-dark/2xl | shadow-dark | 0 24px 48px -12px rgb(0 0 0 / 0.70), 0 0 0 1px rgb(255 255 255 / 0.06) | |
| easing/standard | easing | cubic-bezier(0.4, 0, 0.2, 1) | |
| easing/out | easing | cubic-bezier(0.22, 1, 0.36, 1) | |
| z-index/base | z-index | 0 | |
| z-index/raised | z-index | 10 | |
| z-index/sticky | z-index | 100 | |
| z-index/dropdown | z-index | 200 | |
| z-index/overlay | z-index | 300 | |
| z-index/modal | z-index | 400 | |
| z-index/popover | z-index | 500 | |
| z-index/toast | z-index | 600 | |
| z-index/max | z-index | 9999 | |
| opacity/disabled | opacity | 0.5 | |
| opacity/overlay | opacity | 0.5 | |
| breakpoint/xs | breakpoint | 480px | |
| breakpoint/sm | breakpoint | 640px | |
| breakpoint/md | breakpoint | 768px | |
| breakpoint/lg | breakpoint | 1024px | |
| breakpoint/xl | breakpoint | 1280px | |
| breakpoint/2xl | breakpoint | 1536px |