Dark interfaceMeasured www.raycast.com

Raycast

A sleek, almost-black power-user tool with one bold red accent that feels fast and premium.

This page is styled with Raycast’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#07080A
Page behind everything

Surface#2F3031
Cards, panels, menus

Text#FFFFFF
Headings and body

Muted text#9C9C9D
Secondary info

Line#2F3031
Dividers and outlines

Accent#FF6363
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 20.0:1Muted on background 7.3:1Text on accent 2.9:1

Every colour found on their site

#FFFFFF#9C9C9D#2F3031#6A6B6C#07080A#000000#E6E6E6#FF6363#452324#434345#130D0E

Typography

Headings use Inter (free). Body text uses Inter (free).

h1	Inter · 64px · 600	Your shortcut to everything.
h2	Inter · 20px · 500 · 0.2px	Take shortcuts, not detours.
p	Inter · 18px · 400 · 0.2px	A collection of powerful productivity tools all within an ex

Corners & shadows

Corner sizes used

pill

8px

6px

11px

4px

12px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Raycast’s live website. Click to enlarge.

Buttons · 2

Raycast button: Download — #E6E6E6 · corners 8px · 36px

Raycast button: The Raycast Keyboard — #130D0E · corners 1000px · 30px

Buttons · 2

Raycast Buttons: Download — fill #E6E6E6 · corners 8px · Inter 14px

Raycast Buttons: The Raycast Keyboard — fill #130D0E · corners 1000px · Inter 14px

Tags and badges · 3

Raycast Tags and badges: The Raycast Keyboard — fill #452324 · corners 43px · Inter 16px

Raycast Tags and badges: All Types — no fill · corners 6px · Inter 13px

Raycast Tags and badges: Clipboard History — no fill · corners 6px · Inter 14px

Cards and panels · 1

Raycast Cards and panels: Linear — no fill · corners 20px · Inter 16px

Icons

30 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Raycast product screen: 2048 × 1176 — 2048 × 1176

Raycast product screen: 2848 × 1840 — 2848 × 1840

Raycast product screen: 2048 × 1152 — 2048 × 1152

Raycast product screen: 2560 × 1920 — 2560 × 1920

Raycast product screen: 1000 × 705 — 1000 × 705

Raycast product screen: 1756 × 1048 — 1756 × 1048

Raycast product screen: 2048 × 1024 — 2048 × 1024

Raycast product screen: 7728 × 5152 — 7728 × 5152

Raycast product screen: 1024 × 632 — 1024 × 632

Raycast product screen: 474 × 336 — 474 × 336

Do & don’t

What makes it Raycast

Near-black background with a dramatic glowing red-pink streak as the hero visual
Light grey pill buttons that pop against the dark background
Thin 1px borders instead of filled card backgrounds

Keep the base dark and let one bold accent colour do all the work
Use pill-shaped buttons with crisp thin borders
Let bold white headline type carry the page over colour

Don’t

Don't use pure black with no texture or glow
Don't scatter the accent colour everywhere
Don't use light, airy backgrounds for a tool like this

For AltLeads: Borrow the dark power-user theme and single accent colour for a 'command palette' quick-dial view built for speed.

Copy the tokens

Paste into any project to try this look.

/* Raycast · values measured from https://www.raycast.com/ · reference only, their brand belongs to them */
:root {
  --bg: #07080A;
  --surface: #2F3031;
  --text: #FFFFFF;
  --muted: #9C9C9D;
  --line: #2F3031;
  --accent: #FF6363;
  --on-accent: #FFFFFF;
  --radius-button: 8px;
  --radius-card: 20px;
  --radius-small: 4px;
  --button-height: 36px;
  --font-heading: "Inter", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --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 in;
}