design.md

AI-ready Markdown · Human-readable · 120 tokens

Preview

# raycast.com Design System

> Inspected by UI Archive — https://ui-archive.com/raycast.com
> Last updated: 2026-04-30

## Colors

| Token | Value | Description |
|-------|-------|-------------|
| --color-base-white | #ffffff | Defined in :root as --Base-White |
| --color-grey-200 | #9c9c9d | Defined in :root as --grey-200 |
| --color-grey-300 | #6a6b6c | Defined in :root as --grey-300 |
| --color-grey-400 | #434345 | Defined in :root as --grey-400 |
| --color-grey-600 | #1b1c1e | Defined in :root as --grey-600 |
| --color-blue-dark | #56c2ff | Defined in :root as --blue-dark |
| --color-red-dark | rgba(255,99,99,1) | Defined in :root as --red-dark |
| --color-fg | hsl(240,11%,96%) | Defined in :root as --color-fg |
| --color-yellow | hsl(43,100%,60%) | Defined in :root as --color-yellow |
| --color-yellow-transparent | hsla(43,100%,60%,0.15) | Defined in :root as --color-yellow-transparent |
| --color-red | hsl(0,100%,69%) | Defined in :root as --color-red |
| --color-red-transparent | hsla(0,100%,69%,0.15) | Defined in :root as --color-red-transparent |
| --color-blue | hsl(202,100%,67%) | Defined in :root as --color-blue |
| --color-blue-transparent | hsla(202,100%,67%,0.15) | Defined in :root as --color-blue-transparent |

## Typography

| Token | Font Family | Size |
|-------|-------------|------|
| --font-size-sf-mono | SF Mono, Monaco, Cascadia Code, Roboto Mono, Consolas, Courier New, monospace | 13px |
| --font-size-geist-mono | Geist Mono, monospace | 10px |

All Tokens

Colors

36

Typography

24

Spacing

32

Radius

16

Shadows

12

Checking your plan…

Also available: Tokens Studio JSON

W3C DTCG format, ready to import into Figma via the Tokens Studio plugin.

View JSON export →