Home
DESIGN.mdStar on GitHub

Cursor

The AI code editor — technical precision through a warm, achromatic aesthetic with a single chromatic accent.

Colors
App UI — Anysphere Dark
editor.background#181818Editor canvas
dropdown.background#1d1d1dPanels, widgets
accent-blue#228df2Caret, buttons, links
editor.selection#163761Text selection
border#383838Panel borders
foreground#d6d6ddDefault text, icons
Marketing — Warm Parchment
canvas-parchment#F7F7F4Page background
inkwell#26251EPrimary text
card-stone#E6E5E0Elevated cards
ember-orange#f54e00Marketing CTA only
Semantic
error#f14c4cErrors, deleted git
warning#ea7620Warnings, debug
success#15ac91Git added, progress
Typography
display
CursorGothic · 400
Your coding agent
72px−0.03em
heading-lg
CursorGothic · 400
Built to make you extraordinary
36px−0.02em
body-16
CursorGothic · 400
Cursor knows your codebase and writes code that fits your patterns.
16pxlh 1.5
ui-body
CursorGothic · 400
App chrome, panels, command palette labels
13pxlh 1.5
ui-label
CursorGothic · 400
EXPLORER · SEARCH · SOURCE CONTROL
11pxuppercase
code
JetBrains Mono
const ai = new Cursor({ model: 'claude-4' })
13pxmono
Components
Editor — inline AI suggestion
index.ts auth.ts
1import { createClient } from '@supabase/supabase-js'
2
3// validate user session
4export async function getUser(token: string) {
5const { data, error } = await supabase
6.auth.getUser(token)
7if (error) throw new Error(error.message)Tab
8return data.user
9}
Chat panel
Cursor
You
Add error handling to getUser
Cursor
I'll add a try/catch with proper error propagation.
try {
  const { data, error } = await supabase.auth.getUser(token)
  if (error) throw error
  return data.user
} catch (e) {
  console.error('Auth failed:', e)
  throw e
}
App buttons
Marketing
Status badges
AI Added Error Warning
Spacing — 4px base unit
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-10
40px
section
64px
Guardrails
DO
Use #228df2 as the sole chromatic color in app UI — all other color is semantic status
Keep all app surfaces within the #141414–#1d1d1d range. No mid-grey or coloured backgrounds
Render all code in Berkeley Mono — editor, chat, tooltips, inline diffs
Use Cursor Gothic exclusively for brand and marketing text — never inside the IDE
Use pill radius for marketing CTAs; 4px/8px for IDE UI elements
DON'T
Use gradients, drop shadows, or colored glows in app UI — depth comes from bg value alone
Use orange (#f54e00) inside the IDE — that accent belongs to marketing only
Use pure black #000000 for text — use warm near-black #14120B on marketing surfaces
Place more than one chromatic accent per screen in the IDE
Animate layout transitions in the editor — micro-animations only in chat stream and diffs