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. Cream canvas #f7f7f4, Cursor Orange #f54e00, CursorGothic, JetBrains Mono, 25 components. For React, Next.js, and AI tools.

Get Pro Download DESIGN.md

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP

Primary: #f54e00
Typeface: CursorGothic
Shape: Mixed
Base radius: 8px
Colors: 22
Type tokens: 14
Components: 25
Spacing values: 9

About

About Cursor DESIGN.md

Curated by Dov Azencot · Updated May 12, 2026 · Source cursor.com (opens in a new tab)

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: 22 colors 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

cursor.com

Live at cursor.com

A snapshot of the brand in production. Scroll the frame to see the whole page.

Visit cursor.com

Colors

22 colors

Cursor's system runs on #f54e00 as its primary voltage, used in 1 of 25 components. Type is set in CursorGothic across 14 tokens from 11px to 72px, weights 400–600. Shape language is mixed across 25 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 2

Surface

Page and card backgrounds · 4

Text

Headlines, body, captions · 7

Borders & Hairlines

Dividers, outlines, rules · 3

Semantic

Status, errors, success, links · 2

Other

Specialty colors · 4

Typography

14 type tokens

Set in CursorGothic across 14 tokens, from 11px to 72px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

display-mega72px · weight 400 · lh 1.1 · tracking -2.16pxThe quick brown fox jumps over the lazy dog
display-lg36px · weight 400 · lh 1.2 · tracking -0.72pxThe quick brown fox jumps over the lazy dog
display-md26px · weight 400 · lh 1.25 · tracking -0.325pxThe quick brown fox jumps over the lazy dog
display-sm22px · weight 400 · lh 1.3 · tracking -0.11pxThe quick brown fox jumps over the lazy dog
title-md18px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
title-sm16px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
body-md16px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
body-tracked16px · weight 400 · lh 1.5 · tracking 0.08pxThe quick brown fox jumps over the lazy dog
body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
caption13px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
caption-uppercase11px · weight 600 · lh 1.4 · tracking 0.88pxThe quick brown fox jumps over the lazy dog
code13px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
button14px · weight 500 · lh 1The quick brown fox jumps over the lazy dog
nav-link14px · weight 500 · lh 1.4The quick brown fox jumps over the lazy dog

Layout

Radii and spacing

8 corner radii and 9 spacing values. Shape language: mixed.

Radii

none0px
xs4px
sm6px
md8px
lg12px
xl16px
pill9999px
full9999px

Spacing

xxs4px
xs8px
sm12px
base16px
md20px
lg24px
xl32px
xxl48px
section80px

Components

25 components

Each rendered from its tokens (color, type, radius, padding) on Cursor's own canvas.

Top Nav
top-navTop Nav
Button Primary
button-primaryButton Primary
Button Primary Active
button-primary-activeButton Primary Active
Button Secondary
button-secondaryButton Secondary
Button Tertiary Text
button-tertiary-textButton Tertiary Text
Button Download
button-downloadButton Download
Hero Band
hero-bandHero Band
Ide Mockup Card
ide-mockup-cardIde Mockup Card
Ide Pane
ide-paneIde Pane
Feature Card
feature-cardFeature Card
Comparison Card
comparison-cardComparison Card
Timeline Pill Thinking
timeline-pill-thinkingTimeline Pill Thinking
Timeline Pill Grep
timeline-pill-grepTimeline Pill Grep
Timeline Pill Read
timeline-pill-readTimeline Pill Read
Timeline Pill Edit
timeline-pill-editTimeline Pill Edit
Timeline Pill Done
timeline-pill-doneTimeline Pill Done
Code Block
code-blockCode Block
Pricing Tier Card
pricing-tier-cardPricing Tier Card
Pricing Tier Featured
pricing-tier-featuredPricing Tier Featured
Type here…
text-inputText Input
Badge Pill
badge-pillBadge Pill
Cta Band
cta-bandCta Band
Testimonial Card
testimonial-cardTestimonial Card
Footer
footerFooter
Footer Link
footer-linkFooter Link

In use

The system, in use

Cursor's tokens on the kind of product it builds.

Build something people actually use.

A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.

Get startedLearn more

Marketing heroHeadline, sub-copy, primary CTA — the universal homepage opener.

FAQ

Cursor design system FAQ

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

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

Download the DESIGN.md
One machine-readable file: every color, type, radius, spacing, and component token of Cursor.
Feed it to your AI tool
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Cursor's visual language.
Reference the tokens directly
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md: overview, rationale, do’s and don’ts

Overview

Cursor's marketing site reads as a quietly-confident developer brand that believes in editorial calm over IDE-darkness. The base canvas is warm cream ({colors.canvas} — #f7f7f4) holding warm near-black ink ({colors.ink} — #26251e) for body and display alike. The single brand voltage is Cursor Orange ({colors.primary} — #f54e00) reserved for primary CTAs and the wordmark — used scarcely.

Type runs CursorGothic as the single sans family. Display sits at weight 400 with negative letter-spacing — a magazine-editorial voice rather than tech-bombastic. JetBrains Mono carries every code surface (and code surfaces are roughly half the page).

The brand's strongest visual signature is the AI-timeline pill palette: five pastel pills (peach {colors.timeline-thinking}, mint {colors.timeline-grep}, blue {colors.timeline-read}, lavender {colors.timeline-edit}, gold {colors.timeline-done}) marking AI-action stages inside in-product timeline visualizations. Used only in product UI — never as system action colors.

Key Characteristics:

Warm cream canvas, not white. Ink is warm (#26251e), not pure black.
Single CTA color: {colors.primary} (Cursor Orange #f54e00). Used scarcely.
Display weight stays at 400 — never bold. Magazine voice.
AI timeline pastels: 5 dedicated tokens for in-product agent action stages.
Compact 8px CTA radius — developer dialect.
Hairline-only depth; no drop shadows.
80px section rhythm.

Known Gaps

CursorGothic is a licensed typeface; Inter is the substitute.
Animation timings (timeline pill entrance, IDE pane reveal) out of scope.
In-app surfaces (code editor, chat panel, agent timeline) only partially captured via marketing IDE mockups.
Form validation states beyond focus not visible on captured surfaces.

Developer Tools & IDEs

More systems like this

More DESIGN.md files in Developer Tools & IDEs.

All 71 in Developer Tools & IDEs

Pricing

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

How many people can use the license.
Client work, SaaS products and anything you charge for.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
Complete multi-page sites you can ship as they are.Templates: All 14 templates
React icons from every major library, installable with one command.React icons: 294k+ icons
Presets that restyle every block, in light and dark.Themes: All 59 themes
Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats
Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro

Cursor Design System

About Cursor DESIGN.md

What makes it distinct

Live at cursor.com

22 colors

Brand & Accent

Surface

Text

Borders & Hairlines

Semantic

Other

14 type tokens

Radii and spacing

Radii

Spacing

25 components

The system, in use

Cursor design system FAQ

What is Cursor's primary brand color?

Does Cursor's marketing site have a dark mode?

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

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

What is Cursor's shape and elevation language?

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

Related reading

Use Cursor in your project

Download the DESIGN.md

Feed it to your AI tool

Reference the tokens directly

Overview

Known Gaps

More systems like this

Build it with Pro

Individual

Team

Organization

Individual

Team

Organization

Your system, built for you