W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Cursor
Cursor is an AI-first code editor — a fork of VS Code engineered around long-context model reasoning, project-wide edit operations, and an agentic terminal. The marketing surface at cursor.com reads as quietly editorial rather than loud-tech: a warm "Sand" near-paper canvas, deep "Cursor Ink" text, and a single hot "Cursor Orange" (#F54E00) accent. Product chrome inverts to a "Cursor Night" dark canvas with ANSI-aligned semantic greens and reds. Typography on the marketing site is Cursor's proprietary "CursorGothic" sans with a "BerkeleyMono" mono pair; neither is publicly distributed.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/cursor/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/cursor/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Cursor
Cursor is an AI-first code editor — a fork of VS Code engineered around long-context model reasoning, project-wide edit operations, and an agentic terminal. The marketing surface at cursor.com reads as quietly editorial rather than loud-tech: a warm "Sand" near-paper canvas, deep "Cursor Ink" text, and a single hot "Cursor Orange" (#F54E00) accent. Product chrome inverts to a "Cursor Night" dark canvas with ANSI-aligned semantic greens and reds. Typography on the marketing site is Cursor's proprietary "CursorGothic" sans with a "BerkeleyMono" mono pair; neither is publicly distributed.
Tags: cursor, ai, developer-tools, code-editor, warm, light-first, paper
Atoms
Palette
Cursor · [email protected] · Proprietary — All Rights Reserved
Cursor's brand palette, captured directly from the live cursor.com marketing site where the design system exposes named color tokens on :root (--color-theme-bg, --color-theme-text, --color-theme-accent, --color-theme-product-ansi-*). Cursor presents a warm light-first canvas — a near-paper "Sand" surface, a deep ink "Cursor Ink" text, and a saturated orange "Cursor Orange" (#F54E00) as the primary accent — supported by an ANSI-aligned green and red used by the product UI. The brand reads as quietly editorial: small palette, warm neutrals, a single hot accent.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
sand-canvas |
Sand Canvas | #F7F7F4 |
sand-card |
Sand Card | #F2F1ED |
sand-card-hover |
Sand Card Hover | #EBEAE5 |
sand-border |
Sand Border | #E1E0DB |
cursor-ink |
Cursor Ink | #26251E |
cursor-ink-secondary |
Cursor Ink Secondary | #4A443B |
cursor-ink-tertiary |
Cursor Ink Tertiary | #76716A |
cursor-orange |
Cursor Orange | #F54E00 |
cursor-orange-pressed |
Cursor Orange Pressed | #DB7042 |
cursor-green |
Cursor Green | #1F8A65 |
cursor-red |
Cursor Red | #CF2D56 |
cursor-night |
Cursor Night | #1A1A17 |
cursor-night-elevated |
Cursor Night Elevated | #26251E |
cursor-night-border |
Cursor Night Border | #3C3933 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
sand-canvas |
#F7F7F4 |
surface |
sand-card |
#F2F1ED |
surface-elevated |
sand-card-hover |
#EBEAE5 |
text-primary |
cursor-ink |
#26251E |
text-secondary |
cursor-ink-secondary |
#4A443B |
text-tertiary |
cursor-ink-tertiary |
#76716A |
primary |
cursor-orange |
#F54E00 |
primary-hover |
cursor-orange-pressed |
#DB7042 |
accent |
cursor-orange |
#F54E00 |
accent-hover |
cursor-orange-pressed |
#DB7042 |
success |
cursor-green |
#1F8A65 |
warning |
cursor-orange |
#F54E00 |
error |
cursor-red |
#CF2D56 |
border |
sand-border |
#E1E0DB |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
cursor-night |
#1A1A17 |
surface |
cursor-night-elevated |
#26251E |
surface-elevated |
cursor-ink-secondary |
#4A443B |
text-primary |
sand-canvas |
#F7F7F4 |
text-secondary |
sand-card-hover |
#EBEAE5 |
text-tertiary |
cursor-ink-tertiary |
#76716A |
primary |
cursor-orange |
#F54E00 |
primary-hover |
cursor-orange-pressed |
#DB7042 |
accent |
cursor-orange |
#F54E00 |
accent-hover |
cursor-orange-pressed |
#DB7042 |
success |
cursor-green |
#1F8A65 |
warning |
cursor-orange |
#F54E00 |
error |
cursor-red |
#CF2D56 |
border |
cursor-night-border |
#3C3933 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
sand-canvas |
#F7F7F4 |
on-identity |
cursor-ink |
#26251E |
primary |
cursor-orange |
#F54E00 |
primary-hover |
cursor-orange-pressed |
#DB7042 |
accent |
cursor-orange |
#F54E00 |
accent-hover |
cursor-orange-pressed |
#DB7042 |
mark |
cursor-ink |
#26251E |
success |
cursor-green |
#1F8A65 |
warning |
cursor-orange |
#F54E00 |
error |
cursor-red |
#CF2D56 |
text-primary-light |
cursor-ink |
#26251E |
text-primary-dark |
sand-canvas |
#F7F7F4 |
background-light |
sand-canvas |
#F7F7F4 |
background-dark |
cursor-night |
#1A1A17 |
surface-light |
sand-card |
#F2F1ED |
surface-dark |
cursor-night-elevated |
#26251E |
text-secondary-light |
cursor-ink-secondary |
#4A443B |
text-tertiary-light |
cursor-ink-tertiary |
#76716A |
border-light |
sand-border |
#E1E0DB |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Cursor Ink (#26251E) on Sand Canvas (#F7F7F4) reads at ~15:1 — comfortably above WCAG AA. The brand's editorial posture and long-form documentation rewards holding the AA floor decisively rather than nudging into AAA-only territory.
colorChoice → roles.colors.primary
- allowed: cursor-orange, cursor-orange-pressed
- forbidden: cursor-green, cursor-red, cursor-ink, sand-card
Cursor Orange (#F54E00) is the single hot accent on the cursor.com marketing surface (--color-theme-accent on the live site). The product greens and reds are reserved for ANSI semantic states and must not stand in for the primary brand action color; the inks are text, not action.
colorChoice → roles.colors.mark
- allowed: cursor-ink, sand-canvas
- forbidden: cursor-orange, cursor-green, cursor-red
The Cursor wordmark on the live marketing site renders in Cursor Ink on light canvas or Sand Canvas on the night canvas — monochromatic, not orange. The orange is an action accent, not a logo fill.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
Cursor's identity is restrained by design. Recolored, skewed, or gradient-filled marks conflict with the quiet, editorial voice of the cursor.com surface.
contextRestriction → roles.colors.warning
- forbiddenContexts: error-state, destructive-action
- allowedContexts: call-to-action, inline-highlight, product-emphasis
Cursor Orange does double duty as accent + warning on the live site (--color-warning aliases to --color-theme-accent). The error state is the separate Cursor Red (#CF2D56) — orange must not stand in for destructive or failure states.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The sand canvas and Cursor Ink combination starts well above AA; consumers must hold that floor when adapting the palette.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600
The live cursor.com surface renders display headings in the 400–600 weight band on the proprietary CursorGothic face. Heavier weights (700+) push the brand into a louder marketing voice than the editorial baseline supports.
💡 recommendation (2)
fontPairing → typography.code
- requires:
prose - minSizeRatio:
0.875
Cursor pairs its proprietary BerkeleyMono with the sans for inline code on the marketing site; JetBrains Mono Nerd Font (the open-source substitute) reads cleanly at 0.875× of the body size and preserves the editorial rhythm.
compositionConstraint → roles.colors.primary
- pairsWith: sand-canvas, sand-card, cursor-night, cursor-ink
- doesNotPairWith: cursor-red, cursor-green
Cursor Orange is calibrated to read on the warm sand canvas and on the cursor-night dark canvas. Pairing it adjacent to the ANSI green or red introduces a chromatic conflict — three saturated hues competing — that breaks the calm one-accent voice of the brand.
Provenance
- Source: https://www.cursor.com/
- License:
Proprietary — All Rights Reserved - Attribution: Cursor and the Cursor mark are trademarks of Anysphere, Inc. Visual identity captured from the deployed stylesheet on cursor.com (--color-theme-*, --color-bg, --color-accent, --font-mono token families).
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.cursor.com/ on 2026-05-19; no public brand guide located. The proprietary "CursorGothic" sans is declared via @font-face on cursor.com but is not publicly distributed; Inter is the open-source rendering substitute. The proprietary "BerkeleyMono" mono is not publicly distributed; JetBrains Mono Nerd Font is the open-source rendering substitute. Although Cursor's product chrome (the IDE itself) is dark-first, the marketing brand surface is light-first —
identityis therefore mapped to the sand canvas rather than the night canvas.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Cursor
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Cursor
A clear hierarchy in Cursor's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ cursor-orange #F54E00 accent-hover
→ cursor-orange-pressed #DB7042 background-dark
→ cursor-night #1A1A17 background-light
→ sand-canvas #F7F7F4 border-light
→ sand-border #E1E0DB error
→ cursor-red #CF2D56 identity
→ sand-canvas #F7F7F4 mark
→ cursor-ink #26251E on-identity
→ cursor-ink #26251E primary
→ cursor-orange #F54E00 primary-hover
→ cursor-orange-pressed #DB7042 success
→ cursor-green #1F8A65 surface-dark
→ cursor-night-elevated #26251E surface-light
→ sand-card #F2F1ED text-primary-dark
→ sand-canvas #F7F7F4 text-primary-light
→ cursor-ink #26251E text-secondary-light
→ cursor-ink-secondary #4A443B text-tertiary-light
→ cursor-ink-tertiary #76716A warning
→ cursor-orange #F54E00 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from cursor)
Light mode (14 roles)
accent
→ cursor-orange accent-hover
→ cursor-orange-pressed background
→ sand-canvas border
→ sand-border error
→ cursor-red primary
→ cursor-orange primary-hover
→ cursor-orange-pressed success
→ cursor-green surface
→ sand-card surface-elevated
→ sand-card-hover text-primary
→ cursor-ink text-secondary
→ cursor-ink-secondary text-tertiary
→ cursor-ink-tertiary warning
→ cursor-orange Dark mode (14 roles)
accent
→ cursor-orange accent-hover
→ cursor-orange-pressed background
→ cursor-night border
→ cursor-night-border error
→ cursor-red primary
→ cursor-orange primary-hover
→ cursor-orange-pressed success
→ cursor-green surface
→ cursor-night-elevated surface-elevated
→ cursor-ink-secondary text-primary
→ sand-canvas text-secondary
→ sand-card-hover text-tertiary
→ cursor-ink-tertiary warning
→ cursor-orange Rules (9 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Cursor Ink (#26251E) on Sand Canvas (#F7F7F4) reads at ~15:1 — comfortably above WCAG AA. The brand's editorial posture and long-form documentation rewards holding the AA floor decisively rather than nudging into AAA-only territory.
colorChoice roles.colors.primary allowed cursor-orange, cursor-orange-pressed forbidden cursor-green, cursor-red, cursor-ink, sand-card Cursor Orange (#F54E00) is the single hot accent on the cursor.com marketing surface (--color-theme-accent on the live site). The product greens and reds are reserved for ANSI semantic states and must not stand in for the primary brand action color; the inks are text, not action.
colorChoice roles.colors.mark allowed cursor-ink, sand-canvas forbidden cursor-orange, cursor-green, cursor-red The Cursor wordmark on the live marketing site renders in Cursor Ink on light canvas or Sand Canvas on the night canvas — monochromatic, not orange. The orange is an action accent, not a logo fill.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo Cursor's identity is restrained by design. Recolored, skewed, or gradient-filled marks conflict with the quiet, editorial voice of the cursor.com surface.
contextRestriction roles.colors.warning forbiddenContexts error-state, destructive-action allowedContexts call-to-action, inline-highlight, product-emphasis Cursor Orange does double duty as accent + warning on the live site (--color-warning aliases to --color-theme-accent). The error state is the separate Cursor Red (#CF2D56) — orange must not stand in for destructive or failure states.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The sand canvas and Cursor Ink combination starts well above AA; consumers must hold that floor when adapting the palette.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 500, 600 The live cursor.com surface renders display headings in the 400–600 weight band on the proprietary CursorGothic face. Heavier weights (700+) push the brand into a louder marketing voice than the editorial baseline supports.
recommendation · 2 rules
fontPairing typography.code requires prose minSizeRatio 0.875 Cursor pairs its proprietary BerkeleyMono with the sans for inline code on the marketing site; JetBrains Mono Nerd Font (the open-source substitute) reads cleanly at 0.875× of the body size and preserves the editorial rhythm.
compositionConstraint roles.colors.primary pairsWith sand-canvas, sand-card, cursor-night, cursor-ink doesNotPairWith cursor-red, cursor-green Cursor Orange is calibrated to read on the warm sand canvas and on the cursor-night dark canvas. Pairing it adjacent to the ANSI green or red introduces a chromatic conflict — three saturated hues competing — that breaks the calm one-accent voice of the brand.
Provenance
- Source
- https://www.cursor.com/
- License
Proprietary — All Rights Reserved- Attribution
- Cursor and the Cursor mark are trademarks of Anysphere, Inc. Visual identity captured from the deployed stylesheet on cursor.com (--color-theme-*, --color-bg, --color-accent, --font-mono token families).
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.cursor.com/ on 2026-05-19; no public brand guide located. The proprietary "CursorGothic" sans is declared via @font-face on cursor.com but is not publicly distributed; Inter is the open-source rendering substitute. The proprietary "BerkeleyMono" mono is not publicly distributed; JetBrains Mono Nerd Font is the open-source rendering substitute. Although Cursor's product chrome (the IDE itself) is dark-first, the marketing brand surface is light-first — `identity` is therefore mapped to the sand canvas rather than the night canvas.