29 October 2026

Cursor design system: both meanings, answered

Search "cursor design system" and Google answers two different questions at once, because two different groups of people type it.

Quick answer: if you want Cursor's own visual language, the tokens are published as a DESIGN.md and the headline values are a warm cream canvas (#f7f7f4), near-black warm ink (#26251e) and a single accent, Cursor Orange (#f54e00). If you want to plug your design system into Cursor so its agent builds on-brand UI, there are three layers that actually work: a .cursor/rules/design-system.mdc rules file, the Figma plugin or MCP for live component data, and Design Mode for correcting what already renders. The rules file is the one that works with no other tooling.

Minimal illustration: two thin outlined rectangles of different proportions overlapping at one corner, with a solid muted orange dot on the overlap

Google's AI Overview for the query says the quiet part out loud. It defines the term as "the visual identity, tokens, and rules used by the Cursor AI code editor, as well as how designers and developers encode design systems into Cursor so AI agents build UI components that match brand guidelines," and then ends by asking the searcher which one they meant. Both halves are below.

What is Cursor's own design system?

Cursor does not publish a design system site. What exists is a community analysis of its marketing surface, and it ranks first on this query: the Cursor DESIGN.md in VoltAgent's awesome-design-md repository (124,347 stars, MIT licensed, 84 entries under design-md/ as of 29 October 2026).

The file's own description calls Cursor "an AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (#f7f7f4) instead of the typical dark IDE atmosphere." The declared tokens:

Canvas #f7f7f4, with #fafaf7 as the soft variant and white for cards
Ink #26251e for display and strong body, #5a5852 for body, #807d72 muted
Primary #f54e00, active state #d04200, reserved for primary CTAs and the wordmark
Hairlines #e6e5e0, #efeee8 and #cfcdc4, with no shadows on cards
Display type CursorGothic at weight 400 with negative letter-spacing, from 72px down, and JetBrains Mono on every code surface
A pastel timeline palette (peach, mint, blue, lavender, gold) used only inside in-product visualisations of AI action stages

The catalogs disagree, and that is the useful part

The same maintainers' commercial catalog describes the same brand differently. Its Cursor entry currently reads "Cursor is designed around AI-first code editor and uses sleek dark interface, gradient accents," and recommends it for "code editor UIs, developer tool marketing, and dark gradient designs." A warm cream canvas and a sleek dark interface are not the same design system.

This is the single most practical thing to know about brand DESIGN.md catalogs: the summary lines are generated from whatever the site rendered on the day it was read, and brands redesign. Open the token block and check it against the live site before you build on it. duply publishes its own reviewed Cursor entry for the same reason, and 312 reviewed files in the library behind it.

How do you give Cursor your design system?

Three layers, in order of how little setup they need.

1. A rules file in `.cursor/rules`

Cursor's own designer documentation tells you to "Create a .cursor/rules/design-system.mdc file" to encode your conventions so the agent follows them automatically. The rules documentation sets out the mechanics: "Project rules live in .cursor/rules as .mdc files and are version-controlled," they "must use the .mdc extension," and plain .md files in that directory are ignored unless they carry frontmatter metadata.

Three frontmatter fields decide when a rule loads: alwaysApply, description and globs. That maps to four behaviours, and the choice matters for a design system:

✅ Always Apply (alwaysApply: true) for the token and component rules you never want the agent to improvise around. ✅ Apply to Specific Files (globs) to scope component conventions to src/components/** and keep them out of unrelated context. ✅ Apply Intelligently (description) for the long-tail rules, like accessibility or motion, that only matter on some tasks. ❌ Do not dump an entire design system into one always-on rule. Cursor's docs say to "Keep rules under 500 lines" and split larger rules into composable ones. ❌ Do not leave a design-system.md in .cursor/rules and assume it loaded. Wrong extension, silently ignored.

A root DESIGN.md works alongside this and is the portable half: the same file is read by Claude Code, v0 and Lovable. Logofai's write-up from 26 July 2026 puts the pitch plainly: "Put a design.md in your repo and Cursor, Claude Code, v0 and Lovable build in your exact colours, fonts and components." The rules file is what guarantees Cursor reads it on a given task.

2. The Figma plugin, for live component data

Cursor's designers page describes the connection: "The Figma plugin connects Cursor to your design files. Copy a Figma link, and Cursor can reference frames, extract design tokens, and generate code that matches your designs." It goes further than reading, too: "Cursor can create Figma files, write directly to existing ones, and use your team's design system," and "With the Figma plugin, Cursor can inspect your published libraries and work with existing components, variables, tokens, and styles." There is a named skill for the reverse direction, /figma-generate-library, which creates components from an existing codebase.

When this beats a file: your design truth lives in a maintained Figma library and changes weekly. A file goes stale, a published library does not.

When it does not: the library is not actually maintained, or half your real decisions live in production CSS that Figma never caught up with. Then a rules file plus a DESIGN.md describes reality better than the library does.

3. Design Mode, for correcting what renders

The newest layer, and the one that changes the loop rather than the inputs. The Design Mode documentation states: "Design Mode lets you direct agents by leaving notes on your running app." It "lives in the browser inside the Agents Window," reached by clicking Annotate in the browser toolbar or pressing Cmd + Shift + D, and it is "available in Cursor 3.24.18 or later."

What the agent receives with each note is the part that matters for design work: element details including tag, id, classes, the CSS selector, the first 200 characters of text, size, position and computed styles, plus a cropped screenshot. You can select single or multiple elements, drag to mark an area, double-click to edit text in place, change CSS through an inspector, and dictate notes by voice.

This sits on top of the visual editor Cursor shipped on 11 December 2025, which the announcement said "unifies your work across design and code, helping you better articulate what you want so that execution isn't limited" by mechanics.

Tip: Design Mode fixes instances. A rules file fixes the pattern. If you find yourself annotating the same spacing error on four pages, the correction belongs in .mdc, not in a note.

What the Cursor community actually does

The discussion block on this SERP is small and specific, which tells you the practice is still forming.

"I built a registry of design systems for Cursor" (Cursor forum, 6 June 2026, one reply). Zoltán Szőgyényi describes four months on a single problem, "building better UI with AI," and says of the launch that "the ability to pull your own design systems (via themes, ZIP, or Figma) can be quite a game changer for managing design" systems across AI tools. Three import shapes, no file format in common.
"Front End Designing & Coding (UI/UX) - What do you use?" (Cursor forum, 10 October 2025) asks "How do you approach UI/UX design and coding in Cursor? Tips for workflows, external tools, and model selection?" The question being open a year ago and still ranking is the state of the art here.
"Any designers using Cursor for creating designs instead of Figma?" (r/Design, 11 posts) is the sceptic thread, and it is in Google's discussions block rather than organic results.
Pixelflips framed the whole category on 21 February 2026 in one line worth keeping: "AI doesn't know your design system. Claude skills and Cursor rules are the simplest way to fix that without building infrastructure."

Notice what is missing. There is no Cursor design-system store, no marketplace, no official template shelf. Claude shipped one in April 2026 and the three routes into Claude Code differ because of it. In Cursor, the repo is the store.

Which layer when

Your design truth lives in	Use	Why
The repo, or nowhere yet	`DESIGN.md` plus a `design-system.mdc` rule	No dependency, version-controlled, portable to other agents
A maintained Figma library	The Figma plugin	Reads published components, variables and styles live
Production CSS that nothing documents	Design Mode first, then write the rule	Correct what renders, then promote the correction
A design system package you ship	Rules file pointing at the package	Keeps the agent importing instead of reinventing

The duply workflow

A rules file only helps if what it says is specific enough to act on. That is the part most teams skip, and it is what the duply library exists for: 312 reviewed DESIGN.md files, each with a live entry page so you can read the tokens, the component rules and the reasoning before adopting any of it. What is DESIGN.md covers the format, give your AI agent a design system covers getting an agent to respect the file across a long session, and Claude Code design system covers the same question for the other editor.

FAQ

Is there a Cursor design system on GitHub?

Yes, as a community analysis rather than an official release. VoltAgent/awesome-design-md holds a design-md/cursor/DESIGN.md with Cursor's tokens, and the repo is MIT licensed with 124,347 stars and 84 entries. Cursor itself does not publish a design system repository.

Can I download the Cursor design system?

You can download a community DESIGN.md describing it, from awesome-design-md on GitHub or from a catalog entry page. Treat it as an analysis of Cursor's marketing site, not an official brand package, and check the tokens against the live site because the catalogs currently disagree with each other.

What is a .cursor/rules file?

Cursor's project-rules mechanism. Per Cursor's docs, "Project rules live in .cursor/rules as .mdc files and are version-controlled" and "must use the .mdc extension." Frontmatter fields alwaysApply, description and globs control whether a rule loads always, intelligently, on matching files, or only when you mention it.

Should I use a DESIGN.md or a .mdc rule for my design system in Cursor?

Both, and they do different jobs. The DESIGN.md holds the content and is portable to Claude Code, v0 and Lovable. The .mdc rule is Cursor's loading mechanism, which decides whether the agent reads the content on this task. Content without a loading rule gets ignored; a loading rule without content has nothing to say.

Does Cursor have a Figma integration?

Yes. Cursor's designers page says the Figma plugin lets Cursor "reference frames, extract design tokens, and generate code that matches your designs," inspect published libraries, and write back to Figma files. There is also a /figma-generate-library skill for generating components from your codebase.

What is Cursor Design Mode?

Per Cursor's documentation, "Design Mode lets you direct agents by leaving notes on your running app." It lives in the browser inside the Agents Window, opens with Annotate or Cmd + Shift + D, and requires Cursor 3.24.18 or later. Each note sends the agent the element's selector, computed styles, position and a cropped screenshot.

Does Cursor have a design system marketplace like Claude Design?

No. Claude shipped a design-systems feature with a /design-sync command; Cursor has rules files, the Figma plugin and Design Mode instead. The practical consequence is that in Cursor your design system is a repo artifact, which is more portable and requires you to maintain it yourself.

Summary

"Cursor design system" is two questions. Cursor's own tokens (#f7f7f4 canvas, #26251e ink, #f54e00 accent, CursorGothic plus JetBrains Mono), or how to plug yours in.
Start with a rules file. .cursor/rules/design-system.mdc, .mdc extension required, under 500 lines, with globs to scope it.
Keep the content in a DESIGN.md. It is the only part that transfers to Claude Code, v0 and Lovable.
Use the Figma plugin only if the library is genuinely maintained. Otherwise a file describes reality better.
Use Design Mode to correct instances, then promote repeated corrections into the rule.
Check any catalog's Cursor entry against the live site. Two catalogs from the same maintainers describe it as cream-editorial and as sleek-dark respectively.

Start from a system somebody already reviewed: browse the duply library.