Raycast · scrub to study layout
Raycast
> Raycast
Midnight command center, coral neon Raycast reads as a dark power-tool cockpit: an almost-black canvas (#040506) with barely-visible elevation steps, a single warm coral accent (#ff6363) that carries brand identity, and quiet white/gray typography in Inter. Components are defined less by shadows and more by hairline borders, inset highlight strokes, and the distinctive 'keyboard key' inner-shadow treatment that makes cards feel pressed and tactile rather than floating. Color is rationed — the page is 98% achromatic, and the coral appears only in the logo, hero artwork, AI badge, and the occasional warm-tinted surface. Navigation floats with a glass-blur effect, and most interactive surfaces are neutral light-gray buttons on dark, not chromatic CTAs. The hero abandons the system entirely with large red/blue gradient geometry, then the rest of the page returns to the austere dark surface — contrast through atmosphere, not decoration.
↗ https://raycast.comColor Palette
BRAND
Coral Pulse
#ff6363
Brand accent — logo diamond, AI badge fill, hero artwork saturation, the single warm punctuation in an achromatic system
Ember Hush
#452324
Warm-tinted card backgrounds, accent surface tints — desaturated coral used as a muted backdrop for coral-anchored content
ACCENT
Electric Sky
#63a1ff
Hero illustration mid-tone, decorative gradient — appears only in the dramatic abstract hero artwork, not in interface controls
Cobalt Edge
#143ca3
Hero illustration stroke, deep gradient anchor — paired with Electric Sky in the hero's blue geometry
Deep Space
#02193b
Hero illustration fill, darkest blue in the artwork gradient — not a UI token
Info Blue
#56c2ff
Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color
Success Green
#59d499
Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color
NEUTRALS
Void Black
#040506
Page canvas, dominant background — the near-pure-black base that most of the interface sits on
Ink
#07080a
Card surfaces, elevated panels, image backgrounds — one step up from the canvas for content blocks
Obsidian
#111214
Subtle surface tint, pressed states, input wells — used for slight depth on form fields and recessed containers
Graphite
#1b1c1e
Neutral form states, badge text, and quiet UI feedback where color should stay understated.
Slate
#2f3031
Dark button borders and labels on ghost/dark buttons
Iron
#454647
Button text on light fills, mid-gray borders — paired with Mist for filled button labels
Smoke
#6a6b6c
Secondary body text, muted labels — the everyday reading color on dark surfaces
Ash
#9c9c9d
Light text on dark surfaces, inverse labels, and high-contrast captions.
Mist
#e6e6e6
Light neutral action fill for buttons on dark surfaces.
Pure White
#ffffff
Headings, high-emphasis text, reversed text on light buttons — the loudest text color in the system)
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.