Cursor

Cursor sets restrained CursorGothic headlines with tight tracking on a light bone white canvas. Citrine (#c08532) is reserved for actions, on buttons with 4px corners, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 3.35544e+07px, with 4px and 8px on smaller elements.

cursor.com ↗

Colors

Citrine

#c08532

Primary actions and links

Ember

#f54e00

Secondary accent and highlights

Bone White

#f7f7f4

Page canvas

Graphite

#26251e

Headlines and body copy

Pale Citrine

#f2f1ed

Surface or divider

Fog

#d9d5cf

Supporting colour

Silver Mist

#b6b9be

Supporting colour

Soft Bone White

#fcfcfc

Surface or divider

Void

#141414

Surface or divider

Type scale

DisplayCursor is your coding agent for building ambitious software.CursorGothic · 26px · 400

HeadingMission Control Interfacesystem-ui · 20px · 700

SubheadingAgents turn ideas into codeCursorGothic · 22px · 400

BodyA grid view of all open windows as scaled previews, allowing quick selection to bring any system-ui · 13px · 400

NavSkip to contentCursorGothic · 14px · 400

Buttons

Skip to contentDownloadDownload for Windows⤓Request a demo→

Style reference measured from the public page at cursor.com on 2026-10-12 for design education. Cursor and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Cursor, Style Reference
> Cursor sets restrained CursorGothic headlines with tight tracking on a light bone white canvas. Citrine (#c08532) is reserved for actions, on buttons with 4px corners, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 3.35544e+07px, with 4px and 8px on smaller elements.

**Theme:** light · **Source:** https://cursor.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens, Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Citrine | `#c08532` | `--color-accent` | Primary actions and links |
| Ember | `#f54e00` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#f7f7f4` | `--color-canvas` | Page canvas |
| Graphite | `#26251e` | `--color-ink` | Headlines and body copy |
| Pale Citrine | `#f2f1ed` | `--color-surface-1` | Surface or divider |
| Fog | `#d9d5cf` | `--color-surface-2` | Supporting colour |
| Silver Mist | `#b6b9be` | `--color-surface-3` | Supporting colour |
| Soft Bone White | `#fcfcfc` | `--color-surface-4` | Surface or divider |
| Void | `#141414` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | CursorGothic | 26px | 400 | 1.25 | -0.013em |
| Heading | system-ui | 20px | 700 | 1.55 | 0 |
| Subheading | CursorGothic | 22px | 400 | 1.30 | -0.005em |
| Body | system-ui | 13px | 400 | 1.55 | 0 |
| Nav | CursorGothic | 14px | 400 | 1.00 | 0 |

Font families on the page: CursorGothic, system-ui, berkeleyMono, -apple-system, CursorIcons16, EB Garamond. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 3.35544e+07px, 4px, 8px, 10px, 12px
- Primary button: background `#c08532`, text `#ffffff`, radius 4px, padding 2px 8px, 12px / 500

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer