Cursor
cursor.com“Cursor projects a serious, highly capable, and technically sophisticated vibe, designed to empower ambitious developers with cutting-edge AI. It's about focused productivity and turning complex ideas into tangible code with an understated yet powerful aesthetic.”
Color Palette
Colors
Typography
Fonts
CursorGothic
CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
CursorGothic
CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
EB Garamond
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
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
-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif
The quick brown fox
16pxThe quick brown fox
26pxThe quick brown fox
14pxThe quick brown fox
22pxThe quick brown fox
14pxComponents
Design System
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
oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28) 0px 18px 36px -18px
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
linear-gradient(in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)...
linear-gradient(to top in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)...
linear-gradient(oklab(0.263084 -0.00230259 0.0124794 / 0.05) 0%, oklab(0.263084 ...
Voice & Tone
Personality
Visual Energy
Design Era
contemporary-minimal
Emotional Tone
empowering-efficient
Target Audience
Professional software developers, engineering teams, and tech leaders focused on accelerating complex software development with AI-powered tools.
Comparable Brands
Brand Rules
Dos & Don'ts
Do
- Utilize CursorGothic for headings in sentence-case, with weights 400 or 700. For body text, use CursorGothic 400, EB Garamond 400, or system-ui 400, maintaining a line-height of 24px.
- Apply berkeleyMono 400 specifically for all code blocks and monospaced text elements.
- Employ a dark mode-centric color palette with #14120b as the primary dark hue, #dfa88f as a warm accent, and #000000 for backgrounds, ensuring text is #26251e.
- Design secondary buttons with a #e6e5e0 background, #26251e text, and a highly rounded (pill-shaped) border-radius of 3.35544e+07px, with padding 12.48px 21.6px 12.8px.
- Create outline buttons with #26251e text, no background, and sharp 0px border-radius, using padding 5.6px 15px.
- Implement ghost buttons with #26251e text and a #26251e border, 0px border-radius, and padding 6px 12px.
- Incorporate subtle, multi-layer shadows on card elements, specifically `oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28)`. Avoid heavy or singular shadows.
- Use linear gradients sparingly, specifically `linear-gradient(in oklab, rgb(242, 241, 237) 0%, rgba(0, 0, 0, 0) 100%)` for subtle background fades or transitions.
- Maintain a consistent base unit of 2px for all spacing and sizing, ensuring precise alignment and visual rhythm.
- Keep copy serious, technical, and matter-of-fact, using advanced vocabulary and heavy jargon where appropriate for the developer audience.
Don't
- Do not use playful or overly casual language; maintain a serious and professional tone (9/10 serious).
- Avoid excessive use of emojis or exclamations; keep emoji usage light and exclamations rare.
- Do not use vibrant or saturated colors outside of the defined accent #dfa88f; stick to the muted, dark palette.
- Do not apply large, prominent shadows; shadows should be subtle and multi-layered, as seen on cards.
- Avoid rounded corners on outline and ghost buttons; these should maintain a sharp 0px border-radius.
- Do not use title case for headings; all headings should be in sentence-case.
- Do not use generic system fonts when CursorGothic, EB Garamond, or berkeleyMono are available and appropriate.
- Avoid overly enthusiastic or accessible language; the brand embraces a technical and direct communication style (7/10 enthusiastic, 2/10 accessible).
- Do not use single-layer, harsh shadows; the brand's shadows are subtle and complex, indicating depth without being heavy.
- Do not introduce new gradient styles; only use the specified linear gradients for subtle effects.
Design Assets
Visual Elements
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
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/cursor.com \
-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.