Cursor · scrub to study layout
Cursor
> Cursor
Warm parchment atelier lit by embers Cursor uses a warm parchment editorial language: cream canvas, ink-black text, and a single ember-orange accent that activates links and emphasis rather than filling buttons. Headlines whisper at weight 400 in CursorGothic with progressively tighter tracking as size grows — authority comes from restraint and letter-tightening, never from bold weight. Surfaces stay flat and paper-like with hairline borders and soft warm-gray shadows; corners stay sharp at 4px throughout. EB Garamond appears selectively for editorial subheadings and prose, and berkeleyMono handles code, labels, and metadata, giving the system a typographic personality that feels closer to a literary journal than a SaaS dashboard.
↗ https://cursor.comColor Palette
ACCENT
Ember
#f54e00
Orange text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
Amber
#c08532
Warm action button fill (Build, Continue) and accent icon strokes — earthy companion to ember, used in product UI chrome
Forest
#34785c
Green action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color
Verdant
#1f8a65
Green text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color
Crimson
#cf2d56
Red text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color
NEUTRALS
Ink
#26251e
Primary text, primary action button background, nav text — warm-tinted near-black, never pure #000
Ash
#7a7974
Icon fills, tertiary body text, subdued UI labels — the workhorse muted tone
Driftwood
#84847e
Secondary body text, table content — quieter than primary ink
Mist
#a1a19f
Tertiary helper text, captions — between muted and secondary
Stone
#cdcdc9
Hairline borders, dividers, subtle separators — warm-tinted 1px rules
Linen
#e6e5e0
Light neutral action fill for buttons on dark surfaces.
Bone
#f2f1ed
Card surfaces and elevated containers — one step darker than canvas, creates paper-on-paper layering without borders
Parchment
#f7f7f4
Page background, primary canvas — warm cream that softens contrast and makes ink feel printed rather than digital)
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.