cursor
An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (`#f7f7f4`) instead of the typical dark IDE atmosphere. Near-black warm ink (`#26251e`) carries body and display alike — display sits at weight 400
colors
#f54e00 #d04200 #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
design.md source
---
version: alpha
name: Cursor-design-analysis
description: An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (`#f7f7f4`) instead of the typical dark IDE atmosphere. Near-black warm ink (`#26251e`) carries body and display alike — display sits at weight 400 with negative letter-spacing for a magazine feel rather than a bold tech voice. The single brand voltage is **Cursor Orange** (`#f54e00`) reserved for primary CTAs and the wordmark. A signature pastel timeline palette (peach, mint, blue, lavender, gold) marks AI-action stages (Thinking / Reading / Editing / Grepping / Done) — only inside in-product timeline visualizations. Cards use minimal hairlines, no shadows, generous 80px section rhythm. CursorGothic for display/body, JetBrains Mono on every code surface (which is roughly half the page).
colors:
primary: "#f54e00"
primary-active: "#d04200"
ink: "#26251e"
body: "#5a5852"
body-strong: "#26251e"
muted: "#807d72"
muted-soft: "#a09c92"
hairline: "#e6e5e0"
hairline-soft: "#efeee8"
hairline-strong: "#cfcdc4"
canvas: "#f7f7f4"
canvas-soft: "#fafaf7"
surface-card: "#ffffff"
surface-strong: "#e6e5e0"
on-primary: "#ffffff"
timeline-thinking: "#dfa88f"
timeline-grep: "#9fc9a2"
timeline-read: "#9fbbe0"
timeline-edit: "#c0a8dd"
timeline-done: "#c08532"
semantic-error: "#cf2d56"
semantic-success: "#1f8a65"
typography:
display-mega:
fontFamily: "'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
fontSize: 72px
fontWeight: 400
lineHeight: 1.1
letterSpacing: -2.16px
display-lg:
fontFamily: "'CursorGothic', sans-serif"
fontSize: 36px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.72px
display-md:
fontFamily: "'CursorGothic', sans-serif"
fontSize: 26px
fontWeight: 400
lineHeight: 1.25
letterSpacing: -0.325px
display-sm:
fontFamily: "'CursorGothic', sans-serif"
fontSize: 22px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.11px
title-md:
fontFamily: "'CursorGothic', sans-serif"
fontSize: 18px
fontWeight: 600
lineHeight: 1.4
letterSpacing: 0
title-sm:
fontFamily: "'CursorGothic', sans-serif"
fontSize: 16px
fontWeight: 600
lineHeight: 1.4
letterSpacing: 0
body-md:
fontFamily: "'CursorGothic', sans-serif"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0
body-tracked:
fontFamily: "'CursorGothic', sans-serif"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0.08px
body-sm:
fontFamily: "'CursorGothic', sans-serif"
… components
display headline
body copy from cursor tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#f54e00",
font: ""CursorGothic", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on cursor's visual identity.