// default theme · light

Cursor is your coding agent for building ambitious software.

Download for Linux ↓Request a demo →
Cursor Desktop
In progress 2
Analyze usage patterns
Build landing page
Set up Cursor Rules
Build landing page
Read brand-guidelines.pdf
Plan search and build
app/page.tsx+52 -0
app/globals.css+18 -0
Cursor Agent
Analyze workspace context
Review implementation plan
summary.py+51
report.py+40
01 / Foundation

Warm technical light

Parchment replaces stark white, warm ink carries text, and orange is limited to links and emphasis. Product states introduce muted functional colors.

Ink
#26251e · text/action
Parchment
#f7f7f4 · canvas
Bone
#f2f1ed · card
Paper
#ffffff · window
Linen
#e6e5e0 · secondary action
Hairline
#cdcdc9 · border
Muted Ink
#7a7974 · secondary text
Cursor Orange
#f54e00 · link/accent
Forest
#34785c · PR action
Amber
#c08532 · product action
Error
#cf2d56 · deletion/error
Success
#1f8a65 · addition/success
Thinking
#dfa88f · timeline
Grep
#9fc9a2 · timeline
Read
#9fbbe0 · timeline
Edit
#c0a8dd · timeline
02 / Typography

Interface-first type

CursorGothic leads marketing and UI, berkeleyMono handles agent and terminal content, while EB Garamond appears only inside editorial mockups. Inter and JetBrains Mono are open substitutes.

CursorGothic substitute
Cursor Aa

Inter · weights 400–500

Mono substitute
$ build()

JetBrains Mono · source: berkeleyMono

Editorial
Acme Labs

EB Garamond · mockups only

hero
Build ambitious software
72 / 1.1 / 400 / -2.16
display
Your coding agent
36 / 1.2 / 400 / -.72
heading
Agentic development
26 / 1.25 / 400
heading-sm
Work across your codebase
22 / 1.3 / 400
body
Plan, search, build, and review without leaving the editor.
16 / 1.5 / 400
code
const result = await agent.run()
12 / 1.67 / 400
caption
Reviewed workspace · 7s
11 / 1.5 / 400
03 / Geometry

Compact rhythm

Small product increments and 4px corners make the system feel native to desktop software rather than a rounded marketing template.

Core spacing

2
2px
3
3px
4
4px
8
8px
12
12px
16
16px
20
20px
24
24px
32
32px
48
48px
60
60px

Observed radii

1.5px
4px
8px
12px
04 / Product elevation

Window depth

Layered warm-black elevation is reserved for product mockups; flat lists and ordinary content stay on the canvas.

Default product card0 28px 70px rgba(0,0,0,.14) + 0 14px 32px rgba(0,0,0,.1)
Focused product card0 25px 50px -12px rgba(0,0,0,.25) + 0 12px 24px -8px rgba(0,0,0,.15)
05 / Components

Agent interface

Marketing controls and in-product surfaces share the same warm light palette, sharp geometry, and semantic status colors.

Primary and secondary actions

4px radius
Read the docs →

Terminal command

berkeleyMono / bone
$ curl https://cursor.com/install -fsS | bash

Agent timeline states

semantic pills
ThinkingGrepReadEditDone

Window mockup and input

elevated bone
Cursor Agent
Plan, search, build anything…

@ Agent · Composer 2.5
+52 app/page.tsx
+18 app/globals.css

Done. Ready for review.
06 / Direction

Usage rules

Cursor’s default public design is light, warm, and compact; the editor context should not turn the whole reference dark.

Preserve

  • Use Parchment as the default page canvas.
  • Keep primary actions filled with Ink.
  • Reserve orange for links and small emphasis.
  • Use 4px geometry across controls and product cards.

Avoid

  • Replacing the default reference with a dark editor theme.
  • Using orange as a large surface fill.
  • Applying product-card elevation to flat lists.
  • Setting interface copy in the editorial serif.
DESIGN.md ↓tokens.json ↓variables.css ↓theme.css ↓