Switch between the rendered Visual preview and the Raw DESIGN.md.
Cursor's design system embodies a refined, minimal aesthetic rooted in professional software development. The visual language prioritizes clarity and efficiency through restrained color palettes, purposeful whitespace, and geometric precision. There's a sophisticated interplay between warm earth tones and cool neutrals that creates approachability without sacrificing technical credibility. The design feels intentional and curated—every element serves the core mission of AI-assisted productivity. Typography plays a starring role, with generous line spacing and considered font choices that balance personality (CursorGothic for display) with clarity (system-ui for body text). The overall impression is one of understated confidence: powerful, capable, and ready for serious work.
Key Characteristics
#26251E): Primary text, backgrounds, borders, and UI foundation. Used extensively across buttons, cards, navigation, and typography.#F7F7F4): Secondary background and surface containers. Provides contrast and visual breathing room.#000000): Deep text and high-contrast UI elements. Used sparingly for emphasis.#C08532): Primary call-to-action accent. Draws focus to key interactive elements and highlights.#DFA88F): Tertiary accent for supporting contexts. Adds warmth without dominance.#9FC9A2): Success or positive state indicator. Secondary accent for balanced compositions.#3B82F6): Links and secondary interactive states. Provides distinct interactive affordance.#1F8A65): Tertiary interactive state. Used for secondary CTAs or alternative paths.#CF2D56): Alert, warning, or destructive action indicator. Commands attention for critical feedback.#9FBBE0): Subtle interactive or information state. Used for gentle emphasis or hover states.#F2F1ED): Tertiary background and card surfaces. Slightly warmer than pure white.#FFFFFF): Primary background, modals, and content areas. Clean canvas for content.#E6E5E0): Border and divider lines. Subtle separation without harshness.#EBEAE5): Subtle background tint and disabled states.#E1E0DB): Disabled text and low-priority elements.#F2F1ED): Container fill for grouped content. Pairs with subtle shadow for elevation.#E6E5E0): Hairline borders and dividers. Creates structure without visual weight.Primary Display Font: CursorGothic
'CursorGothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serifSecondary Body Font: system-ui
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serifMonospace Font: berkeleyMono
'berkeleyMono', 'Monaco', 'Courier New', Courier, monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | CursorGothic | 32px | 400 | 40px | 0px | Hero headings and page titles |
| Display L | CursorGothic | 26px | 400 | 32.5px | 0px | Section headings |
| Heading L | CursorGothic | 22px | 400 | 28.6px | 0px | Subsection headings |
| Heading M | system-ui | 14px | 600 | 21.7px | 0px | Card titles and emphasis |
| Body | system-ui | 13px | 400 | 20.15px | 0px | Primary body text and descriptions |
| Body Small | CursorGothic | 16px | 400 | 24px | 0px | Secondary body and callouts |
| Label | CursorGothic | 14px | 400 | 21px | 0px | Button text and form labels |
| Code | berkeleyMono | 12px | 400 | 20px | 0px | Code snippets and terminal text |
| Caption | CursorGothic | 14px | 400 | 14px | 0px | Small text and links |
#26251E#F7F7F45.6px 10.5px 5.88px 10.5px32px (fully rounded)1px solid #26251Enone34px#1A1915, text unchanged#0F0E0A, text unchanged#E1E0DB, text #EBEAE5, cursor not-allowedtransparent#26251E5.6px 15px 5.6px 15px0px1px solid transparentnone34px#F2F1ED, border 1px solid #26251E#EBEAE5, border 1px solid #26251Etransparent#26251E0px0pxnonenone#C08532, underline 1px solid #C08532#26251E, underline 1px solid #26251E#F2F1ED#26251E16px4pxnonergba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0px 0px 8px 0px#FFFFFF#26251E20px4px1px solid #E6E5E0rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4pxrgba(38, 37, 30, 0.8) scrim#FFFFFF64px0pxnonenonetransparent#26251E8px 8px 6px 8px0px1px solid #E6E5E0none34px1px solid #26251E, box-shadow 0 0 0 3px rgba(60, 130, 246, 0.1)#F2F1ED, text color #E1E0DB, border 1px solid #EBEAE5#EBEAE5, opacity 1transparent#26251E0px0pxnonenone20px1px solid #3B82F6transparent#26251E0px (individual items: 8px 16px)0pxnonenone#C08532, border-bottom 2px solid #C08532#1A1915, text-decoration nonetransparent#26251E0px0pxnonenone#C08532, underline 1px solid #C08532#26251E, font-weight 600Base Unit: 4px
Scale:
4px — Tight padding within buttons, inline spacing8px — Input padding, small component gaps12px — Standard padding within cards, moderate spacing16px — Default card padding, section spacing20px — Large padding within containers24px — Major section separation32px — Container padding, large gaps between sections52px — Hero section margins56px — Full-width section gaps64px — Page top/bottom padding, maximum padding68px — Large vertical section separation88px — Hero margins and major layout separationUsage Context:
Max Width: 1440px (full-bleed at larger screens)
Column Strategy:
24px20px16pxSection Pattern:
64px padding top/bottom56px vertical spacing between sectionsCursor's layout embraces silence as a design element. Every component is surrounded by intentional negative space that creates hierarchy and focus. Whitespace is not empty; it guides the eye and provides cognitive rest. Sections breathe with generous top/bottom margins (52px–88px), and cards maintain consistent interior padding (16px–20px) to ensure content doesn't feel cramped. This approach supports the sophisticated, confident personality of the brand—less is more, and every pixel earns its place.
0px — Navigation, inputs, dividers, text-heavy sections2px — Subtle softening on minimal components4px — Cards, containers, minor UI elements8px — Secondary containers, optional softening32px (or 9999px for pseudo-circles) — Buttons, badges, fully rounded elements| Level | Treatment | Use |
|---|---|---|
| Base (0) | None | Standard text, navigation, flat backgrounds |
| Lift 1 (Subtle) | box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 16px 0px, rgba(0, 0, 0, 0.008) 0px 0px 8px 0px | Cards, containers, subtle depth |
| Lift 2 (Moderate) | box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Elevated cards, overlays, modals |
| Lift 3 (Strong) | box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 10px 10px -5px | Floating elements, toasts, popovers |
Shadow Philosophy: Cursor uses minimal, refined shadows that suggest depth without dominance. Shadows rely on transparency and soft falloff rather than harsh contrast. This creates a layered visual hierarchy while maintaining the clean, minimal aesthetic. Multiple shadow layers (usually 2–3) provide realistic light diffusion. Shadows are warm-tinted (using near-black with reduced opacity) to match the charcoal-and-cream palette.
#C08532) and blue (#3B82F6) create visual interest without clashing.16px minimum to prevent cramping.52px on sections.32px+) only to buttons and badges — Cards and containers stay at 4px for modern, professional feel.8px for interactive elements — Touch targets and click areas need room to breathe.#000000 for extended reading — It's too harsh; use dark charcoal (#26251E) for body text instead.32px rounding; it's a signature of the system.#3B82F6, #CF2D56) for non-interactive text — Reserve them strictly for links, buttons, alerts.2px solid #3B82F6.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 375px–599px | 4-column grid, 16px gutters, stacked layout, 32px padding, full-width buttons, 14px headings |
| Tablet | 600px–1023px | 8-column grid, 20px gutters, 2-column content, 20px padding, 20px heading size |
| Desktop | 1024px–1439px | 12-column grid, 24px gutters, 3-column layouts, 24px padding, 26px heading size |
| Large | 1440px+ | Full 12-column, 32px outer padding, centered max-width container, 32px heading size |
44px × 44px (buttons, navigation links)8px minimum gap (mobile), 12px (tablet/desktop)24px × 24px minimum8px vertical and horizontal padding around link text34px to accommodate finger tapping100% width, max-width constraints on desktop#26251E)#C08532)#F7F7F4)#F2F1ED)#26251E)#E1E0DB)#E6E5E0)#3B82F6)#9FC9A2)#CF2D56)#26251E)#26251E)Start with Dark Charcoal (#26251E) as the base — It's the dominant color used 773 times; all primary text, buttons, and UI elements default to it.
Primary buttons use charcoal background with cream text — Padding 5.6px 10.5px, border-radius 32px, no shadows. Hover state darkens background by ~2 shades.
Secondary buttons are transparent with charcoal text — No background fill, minimal borders, padding 5.6px 15px. Hover adds a light background tint.
Cards sit on #F2F1ED with subtle shadow treatment — Padding 16px minimum, border-radius 4px, box-shadow uses dual-layer transparency for depth (not contrast).
All text in CursorGothic or system-ui, never serif — Display and buttons: CursorGothic. Body and forms: system-ui. Code: berkeleyMono only.
Heading hierarchy follows size precisely — Display L = 26px / 400 weight / 32.5px line-height. Scale down by 1–2 sizes per heading level.
Links default to charcoal with optional underline on hover — No color change required; underline indicates interactive state. Use blue (#3B82F6) for secondary link styling only.
Spacing uses 4px base unit across all breakpoints — Mobile: halve values. Desktop: use full scale. Never compress padding below 8px on interactive elements.
Apply shadows only to elevated content — Flat cards: no shadow. Overlay/modal cards: use Lift 2 (rgba(0,0,0,0.1) 0px 10px...). Never shadow text or borders.
Border radius stays at 4px for cards, 0px for inputs and navigation, 32px for buttons — These values are consistent across the system; do not deviate.
Input fields have transparent backgrounds with light borders — Border-color: #E6E5E0. Padding: 8px. Focus state adds blue border and light blue shadow.
Color status indicators use semantic palette only — Success: #9FC9A2. Warning: #C08532. Error: #CF2D56. Avoid layering multiple colors in one component.
Use full 12-column grid on desktop, collapse to 4 columns mobile — Gutters: 24px desktop, 16px mobile. Max-width container: 1440px centered.
Whitespace is intentional — Hero sections: 52px–88px top/bottom margins. Between sections: 56px minimum. Inside cards: 16px–20px consistent padding.
Test color contrast ratio minimum 4.5:1 for text — Dark Charcoal on Cream passes WCAG AA. Always verify link color (#3B82F6) meets standards before shipping.