Cursor — design system & UI screens

Dev Tools · 2 screens · 17 sections · cursor.com

A warm off-white (paper/beige) landing page for Cursor's coding agent, anchored by a left-aligned hero with two black download/demo CTAs and a large layered IDE screenshot (file tree + chat + code) floating over a soft painterly landscape strip. Its signature treatment is the repeating full-bleed product-band rhythm: alternating left/right text-plus-real-app-screenshot rows (agentic planning, parallel cloud agents, GitHub PR review, magically-accurate autocomplete) each set against subtly different neutral panels, capped by a three-up quote testimonial grid with avatars and a structured Changelog list. The understated rust-orange inline link accent and editorial serif section headers keep it feeling like a calm research-tool rather than a loud SaaS page.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/cursor.

Decoded design system

Cursor's decoded design system: background #F7F7F4, text #26251E, accent #E6E5E0, link #C08532, primary #F54E00; type scale h1 26px / h2 20px / body 16px; 4px spacing base; 3px base radius. The single interactive/action color is #E6E5E0 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F7F7F4`
surface	`#EAEAE7`
border	`#D7D7D3`
text	`#26251E`
text_muted	`#75746F`
primary	`#F54E00`
accent	`#E6E5E0`
link	`#C08532`
secondary	`#34785C`
button_bg	`#E6E5E0`
button_text	`#26251E`

Using these colors

Action color #E6E5E0 — the single interactive color; only on things you click or must notice, never large fills.
accent, button_bg are all #E6E5E0 — one role, not several (the action color).
accent #E6E5E0 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #F54E00 — a brand color — but the call-to-action uses #E6E5E0, not this.
link #C08532 — fails contrast on the background (~2.9:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
secondary #34785C — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Cursor Gothic
Body: Cursor Gothic
Mono: berkeleyMono
h1: 26px
h2: 20px
body: 16px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px

Radii

base: 3px
button: 9999px

Shadows (elevation)

subtle: rgb(235, 234, 229) 0px 0px 0px 2px
card: rgba(0, 0, 0, 0.3) 0px 22px 70px 4px, rgba(0, 0, 0, 0.15) 0px 0px 0px 0.5px
overlay: rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263078 -0.0023028 0.0124791 / 0.1) 0px 0px 0px 1px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 140ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · cubic-bezier(0, 0, 0.2, 1)
animated properties: border-color, color, background-color, outline-color

Native design tokens

Token	Value
`--color-bg`	`#f7f7f4`
`--color-text-primary`	`#26251e`
`--color-accent`	`#f54e00`
`--color-code-bg`	`#f2f1ed`
`--color-code-text`	`#26251e`
`--color-bg-hover`	`#ebeae5`
`--color-success`	`#1f8a65`
`--color-error`	`#cf2d56`
`--color-warning`	`#f54e00`
`--color-bg-elevated`	`#f2f1ed`

…and 110 more measured on the page.

Button states (measured)

primary hover: border 1px solid rgb(59, 58, 51) · background #3B3A33
primary focus: outline 2px solid rgb(38, 37, 30)

Layout (measured)

container max-width: 1300px
nav: 52px fixed
common grid: 3 columns

Motion choreography (measured)

Load order: span.shimmer×8 → div.border×2 → div.border×2 → div.border×2 → div.border×2 → span.w-[2px]

Overlay recipe (measured)

dropdown panel: #F2F1ED · radius 8px

Input (measured)

height 31px · radius 0px

Themes

dark counterpart: background #14120B, text #EDECEC.

Responsive (measured)

breakpoints: 420px · 600px · 640px · 660px · 768px · 900px
mobile (390px): hero 24px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →