Raycast design system

Raycast's website (raycast.com) uses a dark interface with #ff6363 as its primary color and Inter as the main typeface, with SF Pro Text alongside it. designlang measured 14 font sizes from 10px to 64px, 20 spacing values, 14 corner radii.

Captured 25 June 2026Dark UI3,018 elements read

Download tokens Read it yourself

Raycast colors

The brand roles and neutrals raycast.com renders, with how many elements use each one.

Brand colors

Primary#ff63635 uses
Secondary#8cd6ff2 uses
Accent#56c2ff1 uses

Neutrals

#ffffff5,172 uses
#6a6b6c361 uses
#9c9c9d277 uses
#434345125 uses
#e6e6e6110 uses
#2f303144 uses
#1b1c1e6 uses
#8e8c905 uses
#1112141 uses

Backgrounds

#07080a
#000000
#ffffff
#9ebed7
#111214
#d72a2a

Text colors

#ffffff20.04:1 on #07080a
#9c9c9d7.3:1 on #07080a
#2f30311.52:1 on #07080a
#6a6b6c3.75:1 on #07080a
#e6e6e616.05:1 on #07080a
#ff63636.89:1 on #07080a
#4343452.03:1 on #07080a
#8cd6ff12.57:1 on #07080a

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#2f3031`	`#e6e6e6`	10.6:1	AAA
`#ffffff`	`#1b1c1e`	17.05:1	AAA

Raycast fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Inter: sans, most text (2,247 elements)
SF Pro Text: sans, body (525 elements)
SF Pro: sans, body (215 elements)
GeistMono: mono, body (31 elements)

Body text: 16px at weight 400, line height 18.4px.

Weights in use: 400, 500, 700, 600, 300.

Type scale

Size	Weight	Line height	Tracking	Used on
64px	600	70.4px	normal	h1
56px	400	65.52px	0.2px	h3
32px	400	36.8px	normal	div, svg, path
24px	600	28px	-0.05px	div, svg, path, h3
23.75px	500	27.3125px	normal	div, svg, path
22px	400	25.3px	normal	span
20px	500	normal	0.2px	h2, p, span, h5
18px	400	normal	0.2px	p, span, script, div
16px	400	18.4px	normal	html, head, meta, link
14px	500	normal	0.2px	a, svg, path, span
13px	700	16px	normal	div, svg, g, path
12px	400	19.2px	0.2px	div, span, button, th

Spacing and radii

Spacing scale

1px
45px
56px
64px
72px
80px
96px
102px
120px
128px
137px
148px
169px
200px

Corner radii

2px
5px
8px
11px
16px
19px
22px
31px
36px

Medium radii lead, with a few larger ones. 32 distinct box shadows.

Motion

The motion reads as responsive.

Durations

xs: 100ms
sm: 200ms
md: 300ms
lg: 500ms
xl: 850ms
xxl: 1500ms

Easing

ease-in-out (87 uses): ease
ease-out (200 uses): cubic-bezier(0.23, 1, 0.32, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

75/100, grade C

Components found: buttons (25), cards (225), inputs (2), links (136), navigation (66), footer (106).

By category

Color Discipline	92/100
Typography Consistency	50/100
Spacing System	85/100
Shadow Consistency	50/100
Border Radius Consistency	65/100
Accessibility	100/100
CSS Tokenization	100/100

4 font families — consider limiting to 2 (heading + body)
32 unique shadows — consider a 3-level elevation scale (sm/md/lg)
9 !important rules — prefer specificity over overrides
75% of CSS is unused — consider purging
6212 duplicate CSS declarations

Download the tokens

The files designlang wrote for raycast.com. Run it yourself for a fresh read: npx designlang raycast.com.

The core values as CSS variables

:root {
  --color-primary: #ff6363;
  --color-secondary: #8cd6ff;
  --color-accent: #56c2ff;
  --color-background: #07080a;
  --color-text: #ffffff;
  --color-neutral-1: #ffffff;
  --color-neutral-2: #6a6b6c;
  --color-neutral-3: #9c9c9d;
  --color-neutral-4: #434345;
  --font-primary: "Inter", sans-serif;
  --font-secondary: "SF Pro Text", sans-serif;
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 8px;
}

Read raycast.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Netflix design system

Dark UI, Netflix Sans, #e50914

Linear design system

Dark UI, Inter Variable, #e4f222

Railway design system

Dark UI, Inter, #59497a

Framer design system

Dark UI, Inter, #0066ff

Quick answers

What font does Raycast use?

raycast.com sets most of its text in Inter (2,247 elements), with SF Pro Text, SF Pro and GeistMono alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Raycast's brand colors?

The brand roles on raycast.com are primary #ff6363, secondary #8cd6ff and accent #56c2ff, on a #07080a background. The neutrals used most are #ffffff, #6a6b6c and #9c9c9d.

How do I use the Raycast design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang raycast.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from raycast.com's public pages on 25 June 2026, so it shows what the site renders, not Raycast's internal source files. Raycast is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of raycast.com on 25 June 2026. Raycast is a trademark of its owner; designlang is not affiliated with it. More: the full Raycast brand kit, the token extraction guide and the markdown version of this page.