Warm-dark, editorial, restrained: near-black with olive warmth, pill buttons, pastel accents only in the logo gradient.
⚠ native app, site only
Browse Cursor in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: cursor.com (live DOM, computed styles + color census 2026-07-06; motion/effects/responsive census 2026-07-07). Coverage: marketing site + embedded product mockup (Cursor Desktop shell). Native app; no web dashboard (site only).
Warm-dark, editorial, restrained. A near-black canvas with a faint olive/brown warmth carries a near-white monochrome UI: fully-rounded pill buttons and modest weight-400 display type. Pastel brand accents (pink / lavender / teal / amber) appear only in the logo gradient and highlights — the UI itself stays warm-dark monochrome, near-flat, separated by translucent hairlines rather than shadows. The product mockup, not the copy, is the hero; motion is subtle and mechanical, communicating the agent working rather than decorating. Feels: precise, calm, engineer's-tool premium.
| Token | Hex | Role / usage |
|---|---|---|
| bg | #14120b | Page canvas (near-black, faint warm/olive tint) |
| surface-1 | #1b1913 | Panels, cards, inputs |
| surface-2 | #201e18 | Raised surface |
| surface-3 | #26241e | Secondary button, hover |
| surface-4 | #2b2923 | Pressed / higher |
| border | rgba(237,236,236,.1) | Hairline (10% warm white) |
| border-strong | rgba(237,236,236,.2) | Outline-button border |
| Token | Value | Role / usage |
|---|---|---|
| text | #edecec | Primary text (near-white) |
| text-2 | #d6d6dd | Secondary |
| text-muted | rgba(237,236,236,.6) | Tertiary / labels |
| text-faint | rgba(237,236,236,.4) | Disabled, hints |
| Token | Hex |
|---|---|
| pink | #e394dc |
| lavender | #aaa0fa |
| teal | #83d6c5 |
| amber | #c08532 |
Rule: the entire UI is warm-dark monochrome (near-black + near-white). The pastel quartet appears only in the brand logo gradient, a subtle hero glow, or diff/status accents — never as button or surface fills.
CursorGothic, "CursorGothic Fallback", system-ui, "Helvetica Neue", Arial, sans-serif. CursorGothic is a custom humanist grotesque; fall back to system.#edecec.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | ~40 / 1.05 (26 at narrow) | 400 | -0.02em |
| Section (h2) | 20–28 | 400–700 | -0.01em |
| App heading | 20 | 700 | 0 |
| Body | 16 / 1.5 | 400 | 0 |
| UI / nav | 14 | 400 | 0 |
| Label / meta | 13–14 | 400–600 | 0 |
| Code (mono) | 13 | 400 | 0 |
Pattern: marketing headings stay weight 400 and modest in size; in-app section titles jump to 600–700. Editorial serif is occasionally used inside product mockups for document copy.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.