Runtime themes

Themes

One JSON file, loaded at runtime by every renderer: 126 tokens and per-part recipes. Below: one surface in each built-in.

Open the theme builder Write your own theme

One surface, three theme files, no code change.

Neutralneutral

Loading the renderer…

Exponentialneutral → exponential

Loading the renderer…

Playfulneutral → playful

Loading the renderer…

The token vocabulary

Every name a theme defines, as $group.name references a style or recipe uses, with the value each built-in gives it. A theme that extends another overrides only what changes.

Colour (per mode) · light above, dark below

Token	Neutral	Exponential	Playful
`$color.background`	`#ffffff#0a0a0a`	`#ffffff#0a0a0a`	`#fffbf5#1a1033`
`$color.foreground`	`#0a0a0a#fafafa`	`#0a0a0a#fafafa`	`#1f1235#f5f3ff`
`$color.card`	`#ffffff#171717`	`#ffffff#ffffff0f`	`#ffffff#2a1b4d`
`$color.cardForeground`	`#0a0a0a#fafafa`	`#0a0a0a#fafafa`	`#1f1235#f5f3ff`
`$color.popover`	`#ffffff#171717`	`#ffffff#171717`	`#ffffff#2a1b4d`
`$color.popoverForeground`	`#0a0a0a#fafafa`	`#0a0a0a#fafafa`	`#1f1235#f5f3ff`
`$color.primary`	`#171717#e5e5e5`	`#171717#e5e5e5`	`#7c3aed#c4b5fd`
`$color.primaryForeground`	`#fafafa#171717`	`#fafafa#171717`	`#ffffff#2e1065`
`$color.secondary`	`#f5f5f5#262626`	`#f5f5f5#ffffff0f`	`#ccfbf1#134e4a`
`$color.secondaryForeground`	`#171717#fafafa`	`#171717#fafafa`	`#134e4a#ccfbf1`
`$color.muted`	`#f5f5f5#262626`	`#f5f5f5#ffffff0a`	`#f3e8ff#3b2a63`
`$color.mutedForeground`	`#737373#a1a1a1`	`#737373#a1a1a1`	`#6b5b8a#c4b5fd`
`$color.accent`	`#f5f5f5#262626`	`#f5f5f5#ffffff1c`	`#ffe4e6#4c1d95`
`$color.accentForeground`	`#171717#fafafa`	`#171717#fafafa`	`#881337#f5f3ff`
`$color.destructive`	`#e7000b#ff6467`	`#e7000b#ff6467`	`#e11d48#fb7185`
`$color.destructiveForeground`	`#fafafa#fafafa`	`#ffffff#0a0a0a`	`#ffffff#4c0519`
`$color.success`	`#16a34a#22c55e`	`#22c55e#22c55e`	`#059669#34d399`
`$color.successForeground`	`#ffffff#052e16`	`#ffffff#052e16`	`#ffffff#022c22`
`$color.warning`	`#d97706#f59e0b`	`#facc15#facc15`	`#d97706#fbbf24`
`$color.warningForeground`	`#ffffff#1c1917`	`#1c1917#1c1917`	`#ffffff#451a03`
`$color.info`	`#2563eb#3b82f6`	`#3b82f6#3b82f6`	`#0284c7#38bdf8`
`$color.infoForeground`	`#ffffff#ffffff`	`#ffffff#ffffff`	`#ffffff#082f49`
`$color.border`	`#e5e5e5#ffffff1a`	`#e5e5e5#ffffff1a`	`#e9d5ff#4c3a7a`
`$color.input`	`#e5e5e5#ffffff26`	`#e5e5e5#ffffff26`	`#ddd6fe#5b4a8a`
`$color.ring`	`#a1a1a1#737373`	`#a1a1a1#737373`	`#a78bfa#a78bfa`
`$color.chart1`	`#f54900#1447e6`	`#f54900#1447e6`	`#7c3aed#c4b5fd`
`$color.chart2`	`#009689#00bc7d`	`#009689#00bc7d`	`#14b8a6#5eead4`
`$color.chart3`	`#104e64#fe9a00`	`#104e64#fe9a00`	`#f43f5e#fda4af`
`$color.chart4`	`#ffb900#ad46ff`	`#ffb900#ad46ff`	`#f59e0b#fcd34d`
`$color.chart5`	`#fe9a00#ff2056`	`#fe9a00#ff2056`	`#0ea5e9#7dd3fc`
`$color.chart6`	`#7c3aed#a78bfa`	`#7c3aed#a78bfa`	`#a855f7#d8b4fe`
`$color.chart7`	`#db2777#f472b6`	`#db2777#f472b6`	`#ec4899#f9a8d4`
`$color.chart8`	`#0891b2#22d3ee`	`#0891b2#22d3ee`	`#22c55e#86efac`

Spacing (px)

Token	Neutral	Exponential	Playful
`$spacing.none`	`0`	`0`	`0`
`$spacing.xxs`	`2`	`2`	`2`
`$spacing.xs`	`4`	`4`	`4`
`$spacing.sm`	`8`	`8`	`8`
`$spacing.md`	`12`	`12`	`12`
`$spacing.lg`	`16`	`16`	`16`
`$spacing.xl`	`24`	`24`	`24`
`$spacing.xl2`	`32`	`32`	`32`
`$spacing.xl3`	`48`	`48`	`48`

Radius (px)

Token	Neutral	Exponential	Playful
`$radius.none`	`0`	`0`	`0`
`$radius.sm`	`6`	`8`	`10`
`$radius.md`	`8`	`10`	`14`
`$radius.lg`	`10`	`12`	`18`
`$radius.xl`	`14`	`16`	`24`
`$radius.xl2`	`18`	`20`	`28`
`$radius.xl3`	`22`	`24`	`32`
`$radius.full`	`9999`	`9999`	`9999`

Type size (px)

Token	Neutral	Exponential	Playful
`$type.size.xs`	`12`	`12`	`12`
`$type.size.sm`	`14`	`14`	`14`
`$type.size.base`	`16`	`16`	`16`
`$type.size.lg`	`18`	`18`	`18`
`$type.size.xl`	`20`	`20`	`20`
`$type.size.xl2`	`24`	`24`	`24`
`$type.size.xl3`	`30`	`30`	`30`

Line height (px)

Token	Neutral	Exponential	Playful
`$type.lineHeight.xs`	`16`	`16`	`16`
`$type.lineHeight.sm`	`20`	`20`	`20`
`$type.lineHeight.base`	`24`	`24`	`24`
`$type.lineHeight.lg`	`28`	`28`	`28`
`$type.lineHeight.xl`	`28`	`28`	`28`
`$type.lineHeight.xl2`	`32`	`32`	`32`
`$type.lineHeight.xl3`	`36`	`36`	`36`

Font weight

Token	Neutral	Exponential	Playful
`$type.weight.regular`	`400`	`400`	`400`
`$type.weight.medium`	`500`	`500`	`600`
`$type.weight.semibold`	`600`	`600`	`700`
`$type.weight.bold`	`700`	`700`	`700`

Font family

Token	Neutral	Exponential	Playful
`$type.family.sans`	`Geist`	`Inter`	`Nunito`
`$type.family.mono`	`Geist Mono`	`ui-monospace`	`Fira Code`

Control heights (px)

Token	Neutral	Exponential	Playful
`$control.buttonSm`	`32`	`24`	`32`
`$control.buttonMd`	`36`	`32`	`40`
`$control.buttonLg`	`40`	`36`	`48`
`$control.buttonIcon`	`36`	`32`	`40`
`$control.input`	`36`	`36`	`44`
`$control.textarea`	`64`	`64`	`64`
`$control.row`	`40`	`32`	`44`
`$control.rowCompact`	`32`	`28`	`32`
`$control.pill`	`24`	`24`	`28`
`$control.badge`	`20`	`20`	`22`
`$control.chip`	`28`	`24`	`32`
`$control.toggle`	`36`	`32`	`40`
`$control.switch`	`20`	`20`	`24`
`$control.checkbox`	`16`	`16`	`20`
`$control.slider`	`16`	`16`	`16`
`$control.progress`	`8`	`8`	`8`
`$control.meter`	`8`	`8`	`8`
`$control.avatarSm`	`24`	`24`	`24`
`$control.avatarMd`	`32`	`32`	`32`
`$control.avatarLg`	`40`	`40`	`40`
`$control.iconSm`	`16`	`16`	`16`
`$control.iconMd`	`20`	`20`	`20`
`$control.iconLg`	`24`	`24`	`24`
`$control.hairline`	`1`	`1`	`1`
`$control.appBar`	`56`	`48`	`56`
`$control.tabBar`	`56`	`56`	`56`
`$control.toast`	`64`	`56`	`64`

Shadow (per mode) · light above, dark below

Token	Neutral	Exponential	Playful
`$shadow.none`	`nonenone`	`nonenone`	`nonenone`
`$shadow.sm`	`1 layer1 layer`	`1 layer1 layer`	`1 layer1 layer`
`$shadow.md`	`2 layers2 layers`	`1 layer1 layer`	`1 layer1 layer`
`$shadow.lg`	`2 layers2 layers`	`1 layer1 layer`	`1 layer1 layer`
`$shadow.xl`	`2 layers2 layers`	`1 layer1 layer`	`1 layer1 layer`

Opacity

Token	Neutral	Exponential	Playful
`$opacity.primary`	`1`	`1`	`1`
`$opacity.secondary`	`0.7`	`0.7`	`0.7`
`$opacity.tertiary`	`0.5`	`0.5`	`0.5`
`$opacity.quaternary`	`0.3`	`0.3`	`0.3`
`$opacity.disabled`	`0.5`	`0.5`	`0.5`

Border width (px)

Token	Neutral	Exponential	Playful
`$border.none`	`0`	`0`	`0`
`$border.hairline`	`1`	`1`	`2`
`$border.thick`	`2`	`2`	`3`

Motion (ms)

Token	Neutral	Exponential	Playful
`$motion.fast`	`120`	`120`	`160`
`$motion.standard`	`180`	`180`	`240`
`$motion.slow`	`280`	`280`	`360`

Breakpoint (px)

Token	Neutral	Exponential	Playful
`$breakpoint.sm`	`640`	`640`	`640`
`$breakpoint.md`	`768`	`768`	`768`
`$breakpoint.lg`	`1024`	`1024`	`1024`
`$breakpoint.xl`	`1280`	`1280`	`1280`

Easing

Token	Neutral	Exponential	Playful
`$ease.standard`	`[0.2,0,0,1]`	`[0.2,0,0,1]`	`[0.34,1.56,0.64,1]`
`$ease.decelerate`	`[0,0,0.2,1]`	`[0,0,0.2,1]`	`[0,0,0.2,1]`
`$ease.accelerate`	`[0.3,0,1,1]`	`[0.3,0,1,1]`	`[0.3,0,1,1]`

Density scale

Token	Neutral	Exponential	Playful
`$density.compact`	`0.875`	`0.875`	`0.9`
`$density.comfortable`	`1.125`	`1.125`	`1.2`

Backdrop blur (px)

Token	Neutral	Exponential	Playful
`$blur.sm`	`4`	`4`	`4`
`$blur.md`	`12`	`12`	`12`
`$blur.lg`	`16`	`16`	`16`
`$blur.xl`	`24`	`24`	`24`

Theme builderPick a base, edit tokens and recipes over a live preview, import a shadcn globals.css, export the JSON.Write your own themeThe file format, extends, recipes and fonts, and how a host loads a theme from a URL.