Raycast — Design Reference
keycaps glowing in a darkened room
Source: https://www.raycast.com
Theme: dark
Category: Productivity
Mood: dark, minimal, precise, technical, glossy, monochrome
Captured: 2026-09-13
Overview
Raycast feels like a Mac app stretched into a website. The page is almost black and nearly colourless, with calm white type, grey helper text and panels that sit just above the background. The one loud moment is the hero: blurred, grainy red diagonal stripes behind a centred Inter headline. After that, colour shows up only in small doses: a coral-red logo, blue check glows on the pricing page, and green, yellow and red status dots. The page feels built by hand, with physical-looking keycaps, glossy light-grey buttons and a floating rounded nav bar, so it reads as a finished tool rather than a template.
The near-black backgrounds come from a ten-step grey scale (#07080a → #e6e6e6). Cards are mostly defined by a 1px border at 5–6% white and a faint top inner highlight, not by a fill. Type is Inter at 400–600 with slightly loose letter-spacing (0.2–0.48px). GeistMono is used for dates, captions and technical notes, and SF Pro Text only for keycap legends. Spacing follows an 8px grid inside components, with very large gaps (168–224px) between sections. Corners are 8px on buttons, 12px on cards, 11px on keycaps and fully round on segmented pills. Depth comes from stacked inner shadows that mimic lit hardware, not from soft drop shadows.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Void |
#07080a |
--color-grey-900 |
Page background on every route; also the 1px inset ring inside hairline card borders |
| Graphite |
#111214 |
--color-grey-700 |
Floating nav bar, blog and feature cards, pricing columns, and window mockups |
| Slate Ring |
#1b1c1e |
--color-grey-600 |
1px outer ring shadow on panels and a raised fill for segmented controls and list rows |
| Iron |
#434345 |
--color-grey-400 |
Mid-grey fills behind app screenshots, dividers, and disabled or inactive UI |
| Paper White |
#ffffff |
--color-reverse-background |
Headings, primary body copy, active tab labels, and icons |
| Fog |
#9c9c9d |
--color-grey-200 |
Secondary text: nav links, card descriptions, inactive pill tabs, and GeistMono captions |
| Ash |
#6a6b6c |
--color-grey-300 |
Tertiary text: dates, fine print such as 'macOS Tahoe required', and struck-through prices |
| Keycap Silver |
#e6e6e6 |
--color-grey-50 |
Fill for the primary button (Download, Start Free Trial) |
| Button Ink |
#2f3031 |
--color-grey-500 |
Text and icon colour on the light primary button |
| Raycast Coral |
#ff6363 |
--color-red |
Logo mark, the red that tints hero stripes and glows, and destructive or alert accents |
| Ember Pill |
#130d0e |
--color-pill-ember |
Background of the promo pill ('The Raycast Keyboard'), paired with a red-tinted border glow |
| Signal Blue |
#56c2ff |
--color-blue |
Highlights: 'New' badges, glowing pricing check seals, and selected items in developer diagrams |
| Mint |
#59d499 |
--color-green |
Success and status dots in app mockups |
| Amber |
#ffc531 |
--color-yellow |
Warning and status dots in app mockups |
Semantic roles
| Role |
Value |
| background |
#07080a |
| surface |
#111214 |
| surface raised |
#1b1c1e |
| border |
rgba(255, 255, 255, 0.06) |
| text |
#ffffff |
| text muted |
#9c9c9d |
| primary |
#e6e6e6 |
| primary text |
#2f3031 |
| accent |
#ff6363 |
| success |
#59d499 |
| warning |
#ffc531 |
| danger |
#ff6363 |
Tokens — Typography
- Display: Inter (400, 500, 600, 700) — fallbacks: Inter Fallback, system-ui, -apple-system, sans-serif. Headlines use 600 for hero and page titles (64px, 48px). Developer pages use a lighter 400 at 56px for a more editorial feel. Keep letter-spacing slightly positive (0.2–0.3px), never tight.
- Body: Inter (400, 500, 600) — fallbacks: system-ui, -apple-system, Segoe UI, sans-serif. Body copy is often 500 at 16px/1.6, which gives dark backgrounds a firm, even texture. UI labels are 14px/500.
- Mono: GeistMono (300, 400, 500) — fallbacks: JetBrains Mono, Menlo, Monaco, monospace. Used for dates (SEPTEMBER 10, 2026), install hints, billing lines ('$96 billed annually'), figure labels (FIG_01, SEARCH BAR) and the developer intro paragraph. Usually 12–14px in Fog grey. JetBrains Mono is the declared --monospace-font variable.
- Accent: SF Pro Text (500, 700) — fallbacks: -apple-system, Inter, system-ui, sans-serif. Used only for keycap legends (esc, F1, ⌘, ±) at 16–32px/1.15 so the keyboard graphics look like native Apple hardware.
| Role |
Size |
Line height |
Weight |
Letter spacing |
Family |
| Display / Hero |
64px |
1.1 |
600 |
0.3px |
display |
| Editorial H2 (developers) |
56px |
1.17 |
400 |
0.2px |
display |
| Page Title |
48px |
1.15 |
600 |
normal |
display |
| Section Heading |
24px |
1.6 |
500 |
0.2px |
display |
| Card Title |
20px |
1.4 |
500 |
0.48px |
body |
| Lead |
18px |
1.4 |
500 |
0.2px |
body |
| Body |
16px |
1.6 |
500 |
normal |
body |
| UI / Nav |
14px |
1.15 |
500 |
normal |
body |
| Mono Caption |
12px |
1.5 |
400 |
0.5px |
mono |
Tokens — Spacing & Layout
- Base unit: 8px
- Density: spacious
- Container max width: 1252px
- Section gap: 168px
- Card padding: 24px
- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 96px, 168px
Tokens — Radius
| Element |
Value |
| Badges, small tags, mono link buttons |
4px |
| Primary buttons, inputs, outline pricing buttons |
8px |
| Keycaps |
11px |
| Blog, feature and pricing cards |
12px |
| Floating nav bar and large app-window panels |
16px |
| Showcase panels and extension cards |
20px |
| Segmented tabs, billing toggle, promo pill |
999px |
Tokens — Shadows
| Name |
Value |
Usage |
| Glossy Button |
rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset |
Primary light button: a dark outer ring, a soft white halo, a bright top inner edge and a darker bottom inner edge, so it looks like a lit plastic key |
| Keycap |
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 |
Keyboard key graphics (11px radius, 14.5px padding) in the shortcut and hotkey sections |
| Hairline Panel |
rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset |
The most common edge treatment: a 1px outer ring plus a background-coloured inner ring that separates panels from the page without a visible border |
| Top Sheen |
rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset |
Transparent cards with a 1px rgba(255,255,255,0.06) border; gives a faint glass edge along the top |
| Warm Glow |
rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px |
Very faint warm aura around featured media and testimonial avatars |
Components
Primary Button (button)
| Property |
Value |
| background |
#e6e6e6 |
| color |
#2f3031 |
| border |
none |
| radius |
8px |
| padding |
8px 12px |
| font size |
14px |
| font weight |
500 |
| shadow |
rgba(0,0,0,0.5) 0 0 0 2px, rgba(255,255,255,0.19) 0 0 14px 0, rgba(0,0,0,0.2) 0 -1px 0.4px 0 inset, #fff 0 1px 0.4px 0 inset |
| hover |
background #ffffff; halo brightens slightly |
36px tall, usually with a 16px Apple or check glyph before the label. Used for Download, Download for Mac and Start Free Trial. It is the only light surface on the page, so use at most one per view.
Outline Dark Button (button)
| Property |
Value |
| background |
rgba(255, 255, 255, 0.03) |
| color |
#ffffff |
| border |
1px solid rgba(255, 255, 255, 0.1) |
| radius |
8px |
| padding |
8px 12px |
| font size |
14px |
| font weight |
500 |
| shadow |
rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset |
| hover |
background rgba(255,255,255,0.06); border rgba(255,255,255,0.25) |
Full-width button on the non-featured pricing columns (Download, Choose Teams Pro), with a leading icon and centred label.
Segmented Pill Tabs (button)
| Property |
Value |
| background |
transparent |
| color |
#9c9c9d |
| border |
none |
| radius |
999px |
| padding |
0px 8px |
| font size |
14px |
| font weight |
500 |
| shadow |
none |
| hover |
color #ffffff; active tab gets background rgba(255,255,255,0.09) with inset rgba(255,255,255,0.06) 0 1px 0 |
30px-tall items inside a rounded track with a 1px rgba(255,255,255,0.06) border. Used for the Pro/Plus/Max plan tiers, the Monthly/Yearly toggle (which carries a small white '-20%' mono badge) and the blog category filter.
Hairline Card (card)
| Property |
Value |
| background |
#111214 |
| color |
#ffffff |
| border |
1px solid rgba(255, 255, 255, 0.06) |
| radius |
12px |
| padding |
24px |
| font size |
20px |
| font weight |
500 |
| shadow |
rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset |
| hover |
border rgba(255,255,255,0.1); background lifts toward #1b1c1e |
Blog card layout: 20px/500 title with 0.48px tracking, a 14px Fog description, and a bottom row with 20px avatars on the left and an uppercase GeistMono date in Ash on the right. The featured post is a wide card with an image on the left.
Floating Nav Bar (nav)
| Property |
Value |
| background |
rgba(17, 18, 20, 0.85) |
| color |
#9c9c9d |
| border |
1px solid rgba(255, 255, 255, 0.06) |
| radius |
16px |
| padding |
16px 24px |
| font size |
14px |
| font weight |
500 |
| shadow |
rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset |
| hover |
link color #ffffff |
Detached, blurred bar about 72px tall, inset 16px from the viewport top, with the same width as the content container. Coral logo and white wordmark on the left, centred links with about 32px gaps, then 'Log in' in Fog and a primary Download button on the right.
Text Input (input)
| Property |
Value |
| background |
rgba(255, 255, 255, 0.05) |
| color |
#ffffff |
| border |
1px solid rgba(255, 255, 255, 0.05) |
| radius |
8px |
| padding |
8px 12px |
| font size |
14px |
| font weight |
400 |
| shadow |
none |
| hover |
border rgba(255,255,255,0.1); focus ring rgba(255,255,255,0.25) 0 0 0 1px |
42px tall with an #6a6b6c placeholder. In launcher mockups the search field loses its fill and border completely: transparent, 0 4px padding, placeholder like 'Ask anything, @ tools, or / for commands…'.
Keycap (other)
| Property |
Value |
| background |
linear-gradient(180deg, #1b1c1e, #111214) |
| color |
#ffffff |
| border |
none |
| radius |
11px |
| padding |
14.5px |
| font size |
24px |
| font weight |
500 |
| shadow |
rgba(0,0,0,0.4) 0 1.5px 0.5px 2.5px, #000 0 0 0.5px 1px, rgba(0,0,0,0.25) 0 2px 1px 1px inset, rgba(255,255,255,0.2) 0 1px 1px 1px inset |
| hover |
translateY(1px) and shorter outer shadow, like a key being pressed |
Legends are SF Pro Text 500 (⌥, ⌘, esc, F1) with small secondary labels like 'option' or 'command' below. Shown in rows to explain hotkeys.
Promo Pill and 'New' Badge (badge)
| Property |
Value |
| background |
#130d0e |
| color |
#ffffff |
| border |
1px solid rgba(255, 99, 99, 0.25) |
| radius |
1000px |
| padding |
4px 12px |
| font size |
14px |
| font weight |
500 |
| shadow |
0 0 12px rgba(255, 99, 99, 0.15) |
| hover |
arrow nudges right; border glow intensifies |
The promo pill ('The Raycast Keyboard →') sits under the hero and has a red-tinted glow at its lower edge. The inline 'New' badge is a 10–11px blue (#56c2ff) label with a 1px blue border at about 40% alpha and a 4px radius.
Layout
Content is centred in a 1252px container, and the floating nav bar matches that width. Hero sections are centred and symmetrical: a two-line 64px headline, an 18px lead no wider than about 440px, then one primary button with mono fine print underneath. Feature sections alternate between a large framed app-window mockup and a short heading-plus-sentence pair, with very large gaps (168–224px) between them so each one stands alone. The blog uses a wide featured card with a 60/40 image/text split above a three-column card grid with 24px gutters. Pricing is three columns, with the middle Pro column raised about 12px and slightly lighter. The developers page uses a visible blueprint grid of 1px hairlines, a text column on the left and an isometric diagram labelled in mono caps (FIG_01, ACTION BAR) on the right.
Imagery
The main image is abstract: soft-edged diagonal red stripes over black, with film grain and a slight blue fringe at the edges, used as a full-bleed hero and repeated at low opacity behind the pricing header. Everything else is product UI: faithful dark launcher windows, extension cards with coloured gradient headers (purple Linear, blue Google Translate, green Spotify), photographed or rendered keycaps, and red-glow close-ups of the AI input. Developer pages use thin isometric line diagrams in grey with one saturated blue layer. Icons are simple 16px line glyphs. There are no stock photos or illustrated characters.
Motion
The site defines spring easing tokens with CSS linear() (--spring-1) for tab indicators, toggles and nav transitions, so movement feels physical with a slight overshoot and no bounce. The hero stripes drift and shift slowly. Hover states are small: text goes from Fog to white, the primary button fill goes from #e6e6e6 to #fff, and borders on hairline cards get a little brighter. Carousels (extensions, testimonials) move sideways with round 32px arrow buttons. Keycaps suggest a press by moving down 1px. Keep durations short (150–250ms) and avoid large fade-ups.
Responsive
On phones the floating nav bar stays floating: a 16px-inset rounded card (about 16px radius) with the coral logo and wordmark on the left and a thin two-line hamburger on the right. When opened, the same card grows downward into a tall panel with a heavy backdrop blur, so the hero stripes show through as a dim red wash. Inside, the links are stacked on the left at about 18px/500 in Fog with roughly 48px vertical rhythm, then a full-width hairline divider and 'Log in' below. The panel does not cover the whole screen and the icon becomes a thin X. The hero stays centred, the headline drops to about 48px in two lines, and the stripes are cropped to fill the tall viewport. The Mac download button and Homebrew fine print are hidden on mobile, leaving the 'The Raycast Keyboard →' promo pill as the main action. Card grids collapse to one column, pricing columns stack, and section gaps shrink roughly by half.
Do
- Use #07080a for the page and #111214 for panels; separate panels with 1px rgba(255,255,255,0.06) borders or the double ring shadow (#1b1c1e outside, #07080a inside), not with lighter fills.
- Give the primary button the full glossy stack: #e6e6e6 fill, a 2px dark outer ring, a 14px white halo, and a bright top inner edge over a dark bottom inner edge.
- Set dates, billing lines, figure labels and install hints in GeistMono at 12–14px in #9c9c9d or #6a6b6c, often in uppercase.
- Limit colour to one dramatic moment per page, such as the grainy red hero or a glowing blue check seal; keep everything else greyscale.
- Use weight 500 for body and card titles with slight positive tracking (0.2–0.48px) so text stays crisp on the dark background.
- Use pill-shaped segmented controls with rgba(255,255,255,0.09) on the active item for any plan, period or category switch.
- Separate sections with very large gaps (168px or more) and give each one a short two-part heading: a white title plus a grey sub-line.
Don't
- Don't use Raycast Coral (#ff6363) for buttons or large fills; it belongs to the logo, glows and alerts, and the primary action is always light grey.
- Don't add large soft drop shadows; depth here comes from 1px rings and inner highlights that look lit from above.
- Don't use pure #000 for the page or pure-white body paragraphs everywhere; long secondary copy belongs in #9c9c9d.
- Don't tighten letter-spacing on headlines; this style uses neutral or slightly loose tracking, not compressed display type.
- Don't round cards beyond 12–20px or square off buttons; keep the ladder 4/8/11/12/16/20/999px.
- Don't use flat vector illustrations or stock photos; show real product UI, keycaps or abstract grainy light.
- Don't put more than one light primary button in the same view.
Agent prompt
Build a dark, keyboard-first product site in the Raycast style. Page background #07080a; panels #111214; raised fills and outer rings #1b1c1e; hairline borders rgba(255,255,255,0.06) with an inset top sheen rgba(255,255,255,0.15) 0 1px 1px. Text #ffffff, secondary #9c9c9d, tertiary #6a6b6c. Use Inter throughout (hero 64px/1.1/600 with 0.3px tracking, page titles 48px/600, section headings 24px/1.6/500, card titles 20px/1.4/500 with 0.48px tracking, body 16px/1.6/500, UI 14px/500). Use GeistMono 12–14px for dates, captions, billing lines and FIG-style labels, and SF Pro Text only on keycap legends. The primary button is light: #e6e6e6 fill, #2f3031 text, 8px radius, 8px 12px padding, 36px tall, with a shadow of rgba(0,0,0,.5) 0 0 0 2px, rgba(255,255,255,.19) 0 0 14px, rgba(0,0,0,.2) 0 -1px .4px inset and #fff 0 1px .4px inset. Secondary buttons are dark outlines. Segmented controls are 999px pills with an rgba(255,255,255,.09) active state. Cards use a 12px radius and 24px padding; the nav is a floating blurred bar with a 16px radius, inset from the top and as wide as the 1252px container. Use an 8px spacing grid and very large (168–224px) gaps between sections. Keep the palette nearly monochrome: use coral #ff6363 only for the logo, grainy blurred diagonal red hero stripes and red glows, blue #56c2ff for 'New' badges and glowing check seals, and green #59d499 and yellow #ffc531 only as status dots. Show real product UI, glossy keycaps (11px radius, stacked inner shadows) and thin isometric line diagrams. Use spring linear() easing and small hover changes. On mobile, the nav stays a floating card with a hamburger that expands into a blurred panel of stacked links.
CSS custom properties
/* Raycast — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-grey-900: #07080a; /* Page background on every route; also the 1px inset ring inside hairline card borders */
--color-grey-700: #111214; /* Floating nav bar, blog and feature cards, pricing columns, and window mockups */
--color-grey-600: #1b1c1e; /* 1px outer ring shadow on panels and a raised fill for segmented controls and list rows */
--color-grey-400: #434345; /* Mid-grey fills behind app screenshots, dividers, and disabled or inactive UI */
--color-reverse-background: #ffffff; /* Headings, primary body copy, active tab labels, and icons */
--color-grey-200: #9c9c9d; /* Secondary text: nav links, card descriptions, inactive pill tabs, and GeistMono captions */
--color-grey-300: #6a6b6c; /* Tertiary text: dates, fine print such as 'macOS Tahoe required', and struck-through prices */
--color-grey-50: #e6e6e6; /* Fill for the primary button (Download, Start Free Trial) */
--color-grey-500: #2f3031; /* Text and icon colour on the light primary button */
--color-red: #ff6363; /* Logo mark, the red that tints hero stripes and glows, and destructive or alert accents */
--color-pill-ember: #130d0e; /* Background of the promo pill ('The Raycast Keyboard'), paired with a red-tinted border glow */
--color-blue: #56c2ff; /* Highlights: 'New' badges, glowing pricing check seals, and selected items in developer diagrams */
--color-green: #59d499; /* Success and status dots in app mockups */
--color-yellow: #ffc531; /* Warning and status dots in app mockups */
/* Semantic roles */
--background: #07080a;
--surface: #111214;
--surface-raised: #1b1c1e;
--border: rgba(255, 255, 255, 0.06);
--text: #ffffff;
--text-muted: #9c9c9d;
--primary: #e6e6e6;
--primary-text: #2f3031;
--accent: #ff6363;
--success: #59d499;
--warning: #ffc531;
--danger: #ff6363;
/* Typography */
--font-display: Inter, 'Inter Fallback', system-ui, -apple-system, sans-serif;
--font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: GeistMono, 'JetBrains Mono', Menlo, Monaco, monospace;
--font-accent: 'SF Pro Text', -apple-system, Inter, system-ui, sans-serif;
--text-display-hero: 64px;
--text-display-hero--line-height: 1.1;
--text-display-hero--letter-spacing: 0.3px;
--text-display-hero--font-weight: 600;
--text-editorial-h2-developers: 56px;
--text-editorial-h2-developers--line-height: 1.17;
--text-editorial-h2-developers--letter-spacing: 0.2px;
--text-editorial-h2-developers--font-weight: 400;
--text-page-title: 48px;
--text-page-title--line-height: 1.15;
--text-page-title--letter-spacing: normal;
--text-page-title--font-weight: 600;
--text-section-heading: 24px;
--text-section-heading--line-height: 1.6;
--text-section-heading--letter-spacing: 0.2px;
--text-section-heading--font-weight: 500;
--text-card-title: 20px;
--text-card-title--line-height: 1.4;
--text-card-title--letter-spacing: 0.48px;
--text-card-title--font-weight: 500;
--text-lead: 18px;
--text-lead--line-height: 1.4;
--text-lead--letter-spacing: 0.2px;
--text-lead--font-weight: 500;
--text-body: 16px;
--text-body--line-height: 1.6;
--text-body--letter-spacing: normal;
--text-body--font-weight: 500;
--text-ui-nav: 14px;
--text-ui-nav--line-height: 1.15;
--text-ui-nav--letter-spacing: normal;
--text-ui-nav--font-weight: 500;
--text-mono-caption: 12px;
--text-mono-caption--line-height: 1.5;
--text-mono-caption--letter-spacing: 0.5px;
--text-mono-caption--font-weight: 400;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 64px;
--space-11: 96px;
--space-12: 168px;
--container: 1252px;
--section-gap: 168px;
/* Radius */
--radius-badges-small-tags-mono-link-buttons: 4px;
--radius-primary-buttons-inputs-outline-pricing-buttons: 8px;
--radius-keycaps: 11px;
--radius-blog-feature-and-pricing-cards: 12px;
--radius-floating-nav-bar-and-large-app-window-panels: 16px;
--radius-showcase-panels-and-extension-cards: 20px;
--radius-segmented-tabs-billing-toggle-promo-pill: 999px;
/* Shadows */
--shadow-glossy-button: rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset;
--shadow-keycap: 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;
--shadow-hairline-panel: rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset;
--shadow-top-sheen: rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset;
--shadow-warm-glow: rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px;
}
Tailwind v4 theme
/* Raycast — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
--color-grey-900: #07080a;
--color-grey-700: #111214;
--color-grey-600: #1b1c1e;
--color-grey-400: #434345;
--color-reverse-background: #ffffff;
--color-grey-200: #9c9c9d;
--color-grey-300: #6a6b6c;
--color-grey-50: #e6e6e6;
--color-grey-500: #2f3031;
--color-red: #ff6363;
--color-pill-ember: #130d0e;
--color-blue: #56c2ff;
--color-green: #59d499;
--color-yellow: #ffc531;
--color-background: #07080a;
--color-surface: #111214;
--color-surface-raised: #1b1c1e;
--color-border: rgba(255, 255, 255, 0.06);
--color-text: #ffffff;
--color-text-muted: #9c9c9d;
--color-primary: #e6e6e6;
--color-primary-text: #2f3031;
--color-accent: #ff6363;
--color-success: #59d499;
--color-warning: #ffc531;
--color-danger: #ff6363;
--font-display: Inter, 'Inter Fallback', system-ui, -apple-system, sans-serif;
--font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: GeistMono, 'JetBrains Mono', Menlo, Monaco, monospace;
--font-accent: 'SF Pro Text', -apple-system, Inter, system-ui, sans-serif;
--text-display-hero: 64px;
--text-display-hero--line-height: 1.1;
--text-display-hero--letter-spacing: 0.3px;
--text-display-hero--font-weight: 600;
--text-editorial-h2-developers: 56px;
--text-editorial-h2-developers--line-height: 1.17;
--text-editorial-h2-developers--letter-spacing: 0.2px;
--text-editorial-h2-developers--font-weight: 400;
--text-page-title: 48px;
--text-page-title--line-height: 1.15;
--text-page-title--letter-spacing: normal;
--text-page-title--font-weight: 600;
--text-section-heading: 24px;
--text-section-heading--line-height: 1.6;
--text-section-heading--letter-spacing: 0.2px;
--text-section-heading--font-weight: 500;
--text-card-title: 20px;
--text-card-title--line-height: 1.4;
--text-card-title--letter-spacing: 0.48px;
--text-card-title--font-weight: 500;
--text-lead: 18px;
--text-lead--line-height: 1.4;
--text-lead--letter-spacing: 0.2px;
--text-lead--font-weight: 500;
--text-body: 16px;
--text-body--line-height: 1.6;
--text-body--letter-spacing: normal;
--text-body--font-weight: 500;
--text-ui-nav: 14px;
--text-ui-nav--line-height: 1.15;
--text-ui-nav--letter-spacing: normal;
--text-ui-nav--font-weight: 500;
--text-mono-caption: 12px;
--text-mono-caption--line-height: 1.5;
--text-mono-caption--letter-spacing: 0.5px;
--text-mono-caption--font-weight: 400;
--radius-badges-small-tags-mono-link-buttons: 4px;
--radius-primary-buttons-inputs-outline-pricing-buttons: 8px;
--radius-keycaps: 11px;
--radius-blog-feature-and-pricing-cards: 12px;
--radius-floating-nav-bar-and-large-app-window-panels: 16px;
--radius-showcase-panels-and-extension-cards: 20px;
--radius-segmented-tabs-billing-toggle-promo-pill: 999px;
--shadow-glossy-button: rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset;
--shadow-keycap: 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;
--shadow-hairline-panel: rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset;
--shadow-top-sheen: rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset;
--shadow-warm-glow: rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px;
--container-site: 1252px;
}
Raycast — Style Reference
keycaps glowing in a darkened room
Theme: dark · Mood: dark, minimal, precise, technical, glossy, monochrome
Raycast feels like a Mac app stretched into a website. The page is almost black and nearly colourless, with calm white type, grey helper text and panels that sit just above the background. The one loud moment is the hero: blurred, grainy red diagonal stripes behind a centred Inter headline. After that, colour shows up only in small doses: a coral-red logo, blue check glows on the pricing page, and green, yellow and red status dots. The page feels built by hand, with physical-looking keycaps, glossy light-grey buttons and a floating rounded nav bar, so it reads as a finished tool rather than a template.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Void |
#07080a |
--grey-900 |
Page background on every route; also the 1px inset ring inside hairline card borders |
| Graphite |
#111214 |
--grey-700 |
Floating nav bar, blog and feature cards, pricing columns, and window mockups |
| Slate Ring |
#1b1c1e |
--grey-600 |
1px outer ring shadow on panels and a raised fill for segmented controls and list rows |
| Iron |
#434345 |
--grey-400 |
Mid-grey fills behind app screenshots, dividers, and disabled or inactive UI |
| Paper White |
#ffffff |
--reverse-background |
Headings, primary body copy, active tab labels, and icons |
| Fog |
#9c9c9d |
--grey-200 |
Secondary text: nav links, card descriptions, inactive pill tabs, and GeistMono captions |
| Ash |
#6a6b6c |
--grey-300 |
Tertiary text: dates, fine print such as 'macOS Tahoe required', and struck-through prices |
| Keycap Silver |
#e6e6e6 |
--grey-50 |
Fill for the primary button (Download, Start Free Trial) |
| Button Ink |
#2f3031 |
--grey-500 |
Text and icon colour on the light primary button |
| Raycast Coral |
#ff6363 |
--color-red |
Logo mark, the red that tints hero stripes and glows, and destructive or alert accents |
| Ember Pill |
#130d0e |
--pill-ember |
Background of the promo pill ('The Raycast Keyboard'), paired with a red-tinted border glow |
| Signal Blue |
#56c2ff |
--color-blue |
Highlights: 'New' badges, glowing pricing check seals, and selected items in developer diagrams |
| Mint |
#59d499 |
--color-green |
Success and status dots in app mockups |
| Amber |
#ffc531 |
--color-yellow |
Warning and status dots in app mockups |
Tokens — Typography
- Display: Inter (Inter Fallback, system-ui, -apple-system, sans-serif) — weights 400/500/600/700
- Body: Inter (system-ui, -apple-system, Segoe UI, sans-serif) — weights 400/500/600
- Mono: GeistMono (JetBrains Mono, Menlo, Monaco, monospace) — weights 300/400/500
- Accent: SF Pro Text (-apple-system, Inter, system-ui, sans-serif) — weights 500/700
Tokens — Radius
| Element |
Value |
| Badges, small tags, mono link buttons |
4px |
| Primary buttons, inputs, outline pricing buttons |
8px |
| Keycaps |
11px |
| Blog, feature and pricing cards |
12px |
| Floating nav bar and large app-window panels |
16px |
| Showcase panels and extension cards |
20px |
| Segmented tabs, billing toggle, promo pill |
999px |
Do
- Use #07080a for the page and #111214 for panels; separate panels with 1px rgba(255,255,255,0.06) borders or the double ring shadow (#1b1c1e outside, #07080a inside), not with lighter fills.
- Give the primary button the full glossy stack: #e6e6e6 fill, a 2px dark outer ring, a 14px white halo, and a bright top inner edge over a dark bottom inner edge.
- Set dates, billing lines, figure labels and install hints in GeistMono at 12–14px in #9c9c9d or #6a6b6c, often in uppercase.
- Limit colour to one dramatic moment per page, such as the grainy red hero or a glowing blue check seal; keep everything else greyscale.
- Use weight 500 for body and card titles with slight positive tracking (0.2–0.48px) so text stays crisp on the dark background.
- Use pill-shaped segmented controls with rgba(255,255,255,0.09) on the active item for any plan, period or category switch.
- Separate sections with very large gaps (168px or more) and give each one a short two-part heading: a white title plus a grey sub-line.
Don't
- Don't use Raycast Coral (#ff6363) for buttons or large fills; it belongs to the logo, glows and alerts, and the primary action is always light grey.
- Don't add large soft drop shadows; depth here comes from 1px rings and inner highlights that look lit from above.
- Don't use pure #000 for the page or pure-white body paragraphs everywhere; long secondary copy belongs in #9c9c9d.
- Don't tighten letter-spacing on headlines; this style uses neutral or slightly loose tracking, not compressed display type.
- Don't round cards beyond 12–20px or square off buttons; keep the ladder 4/8/11/12/16/20/999px.
- Don't use flat vector illustrations or stock photos; show real product UI, keycaps or abstract grainy light.
- Don't put more than one light primary button in the same view.
{
"$name": "Raycast",
"$source": "https://www.raycast.com",
"$theme": "dark",
"$generated": "inspiration library",
"color": {
"grey-900": {
"$type": "color",
"$value": "#07080a",
"$description": "Page background on every route; also the 1px inset ring inside hairline card borders"
},
"grey-700": {
"$type": "color",
"$value": "#111214",
"$description": "Floating nav bar, blog and feature cards, pricing columns, and window mockups"
},
"grey-600": {
"$type": "color",
"$value": "#1b1c1e",
"$description": "1px outer ring shadow on panels and a raised fill for segmented controls and list rows"
},
"grey-400": {
"$type": "color",
"$value": "#434345",
"$description": "Mid-grey fills behind app screenshots, dividers, and disabled or inactive UI"
},
"reverse-background": {
"$type": "color",
"$value": "#ffffff",
"$description": "Headings, primary body copy, active tab labels, and icons"
},
"grey-200": {
"$type": "color",
"$value": "#9c9c9d",
"$description": "Secondary text: nav links, card descriptions, inactive pill tabs, and GeistMono captions"
},
"grey-300": {
"$type": "color",
"$value": "#6a6b6c",
"$description": "Tertiary text: dates, fine print such as 'macOS Tahoe required', and struck-through prices"
},
"grey-50": {
"$type": "color",
"$value": "#e6e6e6",
"$description": "Fill for the primary button (Download, Start Free Trial)"
},
"grey-500": {
"$type": "color",
"$value": "#2f3031",
"$description": "Text and icon colour on the light primary button"
},
"red": {
"$type": "color",
"$value": "#ff6363",
"$description": "Logo mark, the red that tints hero stripes and glows, and destructive or alert accents"
},
"pill-ember": {
"$type": "color",
"$value": "#130d0e",
"$description": "Background of the promo pill ('The Raycast Keyboard'), paired with a red-tinted border glow"
},
"blue": {
"$type": "color",
"$value": "#56c2ff",
"$description": "Highlights: 'New' badges, glowing pricing check seals, and selected items in developer diagrams"
},
"green": {
"$type": "color",
"$value": "#59d499",
"$description": "Success and status dots in app mockups"
},
"yellow": {
"$type": "color",
"$value": "#ffc531",
"$description": "Warning and status dots in app mockups"
}
},
"role": {
"background": {
"$type": "color",
"$value": "#07080a"
},
"surface": {
"$type": "color",
"$value": "#111214"
},
"surface_raised": {
"$type": "color",
"$value": "#1b1c1e"
},
"border": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.06)"
},
"text": {
"$type": "color",
"$value": "#ffffff"
},
"text_muted": {
"$type": "color",
"$value": "#9c9c9d"
},
"primary": {
"$type": "color",
"$value": "#e6e6e6"
},
"primary_text": {
"$type": "color",
"$value": "#2f3031"
},
"accent": {
"$type": "color",
"$value": "#ff6363"
},
"success": {
"$type": "color",
"$value": "#59d499"
},
"warning": {
"$type": "color",
"$value": "#ffc531"
},
"danger": {
"$type": "color",
"$value": "#ff6363"
}
},
"fontFamily": {
"display": {
"$type": "fontFamily",
"$value": [
"Inter",
"Inter Fallback",
"system-ui",
"-apple-system",
"sans-serif"
],
"$description": "Headlines use 600 for hero and page titles (64px, 48px). Developer pages use a lighter 400 at 56px for a more editorial feel. Keep letter-spacing slightly positive (0.2–0.3px), never tight."
},
"body": {
"$type": "fontFamily",
"$value": [
"Inter",
"system-ui",
"-apple-system",
"Segoe UI",
"sans-serif"
],
"$description": "Body copy is often 500 at 16px/1.6, which gives dark backgrounds a firm, even texture. UI labels are 14px/500."
},
"mono": {
"$type": "fontFamily",
"$value": [
"GeistMono",
"JetBrains Mono",
"Menlo",
"Monaco",
"monospace"
],
"$description": "Used for dates (SEPTEMBER 10, 2026), install hints, billing lines ('$96 billed annually'), figure labels (FIG_01, SEARCH BAR) and the developer intro paragraph. Usually 12–14px in Fog grey. JetBrains Mono is the declared --monospace-font variable."
},
"accent": {
"$type": "fontFamily",
"$value": [
"SF Pro Text",
"-apple-system",
"Inter",
"system-ui",
"sans-serif"
],
"$description": "Used only for keycap legends (esc, F1, ⌘, ±) at 16–32px/1.15 so the keyboard graphics look like native Apple hardware."
}
},
"typography": {
"display-hero": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "64px",
"lineHeight": "1.1",
"fontWeight": 600,
"letterSpacing": "0.3px"
}
},
"editorial-h2-developers": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "56px",
"lineHeight": "1.17",
"fontWeight": 400,
"letterSpacing": "0.2px"
}
},
"page-title": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "48px",
"lineHeight": "1.15",
"fontWeight": 600,
"letterSpacing": "normal"
}
},
"section-heading": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "24px",
"lineHeight": "1.6",
"fontWeight": 500,
"letterSpacing": "0.2px"
}
},
"card-title": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "20px",
"lineHeight": "1.4",
"fontWeight": 500,
"letterSpacing": "0.48px"
}
},
"lead": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "18px",
"lineHeight": "1.4",
"fontWeight": 500,
"letterSpacing": "0.2px"
}
},
"body": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.6",
"fontWeight": 500,
"letterSpacing": "normal"
}
},
"ui-nav": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "14px",
"lineHeight": "1.15",
"fontWeight": 500,
"letterSpacing": "normal"
}
},
"mono-caption": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.mono}",
"fontSize": "12px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "0.5px"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "4px"
},
"2": {
"$type": "dimension",
"$value": "8px"
},
"3": {
"$type": "dimension",
"$value": "12px"
},
"4": {
"$type": "dimension",
"$value": "16px"
},
"5": {
"$type": "dimension",
"$value": "20px"
},
"6": {
"$type": "dimension",
"$value": "24px"
},
"7": {
"$type": "dimension",
"$value": "32px"
},
"8": {
"$type": "dimension",
"$value": "40px"
},
"9": {
"$type": "dimension",
"$value": "48px"
},
"10": {
"$type": "dimension",
"$value": "64px"
},
"11": {
"$type": "dimension",
"$value": "96px"
},
"12": {
"$type": "dimension",
"$value": "168px"
}
},
"radius": {
"badges-small-tags-mono-link-buttons": {
"$type": "dimension",
"$value": "4px"
},
"primary-buttons-inputs-outline-pricing-buttons": {
"$type": "dimension",
"$value": "8px"
},
"keycaps": {
"$type": "dimension",
"$value": "11px"
},
"blog-feature-and-pricing-cards": {
"$type": "dimension",
"$value": "12px"
},
"floating-nav-bar-and-large-app-window-panels": {
"$type": "dimension",
"$value": "16px"
},
"showcase-panels-and-extension-cards": {
"$type": "dimension",
"$value": "20px"
},
"segmented-tabs-billing-toggle-promo-pill": {
"$type": "dimension",
"$value": "999px"
}
},
"shadow": {
"glossy-button": {
"$type": "shadow",
"$value": "rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset",
"$description": "Primary light button: a dark outer ring, a soft white halo, a bright top inner edge and a darker bottom inner edge, so it looks like a lit plastic key"
},
"keycap": {
"$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, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset",
"$description": "Keyboard key graphics (11px radius, 14.5px padding) in the shortcut and hotkey sections"
},
"hairline-panel": {
"$type": "shadow",
"$value": "rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset",
"$description": "The most common edge treatment: a 1px outer ring plus a background-coloured inner ring that separates panels from the page without a visible border"
},
"top-sheen": {
"$type": "shadow",
"$value": "rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset",
"$description": "Transparent cards with a 1px rgba(255,255,255,0.06) border; gives a faint glass edge along the top"
},
"warm-glow": {
"$type": "shadow",
"$value": "rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px",
"$description": "Very faint warm aura around featured media and testimonial avatars"
}
},
"component": {
"primary-button": {
"kind": "button",
"background": "#e6e6e6",
"color": "#2f3031",
"border": "none",
"radius": "8px",
"padding": "8px 12px",
"font_size": "14px",
"font_weight": 500,
"shadow": "rgba(0,0,0,0.5) 0 0 0 2px, rgba(255,255,255,0.19) 0 0 14px 0, rgba(0,0,0,0.2) 0 -1px 0.4px 0 inset, #fff 0 1px 0.4px 0 inset",
"hover": "background #ffffff; halo brightens slightly",
"notes": "36px tall, usually with a 16px Apple or check glyph before the label. Used for Download, Download for Mac and Start Free Trial. It is the only light surface on the page, so use at most one per view."
},
"outline-dark-button": {
"kind": "button",
"background": "rgba(255, 255, 255, 0.03)",
"color": "#ffffff",
"border": "1px solid rgba(255, 255, 255, 0.1)",
"radius": "8px",
"padding": "8px 12px",
"font_size": "14px",
"font_weight": 500,
"shadow": "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset",
"hover": "background rgba(255,255,255,0.06); border rgba(255,255,255,0.25)",
"notes": "Full-width button on the non-featured pricing columns (Download, Choose Teams Pro), with a leading icon and centred label."
},
"segmented-pill-tabs": {
"kind": "button",
"background": "transparent",
"color": "#9c9c9d",
"border": "none",
"radius": "999px",
"padding": "0px 8px",
"font_size": "14px",
"font_weight": 500,
"shadow": "none",
"hover": "color #ffffff; active tab gets background rgba(255,255,255,0.09) with inset rgba(255,255,255,0.06) 0 1px 0",
"notes": "30px-tall items inside a rounded track with a 1px rgba(255,255,255,0.06) border. Used for the Pro/Plus/Max plan tiers, the Monthly/Yearly toggle (which carries a small white '-20%' mono badge) and the blog category filter."
},
"hairline-card": {
"kind": "card",
"background": "#111214",
"color": "#ffffff",
"border": "1px solid rgba(255, 255, 255, 0.06)",
"radius": "12px",
"padding": "24px",
"font_size": "20px",
"font_weight": 500,
"shadow": "rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset",
"hover": "border rgba(255,255,255,0.1); background lifts toward #1b1c1e",
"notes": "Blog card layout: 20px/500 title with 0.48px tracking, a 14px Fog description, and a bottom row with 20px avatars on the left and an uppercase GeistMono date in Ash on the right. The featured post is a wide card with an image on the left."
},
"floating-nav-bar": {
"kind": "nav",
"background": "rgba(17, 18, 20, 0.85)",
"color": "#9c9c9d",
"border": "1px solid rgba(255, 255, 255, 0.06)",
"radius": "16px",
"padding": "16px 24px",
"font_size": "14px",
"font_weight": 500,
"shadow": "rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset",
"hover": "link color #ffffff",
"notes": "Detached, blurred bar about 72px tall, inset 16px from the viewport top, with the same width as the content container. Coral logo and white wordmark on the left, centred links with about 32px gaps, then 'Log in' in Fog and a primary Download button on the right."
},
"text-input": {
"kind": "input",
"background": "rgba(255, 255, 255, 0.05)",
"color": "#ffffff",
"border": "1px solid rgba(255, 255, 255, 0.05)",
"radius": "8px",
"padding": "8px 12px",
"font_size": "14px",
"font_weight": 400,
"shadow": "none",
"hover": "border rgba(255,255,255,0.1); focus ring rgba(255,255,255,0.25) 0 0 0 1px",
"notes": "42px tall with an #6a6b6c placeholder. In launcher mockups the search field loses its fill and border completely: transparent, 0 4px padding, placeholder like 'Ask anything, @ tools, or / for commands…'."
},
"keycap": {
"kind": "other",
"background": "linear-gradient(180deg, #1b1c1e, #111214)",
"color": "#ffffff",
"border": "none",
"radius": "11px",
"padding": "14.5px",
"font_size": "24px",
"font_weight": 500,
"shadow": "rgba(0,0,0,0.4) 0 1.5px 0.5px 2.5px, #000 0 0 0.5px 1px, rgba(0,0,0,0.25) 0 2px 1px 1px inset, rgba(255,255,255,0.2) 0 1px 1px 1px inset",
"hover": "translateY(1px) and shorter outer shadow, like a key being pressed",
"notes": "Legends are SF Pro Text 500 (⌥, ⌘, esc, F1) with small secondary labels like 'option' or 'command' below. Shown in rows to explain hotkeys."
},
"promo-pill-and-new-badge": {
"kind": "badge",
"background": "#130d0e",
"color": "#ffffff",
"border": "1px solid rgba(255, 99, 99, 0.25)",
"radius": "1000px",
"padding": "4px 12px",
"font_size": "14px",
"font_weight": 500,
"shadow": "0 0 12px rgba(255, 99, 99, 0.15)",
"hover": "arrow nudges right; border glow intensifies",
"notes": "The promo pill ('The Raycast Keyboard →') sits under the hero and has a red-tinted glow at its lower edge. The inline 'New' badge is a 10–11px blue (#56c2ff) label with a 1px blue border at about 40% alpha and a 4px radius."
}
}
}
