# Raycast design system: colors, fonts and tokens

> 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.

Source: https://raycast.com, captured 25 June 2026. Page: https://designlang.app/design-system/raycast

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#ff6363` | 5 |
| Secondary | `#8cd6ff` | 2 |
| Accent | `#56c2ff` | 1 |

Neutrals: `#ffffff`, `#6a6b6c`, `#9c9c9d`, `#434345`, `#e6e6e6`, `#2f3031`, `#1b1c1e`, `#8e8c90`, `#111214`

Backgrounds: `#07080a`, `#000000`, `#ffffff`, `#9ebed7`, `#111214`, `#d72a2a`

## Fonts

- Inter (sans), 2247 elements
- SF Pro Text (sans), 525 elements
- SF Pro (sans), 215 elements
- GeistMono (mono), 31 elements

## 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 |
| 11px | 600 | 10px | 0.8px | i, div |
| 10px | 300 | normal | 0.5px | div |

## Spacing

1px, 45px, 56px, 64px, 72px, 80px, 96px, 102px, 120px, 128px, 137px, 148px, 169px, 200px, 212px, 217px, 224px, 325px, 370px, 400px

## Radii

2px, 5px, 8px, 11px, 16px, 19px, 22px, 31px, 36px, 43px, 86px, 100px, pill, pill

## Motion

Feel: responsive. Durations: 100ms, 200ms, 300ms, 500ms, 850ms, 1500ms.

## Audit

Overall 75/100 (grade C).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/raycast-com/raycast-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/raycast-com/raycast-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/raycast-com/raycast-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/raycast-com/raycast-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/raycast-com/raycast-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/raycast-com/raycast-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/raycast-com/raycast-com-DESIGN.md)

Regenerate: `npx designlang raycast.com`