What is Cursor's primary brand color?

Cursor's brand color is Cursor Orange — #f54e00, a saturated red-orange that sits between vermilion and pure orange. It's used scarcely: primary CTA pills, the wordmark, and the occasional hero accent. The press state is a darker #d04200. Most pages are 90% cream canvas (#f7f7f4) plus warm ink (#26251e), with the orange acting as a single voltage that focuses the eye on one action at a time. The brand never introduces a secondary accent color in mainline marketing.

Does Cursor's marketing site have a dark mode?

No — the marketing site is light-only, and deliberately not dark even though Cursor is an IDE. The canvas is warm cream (#f7f7f4) rather than white, ink is warm near-black (#26251e) rather than pure #000, and the IDE mockup card itself uses white surface (#ffffff) with a slightly different canvas-soft (#fafaf7) inside the panes. The actual code editor product has its own dark theme, but that surface is not represented in this DESIGN.md, which captures the public marketing experience.

What typography does Cursor use, and what should I use if CursorGothic isn't available?

Cursor runs CursorGothic as the single sans family for display and body, plus JetBrains Mono on every code surface (and code surfaces are roughly half the page). Display sits at weight 400 with negative letter-spacing — the 72px hero tracks at -2.16px for a magazine feel rather than a tech-bold voice. CursorGothic is licensed; Inter at weight 400 with letter-spacing tuned to -1.5% is the closest open-source substitute, or GT Sectra for a more editorial feel. JetBrains Mono is open-source and used as-specified.

What are the timeline pastels for, and can I use them as system colors?

The five pastels (peach #dfa88f, mint #9fc9a2, blue #9fbbe0, lavender #c0a8dd, gold #c08532) mark AI-action stages inside the in-product agent timeline — Thinking, Grepping, Reading, Editing, Done. They are strictly scoped to that one timeline visualization. They are not semantic system colors, not status indicators, and never appear as button or badge backgrounds outside agent timeline contexts. Using them on non-timeline UI breaks the brand's signature.

What is Cursor's shape and elevation language?

Compact and flat. CTA buttons use an 8px radius (rounded.md) — a developer dialect rather than the 12-14px consumer feel. Cards and IDE panes use 12px (rounded.lg). Timeline pills and badges are fully rounded (9999px). The system uses hairline-only depth — no drop shadows, no elevation tiers. Cards float above the cream canvas via 1px hairlines (#e6e5e0) and the slight white-on-cream contrast. The IDE-mockup card is the only element that reads as elevated, and even there the elevation comes from internal pane structure rather than a shadow.

Can I use this DESIGN.md to build my own React dev-tools site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce the brand's restraint (cream canvas, weight-400 display, single-voltage orange, hairline-only depth) rather than a generic dark-IDE theme. You can also reference the tokens directly: every color hex, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or shadcn theme variables. Pair it with JetBrains Mono on every code surface for the full effect.

Cursor Design System

Cursor's design system as a DESIGN.md file.

About Cursor DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source cursor.com

Developer Tools & IDEs
AI & LLM Platforms

Cursor is the AI-first code editor that decided its marketing site should not look like a code editor. The base canvas is warm cream (#f7f7f4) rather than the obligatory dark-IDE black, and the body ink (#26251e) is a warm near-black rather than pure #000. The brand voltage is one color — Cursor Orange (#f54e00) — used scarcely on primary CTAs and the wordmark. The signature visual moment is the AI-action timeline: five pastel pills (peach, mint, blue, lavender, gold) marking agent stages inside the editor mockups. Display runs at weight 400 with -2.16px letter-spacing on the 72px hero, a quietly-confident magazine voice rather than the heavy SaaS bombast.

This page packages that system into a single DESIGN.md file following the Google Labs spec. Inside: 21 color tokens (brand, surface, hairline, text, the five timeline pastels, and semantics), 15 typography styles with CursorGothic as the single family plus JetBrains Mono on every code surface, 8 corner-radius tokens topping out at the 8px CTA standard, a 9-step spacing scale anchored at the 80px section rhythm, and 25 components from the hero band through the IDE mockup, feature cards, timeline pills, pricing tiers, and the cream footer.

Hand the file to Claude, Cursor, or Copilot and the agent reproduces the brand's restraint — cream canvas, warm ink, single-voltage orange, weight-400 display — rather than defaulting to a generic dark-IDE theme. Or reference the tokens directly: every hex, font, radius, and spacing value is quoted YAML you can paste into Tailwind config, CSS variables, or a shadcn theme. The system is worth studying because it does the hardest thing in dev-tools branding: it stays calm.

What makes it distinct

Editorial cream canvas (#f7f7f4)not the dark IDE atmosphere every other AI code editor defaults to
Display weight stays at 400magazine voice with -2.16px tracking on the 72px hero, never bold
Single accent voltageCursor Orange (#f54e00) reserved for CTAs and the wordmark, used scarcely
Five-pastel AI timeline palettepeach, mint, blue, lavender, gold scoped strictly to in-product agent stages
Hairline-only depthno drop shadows anywhere; cards float on 1px borders and white-on-cream contrast

Live at cursor.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

cursor.com

Explore Cursor

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Cursor design system FAQ

Common questions about Cursor's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Cursor's marketing site

The live source — see the cream canvas, the timeline pills, and the IDE mockups in their native habitat.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Cursor in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→