# Cursor — Design System
> The best coding agent
- **Canonical:** https://uiuxskills.com/library/cursor
- **Source:** https://www.cursor.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:19.995Z

---

---
version: alpha
name: Cursor
description: The AI-powered code editor for high-productivity software development.
tone: Technical, precise, research-oriented, and confident.
color-scheme: light
colors:
  primary: "#34785C"
  secondary: "#2D629E"
  surface: "#D9D5CF"
  surface-dim: "#B6B9BE"
  surface-container: "#4A443B"
  on-surface: "#3C3935"
  on-primary: "#FFFFFF"
  outline: "#B6B9BE"
  error: "#B91C1C"
  success: "#15803D"
typography:
  display-lg:
    fontFamily: ui-serif
    fontSize: 3rem
  display-md:
    fontFamily: ui-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: ui-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: ui-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: ui-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: ui-serif
    fontSize: 1rem
  label-md:
    fontFamily: ui-serif
    fontSize: 0.875rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#2A634B"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: transparent
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.secondary}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Cursor is a sophisticated, research-driven coding agent that integrates AI directly into the development workflow. Its visual identity is professional, understated, and highly functional, mirroring the precision of a high-end integrated development environment (IDE).

## Colors

The color palette is designed for high-contrast readability and professional focus, utilizing earthy, muted tones that reduce eye strain during long coding sessions.

*   Primary (#34785C): The core brand accent used for primary call-to-action buttons and active highlights.
*   Secondary (#2D629E): Used for external links, integrations, and secondary navigational elements.
*   Surface (#D9D5CF): The primary light background color for pages and content areas.
*   Surface-dim (#B6B9BE): A muted tone for secondary containers and UI accents.
*   Surface-container (#4A443B): A dark-toned background specifically for code blocks, terminal interfaces, and high-contrast UI elements.
*   On-surface (#3C3935): The primary text color, optimized for readability against light surfaces.
*   On-primary (inferred) (#FFFFFF): The text color used exclusively on primary buttons.
*   Outline (inferred) (#B6B9BE): The standard border color for inputs, cards, and dividers.
*   Error (inferred) (#B91C1C): Semantic color reserved for destructive actions or critical errors.
*   Success (inferred) (#15803D): Semantic color used for positive status indicators.

## Typography

The typography system relies on a consistent serif family to convey a scholarly, research-oriented tone that distinguishes the brand from typical "tech-first" sans-serif interfaces.

*   Display-lg (inferred): Used for primary hero headlines.
*   Display-md (inferred): Used for major section headers.
*   Headline-lg (inferred): Used for sub-headers and secondary section titles.
*   Headline-md (inferred): Used for feature titles.
*   Headline-sm (inferred): Used for card titles and smaller content blocks.
*   Body-md (inferred): The standard font for paragraph text.
*   Label-md (inferred): Used for UI labels, button text, and metadata.

## Layout

The layout follows a clean, centered grid system with generous whitespace, emphasizing content-first design and maintaining a max-width container for readability. The page structure follows a logical flow: hero, features, social-proof, enterprise, and footer. The hero section features a centered headline and subhead with multiple primary CTAs, followed by an interactive product demo. The design is mobile-first, with navigation and content blocks stacking gracefully on smaller viewports. Spacing is governed by a scale where `md` (16px) is the standard gutter between section elements.

## Elevation & Depth

Depth is used sparingly to maintain a flat, professional aesthetic, relying on three distinct shadow levels to separate interactive elements from the background.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard depth for dropdowns and popovers.
*   elevation.lg: Used for primary interactive components and cards that require visual prominence.

## Shapes

The brand employs a subtle rounded corner system, favoring small, precise radii that feel sharp and intentional. This avoids overly soft or playful aesthetics, keeping the UI aligned with the precision of an IDE.

*   `rounded.sm` (2px) and `rounded.md` (4px) are used for inputs and small UI components.
*   `rounded.lg` (8px) is the standard for card containers.
*   `rounded.xl` (12px) is reserved for larger structural containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-md}` text. It is designed to be action-oriented and clear. The secondary button uses a transparent background with a border defined by `{colors.outline}`, suitable for less prominent actions.

### Card
Cards utilize `{colors.surface}` with `{rounded.lg}` corners. The `card-container` variant uses `{colors.surface-container}` for high-contrast areas, providing a distinct space for code or terminal output.

### Input Field
Input fields feature a transparent background, `{rounded.md}` corners, and an `{colors.outline}` border. On focus, the border transitions to `{colors.primary}` to provide clear feedback to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons. | Use high-saturation colors outside the primary/secondary palette. |
| Apply `{rounded.lg}` to all card containers. | Use `{rounded.full}` on standard content cards. |
| Use `{typography.display-lg}` for main hero headlines. | Use `{typography.body-md}` for headers. |
| Maintain consistent `{spacing.md}` between section elements. | Use excessive shadows on flat UI elements. |
| Use `{colors.secondary}` for external links and integrations. | Use `{colors.error}` for non-destructive actions. |
| Apply `{colors.surface-container}` for code blocks. | Mix serif and sans-serif fonts unless specified. |
| Use `{elevation.lg}` for primary interactive components. | Use low-contrast text on `{colors.surface-container}`. |
| Apply `{rounded.md}` to all `input-field` components. | Use non-standard border colors outside `{colors.outline}`. |

## Content Style

CTA labels are imperative and action-oriented, using direct verbs like "Get," "Try," or "Request." They are kept short to maintain the professional, high-productivity tone of the interface.

Headings are direct and benefit-focused, avoiding marketing fluff in favor of clarity. They are phrased as declarative statements that mirror the technical, research-oriented nature of the product.

Copy density is intentionally low, favoring scannable paragraphs and frequent use of bullet points. This rhythm ensures that technical users can quickly parse information without being overwhelmed by dense blocks of text.

## Imagery & Icons

The imagery style is mixed, combining high-fidelity product screenshots with abstract background waves and minimalist UI mockups. This approach balances the technical reality of the IDE with the brand's research-heavy identity. Icons should remain clean and minimal, following the sharp, professional aesthetic of the typography and shape system. Avoid overly decorative or illustrative assets; all imagery should serve to clarify the product's functionality.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Cursor, a minimal enterprise developer tool brand. Match its technical, precise, and research-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.headline-md}`, `{spacing.lg}` — never hardcode hex values, font sizes, or pixel measurements.
2. Use only the component variants defined under `components:`. Do not invent new button styles, card types, or badge states beyond those listed.
3. Follow the Shapes section strictly: `{rounded.sm}` and `{rounded.md}` for inputs and small UI; `{rounded.lg}` for cards; `{rounded.xl}` for large structural containers. Never use `{rounded.full}` on content cards.
4. Treat the Do's and Don'ts table as authoritative. If a user's request conflicts with it, surface the conflict before proceeding — do not silently override the spec.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values take precedence.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radii, and elevation.
- Cover hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.md}` as the standard gutter between section elements per the Layout narrative.
- Apply `{colors.surface-container}` to code blocks and terminal output areas; use `{colors.on-primary}` text only on primary-colored backgrounds.
- Match CTA copy style: short, imperative, direct verbs.

**Must NOT:**
- Invent colors, font families, radii, or shadow values outside the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, decorative icons, or marketing filler copy.
- Mix font families; all typography uses `ui-serif` exclusively.
- Rewrite, replace, or extend existing page copy, labels, navigation items, or routes.
- Use `{colors.error}` for anything non-destructive or `{colors.secondary}` for primary CTAs.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface}`; for text on light surfaces, use `{colors.on-surface}`.
- Prefer composing existing components over introducing new tokens.
- For unspecified breakpoints, use mobile-first layout with a single breakpoint at 768px, per the Layout section.
- Elevation is used sparingly; default to `{elevation.sm}` for subtle separation and reserve `{elevation.lg}` for primary interactive components only.