# Cursor — DESIGN.md

A light marketing canvas with high-contrast black sans type, where product demos float over painterly landscape textures.

Independent reference guide from headless-browser captures and observed styles. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-09-30

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **system sans / Inter-like**. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light, product-demo led

### Observed palette
- Canvas: `#f7f7f4`
- Soft gray band: `#ecece8`
- Primary text: `#0a0a0a`
- Secondary text: `#5c5c5c`
- Muted UI text: `#8a8a8a`
- Filled CTA: `#0a0a0a`
- CTA label: `#ffffff`
- Accent / link: `#26251e`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | ~56–64px / tight | 500–600 | tight negative |
| Section heading | ~36–44px / tight | 500 | tight |
| Body / feature copy | 16–18px / 1.5 | 400 | normal |
| Nav / button label | 14px | 500 | normal |
| Fine print / footer | 12–13px | 400 | normal |

### Layout & hierarchy
- Content sits in a wide centred column on a 1440px desktop viewport with generous vertical rhythm between narrative sections.
- Nav: Models / Product / Enterprise / Pricing / Resources; header actions are Sign in, Contact sales, and a filled Download pill.
- Homepage hero pairs a two-line product claim with Download for macOS + Request a demo; large overlapping Desktop/CLI/preview windows form the visual.
- Pricing uses a four-column plan grid (Hobby / Individual / Teams / Enterprise) with a Monthly↔Yearly toggle and sub-tier chips.
- Long narrative pages (Product, Enterprise, Bugbot) stack feature demos, quote walls and trust framing.
- Download is a compact multi-surface chooser (Desktop / Terminal / Web). CLI is terminal-first. Security is denser docs-style marketing.

### Components & behavior
- Primary CTA: filled near-black pill with white label (Download).
- Secondary CTA: outline or text button (Request a demo / Contact sales).
- Plan cards: bordered columns with price, tier chips and feature checklists.
- Product demos: floating window chrome over landscape/texture backgrounds rather than a dark shell.
- Cookie / privacy preference UI may appear; captures attempted to dismiss optional banners before stitching.

## Scope
The product interface (IDE) was not captured: this collection covers logged-out public marketing pages only, so there is no product context.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, stack multi-column plan grids on small screens and let comparison tables scroll horizontally.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Light canvas hero (“Cursor is your coding agent for building ambitious software”) with Download + Request a demo, overlapping product windows, logo trust strip and long narrative feature sections. Screenshot: `captures/cursor-marketing-home.jpg`.
- Pricing: Four-column plan grid with Monthly/Yearly toggle and Individual/Teams sub-tier chips, then FAQ and closing CTA. Screenshot: `captures/cursor-marketing-pricing.jpg`.
- Product: Long narrative scroll of product capabilities across desktop, CLI and other surfaces. Screenshot: `captures/cursor-marketing-product.jpg`.
- Download: Compact multi-surface chooser for Desktop, Terminal and Web with OS-aware targets. Screenshot: `captures/cursor-marketing-download.jpg`.
- Enterprise: Enterprise trust framing, Fortune 500 claim, security and customer stories. Screenshot: `captures/cursor-marketing-enterprise.jpg`.
- CLI: Terminal-first agents, Actions and automations with install-oriented CTAs. Screenshot: `captures/cursor-marketing-cli.jpg`.
- Bugbot: AI code-review marketing with signal/noise framing and FAQ. Screenshot: `captures/cursor-marketing-bugbot.jpg`.
- Security: Docs-style marketing covering certifications, infrastructure, Privacy Mode and account deletion. Screenshot: `captures/cursor-marketing-security.jpg`.