Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:Geist Mono- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Raycast's marketing site feels like the dark interior of a precision instrument — a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (#07080a) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.
The signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (#FF6363) — deployed almost exclusively in the hero's iconic diagonal stripe pattern — the palette creates a brand that reads as "powerful tool with personality." The red doesn't dominate; it punctuates.
Inter is used everywhere — headings, body, buttons, captions — with extensive OpenType features (calt, kern, liga, ss03) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px–0.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.
Key Characteristics:
- Near-black blue-tinted background (#07080a) — not pure black, subtly blue-shifted
- macOS-native shadow system with multi-layer inset highlights simulating physical depth
- Raycast Red (#FF6363) as a punctuation color — hero stripes, not pervasive
- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience
- Radix UI component primitives powering the interaction layer
- Subtle rgba white borders (0.06–0.1 opacity) for containment on dark surfaces
- Keyboard shortcut styling with gradient key caps and heavy shadows
#07080a): Primary page background — the foundational void with a subtle blue-cold undertone#ffffff): Primary heading text, high-emphasis elements#FF6363 / hsl(0, 100%, 69%)): Brand accent — hero stripes, danger states, critical highlightshsl(202, 100%, 67%) / ~#55b3ff): Interactive accent — links, focus states, selected itemshsl(151, 59%, 59%) / ~#5fc992): Success states, positive indicatorshsl(43, 100%, 60%) / ~#ffbc33): Warning accents, highlightshsla(202, 100%, 67%, 0.15)): Blue tint overlay for interactive surfaceshsla(0, 100%, 69%, 0.15)): Red tint overlay for danger/error surfaces#07080a): Page canvas, the darkest surface#101111): Elevated surface, card backgrounds#121212): Keyboard key gradient start#0d0d0d): Keyboard key gradient end#1b1c1e): Badge backgrounds, tag fills, elevated containers#18191a): Dark surface for button text on light backgrounds#f9f9f9 / hsl(240, 11%, 96%)): Primary body text, high-emphasis content#cecece / #cdcdce): Secondary body text, descriptions#c0c0c0): Tertiary text, subdued labels#9c9c9d): Link default color, secondary navigation#6a6b6c): Disabled text, low-emphasis labels#434345): Muted borders, inactive navigation linkshsl(195, 5%, 15%) / ~#252829): Standard border color for cards and dividers#2f3031): Separator lines, table bordershsl(0, 100%, 69%)): Error states, destructive actionshsl(151, 59%, 59%)): Success confirmations, positive stateshsl(43, 100%, 60%)): Warnings, attention-needed stateshsl(202, 100%, 67%)): Informational highlights, links#121212 (top) to #0d0d0d (bottom) — simulates physical key depthrgba(215, 201, 175, 0.05) radial spread — subtle warm ambient glow behind featured elementsInter — humanist sans-serif, used everywhere. Fallbacks: Inter Fallback, system sans-serifSF Pro Text — Apple system font for select macOS-native UI elements. Fallbacks: SF Pro Icons, Inter, Inter FallbackGeistMono — Vercel's monospace font for code elements. Fallbacks: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monacocalt, kern, liga, ss03 enabled globally; ss02, ss08 on display text; liga disabled ("liga" 0) on hero headings| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |
| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |
| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |
| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |
| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |
| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |
| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |
| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |
| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |
| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |
| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |
| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |
| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |
| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |
| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |
| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |
ss03 (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like qualityrgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset). Hover: opacity 0.61px solid rgba(255, 255, 255, 0.1) border, subtle drop shadow (rgba(0, 0, 0, 0.03) 0px 7px 3px). Hover: opacity 0.6#6a6b6c), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to whitehsla(0, 0%, 100%, 0.815)), dark text (#18191a), pill shape. Hover: full white background (hsl(0, 0%, 100%))#101111 surface, 1px solid rgba(255, 255, 255, 0.06) border, 12px–16px border-radiusrgb(27, 28, 30) 0px 0px 0px 1px outer + rgb(7, 8, 10) 0px 0px 0px 1px inset inner — creates a double-ring containmentrgba(215, 201, 175, 0.05) 0px 0px 20px 5px) behind hero elements#07080a background, 1px solid rgba(255, 255, 255, 0.08) border, 8px border-radiushsla(202, 100%, 67%, 0.15)) ring appears#f9f9f9 input color, #6a6b6c placeholder#9c9c9d at 14px weight 500#9c9c9d) → white on hover, underline decoration on hover#121212 → #0d0d0d), heavy multi-layer shadow (rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px + inset shadows), creating realistic physical key appearance#1b1c1e background, white text, 6px radius, 14px font at weight 500, 0px 6px padding| Level | Treatment | Use |
|---|---|---|
| Level 0 (Void) | No shadow, #07080a surface |
Page background |
| Level 1 (Subtle) | rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px |
Minimal lift, inline elements |
| Level 2 (Ring) | rgb(27, 28, 30) 0px 0px 0px 1px outer + rgb(7, 8, 10) 0px 0px 0px 1px inset inner |
Card containment, double-ring technique |
| Level 3 (Button) | rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset + rgba(255, 255, 255, 0.25) 0px 0px 0px 1px + rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset |
macOS-native button press — white highlight top, dark inset bottom |
| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps — physical 3D appearance |
| Level 5 (Floating) | rgba(0, 0, 0, 0.5) 0px 0px 0px 2px + rgba(255, 255, 255, 0.19) 0px 0px 14px + insets |
Command palette, floating panels — heavy depth with glow |
Raycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:
- Outer rings for containment (replacing traditional borders)
- Inset top highlights (rgba(255, 255, 255, 0.05–0.25)) simulating light source from above
- Inset bottom darks (rgba(0, 0, 0, 0.2)) simulating shadow underneath
- The effect is physical: elements feel like glass or brushed metal, not flat rectangles
rgba(215, 201, 175, 0.05) 0px 0px 20px 5px behind featured elements — a subtle warm aura on the cold dark canvasrgba(0, 153, 255, 0.15) for interactive state emphasisrgba(255, 99, 99, 0.15) for error/destructive state emphasis#07080a (not pure black) as the background — the blue-cold tint is essential to the Raycast feel#FF6363) as punctuation, not pervasive — reserve it for hero moments and error statesrgba(255, 255, 255, 0.06) borders for card containment — barely visible, structurally essentialcalt, kern, liga, ss03 on all Inter text#000000) as the background — the blue tint differentiates Raycast from generic dark themeshsl(195, 5%, 15%)) border palette| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |
| Small Tablet | 600px–768px | 2-column grid begins, nav partially visible |
| Tablet | 768px–1024px | 2–3 column features, nav expanding, screenshots scale |
| Desktop | 1024px–1200px | Full layout, all nav links visible, 64px hero display |
| Large Desktop | >1200px | Max-width container centered, generous side margins |
#07080a)#f9f9f9)#FF6363)hsl(202, 100%, 67%) / ~#55b3ff)#9c9c9d)#101111)hsl(195, 5%, 15%) / ~#252829)When refining existing screens generated with this design system:
1. Check the background is #07080a not pure black — the blue tint is critical
2. Verify letter-spacing is positive (+0.2px) on body text — negative spacing breaks the Raycast aesthetic
3. Ensure shadows have both outer and inset layers — single-layer shadows look flat and wrong
4. Confirm Inter has OpenType features calt, kern, liga, ss03 enabled
5. Test that hover states use opacity transitions (0.6) not color swaps — this is a core interaction pattern