Studio
Studio
The Raycast design system uses a dark-themed visual language. The primary brand color is Ash 50 (#e6e6e6); text is Snow (#ffffff) on a Void Black (#040506) background. Typography is set in Inter, GeistMono and SF Pro Text. This DESIGN.md contains 13 color tokens and a 7-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Raycast.
Independent Style Review
Obsidian command terminal — a near-black void where UI surfaces emerge like backlit glass panels, depth created by shadow layering rather than color contrast.
Raycast lives in near-total darkness — a #040506 void where UI surfaces emerge as barely-lighter charcoal strata rather than conventional cards. The signature move is depth through shadow layering: the keyboard-key shadow 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, rgba(255,255,255,0.2) 0px 1px 1px 1px inset makes interactive elements feel physically pressable — a tactile metaphor for keyboard shortcuts. The brand red (#FF6363) appears sparingly as a status signal and logo accent rather than a CTA color; primary download buttons are a near-white #E6E6E6 pill on black — inverted convention. Radial gradients with blue and purple cores bleed into the dark canvas at very low opacity, creating the impression of colored light sources behind frosted obsidian. Type is Inter with tight negative tracking at display sizes, shifting to loose positive tracking on micro labels and badges — creating a two-register system where headlines contract and metadata breathes.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Void Black | #040506 | --color-void-black | Dominant page canvas and deepest shadow color — the ground state everything floats above |
| Deep Charcoal | #07080a | --color-deep-charcoal | Primary card and section backgrounds; the first surface level above canvas |
| Graphite 700 | #111214 | --color-graphite-700 | Secondary surface and elevated card backgrounds |
| Graphite 600 | #1b1c1e | --color-graphite-600 | Observed in other boxShadow, link boxShadow, badge backgroundColor. Extracted usage does not support a distinct primary control color. |
| Graphite 500 | #363739 | --color-graphite-500 | Border color for dividers, shadow tones on elevated components |
| Graphite 400 | #454647 | --color-graphite-400 | Subtle borders, muted button borders, body divider lines |
| Slate 300 | #6a6b6c | --color-slate-300 | Secondary body text, icon fills, disabled states |
| Slate 200 | #9c9c9d | --color-slate-200 | Tertiary text, muted links, placeholder-level labels |
| Ash 50 | #e6e6e6 | --color-ash-50 | Primary download/CTA button background — warm near-white on black for maximum contrast without pure white aggression |
| Snow | #ffffff | --color-snow | Primary text on dark surfaces, nav links, headline text, icon strokes, border highlights |
| Ember Red | #ff6363 | --color-ember-red | Observed in body borderColor, other backgroundColor, other fill. |
| Ember Dark | #452324 | --color-ember-dark | Observed in other backgroundColor, other borderColor. |
| Mint Signal | #59d499 | --color-mint-signal | Observed in other backgroundColor. Semantic/state role was not supported by extracted badge/input evidence. |
| Font | Weights | Fallback |
|---|---|---|
| Inter | 400, 500, 600 | Inter (Google Fonts) — identical; this is the Google-hosted version |
| GeistMono | 300, 400, 500 | JetBrains Mono or IBM Plex Mono |
| SF Pro Text | 500, 700 | Inter weight 500/700 |
| SF Pro | 700 |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 11px | 1.45 | --text-caption |
| body | 16px | 1.5 | --text-body |
| subheading | 18px | 1.4 | --text-subheading |
| heading-sm | 24px | 1.33 | --text-heading-sm |
| heading | 32px | 1.2 | --text-heading |
| heading-lg | 56px | 1.1 | --text-heading-lg |
| display | 64px | 1 | --text-display |
