Themes

eUI ships 4 built-in themes: neutral, exponential, playful, orange. Each one below paints the same surface (the demo fixture, fixtures/demo-surface.json), in the site’s light or dark mode.

Neutral neutral

Release 0.18.84Shipped 02:14 · 3 platforms

Healthy

0 incidents

Error rate

0.04 %

p95 latency

182 ms

Rollout

Requests per minute

Requests per minute
	Requests
00:00	420
01:00	380
02:00	510
03:00	640
04:00	590
05:00	610
06:00	700

Exponential exponential

Release 0.18.84Shipped 02:14 · 3 platforms

Healthy

0 incidents

Error rate

0.04 %

p95 latency

182 ms

Rollout

Requests per minute

Requests per minute
	Requests
00:00	420
01:00	380
02:00	510
03:00	640
04:00	590
05:00	610
06:00	700

Playful playful

Release 0.18.84Shipped 02:14 · 3 platforms

Healthy

0 incidents

Error rate

0.04 %

p95 latency

182 ms

Rollout

Requests per minute

Requests per minute
	Requests
00:00	420
01:00	380
02:00	510
03:00	640
04:00	590
05:00	610
06:00	700

Orange orange

Release 0.18.84Shipped 02:14 · 3 platforms

Healthy

0 incidents

Error rate

0.04 %

p95 latency

182 ms

Rollout

Requests per minute

Requests per minute
	Requests
00:00	420
01:00	380
02:00	510
03:00	640
04:00	590
05:00	610
06:00	700

Tokens

A theme defines 129 tokens in 17 groups. A surface references them as $<group>.<name> (for example $color.background, $spacing.lg). Colours and shadows carry one value per mode. The tables list each built-in’s values, generated into docs/themes.generated.json.

Colour (per mode)

Token	Neutral	Exponential	Playful	Orange
`$color.background`	`light: #ffffffdark: #0a0a0a`	`light: #ffffffdark: #0a0a0a`	`light: #fffbf5dark: #1a1033`	`light: #ffffffdark: #0a0a0a`
`$color.foreground`	`light: #0a0a0adark: #fafafa`	`light: #0a0a0adark: #fafafa`	`light: #1f1235dark: #f5f3ff`	`light: #0a0a0adark: #fafafa`
`$color.card`	`light: #ffffffdark: #171717`	`light: #ffffffdark: #ffffff0f`	`light: #ffffffdark: #2a1b4d`	`light: #ffffffdark: #ffffff0f`
`$color.cardForeground`	`light: #0a0a0adark: #fafafa`	`light: #0a0a0adark: #fafafa`	`light: #1f1235dark: #f5f3ff`	`light: #0a0a0adark: #fafafa`
`$color.popover`	`light: #ffffffdark: #171717`	`light: #ffffffdark: #171717`	`light: #ffffffdark: #2a1b4d`	`light: #ffffffdark: #171717`
`$color.popoverForeground`	`light: #0a0a0adark: #fafafa`	`light: #0a0a0adark: #fafafa`	`light: #1f1235dark: #f5f3ff`	`light: #0a0a0adark: #fafafa`
`$color.primary`	`light: #171717dark: #e5e5e5`	`light: #171717dark: #e5e5e5`	`light: #7c3aeddark: #c4b5fd`	`light: #c2410cdark: #fb923c`
`$color.primaryForeground`	`light: #fafafadark: #171717`	`light: #fafafadark: #171717`	`light: #ffffffdark: #2e1065`	`light: #ffffffdark: #431407`
`$color.secondary`	`light: #f5f5f5dark: #262626`	`light: #f5f5f5dark: #ffffff0f`	`light: #ccfbf1dark: #134e4a`	`light: #f5f5f5dark: #ffffff0f`
`$color.secondaryForeground`	`light: #171717dark: #fafafa`	`light: #171717dark: #fafafa`	`light: #134e4adark: #ccfbf1`	`light: #171717dark: #fafafa`
`$color.muted`	`light: #f5f5f5dark: #262626`	`light: #f5f5f5dark: #ffffff0a`	`light: #f3e8ffdark: #3b2a63`	`light: #f5f5f5dark: #ffffff0a`
`$color.mutedForeground`	`light: #737373dark: #a1a1a1`	`light: #737373dark: #a1a1a1`	`light: #6b5b8adark: #c4b5fd`	`light: #737373dark: #a1a1a1`
`$color.accent`	`light: #f5f5f5dark: #262626`	`light: #f5f5f5dark: #ffffff1c`	`light: #ffe4e6dark: #4c1d95`	`light: #ffedd5dark: #431407`
`$color.accentForeground`	`light: #171717dark: #fafafa`	`light: #171717dark: #fafafa`	`light: #881337dark: #f5f3ff`	`light: #7c2d12dark: #fed7aa`
`$color.destructive`	`light: #e7000bdark: #ff6467`	`light: #e7000bdark: #ff6467`	`light: #e11d48dark: #fb7185`	`light: #e7000bdark: #ff6467`
`$color.destructiveForeground`	`light: #fafafadark: #fafafa`	`light: #ffffffdark: #0a0a0a`	`light: #ffffffdark: #4c0519`	`light: #ffffffdark: #0a0a0a`
`$color.success`	`light: #16a34adark: #22c55e`	`light: #22c55edark: #22c55e`	`light: #059669dark: #34d399`	`light: #22c55edark: #22c55e`
`$color.successForeground`	`light: #ffffffdark: #052e16`	`light: #ffffffdark: #052e16`	`light: #ffffffdark: #022c22`	`light: #ffffffdark: #052e16`
`$color.warning`	`light: #d97706dark: #f59e0b`	`light: #facc15dark: #facc15`	`light: #d97706dark: #fbbf24`	`light: #facc15dark: #facc15`
`$color.warningForeground`	`light: #ffffffdark: #1c1917`	`light: #1c1917dark: #1c1917`	`light: #ffffffdark: #451a03`	`light: #1c1917dark: #1c1917`
`$color.info`	`light: #2563ebdark: #3b82f6`	`light: #3b82f6dark: #3b82f6`	`light: #0284c7dark: #38bdf8`	`light: #3b82f6dark: #3b82f6`
`$color.infoForeground`	`light: #ffffffdark: #ffffff`	`light: #ffffffdark: #ffffff`	`light: #ffffffdark: #082f49`	`light: #ffffffdark: #ffffff`
`$color.border`	`light: #e5e5e5dark: #ffffff1a`	`light: #e5e5e5dark: #ffffff1a`	`light: #e9d5ffdark: #4c3a7a`	`light: #e5e5e5dark: #ffffff1a`
`$color.input`	`light: #e5e5e5dark: #ffffff26`	`light: #e5e5e5dark: #ffffff26`	`light: #ddd6fedark: #5b4a8a`	`light: #e5e5e5dark: #ffffff26`
`$color.ring`	`light: #a1a1a1dark: #737373`	`light: #a1a1a1dark: #737373`	`light: #a78bfadark: #a78bfa`	`light: #ea580cdark: #f97316`
`$color.chart1`	`light: #f54900dark: #1447e6`	`light: #f54900dark: #1447e6`	`light: #7c3aeddark: #c4b5fd`	`light: #ea580cdark: #fb923c`
`$color.chart2`	`light: #009689dark: #00bc7d`	`light: #009689dark: #00bc7d`	`light: #14b8a6dark: #5eead4`	`light: #f59e0bdark: #fbbf24`
`$color.chart3`	`light: #104e64dark: #fe9a00`	`light: #104e64dark: #fe9a00`	`light: #f43f5edark: #fda4af`	`light: #b91c1cdark: #f87171`
`$color.chart4`	`light: #ffb900dark: #ad46ff`	`light: #ffb900dark: #ad46ff`	`light: #f59e0bdark: #fcd34d`	`light: #0ea5e9dark: #38bdf8`
`$color.chart5`	`light: #fe9a00dark: #ff2056`	`light: #fe9a00dark: #ff2056`	`light: #0ea5e9dark: #7dd3fc`	`light: #7c3aeddark: #a78bfa`
`$color.chart6`	`light: #7c3aeddark: #a78bfa`	`light: #7c3aeddark: #a78bfa`	`light: #a855f7dark: #d8b4fe`	`light: #0d9488dark: #2dd4bf`
`$color.chart7`	`light: #db2777dark: #f472b6`	`light: #db2777dark: #f472b6`	`light: #ec4899dark: #f9a8d4`	`light: #db2777dark: #f472b6`
`$color.chart8`	`light: #0891b2dark: #22d3ee`	`light: #0891b2dark: #22d3ee`	`light: #22c55edark: #86efac`	`light: #65a30ddark: #a3e635`

Spacing (px)

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

Radius (px)

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

Type size (px)

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

Line height (px)

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

Font weight

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

Font family

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

Control heights (px)

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

Shadow (per mode)

Token	Neutral	Exponential	Playful	Orange
`$shadow.none`	`light: nonedark: none`	`light: nonedark: none`	`light: nonedark: none`	`light: nonedark: none`
`$shadow.sm`	`light: 0px 1px 2px 0px #0000000ddark: 0px 1px 2px 0px #00000033`	`light: 0px 1px 2px 0px #00000014dark: 0px 1px 2px 0px #00000066`	`light: 0px 2px 4px 0px #7c3aed1adark: 0px 2px 4px 0px #00000040`	`light: 0px 1px 2px 0px #00000014dark: 0px 1px 2px 0px #00000066`
`$shadow.md`	`light: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001adark: 0px 4px 6px -1px #00000066, 0px 2px 4px -2px #00000066`	`light: 0px 4px 12px -2px #00000014dark: 0px 4px 12px -2px #00000066`	`light: 0px 6px 12px -2px #7c3aed26dark: 0px 6px 12px -2px #00000059`	`light: 0px 4px 12px -2px #00000014dark: 0px 4px 12px -2px #00000066`
`$shadow.lg`	`light: 0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001adark: 0px 10px 15px -3px #00000066, 0px 4px 6px -4px #00000066`	`light: 0px 12px 32px -8px #00000014dark: 0px 12px 32px -8px #00000066`	`light: 0px 16px 32px -6px #7c3aed33dark: 0px 16px 32px -6px #00000073`	`light: 0px 12px 32px -8px #00000014dark: 0px 12px 32px -8px #00000066`
`$shadow.xl`	`light: 0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001adark: 0px 20px 25px -5px #00000080, 0px 8px 10px -6px #00000080`	`light: 0px 20px 48px -12px #00000014dark: 0px 20px 48px -12px #00000066`	`light: 0px 24px 48px -8px #7c3aed40dark: 0px 24px 48px -8px #00000080`	`light: 0px 20px 48px -12px #00000014dark: 0px 20px 48px -12px #00000066`

Opacity

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

Border width (px)

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

Motion (ms)

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

Breakpoint (px)

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

Easing

Token	Neutral	Exponential	Playful	Orange
`$ease.standard`	`[0.2,0,0,1]`	`[0.2,0,0,1]`	`[0.34,1.56,0.64,1]`	`[0.2,0,0,1]`
`$ease.decelerate`	`[0,0,0.2,1]`	`[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]`	`[0.3,0,1,1]`

Density scale

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

Backdrop blur (px)

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

Motion scale (gpui: fade only)

Token	Neutral	Exponential	Playful	Orange
`$scale.press`	`1`	`0.97`	`0.94`	`0.97`
`$scale.popoverFrom`	`0.95`	`0.96`	`0.9`	`0.96`

Your own theme

Write a theme

Theme builder