---
name: Cursor
description: "This site is a great example of a refined, product-focused SaaS landing page that uses a warm, sophisticated palette to differentiate itself in the developer tools space."
version: alpha

colors:
  background: "#F2F1ED"
  primary: "#26251E"
  neutral: "#9E9D98"
  line: "rgba(38, 37, 30, 0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.325px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.11px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.14px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.048px"
  micro:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.08px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

The agent-native coding platform for ambitious software teams.

*A high-performance IDE meets a sophisticated AI research lab.*

## Colors

Warm, grounded neutrals with a focus on readability and high contrast.

- **Background (`#F2F1ED`)** — uses `bg` token
- **Primary text (`#26251E`)** — uses `ink` token
- **Muted (`#9E9D98`)** — uses `muted` token
- **Borders (`rgba(38, 37, 30, 0.15)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use the custom humanist-sans font for primary UI and headings.
- Use the transitional-serif font for editorial quotes and specific display text.
- Use the monospace font for code blocks and technical CLI outputs.

## Layout

Responsive grid with clear section breaks and centered content.

*Rhythm:* 8px baseline grid

## Elevation & Depth

- 0px 28px 70px rgba(0, 0, 0, 0.14)
- 0px 0px 0px 1px rgba(38, 37, 30, 0.15)
- Borders: 1px solid rgba(38, 37, 30, 0.15)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimalist buttons with solid dark fills or simple outlines and pill-shaped corners.
- **card:** Subtle, elevated cards with soft shadows and 12px radius.
- **chip:** Small, monospaced tags with light backgrounds.
- **input:** Clean text inputs with bottom borders or subtle outlines.
- **hero:** Large typography with a high-fidelity product screenshot.

## Do's and Don'ts

**Don't:**
- Don't use bright neon colors — the screenshot uses a muted, warm palette.
- Don't use a dark mode as the default — the screenshot is predominantly light.
- Don't use complex, decorative fonts — the screenshot uses clean, humanist-sans-serif fonts.
- Don't use sharp, square corners everywhere — the screenshot uses 4-12px rounded corners.
- Don't use harsh, solid black for all text — the screenshot uses a warm dark gray (#26251E).
- Don't use heavy, drop-shadow-heavy cards — the screenshot uses subtle, soft shadows.

---

## System Prompt (paste into AI agent)

```
This design system is for Cursor, a high-performance AI coding agent. It features a clean, warm neutral palette (#F2F1ED background, #26251E ink) with a humanist-sans typography. The layout is spacious and centered, emphasizing clarity and developer productivity. Key colors are warm grays and off-whites. Avoid using high-chroma accents or aggressive dark modes. Critical don'ts: Do not use sharp square corners; the screenshot uses rounded corners. Do not use bright neon colors; the palette is warm and muted. Do not use heavy, complex typography; the screenshot uses clean, legible sans-serif fonts. The overall feel is professional, refined, and tool-oriented.
```