Foundation values powering the design system
Semantic tokens for consistent component styling
primary
Primary buttons, links, focus rings
secondary
Secondary buttons, subtle actions
muted
Subdued backgrounds, disabled states
accent
Highlights, hover states, badges
destructive
Delete actions, error states
success
Positive feedback, confirmations, completed states
info
Informational messages, tips, neutral highlights
background
Page backgrounds
card
Card surfaces, elevated content
popover
Dropdowns, dialogs, tooltips
border
Default borders
input
Form input backgrounds
ring
Focus rings
neutral.0
hsl(0 0% 100%)neutral.50
hsl(30 20% 98%)neutral.100
hsl(30 12% 94%)neutral.200
hsl(28 10% 86%)neutral.300
hsl(26 8% 70%)neutral.400
hsl(24 6% 55%)neutral.500
hsl(22 6% 45%)neutral.600
hsl(20 6% 38%)neutral.700
hsl(18 7% 28%)neutral.800
hsl(16 8% 20%)neutral.900
hsl(14 10% 13%)neutral.950
hsl(12 12% 9%)accent.50
hsl(20 25% 96%)accent.100
hsl(20 25% 92%)accent.200
hsl(19 30% 85%)accent.300
hsl(18 35% 72%)accent.400
hsl(18 40% 60%)accent.500
hsl(18 45% 52%)accent.600
hsl(18 45% 45%)accent.700
hsl(18 42% 38%)accent.800
hsl(17 40% 30%)accent.900
hsl(16 38% 22%)accent.950
hsl(15 35% 15%)success.50
hsl(145 45% 96%)success.500
hsl(145 50% 42%)success.600
hsl(145 55% 34%)success.700
hsl(145 55% 26%)warning.50
hsl(40 90% 96%)warning.500
hsl(40 95% 48%)warning.600
hsl(38 95% 40%)warning.700
hsl(36 90% 32%)error.50
hsl(4 90% 96%)error.500
hsl(4 75% 55%)error.600
hsl(4 75% 46%)error.700
hsl(4 70% 38%)info.50
hsl(200 70% 96%)info.500
hsl(200 75% 45%)info.600
hsl(200 75% 38%)info.700
hsl(200 70% 30%)Transparent overlays for hover/press states on any background
subtleVery subtle hover hint, image overlays
hoverStandard hover state for buttons, cards
activePress/active state, selected items
strongStrong emphasis, image text overlays
8px base grid system for consistent spacing
px1px000.50.125rem(2px)10.25rem(4px)1.50.375rem(6px)20.5rem(8px)2.50.625rem(10px)30.75rem(12px)3.50.875rem(14px)41rem(16px)51.25rem(20px)61.5rem(24px)71.75rem(28px)82rem(32px)92.25rem(36px)102.5rem(40px)112.75rem(44px)123rem(48px)143.5rem(56px)164rem(64px)205rem(80px)246rem(96px)287rem(112px)328rem(128px)369rem(144px)4010rem(160px)4411rem(176px)4812rem(192px)5213rem(208px)5614rem(224px)6015rem(240px)6416rem(256px)7218rem(288px)8020rem(320px)9624rem(384px)Font sizes, weights, line heights, and letter spacing
xs0.75rem(12px)sm0.875rem(14px)base1rem(16px)lg1.125rem(18px)xl1.25rem(20px)2xl1.5rem(24px)3xl1.875rem(30px)4xl2.25rem(36px)5xl3rem(48px)6xl3.75rem(60px)7xl4.5rem(72px)8xl6rem(96px)9xl8rem(128px)thin100extralight200light300normal400medium500semibold600bold700extrabold800black900none1tight1.25snug1.375normal1.5relaxed1.625loose2tighter-0.05emtight-0.025emnormal0emwide0.025emwider0.05emwidest0.1emCorner radius values for consistent rounding
none0sm0.125rem(2px)default0.25rem(4px)md0.375rem(6px)lg0.5rem(8px)xl0.75rem(12px)2xl1rem(16px)3xl1.5rem(24px)full9999pxElevation system for depth and hierarchy
none0 1px 2px 0 rgb(0 0 0 / 0.05)0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)0 25px 50px -12px rgb(0 0 0 / 0.25)inset 0 2px 4px 0 rgb(0 0 0 / 0.05)Duration and easing values for consistent motion
instant0msfast150msnormal300msslow500msslower700msslowest1000mslinearlinearincubic-bezier(0.4, 0, 1, 1)outcubic-bezier(0, 0, 0.2, 1)inOutcubic-bezier(0.4, 0, 0.2, 1)bouncecubic-bezier(0.68, -0.55, 0.265, 1.55)Responsive design breakpoints for different screen sizes
sm640pxmd768pxlg1024pxxl1280px2xl1536pxLayering tokens for stacking context management
0010102020303040405050autoautodropdown1000sticky1100overlay1200modal1300popover1400tooltip1500