Raycast Design Tokens
Productivity launcher and developer tools
Command palette UI
Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.
Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.
Colors
#07080a
#ffffff
#59d499
#ffcdcd
#6a6b6c
#434345
primary#ffcdcd
background#07080a
text#ffffff
accent#59d499
Typography
Inter, Inter Fallback
hero:64px / 600
body:16px / 400
button:24px / 500
weights:400, 500, 600
leading:1, 1.1, 1.4, 1.6
tracking:-0.02em, 0, 0.04em
Shadows
sm
md
lg
Spacing
1px2px2.5px3px4px8px
Border Radius
2px
2.5px
3px
4px
5px
Borders
1px solid rgba(255, 255, 255, 0.1)
1px solid rgba(255, 255, 255, 0.06)
Links
Link text#9c9c9d · no underline
Gradients
linear-gradient(135deg, #56c2ff 0%, #138af2 100%)
radial-gradient(75% 75% at 50% 91.9%, #121212 0px, #0d0d0d 100%)
Opacity
0
0.04
0.08
0.16
0.4
0.64
0.92
1
Breakpoints
375px480px640px768px1024px1204px
Motion
Duration120ms180ms280ms420ms
Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear
Contrast · WCAG 2.2
Aa
Button label
10.60:1
Aa
Body text
20.04:1
Button States
Radix UIDefault
#e6e6e6Hover
#000000Active
#ffffffFocus
focusDisabled
disabledLoading
loadingradius: 8pxpadding: 8px 12px
output.json
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"palette-1": {
"$type": "color",
"$value": "#07080a"
},
"palette-2": {
"$type": "color",
"$value": "#ffffff"
},
"palette-3": {
"$type": "color",
"$value": "#59d499"
},
"palette-4": {
"$type": "color",
"$value": "#ffcdcd"
},
"palette-5": {
"$type": "color",
"$value": "#6a6b6c"
},
"palette-6": {
"$type": "color",
"$value": "#434345"
},
"primary": {
"$type": "color",
"$value": "#ffcdcd"
},
"background": {
"$type": "color",
"$value": "#07080a"
},
"text": {
"$type": "color",
"$value": "#ffffff"
},
"accent": {
"$type": "color",
"$value": "#59d499"
},
"link": {
"$type": "color",
"$value": "#9c9c9d"
}
},
"border": {
"border-1": {
"$type": "border",
"$value": "1px solid rgba(255, 255, 255, 0.1)"
},
"border-2": {
"$type": "border",
"$value": "1px solid rgba(255, 255, 255, 0.06)"
}
},
"gradient": {
"gradient-1": {
"$type": "gradient",
"$value": "linear-gradient(135deg, #56c2ff 0%, #138af2 100%)"
},
"gradient-2": {
"$type": "gradient",
"$value": "radial-gradient(75% 75% at 50% 91.9%, #121212 0px, #0d0d0d 100%)"
}
},
"fontFamily": {
"base": {
"$type": "fontFamily",
"$value": "Inter, Inter Fallback"
}
},
"fontWeight": {
"weight-400": {
"$type": "fontWeight",
"$value": 400
},
"weight-500": {
"$type": "fontWeight",
"$value": 500
},
"weight-600": {
"$type": "fontWeight",
"$value": 600
}
},
"dimension": {
"space-1": {
"$type": "dimension",
"$value": "1px"
},
"space-2": {
"$type": "dimension",
"$value": "2px"
},
"space-3": {
"$type": "dimension",
"$value": "2.5px"
},
"space-4": {
"$type": "dimension",
"$value": "3px"
},
"space-5": {
"$type": "dimension",
"$value": "4px"
},
"space-6": {
"$type": "dimension",
"$value": "8px"
},
"radius-1": {
"$type": "dimension",
"$value": "2px"
},
"radius-2": {
"$type": "dimension",
"$value": "2.5px"
},
"radius-3": {
"$type": "dimension",
"$value": "3px"
},
"radius-4": {
"$type": "dimension",
"$value": "4px"
},
"radius-5": {
"$type": "dimension",
"$value": "5px"
}
},
"shadow": {
"shadow-1": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset"
},
"shadow-2": {
"$type": "shadow",
"$value": "rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset"
},
"shadow-3": {
"$type": "shadow",
"$value": "rgba(215, 201, 175, 0.05) 0px 0px 20px 5px"
}
},
"opacity": {
"opacity-0": {
"$type": "number",
"$value": 0
},
"opacity-1": {
"$type": "number",
"$value": 0.04
},
"opacity-2": {
"$type": "number",
"$value": 0.08
},
"opacity-3": {
"$type": "number",
"$value": 0.16
},
"opacity-4": {
"$type": "number",
"$value": 0.4
},
"opacity-5": {
"$type": "number",
"$value": 0.64
},
"opacity-6": {
"$type": "number",
"$value": 0.92
},
"opacity-7": {
"$type": "number",
"$value": 1
}
},
"duration": {
"duration-1": {
"$type": "duration",
"$value": "120ms"
},
"duration-2": {
"$type": "duration",
"$value": "180ms"
},
"duration-3": {
"$type": "duration",
"$value": "280ms"
},
"duration-4": {
"$type": "duration",
"$value": "420ms"
}
},
"cubicBezier": {
"ease-1": {
"$type": "cubicBezier",
"$value": "cubic-bezier(0.4, 0, 0.2, 1)"
},
"ease-2": {
"$type": "cubicBezier",
"$value": "cubic-bezier(0.16, 1, 0.3, 1)"
},
"ease-3": {
"$type": "cubicBezier",
"$value": "linear"
}
},
"breakpoint": {
"bp-1": {
"$type": "dimension",
"$value": "375px"
},
"bp-2": {
"$type": "dimension",
"$value": "480px"
},
"bp-3": {
"$type": "dimension",
"$value": "640px"
},
"bp-4": {
"$type": "dimension",
"$value": "768px"
},
"bp-5": {
"$type": "dimension",
"$value": "1024px"
},
"bp-6": {
"$type": "dimension",
"$value": "1204px"
}
},
"contrast": {
"button-label": {
"ratio": 10.6,
"grade": "AAA"
},
"body-text": {
"ratio": 20.04,
"grade": "AAA"
}
}
}
// ...and moreOther token exports
--dtcgW3C token JSON, checked by the DTCG Validator
--design-mdDESIGN.md for agents and docs
--brand-guideBrand guide PDF
--wcagPalette-wide contrast report
All flags in the CLI quickstart. Same tokens in your editor via the MCP server.
$npx dembrandt raycast.com