Skip to content
cursor.sh logo

Cursor: The best way to code with AI

cursor.sh

“Cursor projects a sophisticated, editor-centric aesthetic that blends high-end editorial typography with the raw precision of code. The brand feels like a premium, specialized tool for serious developers, prioritizing clarity, speed, and a 'magical' reduction of friction through AI. It balances technical authority with an understated, almost literary elegance.”

editorial
developer-first
sophisticated
minimalist
precision
premium
technical
understated

Color Palette

Colors

#14120b

primary

#000000

background

#f7f7f4

surface

#26251e

text

#dfa88f

accent

#e6e5e0

border

Typography

Fonts

CursorGothic

body
400
self-hosted

CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif

CursorGothic

heading
400
self-hosted

CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif

EB Garamond

body
400
self-hosted

Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times, serif, Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times, serif

berkeleyMono

mono
400
self-hosted

ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

system-ui

body
400
system

-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

Components

Design System

Talk to the team→
secondary
3.35544e+07px
#e6e5e0#26251e
Product
outline
0px
#26251e
See projects
ghost
0px
#26251e
card
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0px 0px 8px 0px

card
box-shadow

oklab(0.263078 -0.0023028 0.0124791 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28) 0px 18px 36px -18px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

gradient

linear-gradient(in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)...

gradient

linear-gradient(to top in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)...

gradient

linear-gradient(oklab(0.263078 -0.0023028 0.0124791 / 0.05) 0%, oklab(0.263078 -...

Voice & Tone

Personality

Visual Energy

3/10

Design Era

contemporary-editorial

Emotional Tone

authoritative-refined

Target Audience

Senior software engineers, technical founders, and AI-native developers who value workflow efficiency, aesthetic precision, and high-performance tools.

Comparable Brands

Linear
Arc Browser
Notion
Vercel

Brand Rules

Dos & Don'ts

Do

  • Use 'CursorGothic' at weight 400 for all body copy and headings, maintaining a strict 24px line-height for readability.
  • Apply 'berkeleyMono' (weight 400) exclusively for all code snippets, technical terms, and inline code references.
  • Style primary CTA buttons as secondary elements: use background #e6e5e0, text color #26251e, full pill shape (border-radius: 3.35544e+07px), and padding of 12.48px 21.6px 12.8px.
  • Style secondary navigation buttons as outline/ghost elements: transparent background, text #26251e, sharp corners (border-radius: 0px), and padding of 5.6px 15px (nav) or 6px 12px (ghost).
  • Utilize a dark mode palette with background #000000, primary text #14120b (for contrast against light elements) or #26251e (for standard text), and accent color #dfa88f for highlights.
  • Apply subtle, multi-layer shadows to cards: use oklab(0.263078 -0.0023028 0.0124791 / 0.1) for a 1px border-like shadow and rgba(0, 0, 0, 0.28) for depth, avoiding heavy drop shadows.
  • Use linear gradients in oklab space for background transitions: specifically linear-gradient(in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%) to create soft, luminous fades.
  • Format all headings in sentence-case with minimal punctuation, avoiding exclamations and heavy emoji usage to maintain a formal, matter-of-fact tone.

Don't

  • Do not use title case for headings; the brand strictly adheres to sentence-case conventions.
  • Avoid using serif fonts like EB Garamond for body text or UI elements; reserve it only if explicitly required for specific editorial contexts, otherwise stick to CursorGothic.
  • Do not use vibrant, saturated colors; the palette is muted, relying on #dfa88f as the sole warm accent against a monochrome base.
  • Avoid sharp corners on primary interactive elements (buttons); always use full pill shapes (border-radius: 3.35544e+07px) for CTAs.
  • Do not use heavy, standard drop shadows; use the specific oklab-based subtle shadows defined for cards only.
  • Avoid playful or casual language; the tone is formal, technical, and direct, avoiding hyperbole in favor of precise claims like 'extraordinarily productive'.
  • Do not mix font families unnecessarily; strictly separate CursorGothic (text) and berkeleyMono (code) to maintain visual hierarchy.
  • Avoid using system-ui fonts for primary brand content; self-hosted CursorGothic is the required standard for brand consistency.

Design Assets

Visual Elements

Design asset
png1024×683
Design asset
png40×40
Design asset
png40×40
Design asset
png40×40
Design asset
png40×40
Design asset
png40×40
Design asset
png392×392

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/cursor.sh \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free