Cursor
light theme
Independent Style Review

Cursor-Style Design System

The Cursor design system uses a light-themed visual language. The primary brand color is Onyx Outline (#f54e00); text is Inkwell (#262510) on a Canvas Parchment (#f7f7f4) background. Typography is set in CursorGothic, berkeleyMono and Lato. This DESIGN.md contains 10 color tokens and a 6-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Cursor.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

Cursor-style design system: color codes and fonts

Theme
light
Primary color
Onyx Outline (#f54e00)
Fonts
CursorGothic, berkeleyMono, Lato, EB Garamond, -apple-system
Source
cursor.com

Warm ivory software studio.

Cursor's design language evokes a functional, precise studio environment, blending the tactile feel of physical tools with the clean, digital interface of modern software. A foundation of warm, off-white backgrounds (#f7f7f4) and subtle, multi-layered shadows create a sense of depth and hierarchy, mimicking stacked, floating interface elements. Typography is highly refined, utilizing custom mono and gothic fonts with precise letter-spacing and stylistic alternates that convey technical sophistication.

Original style summary

Cursor color codes

ColorHEXCSS tokenUsage
Canvas Parchment#f7f7f4--color-canvas-parchmentPage backgrounds, card backgrounds, neutral button backgrounds — provides a soft, warm foundation.
Inkwell#262510--color-inkwellPrimary text, strong borders, navigation text — grounds the lighter surfaces with significant contrast.
Muted Stone#7a7974--color-muted-stoneSecondary text, subtle borders, icon fills — a mid-tone gray for less prominent information or structural lines.
Deep Shadow#141414--color-deep-shadowDeepest text variant — for maximum contrast on headlines or critical information.
Pebble Gray#e6e5e0--color-pebble-grayHover states on neutral buttons, subtle card backgrounds — visually lighter than Canvas Parchment, indicating elevation.
Onyx Outline#f54e00--color-onyx-outlineOutlined action button borders and link text — a vibrant orange indicating interactive elements without a solid fill.
Chartreuse Alert#4ade80--color-chartreuse-alertsupporting accents, small interactive text snippets — a vivid green for positive or noteworthy cues, often within code examples.
Goldenrod Accent#c08532--color-goldenrod-accentAccent for specific interactive states or icons, often found in button backgrounds for 'Build' actions.
Forest Green Action#34785c--color-forest-green-actionSpecific button backgrounds/borders like 'View PR' — a moderate green for distinct, yet secondary actions.
Highlight Beige#cdcdc9--color-highlight-beigeSubtle card backgrounds on nested elements, faint border color — a light neutral for separation with low visual weight.

Which fonts does Cursor use?

FontWeightsFallback
CursorGothic400system-ui
berkeleyMono400, 500monospace
Lato400, 600sans-serif
EB Garamond400, 500
-apple-system400
RoleSizeLine heightToken
caption10px1.1--text-caption
body-lg14px1.43--text-body-lg
heading-sm22px1.25--text-heading-sm
heading26px1.2--text-heading
heading-lg36px1.1--text-heading-lg
display72px1--text-display

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on Cursor's public website (cursor.com). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by Cursor. The Cursor name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems