Token reference
The JSON documents under crates/gpui-kit-tokens/tokens/ are the authority. These tables are
a review aid, and every theme below is validated on each run.
Studio Dark (studio-dark)
Appearance: Dark.
Palette
| Token | Value |
|---|---|
color.palette.amber.500 | #ffb900 |
color.palette.cyan.400 | #7fb3cf |
color.palette.green.500 | #57c47f |
color.palette.indigo.400 | #7c86ff |
color.palette.indigo.600 | #5865f2 |
color.palette.loader.blue | #b6d3ef |
color.palette.loader.orange | #edb185 |
color.palette.loader.pink | #f888a0 |
color.palette.neutral.0 | #000000 |
color.palette.neutral.100 | #151515 |
color.palette.neutral.150 | #1c1c1c |
color.palette.neutral.200 | #242424 |
color.palette.neutral.25 | #050505 |
color.palette.neutral.300 | #303030 |
color.palette.neutral.50 | #0a0a0a |
color.palette.neutral.500 | #565656 |
color.palette.neutral.600 | #737373 |
color.palette.neutral.700 | #a1a1a1 |
color.palette.neutral.800 | #e9e9e9 |
color.palette.neutral.850 | #ebebeb |
color.palette.neutral.900 | #ffffff |
color.palette.neutral.ink | #0e0e0e |
color.palette.red.400 | #ff6467 |
Semantic color
| Token | Source | Resolved |
|---|---|---|
color.surface.canvas | {neutral.50} | #0a0a0a |
color.surface.panel | {neutral.100} | #151515 |
color.surface.raised | {neutral.200} | #242424 |
color.surface.overlay | {neutral.150} | #1c1c1c |
color.text.primary | {neutral.800} | #e9e9e9 |
color.text.muted | {neutral.700} | #a1a1a1 |
color.text.faint | {neutral.600} | #737373 |
color.text.onAccent | {neutral.ink} | #0e0e0e |
color.interactive.hover | {neutral.850}/24 | #ebebeb24 |
color.interactive.active | {neutral.850}/29 | #ebebeb29 |
color.interactive.selected | {neutral.850}/24 | #ebebeb24 |
color.interactive.hairline | {neutral.900}/14 | #ffffff14 |
color.interactive.hairlineStrong | {neutral.900}/24 | #ffffff24 |
color.interactive.focus | {indigo.400} | #7c86ff |
color.semantic.accent | {indigo.400} | #7c86ff |
color.semantic.accentStrong | {indigo.600} | #5865f2 |
color.semantic.danger | {red.400} | #ff6467 |
color.semantic.warning | {amber.500} | #ffb900 |
color.semantic.success | {green.500} | #57c47f |
color.semantic.info | {cyan.400} | #7fb3cf |
color.loader.gradient.0 | {loader.blue} | #b6d3ef |
color.loader.gradient.1 | {loader.orange} | #edb185 |
color.loader.gradient.2 | {loader.pink} | #f888a0 |
Spacing
| Step | Pixels |
|---|---|
xs | 4 |
sm | 8 |
md | 12 |
lg | 16 |
xl | 24 |
xxl | 32 |
Radius
| Step | Pixels |
|---|---|
small | 5 |
control | 8 |
card | 12 |
dialog | 16 |
bubble | 16 |
pill | 999 |
Control scale
| Step | Height | Padding X | Gap | Font | Icon |
|---|---|---|---|---|---|
xs | 20 | 6 | 4 | 11 | 12 |
sm | 24 | 8 | 5 | 12 | 14 |
md | 28 | 12 | 6 | 13 | 15 |
lg | 34 | 16 | 8 | 14 | 17 |
Density
| Axis | Space | Control | Font |
|---|---|---|---|
compact | 0.75 | 0.86 | 0.94 |
comfortable | 1 | 1 | 1 |
Elevation
| Step | Y | Blur | Spread | Color |
|---|---|---|---|---|
flat | 0 | 0 | 0 | #00000000 |
raised | 2 | 6 | -1 | #00000059 |
overlay | 8 | 24 | -4 | #00000066 |
modal | 16 | 48 | -8 | #0000008c |
Layers
| Layer | Z index |
|---|---|
Content | 0 |
Sticky | 100 |
Dock | 200 |
Popover | 300 |
Tooltip | 400 |
Modal | 500 |
Toast | 600 |
Motion
| Easing | Curve |
|---|---|
linear | [0.0, 0.0, 1.0, 1.0] |
standard | [0.4, 0.0, 0.2, 1.0] |
easeIn | [0.42, 0.0, 1.0, 1.0] |
easeOut | [0.0, 0.0, 0.58, 1.0] |
easeInOut | [0.42, 0.0, 0.58, 1.0] |
emphasized | [0.2, 0.0, 0.0, 1.0] |
overshoot | [0.34, 1.56, 0.64, 1.0] |
exit | [0.0, 0.0, 0.58, 1.0] |
settle | [0.16, 1.0, 0.3, 1.0] |
| Spring | Stiffness | Damping | Mass |
|---|---|---|---|
snappy | 380 | 30 | 1 |
smooth | 180 | 26 | 1 |
bouncy | 260 | 16 | 1 |
grab | 520 | 42 | 1 |
| Response | Pixels |
|---|---|
motion.pressOffsetPx | 1 |
motion.hoverLiftPx | 1 |
| Gesture | Value |
|---|---|
motion.flickVelocityPxPerSec | 420 |
motion.rubberBandTension | 0.55 |
Border and opacity
| Token | Value |
|---|---|
border.hairline | 1 |
border.thick | 2 |
opacity.disabled | 0.45 |
opacity.muted | 0.68 |
opacity.scrim | 0.6 |
Effects
| Token | Value |
|---|---|
effect.edgeFadeBand | 20 |
effect.selectedRingAlpha | 0.09 |
effect.focusRingWidth | 2 |
effect.focusRingAlpha | 0.55 |
Contrast
| Foreground | Background | Ratio | Minimum |
|---|---|---|---|
text.primary | surface.canvas | 16.31 | 4.5 |
text.muted | surface.canvas | 7.66 | 4.5 |
text.faint | surface.canvas | 4.18 | 3.0 |
semantic.danger | surface.canvas | 6.85 | 3.0 |
semantic.warning | surface.canvas | 11.49 | 3.0 |
semantic.success | surface.canvas | 9.06 | 3.0 |
semantic.info | surface.canvas | 8.72 | 3.0 |
semantic.accent | surface.canvas | 6.33 | 3.0 |
text.primary | surface.panel | 15.04 | 4.5 |
text.muted | surface.panel | 7.07 | 4.5 |
text.faint | surface.panel | 3.85 | 3.0 |
semantic.danger | surface.panel | 6.32 | 3.0 |
semantic.warning | surface.panel | 10.60 | 3.0 |
semantic.success | surface.panel | 8.35 | 3.0 |
semantic.info | surface.panel | 8.04 | 3.0 |
semantic.accent | surface.panel | 5.84 | 3.0 |
text.primary | surface.raised | 12.79 | 4.5 |
text.muted | surface.raised | 6.01 | 4.5 |
text.faint | surface.raised | 3.27 | 3.0 |
semantic.danger | surface.raised | 5.37 | 3.0 |
semantic.warning | surface.raised | 9.01 | 3.0 |
semantic.success | surface.raised | 7.10 | 3.0 |
semantic.info | surface.raised | 6.84 | 3.0 |
semantic.accent | surface.raised | 4.96 | 3.0 |
text.primary | surface.overlay | 14.04 | 4.5 |
text.muted | surface.overlay | 6.60 | 4.5 |
text.faint | surface.overlay | 3.59 | 3.0 |
semantic.danger | surface.overlay | 5.90 | 3.0 |
semantic.warning | surface.overlay | 9.89 | 3.0 |
semantic.success | surface.overlay | 7.80 | 3.0 |
semantic.info | surface.overlay | 7.51 | 3.0 |
semantic.accent | surface.overlay | 5.45 | 3.0 |
text.onAccent | semantic.accent | 6.17 | 4.5 |
Studio Light (studio-light)
Appearance: Light.
Palette
| Token | Value |
|---|---|
color.palette.amber.500 | #a76a00 |
color.palette.cyan.400 | #2a6f8f |
color.palette.green.500 | #237a48 |
color.palette.indigo.400 | #4f5bd5 |
color.palette.indigo.600 | #3b46b8 |
color.palette.loader.blue | #6ba7e0 |
color.palette.loader.orange | #d98442 |
color.palette.loader.pink | #e2557a |
color.palette.neutral.0 | #000000 |
color.palette.neutral.100 | #ffffff |
color.palette.neutral.150 | #ffffff |
color.palette.neutral.200 | #ffffff |
color.palette.neutral.25 | #e6e6ea |
color.palette.neutral.300 | #e0e0e5 |
color.palette.neutral.50 | #eeeef1 |
color.palette.neutral.500 | #a3a3a9 |
color.palette.neutral.600 | #86868c |
color.palette.neutral.700 | #55555c |
color.palette.neutral.800 | #17171a |
color.palette.neutral.850 | #0a0a0c |
color.palette.neutral.900 | #ffffff |
color.palette.neutral.ink | #ffffff |
color.palette.red.400 | #d5322f |
Semantic color
| Token | Source | Resolved |
|---|---|---|
color.surface.canvas | {neutral.50} | #eeeef1 |
color.surface.panel | {neutral.100} | #ffffff |
color.surface.raised | {neutral.200} | #ffffff |
color.surface.overlay | {neutral.150} | #ffffff |
color.text.primary | {neutral.800} | #17171a |
color.text.muted | {neutral.700} | #55555c |
color.text.faint | {neutral.600} | #86868c |
color.text.onAccent | {neutral.ink} | #ffffff |
color.interactive.hover | {neutral.850}/0f | #0a0a0c0f |
color.interactive.active | {neutral.850}/1a | #0a0a0c1a |
color.interactive.selected | {neutral.850}/0f | #0a0a0c0f |
color.interactive.hairline | {neutral.850}/1a | #0a0a0c1a |
color.interactive.hairlineStrong | {neutral.850}/2e | #0a0a0c2e |
color.interactive.focus | {indigo.400} | #4f5bd5 |
color.semantic.accent | {indigo.400} | #4f5bd5 |
color.semantic.accentStrong | {indigo.600} | #3b46b8 |
color.semantic.danger | {red.400} | #d5322f |
color.semantic.warning | {amber.500} | #a76a00 |
color.semantic.success | {green.500} | #237a48 |
color.semantic.info | {cyan.400} | #2a6f8f |
color.loader.gradient.0 | {loader.blue} | #6ba7e0 |
color.loader.gradient.1 | {loader.orange} | #d98442 |
color.loader.gradient.2 | {loader.pink} | #e2557a |
Spacing
| Step | Pixels |
|---|---|
xs | 4 |
sm | 8 |
md | 12 |
lg | 16 |
xl | 24 |
xxl | 32 |
Radius
| Step | Pixels |
|---|---|
small | 5 |
control | 8 |
card | 12 |
dialog | 16 |
bubble | 16 |
pill | 999 |
Control scale
| Step | Height | Padding X | Gap | Font | Icon |
|---|---|---|---|---|---|
xs | 20 | 6 | 4 | 11 | 12 |
sm | 24 | 8 | 5 | 12 | 14 |
md | 28 | 12 | 6 | 13 | 15 |
lg | 34 | 16 | 8 | 14 | 17 |
Density
| Axis | Space | Control | Font |
|---|---|---|---|
compact | 0.75 | 0.86 | 0.94 |
comfortable | 1 | 1 | 1 |
Elevation
| Step | Y | Blur | Spread | Color |
|---|---|---|---|---|
flat | 0 | 0 | 0 | #00000000 |
raised | 2 | 6 | -1 | #0000001f |
overlay | 8 | 24 | -4 | #0000001f |
modal | 16 | 48 | -8 | #00000029 |
Layers
| Layer | Z index |
|---|---|
Content | 0 |
Sticky | 100 |
Dock | 200 |
Popover | 300 |
Tooltip | 400 |
Modal | 500 |
Toast | 600 |
Motion
| Easing | Curve |
|---|---|
linear | [0.0, 0.0, 1.0, 1.0] |
standard | [0.4, 0.0, 0.2, 1.0] |
easeIn | [0.42, 0.0, 1.0, 1.0] |
easeOut | [0.0, 0.0, 0.58, 1.0] |
easeInOut | [0.42, 0.0, 0.58, 1.0] |
emphasized | [0.2, 0.0, 0.0, 1.0] |
overshoot | [0.34, 1.56, 0.64, 1.0] |
exit | [0.0, 0.0, 0.58, 1.0] |
settle | [0.16, 1.0, 0.3, 1.0] |
| Spring | Stiffness | Damping | Mass |
|---|---|---|---|
snappy | 380 | 30 | 1 |
smooth | 180 | 26 | 1 |
bouncy | 260 | 16 | 1 |
grab | 520 | 42 | 1 |
| Response | Pixels |
|---|---|
motion.pressOffsetPx | 1 |
motion.hoverLiftPx | 1 |
| Gesture | Value |
|---|---|
motion.flickVelocityPxPerSec | 420 |
motion.rubberBandTension | 0.55 |
Border and opacity
| Token | Value |
|---|---|
border.hairline | 1 |
border.thick | 2 |
opacity.disabled | 0.45 |
opacity.muted | 0.68 |
opacity.scrim | 0.35 |
Effects
| Token | Value |
|---|---|
effect.edgeFadeBand | 20 |
effect.selectedRingAlpha | 0.12 |
effect.focusRingWidth | 2 |
effect.focusRingAlpha | 0.45 |
Contrast
| Foreground | Background | Ratio | Minimum |
|---|---|---|---|
text.primary | surface.canvas | 15.45 | 4.5 |
text.muted | surface.canvas | 6.39 | 4.5 |
text.faint | surface.canvas | 3.13 | 3.0 |
semantic.danger | surface.canvas | 4.19 | 3.0 |
semantic.warning | surface.canvas | 3.85 | 3.0 |
semantic.success | surface.canvas | 4.59 | 3.0 |
semantic.info | surface.canvas | 4.81 | 3.0 |
semantic.accent | surface.canvas | 4.79 | 3.0 |
text.primary | surface.panel | 17.89 | 4.5 |
text.muted | surface.panel | 7.39 | 4.5 |
text.faint | surface.panel | 3.62 | 3.0 |
semantic.danger | surface.panel | 4.85 | 3.0 |
semantic.warning | surface.panel | 4.46 | 3.0 |
semantic.success | surface.panel | 5.32 | 3.0 |
semantic.info | surface.panel | 5.57 | 3.0 |
semantic.accent | surface.panel | 5.54 | 3.0 |
text.primary | surface.raised | 17.89 | 4.5 |
text.muted | surface.raised | 7.39 | 4.5 |
text.faint | surface.raised | 3.62 | 3.0 |
semantic.danger | surface.raised | 4.85 | 3.0 |
semantic.warning | surface.raised | 4.46 | 3.0 |
semantic.success | surface.raised | 5.32 | 3.0 |
semantic.info | surface.raised | 5.57 | 3.0 |
semantic.accent | surface.raised | 5.54 | 3.0 |
text.primary | surface.overlay | 17.89 | 4.5 |
text.muted | surface.overlay | 7.39 | 4.5 |
text.faint | surface.overlay | 3.62 | 3.0 |
semantic.danger | surface.overlay | 4.85 | 3.0 |
semantic.warning | surface.overlay | 4.46 | 3.0 |
semantic.success | surface.overlay | 5.32 | 3.0 |
semantic.info | surface.overlay | 5.57 | 3.0 |
semantic.accent | surface.overlay | 5.54 | 3.0 |
text.onAccent | semantic.accent | 5.54 | 4.5 |