Cursor

Overview

Cursor is a developer-first AI coding agent designed to accelerate software development through intelligent code generation and task automation. The design system reflects a 'Technical Minimalism' aesthetic—clean, purposeful, and optimized for focus. The interface prioritizes information density and rapid interaction, using a warm neutral palette (off-white #f7f7f4 backgrounds with charcoal #26251e text) paired with precise accent colors (sky blue #8bc4f8 for secondary actions, warm amber #c08532 for highlights). The emotional response is one of calm competence: the UI feels like a trusted collaborator, not a distraction.

The brand voice is direct, precise, and human-centered. Cursor speaks in active verbs and concrete outcomes—never marketing hyperbole. Vocabulary favors technical clarity ("agents," "tasks," "code generation") without jargon gatekeeping. The tone is confident but approachable, acknowledging developer expertise while remaining accessible to newcomers. Example sentence: "Download Cursor and hand off your next feature to an agent that understands your codebase."

Colors

The color system is built on a warm neutral foundation with strategic accent deployment. Primary (#26251e, a near-black charcoal) serves as the dominant text and UI control color, establishing hierarchy and focus. It appears on primary CTAs ("Download for Linux"), navigation elements, and form inputs. Secondary (#8bc4f8, a bright sky blue) is reserved for supporting actions, status indicators, and informational highlights—it draws attention without competing with primary. Tertiary (#c08532, a warm amber-brown) accents special states like badges, success messages, and premium features.

The surface stack uses a carefully calibrated gray progression: surface (#f7f7f4) as the page background, surface-dim (#edecec) for subtle depth, and surface-container variants (ranging from #fafaf8 to #e9e6

Typography

The type system uses a single typeface family (CursorGothic) across all scales, creating visual cohesion and reducing cognitive load. Display (56px, 400 weight, -0.02em tracking) anchors hero sections and major headings with generous line-height (64px). Headline-lg (40px) and headline-md (28px) establish section hierarchy, both at 400 weight to maintain the brand's understated confidence. Body-lg (18px) and body-md (16px) handle content and descriptions, with 400 weight and 1.5x line-height for readability. Label-md (14px, 500 weight) and label-sm (12px) are reserved for UI labels, buttons, and metadata.

Code content uses berkeleyMono (12px, 400 weight, monospace) to signal technical context and distinguish code snippets from prose. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on smal

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on large screens while maintaining focus on medium and small viewports. The gutter (24px) is applied consistently between columns and as outer margins on desktop; on mobile, gutter reduces to 16px to preserve screen real estate. Container max-width (1280px) prevents line-length from exceeding 80 characters on body text, supporting readability.

White-space philosophy emphasizes breathing room: section separation uses lg spacing (40px) vertically, creating clear visual breaks between hero, feature cards, and footer. Cards and panels use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. The spacing scale (unit: 8px) ensures all dimensions are multiples o

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic elevation changes, reflecting the brand's technical restraint. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 4px 12px rgba(0, 0, 0, 0.1)) for standard cards and panels, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for modals and overlays. Shadows use soft, spread blur (4-12px) to avoid harsh edges. Cards at rest use md shadow; on hover, they transition to lg shadow with a 200ms ease-out timing function, signaling interactivity without jarring moti

Shapes

The shape philosophy is 'Precise Minimalism'—rounded corners are used sparingly and purposefully, never decoratively. Buttons use full radius (9999px) to signal primary actions and create a soft, approachable affordance; this applies to both primary and secondary buttons. Cards and panels use DEFAULT radius (4px), a subtle rounding that softens edges without drawing attention. Input fields also use 4px radius for consistency. Modals and overlays use lg radius (12px) to create a slightly more prominent container. Dividers and small UI elements (badges, tags) use sm radius (2px) or remain sharp

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use {colors.primary} background with {colors.on-primary} text, full radius (9999px), and 40px height with 10px vertical / 24px horizontal padding. On hover (button-primary-hover), background transitions to {colors.primary-container} with a 200ms ease-out timing. Secondary buttons (button-secondary) use {colors.surface-container-high} background with {colors.on-surface} text, same dimensions and radius. Ghost buttons (button-ghost) have transparent background with rgba(38, 37, 30, 0.06) on hover, useful for tertiary actions. All buttons use {typography.label-md} for text, ensuring consistent sizing and weight.

Containers & Surfaces Cards (card) are the primary content container, using {col

Do's and Don'ts

**Do**

• Do use primary (#26251e) for all main CTAs, navigation, and text hierarchy—it's the brand's signature color and should dominate the interface.
• Do apply full radius (9999px) exclusively to buttons; use 4px radius for cards and inputs to maintain visual distinction between interactive and structural elements.
• Do maintain 40px lg spacing between major sections (hero, features, footer) to create breathing room and support content scannability.
• Do use berkeleyMono for code snippets and technical input fields to signal context and reinforce the developer-first positioning.
• Do apply 200ms ease-out transitions on all hover and focus states to provide smooth, predictable feedback without feeling sluggish.

**Don't**

• Don't use secondary (#8bc4f8) or tertiary (#c08532) as primary button backgrounds—they're supporting accents and will dilute the primary action hierarchy.
• Don't apply shadows larger than {elevation.lg} (0 3px 8px rgba(0, 0, 0, 0.15)) or use blur > 12px; the brand favors subtle depth, not dramatic layering.
• Don't mix typefaces—CursorGothic is the only body/UI font; only berkeleyMono is used for code, never other monospace families.
• Don't use rounded corners > 12px on any element except buttons; excessive rounding contradicts the technical minimalism aesthetic.
• Don't reduce spacing below {spacing.sm} (12px) between interactive elements; tight spacing harms usability and feels cramped in a developer tool.