screenroveScreenrove / Design references
Raycast design guide
A dark, keyboard-first launcher site where the product itself, in animated mockups, carries the page.
Typography
Observed family: Inter. Font files are not distributed.
marketing: Dark showcase with red light
- Canvas:
#07080a - Primary text:
#ffffff - Secondary heading text:
#6a6b6c - Nav link text:
#9c9c9d - Accent (eyebrows, links):
#ff6363 - Light button fill:
#e6e6e6 - Light button label:
#2f3031 - Bento card fill:
rgba(255, 255, 255, 0.02)
Layout and components
- Floating navbar: a 92px fixed container with 16px inset holding a rounded, bordered dark bar; links centred, Log in and a light Download button on the right.
- Sections are centred and short: a 20px heading in white with a grey second line, then a large app mockup or a bento grid (30px radius cards, 24px padding, about 1020px wide).
- Pricing uses three plan cards with the Pro card raised, then a full-width comparison table; long pages close on a red light motif above a six-column footer.
- Primary action: light #e6e6e6 fill, #2f3031 14px / 500 label, 8px radius, 8px / 12px padding, 36px high, often with an Apple icon.
- Eyebrow labels in red JetBrains Mono caps above headings (for example "AI AGENT").
- Live mockups of the macOS app (launcher, AI chat, clipboard history) animate through scripted states.
- Monospace (GeistMono 12px) for small print such as "macOS Tahoe and Apple Silicon required".
product: Dark store and docs
- Canvas:
#07080a - Primary text:
#ffffff - Secondary text:
#9c9c9d - Muted text:
#6a6b6c - Card border:
rgba(255, 255, 255, 0.06) - Search field fill:
#0c0d0f - Search field border:
#2f3031 - Accent:
#ff6363 - Version badge fill:
rgba(255, 97, 97, 0.15) - Docs canvas (GitBook):
#1d1d1d
Layout and components
- Store catalogue: a two-column grid of outlined cards (12px radius, 32px padding, 1px rgba(255,255,255,0.06) border) under a tab row and a search field.
- Extension detail: a header row (icon, name, meta, install actions) above pill tabs, with the main column on the left and Contributors, compatibility and categories in a right rail.
- Search is a centred command palette over a blurred, dimmed page, grouped under small section labels, the selected row showing a return-key hint.
- Install Extension: light #e6e6e6 button, 8px radius, 40px high, paired with a dark chevron button that opens Copy Link / Get Install Button.
- Small Install on cards: 36px high, 8px radius, subtle white-alpha gradient fill.
- Pill tabs: 9999px radius, 13px / 600; the active tab has a grey radial-gradient fill and a 1px rgba(255,255,255,0.1) border.
- Modal dialogs (Get Install Button) sit on a blurred backdrop with a round close button.
Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.
Download DESIGN.md