Design Tokens
Aether UI's token system defines the complete visual language — colors, typography, spacing, radius, shadows, and motion. All values live in @aetherstack/tokens and are consumed by Tailwind CSS via CSS variables.
Color Palette
Raw HSL values (without the hsl() wrapper). Scale: 0–950.
neutral
0
50
100
200
300
400
500
600
700
800
900
950
violet
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
green
50
100
200
300
400
500
600
700
800
900
950
red
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950
Semantic Tokens
CSS variable contract consumed by all components. Light and dark values are set via :root and .dark.
VariableLightDark
--background
0 0% 100%
274 66% 4%
--foreground
274 66% 19%
0 0% 98%
--card
0 0% 100%
272 57% 9%
--card-foreground
274 66% 19%
0 0% 98%
--popover
0 0% 100%
272 57% 9%
--popover-foreground
274 66% 19%
0 0% 98%
--primary
269 74% 57%
267 84% 65%
--primary-foreground
0 0% 100%
274 66% 4%
--secondary
0 0% 96%
0 0% 15%
--secondary-foreground
272 57% 32%
0 0% 98%
--muted
0 0% 96%
0 0% 15%
--muted-foreground
0 0% 45%
0 0% 64%
--accent
0 0% 96%
0 0% 15%
--accent-foreground
272 57% 32%
0 0% 98%
--destructive
0 72% 51%
0 84% 60%
--destructive-foreground
0 0% 100%
274 66% 4%
--border
0 0% 90%
0 0% 15%
--input
0 0% 90%
0 0% 15%
--ring
269 74% 57%
267 84% 65%
--sidebar-background
0 0% 98%
272 57% 9%
--sidebar-foreground
0 0% 25%
0 0% 83%
--sidebar-primary
269 74% 57%
267 84% 65%
--sidebar-primary-foreground
0 0% 100%
274 66% 4%
--sidebar-accent
0 0% 96%
0 0% 15%
--sidebar-accent-foreground
272 57% 32%
0 0% 98%
--sidebar-border
0 0% 90%
0 0% 15%
--sidebar-ring
269 74% 57%
267 84% 65%
Typography
Font Sizes
Aa
xs0.75rem / lh 1rem
Aa
sm0.875rem / lh 1.25rem
Aa
base1rem / lh 1.5rem
Aa
lg1.125rem / lh 1.75rem
Aa
xl1.25rem / lh 1.75rem
Aa
2xl1.5rem / lh 2rem
Aa
3xl1.875rem / lh 2.25rem
Aa
4xl2.25rem / lh 2.5rem
Aa
5xl3rem / lh 1
Aa
6xl3.75rem / lh 1
Aa
7xl4.5rem / lh 1
Aa
8xl6rem / lh 1
Aa
9xl8rem / lh 1
Font Weights
Ag
thin100
Ag
extralight200
Ag
light300
Ag
normal400
Ag
medium500
Ag
semibold600
Ag
bold700
Ag
extrabold800
Ag
black900
Spacing
Mirrors the Tailwind default spacing scale.
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
71.75rem
82rem
92.25rem
102.5rem
112.75rem
123rem
143.5rem
164rem
205rem
246rem
287rem
328rem
369rem
4010rem
Border Radius
Derived relative to --radius (default: 0.5rem).
none0px
smcalc(var(--radius) - 4px)
mdcalc(var(--radius) - 2px)
DEFAULTvar(--radius)
lgvar(--radius)
xlcalc(var(--radius) + 4px)
2xlcalc(var(--radius) + 8px)
3xlcalc(var(--radius) + 16px)
full9999px
Shadows
nonenone
xs0 1px 2px 0 rgb(0 0 0 / 0.05)
sm0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
DEFAULT0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
xl0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
2xl0 25px 50px -12px rgb(0 0 0 / 0.25)
innerinset 0 2px 4px 0 rgb(0 0 0 / 0.05)
Motion
Durations
instant0ms
fast100ms
normal200ms
slow300ms
slower500ms
lazy700ms
Easings
linearlinear
incubic-bezier(0.4, 0, 1, 1)
outcubic-bezier(0, 0, 0.2, 1)
inOutcubic-bezier(0.4, 0, 0.2, 1)
springcubic-bezier(0.34, 1.56, 0.64, 1)
overshootcubic-bezier(0.36, 0.07, 0.19, 0.97)
Transitions
colorscolor 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 200ms cubic-bezier(0.4, 0, 0.2, 1), fill 200ms cubic-bezier(0.4, 0, 0.2, 1), stroke 200ms cubic-bezier(0.4, 0, 0.2, 1)
opacityopacity 200ms cubic-bezier(0.4, 0, 0.2, 1)
shadowbox-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1)
transformtransform 200ms cubic-bezier(0.4, 0, 0.2, 1)
allall 200ms cubic-bezier(0.4, 0, 0.2, 1)