Cursor

Overview

Cursor's marketing site reads as a quietly-confident developer brand that believes in editorial calm over IDE-darkness. The base canvas is **warm cream** (`{colors.canvas}` — #f7f7f4) holding warm near-black ink (`{colors.ink}` — #26251e) for body and display alike. The single brand voltage is **Cursor Orange** (`{colors.primary}` — #f54e00) reserved for primary CTAs and the wordmark — used scarcely.

Type runs **CursorGothic** as the single sans family. Display sits at weight 400 with negative letter-spacing — a magazine-editorial voice rather than tech-bombastic. JetBrains Mono carries every code surface (and code surfaces are roughly half the page).

The brand's strongest visual signature is the **AI-timeline pill palette**: five pastel pills (peach `{colors.timeline-thinking}`, mint `{colors.timeline-grep}`, blue `{colors.timeline-read}`, lavender `{colors.timeline-edit}`, gold `{colors.timeline-done}`) marking AI-action stages inside in-product timeline visualizations. Used only in product UI — never as system action colors.

**Key Characteristics:**

• Warm cream canvas, not white. Ink is warm (#26251e), not pure black.
• Single CTA color: `{colors.primary}` (Cursor Orange #f54e00). Used scarcely.
• Display weight stays at 400 — never bold. Magazine voice.
• AI timeline pastels: 5 dedicated tokens for in-product agent action stages.
• Compact 8px CTA radius — developer dialect.
• Hairline-only depth; no drop shadows.
• 80px section rhythm.

Colors

Brand & Accent

• **Cursor Orange** (`{colors.primary}` — #f54e00): Primary CTA pills, wordmark, hero accent. Used scarcely.
• **Cursor Orange Active** (`{colors.primary-active}` — #d04200): Press state.

Surface

• **Canvas** (`{colors.canvas}` — #f7f7f4): Warm cream page floor.
• **Canvas Soft** (`{colors.canvas-soft}` — #fafaf7): IDE-pane background inside mockups.
• **Surface Card** (`{colors.surface-card}` — #ffffff): Pure white card surface — slight contrast against the cream canvas.
• **Surface Strong** (`{colors.surface-strong}` — #e6e5e0): Badges, tag pills.

Hairlines

• **Hairline** (`{colors.hairline}` — #e6e5e0): 1px divider.
• **Hairline Soft** (`{colors.hairline-soft}` — #efeee8): Lighter divider.
• **Hairline Strong** (`{colors.hairline-strong}` — #cfcdc4): Stronger panel outline.

Text

• **Ink** (`{colors.ink}` — #26251e): Display, body emphasis. Warm near-black.
• **Body** (`{colors.body}` — #5a5852): Default running-text.
• **Body Strong** (`{colors.body-strong}` — #26251e): Same as ink.
• **Muted** (`{colors.muted}` — #807d72): Sub-titles.
• **Muted Soft** (`{colors.muted-soft}` — #a09c92): Disabled text.
• **On Primary** (`{colors.on-primary}` — #ffffff): White text on Cursor Orange.

Timeline (AI-action signature)

• **Thinking** (`{colors.timeline-thinking}` — #dfa88f): Peach. Used inside in-product agent timeline only.
• **Grep** (`{colors.timeline-grep}` — #9fc9a2): Mint.
• **Read** (`{colors.timeline-read}` — #9fbbe0): Pastel blue.
• **Edit** (`{colors.timeline-edit}` — #c0a8dd): Lavender.
• **Done** (`{colors.timeline-done}` — #c08532): Warm gold.

Semantic

• **Success** (`{colors.semantic-success}` — #1f8a65): Confirmation indicators.
• **Error** (`{colors.semantic-error}` — #cf2d56): Validation errors.

Typography

Font Family

**CursorGothic** is the licensed display + body family. Fallback: `system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif`. Code surfaces switch to **JetBrains Mono**.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 72px | 400 | 1.1 | -2.16px | Homepage hero h1 |

| `{typography.display-lg}` | 36px | 400 | 1.2 | -0.72px | Section heads |

| `{typography.display-md}` | 26px | 400 | 1.25 | -0.325px | Sub-section heads |

| `{typography.display-sm}` | 22px | 400 | 1.3 | -0.11px | Card group titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List labels |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |

| `{typography.body-tracked}` | 16px | 400 | 1.5 | 0.08px | Tracked editorial body |

| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |

| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, timeline pill labels |

| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |

Principles

• **Display weight stays at 400.** Magazine voice, never bold.
• **Negative letter-spacing on display only.** -0.11px to -2.16px tracking.
• **JetBrains Mono on every code surface.**

Note on Font Substitutes

CursorGothic is licensed. Open-source substitute: **Inter** at weight 400 with letter-spacing -1.5%. Or **GT Sectra** for a more editorial feel.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
• **Section padding:** 80px.

Grid & Container

• Max content width: ~1200px.
• Editorial body: 12-column grid.
• Feature card grids: 2-up at desktop for splits, 3-up for benefits.
• Footer: 5-column at desktop.

Whitespace Philosophy

Generous editorial pacing — closer to a print magazine than a tech site. The cream canvas has plenty of breathing room; cards within bands sit close (16-24px gap).

Elevation & Depth

The system uses **hairline-only depth**. No drop shadows, no elevation tiers. Cards float above the canvas via 1px hairlines and the slight white-on-cream contrast.

| Level | Treatment | Use |

|---|---|---|

| Flat (canvas) | `{colors.canvas}` (#f7f7f4) | Body bands, footer |

| Card | `{colors.surface-card}` (#ffffff) | Content cards |

| Hairline border | 1px `{colors.hairline}` | Card outlines, dividers |

| IDE pane | `{colors.canvas-soft}` (#fafaf7) | Inside IDE mockup cards |

Decorative Depth

• **IDE-mockup cards** are the only "elevated" element. White card on cream canvas with internal pane structure mimicking the actual Cursor editor.
• **Timeline pastel pills** add chromatic depth without surface elevation.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Reserved |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | CTA buttons, form inputs |

| `{rounded.lg}` | 12px | Cards, IDE panes |

| `{rounded.xl}` | 16px | Larger feature cards (rare) |

| `{rounded.pill}` | 9999px | Timeline pills, badges |

| `{rounded.full}` | 9999px | Avatars (rare) |

Components

Top Navigation

**`top-nav`** — Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Cursor wordmark left, primary horizontal menu (Pricing / Features / Enterprise / Blog / Forum / Careers), Sign In + Download primary CTA right.

Buttons

**`button-primary`** — The signature Cursor Orange CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px × 18px, height 40px, rounded `{rounded.md}` (8px).

**`button-primary-active`** — Press state. Background `{colors.primary-active}`.

**`button-secondary`** — White card pill on cream canvas. Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.

**`button-tertiary-text`** — Inline ink text link.

**`button-download`** — Larger ink-canvas CTA. Background `{colors.ink}`, text `{colors.canvas}`, padding 12px × 20px, height 44px. Used for "Download for macOS" type CTAs.

Hero & IDE Mockups

**`hero-band`** — Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (72px / 400 / -2.16px), subhead in `{typography.body-md}`, two CTAs (`button-download` + `button-tertiary-text`), and a centered IDE-mockup card below the hero copy.

**`ide-mockup-card`** — A white card containing a multi-pane IDE mockup (sidebar + main editor + chat panel + terminal). Background `{colors.surface-card}`, rounded `{rounded.lg}` (12px), 1px `{colors.hairline}` border, no padding (panes fill the card edge-to-edge).

**`ide-pane`** — Individual IDE pane inside the mockup. Background `{colors.canvas-soft}`, text `{colors.body}` in `{typography.code}` (JetBrains Mono 13px), rounded `{rounded.md}` (8px), padding 16px.

Cards

**`feature-card`** — Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.lg}`, padding 24px. 1px `{colors.hairline}` border.

**`comparison-card`** — Side-by-side "Cursor vs other tools" card. Same surface and rounding; internally split into 2 columns.

**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.

AI Timeline (signature)

**`timeline-pill-thinking`** — Peach pill. Background `{colors.timeline-thinking}`, text `{colors.ink}`, type `{typography.caption-uppercase}` (11px / 600 / 0.88px tracking, uppercase), rounded `{rounded.pill}`, padding 4px × 10px. Marks "Thinking" stage in product timeline.

**`timeline-pill-grep`** — Mint pill. Same shape, background `{colors.timeline-grep}`. Marks "Grepping" stage.

**`timeline-pill-read`** — Pastel-blue pill. Background `{colors.timeline-read}`. Marks "Reading" stage.

**`timeline-pill-edit`** — Lavender pill. Background `{colors.timeline-edit}`. Marks "Editing" stage.

**`timeline-pill-done`** — Gold pill. Background `{colors.timeline-done}`, text `{colors.on-primary}` white. Marks "Done" stage.

Code

**`code-block`** — Inline code block. Background `{colors.surface-card}`, text `{colors.ink}` in `{typography.code}`, rounded `{rounded.lg}`, padding 20px, 1px `{colors.hairline}` border.

Pricing

**`pricing-tier-card`** — Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding 32px, 1px `{colors.hairline}` border.

**`pricing-tier-featured`** — Featured tier inverts to ink. Background `{colors.ink}`, text `{colors.canvas}`. Same shape, dark inversion signals "highlighted" without colored ribbon.

Forms & Tags

**`text-input`** — Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px.

**`badge-pill`** — Small uppercase pill. Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.

CTA / Footer

**`cta-band`** — Pre-footer "Try Cursor now" band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single Cursor Orange CTA. 96px vertical padding.

**`footer`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.

**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.

Do's and Don'ts

Do

• Reserve `{colors.primary}` (Cursor Orange) for primary CTAs and brand wordmark.
• Keep display weight at 400. The editorial voice depends on this.
• Use the cream `{colors.canvas}` page floor — never pure white.
• Render every code surface (inline, blocks, IDE panes) in JetBrains Mono.
• Use timeline pastels only inside in-product agent visualizations — never as system action colors.

Don't

• Don't introduce a secondary brand action color. Cursor Orange is the only one.
• Don't drop display to bold weights (700+). Magazine voice depends on 400.
• Don't add drop shadows. Hairlines + ink-on-cream contrast carry the depth.
• Don't use timeline pastels on non-timeline UI. They're scoped to the agent timeline only.
• Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual product CTAs.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 640px | Hero h1 72→32px; IDE mockup collapses to single pane preview; feature grid 1-up; nav hamburger. |

| Tablet | 640–1024px | Hero h1 56px; IDE mockup compresses; feature grid 2-up. |

| Desktop | 1024–1280px | Full hero h1 72px; full multi-pane IDE mockup; feature grid 3-up. |

| Wide | > 1280px | Content caps at 1200px. |

Touch Targets

• Primary CTA at 40px height — at WCAG AA, padded for AAA.
• Download CTA at 44px — at AAA.

Collapsing Strategy

• Top nav switches to hamburger below 768px.
• IDE mockup multi-pane collapses to a single primary pane preview on mobile.
• Feature grid: 3-up → 2-up → 1-up.

Iteration Guide

1. Focus on a single component at a time.

2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` (12px).

3. Variants live as separate entries inside `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. CursorGothic 400 for display, 400/500/600 for body. JetBrains Mono on every code surface.

7. Cursor Orange stays scarce.

8. Timeline pastels stay scoped to in-product agent visualizations.

Known Gaps

• CursorGothic is a licensed typeface; Inter is the substitute.
• Animation timings (timeline pill entrance, IDE pane reveal) out of scope.
• In-app surfaces (code editor, chat panel, agent timeline) only partially captured via marketing IDE mockups.
• Form validation states beyond focus not visible on captured surfaces.

개요

Cursor의 마케팅 사이트는 IDE의 어둠에 대한 편집의 평온함을 믿는 조용하고 자신감 있는 개발자 브랜드로 읽혀집니다. 기본 캔버스는 **따뜻한 크림색**(`` — #f7f7f4)으로 본체와 디스플레이 모두 따뜻한 검정색에 가까운 잉크(`` — #26251e)를 담고 있습니다. 단일 브랜드 전압은 기본 CTA 및 워드마크용으로 예약된 **커서 오렌지**(`` — #f54e00)이며 거의 사용되지 않습니다.

Type은 **CursorGothic**을 단일 산세 패밀리로 실행합니다. 디스플레이는 음수 문자 간격으로 무게 400에 위치합니다. 기술적인 과장보다는 잡지 편집자의 목소리입니다. JetBrains Mono는 모든 코드 표면을 담고 있습니다(코드 표면은 대략 페이지의 절반입니다).

브랜드의 가장 강력한 시각적 시그니처는 **AI 타임라인 알약 팔레트**입니다. 제품 내 타임라인 내에 AI 작업 단계를 표시하는 5개의 파스텔 알약(복숭아 ``, 민트 ``, 블루 ``, 라벤더 ``, 골드 ``)입니다. 시각화. 제품 UI에만 사용되며 시스템 작업 색상으로는 사용되지 않습니다.

**주요 특성:**

• 흰색이 아닌 따뜻한 크림색 캔버스입니다. 잉크가 순수한 검정색이 아닌 따뜻한 색(#26251e)입니다.
• 단일 CTA 색상: ``(커서 주황색 #f54e00). 거의 사용되지 않습니다.
• 표시 가중치는 400으로 유지되며 굵게 표시되지 않습니다. 잡지 음성.
• AI 타임라인 파스텔: 제품 내 에이전트 작업 단계를 위한 전용 토큰 5개.
• 컴팩트한 8px CTA 반경 — 개발자 방언.
• 가는선 전용 깊이; 그림자가 없습니다.
• 80px 섹션 리듬.

색상

브랜드 및 액센트

• **커서 주황색**(`` — #f54e00): 기본 CTA 알약, 워드마크, 영웅 악센트. 거의 사용되지 않습니다.
• **커서 주황색 활성**(`` — #d04200): 누르기 상태.

표면

• **캔버스** (`` — #f7f7f4): 따뜻한 크림색 페이지 바닥.
• **캔버스 소프트**(`` — #fafaf7): 모형 내부의 IDE 창 배경.
• **표면 카드**(`` — #ffffff): 순수한 흰색 카드 표면 - 크림색 캔버스와 약간의 대비.
• **표면 강화**(`` — #e6e5e0): 배지, 태그 알약.

헤어라인

• **가는 선** (`` — #e6e5e0): 1px 구분선.
• **헤어라인 소프트**(`` — #efeee8): 더 가벼운 칸막이.
• **가는 선 강함** (`` — #cfcdc4): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크** (`` — #26251e): 디스플레이, 본문 강조. 따뜻한 검정색에 가깝습니다.
• **본문**(`` — #5a5852): 기본 실행 텍스트.
• **바디 스트롱**(`` — #26251e): 잉크와 동일합니다.
• **음소거됨**(`` — #807d72): 부제목.
• **음소거 소프트**(`` — #a09c92): 비활성화된 텍스트.
• **기본**(`` — #ffffff): 주황색 커서에 흰색 텍스트.

타임라인(AI 액션 서명)

• **생각**(`` — #dfa88f): 복숭아. 제품 내 에이전트 타임라인 내에서만 사용됩니다.
• **그렙** (`` — #9fc9a2): 최상급.
• **읽기**(`` — #9fbbe0): 파스텔 블루.
• **편집**(`` — #c0a8dd): 라벤더.
• **완료** (`` — #c08532): 따뜻한 금색.

의미

• **성공**(`` — #1f8a65): 확인 표시기.
• **오류**(`` — #cf2d56): 유효성 검사 오류.

타이포그래피

글꼴군

**CursorGothic**은 허가된 디스플레이 + 본체 제품군입니다. 대체: `system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif`. 코드 표면이 **JetBrains Mono**로 전환됩니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 72px | 400 | 1.1 | -2.16px | 홈페이지 히어로 h1 |

| _`` | 36px | 400 | 1.2 | -0.72px | 섹션 헤드 |

| _`` | 26px | 400 | 1.25 | -0.325px | 하위 섹션 머리 |

| _`` | 22px | 400 | 1.3 | -0.11px | 카드 그룹 제목 |

| _`` | 18px | 600 | 1.4 | 0 | 구성요소 제목 |

| _`` | 16px | 600 | 1.4 | 0 | 라벨 목록 |

| _`` | 16px | 400 | 1.5 | 0 | 기본 본문 |

| _`` | 16px | 400 | 1.5 | 0.08px | 추적된 편집 본문 |

| _`` | 14px | 400 | 1.5 | 0 | 바닥글 본문 |

| _`` | 13px | 400 | 1.4 | 0 | 사진 캡션 |

| _`` | 11px | 600 | 1.4 | 0.88px | 섹션 라벨, 타임라인 알약 라벨 |

| _`` | 13px | 400 | 1.5 | 0 | 코드 블록 — JetBrains Mono |

| _`` | 14px | 500 | 1.0 | 0 | CTA 알약 라벨 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 |

원칙

• **표시 무게는 400으로 유지됩니다.** 잡지 음성은 굵게 표시되지 않습니다.
• **디스플레이에만 음수 문자 간격이 있습니다.** -0.11px ~ -2.16px 추적.
• **모든 코드 표면에 JetBrains Mono가 있습니다.**

글꼴 대체에 대한 참고사항

CursorGothic은 라이선스가 부여되었습니다. 오픈 소스 대체: **Inter** 가중치 400, 문자 간격 -1.5%. 또는 좀 더 편집적인 느낌을 원하시면 **GT Sectra**를 선택하세요.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 80px.
• **섹션 패딩:** 80px.

그리드 및 컨테이너

• 최대 콘텐츠 너비: ~1200px.
• 편집 본문: 12열 그리드.
• 기능 카드 그리드: 분할을 위한 데스크탑의 2-up, 혜택을 위한 3-up.
• 바닥글: 데스크탑의 5열.

공백 철학

풍부한 편집 속도 — 기술 사이트라기보다는 인쇄 잡지에 더 가깝습니다. 크림색 캔버스에는 숨쉴 공간이 충분합니다. 밴드 내의 카드는 가깝게 위치합니다(16-24px 간격).

고도 및 깊이

시스템은 **헤어라인 전용 깊이**를 사용합니다. 그림자도 없고 고도 계층도 없습니다. 카드는 1픽셀의 가는 선과 크림색 바탕에 약간의 흰색 대비를 통해 캔버스 위에 떠 있습니다.

| 레벨 | 치료 | |

사용

|---|---|---|

| 플랫(캔버스) | _`` (#f7f7f4) | 바디 밴드, 바닥글 |

| 카드 | _`` (#ffffff) | 콘텐츠 카드 |

| 헤어라인 테두리 | 1픽셀 `` | 카드 개요, 구분선 |

| IDE 창 | _`` (#fafaf7) | IDE 모형 카드 내부 |

장식적 깊이

• **IDE 모형 카드**는 유일한 '승격된' 요소입니다. 실제 커서 편집기를 모방한 내부 창 구조를 갖춘 크림색 캔버스에 흰색 카드.
• **타임라인 파스텔 알약**은 표면 높이 없이 색채 깊이를 추가합니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 0픽셀 | 예약됨 |

| _`` | 4픽셀 | 인라인 태그 |

| _`` | 6픽셀 | 압축 행 |

| _`` | 8픽셀 | CTA 버튼, 양식 입력 |

| _`` | 12px | 카드, IDE 창 |

| _`` | 16px | 더 큰 기능 카드(드물게) |

| _`` | 9999px | 타임라인 알약, 배지 |

| _`` | 9999px | 아바타(희귀) |

구성요소

상단 탐색

_**`top-nav`** — 배경 ``, 텍스트 ``, 높이 64px. 레이아웃: 커서 워드마크 왼쪽, 기본 가로 메뉴(가격/기능/기업/블로그/포럼/채용), 로그인 + 기본 CTA 다운로드 오른쪽.

버튼

**`button-primary`** — 서명 커서 주황색 CTA입니다. 배경 ``, 텍스트 ``, 유형 ``(14px/500), 패딩 10px × 18px, 높이 40px, 반올림 ``(8px).

_**`button-primary-active`** — 프레스 상태. 배경 ``.

_**`button-secondary`** — 크림 캔버스에 흰색 카드 알약. 배경 ``, 텍스트 ``, 1px `` 테두리.

**`button-tertiary-text`** — 인라인 잉크 텍스트 링크.

**`button-download`** — 더 큰 잉크 캔버스 CTA. 배경 ``, 텍스트 ``, 패딩 12px × 20px, 높이 44px. "macOS용 다운로드" 유형 CTA에 사용됩니다.

Hero 및 IDE 모형

**`hero-band`** — 배경 ``, ``의 전체 너비 표시 헤드라인(72px / 400 / -2.16px), ``의 하위 헤드, 2개의 CTA(`button-download` + `button-tertiary-text`) 및 Hero 사본 아래 중앙에 위치한 IDE 모형 카드.

_**`ide-mockup-card`** — 다중 창 IDE 모형(사이드바 + 기본 편집기 + 채팅 패널 + 터미널)이 포함된 흰색 카드입니다. 배경 ``, 둥근 ``(12px), 1px `` 테두리, 패딩 없음(창은 카드 가장자리에서 가장자리까지 채움).

**`ide-pane`** — 모형 내부의 개별 IDE 창입니다. 배경 ``, ``(JetBrains Mono 13px)의 텍스트 ``, 반올림 ``(8px), 패딩 16px.

카드

**`feature-card`** — 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px. 1px `` 테두리.

_**`comparison-card`** — 나란히 있는 "커서 및 기타 도구" 카드. 동일한 표면과 라운딩; 내부적으로 2개의 열로 분할됩니다.

**`testimonial-card`** — 견적 카드. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 24px.

AI 타임라인(서명)

**`timeline-pill-thinking`** — 복숭아 알약. 배경 ``, 텍스트 ``, 유형 ``(11px / 600 / 0.88px 추적, 대문자), 반올림 ``, 패딩 4px × 10px. 제품 타임라인에 '생각' 단계를 표시합니다.

**`timeline-pill-grep`** — 민트 알약. 같은 모양, 배경 ``. "Grepping" 단계를 표시합니다.

**`timeline-pill-read`** — 파스텔 블루 알약. 배경 ``. '읽기' 단계를 표시합니다.

**`timeline-pill-edit`** — 라벤더 알약. 배경 ``. "편집 중" 단계를 표시합니다.

**`timeline-pill-done`** — 금약. 배경 ``, 텍스트 `` 흰색. '완료' 단계를 표시합니다.

코드

**`code-block`** — 인라인 코드 블록. 배경 ``, ``의 텍스트 ``, 둥근 ``, 패딩 20px, 1px `` 테두리.

가격

_**`pricing-tier-card`** — 배경 ``, 반올림 ``, 패딩 32px, 1px `` 테두리.

**`pricing-tier-featured`** — 주요 계층이 잉크로 반전됩니다. 배경 ``, 텍스트 ``. 같은 모양, 어두운 반전 신호는 컬러 리본 없이 "강조 표시"됩니다.

양식 및 태그

**`text-input`** — 배경 ``, 텍스트 ``, 반올림 ``(8px), 패딩 12px × 16px, 높이 44px.

**`badge-pill`** — 작은 대문자 알약입니다. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 4px × 10px.

CTA/바닥글

**`cta-band`** — 앞부분 "지금 커서 사용해 보기" 밴드. 배경 ``, ``의 중앙 표시 헤드라인, 단일 커서 주황색 CTA. 96px 수직 패딩.

**`footer`** — 바닥글 닫기 배경 ``, 텍스트 ``. 5열 링크 목록. 64×48px 패딩.

**`footer-link`** — 배경 투명, 텍스트 ``, 유형 ``.

해야 할 일과 하지 말아야 할 일

하세요

• 기본 CTA 및 브랜드 워드마크를 위해 ``(커서 주황색)을 예약하세요.
• 표시 가중치를 400으로 유지하세요. 편집자의 목소리는 이에 따라 달라집니다.
• 크림색 `` 페이지 바닥을 사용하세요. 절대 흰색이 아닙니다.
• JetBrains Mono에서 모든 코드 표면(인라인, 블록, IDE 창)을 렌더링합니다.
• 제품 내 에이전트 시각화 내에서만 타임라인 파스텔을 사용하고 시스템 작업 색상으로는 사용하지 마십시오.

하지 마세요

• 보조 브랜드 액션 색상을 소개하지 마세요. 커서 오렌지가 유일한 것입니다.
• 굵은 두께(700+)로 표시를 중단하지 마세요. 잡지 음성은 400에 따라 다릅니다.
• 그림자를 추가하지 마세요. 헤어라인과 크림색 잉크의 대비가 깊이를 전달합니다.
• 타임라인이 아닌 UI에는 타임라인 파스텔을 사용하지 마세요. 상담원 타임라인으로만 범위가 지정됩니다.
• 타사 위젯(쿠키 동의, OneTrust)에서 CTA 색상을 추출하지 마세요. 브랜드의 CTA는 실제 제품 CTA에 표시되는 내용입니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일 | _< 640px | Hero h1 72→32px; IDE mockup collapses to single pane preview; feature grid 1-up; nav hamburger. |

| 태블릿 | 640~1024px | 영웅 h1 56px; IDE 모형 압축; 피쳐 그리드 2-up. |

| 데스크탑 | 1024~1280px | 전체 영웅 h1 72px; 전체 다중 창 IDE 모형; 기능 그리드 3업. |

| 와이드 | > 1280px | 콘텐츠는 1200px로 제한됩니다. |

터치 대상

• 40픽셀 높이의 기본 CTA — WCAG AA, AAA용으로 패딩됨.
• AAA에서 44px로 CTA를 다운로드하세요.

축소 전략

• 상위 탐색은 768px 미만의 햄버거로 전환됩니다.
• IDE 모형 다중 창은 모바일에서 단일 기본 창 미리보기로 축소됩니다.
• 피처 그리드: 3개 → 2개 → 1개.

반복 가이드

1. 한 번에 하나의 구성요소에만 집중하세요.

2. CTA의 기본값은 ``(8px)입니다. 카드는 ``(12px)을 사용합니다.

3. 변형은 `components:`.

내부에 별도의 항목으로 존재합니다.

4. 어디에서나 ``을 사용하세요. 16진수 인라인은 사용하지 마세요.

5. 호버 상태는 문서화되지 않았습니다.

6. 디스플레이용 CursorGothic 400, 본체용 400/500/600. 모든 코드 표면에 JetBrains Mono가 있습니다.

7. 커서 오렌지는 여전히 부족합니다.

8. 타임라인 파스텔은 제품 내 에이전트 시각화 범위로 유지됩니다.

알려진 격차

• CursorGothic은 라이선스를 받은 서체입니다. 인테르가 대체 선수입니다.
• 애니메이션 타이밍(타임라인 알약 시작, IDE 창 표시)이 범위를 벗어났습니다.
• 인앱 표면(코드 편집기, 채팅 패널, 상담사 타임라인)은 마케팅 IDE 모형을 통해 부분적으로만 캡처되었습니다.
• 초점을 벗어난 양식 유효성 검사 상태는 캡처된 표면에 표시되지 않습니다.

概要

Cursor のマーケティング サイトは、IDE の暗闇を乗り越えて編集者が冷静であることを信じている、静かに自信を持っている開発者ブランドとして読み取れます。ベースのキャンバスは **暖かいクリーム色** (`` — #f7f7f4) で、本体とディスプレイの両方に黒に近い暖かいインク (`` — #26251e) が含まれています。単一ブランド ボルテージは **カーソル オレンジ** (`` — #f54e00) であり、プライマリ CTA とワードマーク用に予約されており、ほとんど使用されません。

_Type は、ファミリーのない単一の **CursorGothic** として実行されます。ディスプレイはウェイト 400 で、負の文字間隔で配置されています。これは、テクノロジーを誇示しているというよりは、雑誌の社説のようなものです。 JetBrains Mono にはすべてのコード サーフェスが含まれます (コード サーフェスはページのおよそ半分です)。

ブランドの最も強力な視覚的特徴は**AIタイムライン錠剤パレット**です。製品内のタイムライン内のAIアクション段階をマークする5つのパステル錠剤(ピーチ__CODEBCK_557___、ミント__CODEBCK_558___、ブルー__CODEBCK_559___、ラベンダー__CODEBCK_560___、ゴールド__CODEBCK_561___)です。視覚化。製品 UI でのみ使用されます。システム アクションの色としては使用されません。

**主な特徴:**

• 白ではなく、温かみのあるクリーム色のキャンバス。インクは暖かい色 (#26251e) であり、純粋な黒ではありません。
• 単一 CTA カラー: `` (カーソル オレンジ #f54e00)。ほとんど使用されていません。
• 表示のウェイトは 400 のままです。太字になりません。雑誌の声。
• AI タイムライン パステル: 製品内のエージェント アクション ステージ用の 5 つの専用トークン。
• コンパクト 8 ピクセル CTA 半径 - 開発者向けの言語。
• ヘアラインのみの深さ。ドロップ シャドウはありません。
• 80px セクションのリズム。

色

ブランドとアクセント

• **カーソル オレンジ** (`` — #f54e00): プライマリ CTA ピル、ワードマーク、ヒーロー アクセント。ほとんど使用されていません。
• **カーソル オレンジ アクティブ** (`` — #d04200): 押した状態。

サーフェス

• **キャンバス** (`` — #f7f7f4): 温かみのあるクリーム色のページ床。
• **キャンバス ソフト** (`` — #fafaf7): モックアップ内の IDE ペインの背景。
• **表面カード** (`` — #ffffff): 純白のカード表面 — クリーム色のキャンバスに対してわずかなコントラスト。
• **表面強度** (`` — #e6e5e0): バッジ、タグ錠剤。

ヘアライン

• **ヘアライン** (`` — #e6e5e0): 1 ピクセルの分割線。
• **ヘアライン ソフト** (`` — #efeee8): より軽いディバイダー。
• **強いヘアライン** (`` — #cfcdc4): より強力なパネル アウトライン。

テキスト

• **インク** (`` — #26251e): 表示、本文の強調。 温かみのある黒に近い色。
• **本文** (`` — #5a5852): デフォルトの実行テキスト。
• **ボディ ストロング** (`` — #26251e): インクと同じ。
• **ミュート** (`` — #807d72): 字幕。
• **ミュートソフト** (`` — #a09c92): 無効なテキスト。
• **プライマリ** (`` — #ffffff): オレンジ色のカーソル上の白いテキスト。

タイムライン (AI アクション署名)

• **考え中** (`` — #dfa88f): ピーチ。製品内のエージェント タイムライン内でのみ使用されます。
• **Grep** (`` — #9fc9a2): ミント。
• **読む** (`` — #9fbbe0): パステル ブルー。
• **編集** (`` — #c0a8dd): ラベンダー。
• **完了** (`` — #c08532): 暖かい金色。

セマンティック

• **成功** (`` — #1f8a65): 確認インジケーター。
• **エラー** (`` — #cf2d56): 検証エラー。

タイポグラフィ

フォント ファミリー

**CursorGothic** は、ライセンスを取得したディスプレイ + ボディ ファミリです。フォールバック: `system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif`。コード サーフェスは **JetBrains Mono** に切り替わります。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 72ピクセル | 400 | 1.1 | -2.16ピクセル |ホームページのヒーロー h1 |

| `` | 36ピクセル | 400 | 1.2 | -0.72ピクセル |セクションヘッド |

| `` | 26ピクセル | 400 | 1.25 | -0.325ピクセル |サブセクションの見出し |

| `` | 22ピクセル | 400 | 1.3 | -0.11ピクセル |カード グループのタイトル |

| `` | 18ピクセル | 600 | 1.4 | 0 |コンポーネントのタイトル |

| `` | 16ピクセル | 600 | 1.4 | 0 |リストのラベル |

| `` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの本文 |

| `` | 16ピクセル | 400 | 1.5 | 0.08ピクセル |追跡された編集本文 |

| `` | 14ピクセル | 400 | 1.5 | 0 |フッター本文 |

| `` | 13ピクセル | 400 | 1.4 | 0 |写真のキャプション |

| `` | 11ピクセル | 600 | 1.4 | 0.88ピクセル |セクション ラベル、タイムライン ピル ラベル |

| `` | 13ピクセル | 400 | 1.5 | 0 |コードブロック — JetBrains Mono |

| `` | 14ピクセル | 500 | 1.0 | 0 | CTA 錠剤ラベル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーション メニュー |

原則

• **表示ウェイトは 400 のままです。** 雑誌の内容であり、決して太字ではありません。
• **表示時のみ負の文字間隔。** -0.11px ～ -2.16px の追跡。
• **すべてのコード サーフェイスに JetBrains Mono。**

フォントの代替に関する注意

CursorGothic はライセンスを取得しています。オープンソースの代替品: **Inter**、ウェイト 400、文字間隔 -1.5%。 または、**GT Sectra** を使用すると、より編集的な雰囲気が得られます。

レイアウト

間隔システム

• **基本単位:** 4px.
• **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 80px.
• **セクション パディング:** 80 ピクセル。

グリッドとコンテナ

• コンテンツの最大幅: ~1200px。
• 編集本文: 12 列グリッド。
• フィーチャー カード グリッド: 分割の場合はデスクトップで 2 アップ、特典の場合は 3 アップ。
• フッター: デスクトップでは 5 列。

ホワイトスペースの哲学

寛大な編集ペース — 技術サイトというよりも紙の雑誌に近い。クリーム色のキャンバスには十分なスペースがあります。バンド内のカードは近くに配置されます (16 ～ 24 ピクセルの隙間)。

標高と深さ

_システムは**ヘアラインのみの深さ**を使用します。ドロップ シャドウやエレベーション層はありません。カードは、1 ピクセルのヘアラインとクリーム色に白のわずかなコントラストによってキャンバス上に浮かび上がります。

|レベル |治療 | |

を使用します

|---|---|---|

|フラット（キャンバス） | `` (#f7f7f4) |ボディバンド、フッター |

|カード | `` (#ffffff) |コンテンツ カード |

|ヘアラインボーダー | ヘアラインボーダー1px `` |カードのアウトライン、仕切り |

| IDE ペイン | `` (#fafaf7) | IDE モックアップ カードの内部 |

装飾の深さ_

• **IDE モックアップ カード** が唯一の「高度な」要素です。実際のカーソル エディタを模倣した内部ペイン構造を備えたクリーム色のキャンバス上の白いカード。
• **タイムライン パステル ピル** は、表面を隆起させることなく色彩の深さを追加します。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 0ピクセル |予約済み |

| `` | 4ピクセル |インライン タグ |

| `` | 6ピクセル |コンパクトな行 |

| `` | 8ピクセル | CTA ボタン、フォーム入力 |

| `` | 12ピクセル |カード、IDE ペイン |

| `` | 16ピクセル |大きなフィーチャー カード (まれ) |

| `` | 9999ピクセル |タイムラインの錠剤、バッジ |

| `` | 9999ピクセル |アバター (レア) |

コンポーネント

トップナビゲーション_

**`top-nav`** — 背景 ``、テキスト ``、高さ 64 ピクセル。レイアウト: カーソル ワードマークが左、プライマリ水平メニュー (価格設定 / 機能 / エンタープライズ / ブログ / フォーラム / キャリア)、右側にサインイン + プライマリ CTA をダウンロードします。

ボタン

**`button-primary`** — 特徴的なカーソルオレンジ CTA。背景 ``、テキスト ``、タイプ `` (14px / 500)、パディング 10px × 18px、高さ 40px、丸め `` (8px).

**`button-primary-active`** — プレス状態。 背景 ``.

**`button-secondary`** — クリーム色のキャンバスに白いカード錠剤。背景__CODEBCK_632___、テキスト__CODEBCK_633___、1ピクセル__CODEBCK_634___境界線。

**`button-tertiary-text`** — インライン インク テキスト リンク。

**`button-download`** — より大きなインク キャンバス CTA。背景__CODEBCK_637___、テキスト__CODEBCK_638___、パディング12px × 20px、高さ44px。 「macOS 用ダウンロード」タイプの CTA に使用されます。

ヒーローと IDE のモックアップ

**`hero-band`** — 背景 ``、__CODEBCK_641___ (72px / 400 / -2.16px) の全幅表示見出し、__CODEBCK_642___ の小見出し、2 つの CTA (`button-download` + `button-tertiary-text`)、ヒーロー コピーの下に IDE モックアップ カードが中央に配置されます。

**`ide-mockup-card`** — マルチペイン IDE モックアップ (サイドバー + メイン エディタ + チャット パネル + ターミナル) を含む白いカード。背景__CODEBCK_646___、角丸__CODEBCK_647___ (12ピクセル)、1ピクセル__CODEBCK_648___境界線、パディングなし(ペインはカードの端から端まで埋められます)。

**`ide-pane`** — モックアップ内の個別の IDE ペイン。背景__CODEBCK_650___、テキスト__CODEBCK_651___、__CODEBCK_652___ (JetBrains Mono 13px)、丸め__CODEBCK_653___ (8px)、パディング16px.

カード

**`feature-card`** — 背景 ``、テキスト ``、タイプ ``、丸め ``、パディング 24 ピクセル。 1 ピクセル `` 境界線.

**`comparison-card`** — 「カーソルと他のツール」カードを並べて表示します。同じ表面と丸み。内部的に 2 つの列に分割されます。

**`testimonial-card`** — 引用カード。背景__CODEBCK_662___、テキスト__CODEBCK_663___、丸め__CODEBCK_664___、パディング24ピクセル。

AI タイムライン (署名)

**`timeline-pill-thinking`** — 桃の錠剤。背景 ``、テキスト ``、タイプ `` (11px / 600 / 0.88px トラッキング、大文字)、丸め ``、パディング 4px × 10px。製品タイムラインの「思考」段階をマークします。

_**`timeline-pill-grep`** — ミントの錠剤。同じ形状、背景__CODEBCK_671___。 「グレッピング」段階をマークします。

**`timeline-pill-read`** — パステルブルーの錠剤。背景__CODEBCK_673___。 「読書」段階をマークします。

**`timeline-pill-edit`** — ラベンダーの錠剤。背景__CODEBCK_675___。 「編集」段階をマークします。

_**`timeline-pill-done`** — 金の錠剤。背景__CODEBCK_677___、テキスト__CODEBCK_678___白。 「完了」ステージをマークします。

コード

_**`code-block`** — インライン コード ブロック。背景__CODEBCK_680___、__CODEBCK_682___内のテキスト__CODEBCK_681___、角丸__CODEBCK_683___、パディング20ピクセル、1ピクセル__CODEBCK_684___境界線。

価格

**`pricing-tier-card`** — 背景 ``、角丸 ``、パディング 32 ピクセル、1 ピクセル `` 境界線。

_**`pricing-tier-featured`** — 注目の層がインクに反転します。背景__CODEBCK_690___、テキスト__CODEBCK_691___。同じ形状で、色付きのリボンなしで暗い反転信号が「強調表示」されます。

フォームとタグ

_**`text-input`** — 背景__CODEBCK_693___、テキスト__CODEBCK_694___、角丸__CODEBCK_695___ (8px)、パディング12px × 16px、高さ44px。

**`badge-pill`** — 小さな大文字の錠剤。 背景__CODEBCK_697___、テキスト__CODEBCK_698___、タイプ__CODEBCK_699___、丸め__CODEBCK_700___、パディング4px × 10px.

CTA / フッター

_**`cta-band`** — プレフッターの「今すぐカーソルを試してください」バンド。背景__CODEBCK_702___、__CODEBCK_703___の中央に表示される見出し、オレンジ色の単一カーソルCTA。 96 ピクセルの垂直パディング。

**`footer`** — フッターを閉じます。背景__CODEBCK_705___、テキスト__CODEBCK_706___。 5列のリンクリスト。 64×48 ピクセルのパディング。

_**`footer-link`** - 背景透明、テキスト__CODEBCK_708___、タイプ__CODEBCK_709___.

推奨事項と禁止事項

実行

• __CODEBCK_710___ (オレンジ色のカーソル) はプライマリ CTA とブランド ワードマーク用に予約してください。
• 表示ウェイトを 400 に保ちます。編集者の意見はこれに依存します。
• クリーム色の__CODEBCK_711___ページ床を使用します。決して真っ白ではありません。
• JetBrains Mono ですべてのコード サーフェス (インライン、ブロック、IDE ペイン) をレンダリングします。
• タイムライン パステルは製品内のエージェント ビジュアライゼーション内でのみ使用してください。システム アクションの色としては決して使用しないでください。

しないでください

• _ブランド アクションの二次的な色を導入しないでください。カーソルはオレンジ色だけです。
• 表示を太字のウェイト (700 以上) に落とさないでください。雑誌の音声は 400 に依存します。
• _ドロップ シャドウを追加しないでください。ヘアライン + インクとクリームのコントラストが深みを与えます。
• タイムライン以外の UI ではタイムライン パステルを使用しないでください。これらはエージェントのタイムラインのみに限定されます。
• サードパーティのウィジェット (Cookie 同意、OneTrust) から CTA カラーを抽出しないでください。ブランドの CTA は、実際の商品の CTA に表示されるものです。

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル | < 640px | Hero h1 72→32px; IDE mockup collapses to single pane preview; feature grid 1-up; nav hamburger. |

|タブレット | 640–1024ピクセル |ヒーロー h1 56px; IDE モックアップは圧縮されます。フィーチャーグリッド 2 アップ。 |

|デスクトップ | 1024–1280ピクセル |フルヒーロー h1 72px;完全なマルチペイン IDE モックアップ。フィーチャーグリッド 3 アップ。 |

|ワイド | > 1280ピクセル |コンテンツの上限は 1200 ピクセルです。 |

タッチターゲット

• 高さ 40 ピクセルのプライマリ CTA — WCAG AA で、AAA 用にパディングされます。
• CTA を 44 ピクセルでダウンロードします — AAA で。

戦略の崩壊

• 768 ピクセル以下では、上部のナビゲーションがハンバーガーに切り替わります。
• IDE モックアップのマルチペインは、モバイルでは単一のプライマリ ペインのプレビューに折りたたまれます。
• フィーチャー グリッド: 3-up → 2-up → 1-up.

反復ガイド

1.一度に 1 つのコンポーネントに注目してください。

2. CTA のデフォルトは `` (8px) です。カードは__CODEBCK_713___ (12ピクセル).

を使用します。

3.バリアントは、__CODEBCK_714___.

内の個別のエントリとして存在します。

4.どこでも `` を使用します。16 進数をインライン化しないでください。

5.ホバー状態は文書化されていません。

6.表示用カーソルゴシック400、本文400/500/600。 JetBrains Mono をすべてのコード サーフェスで使用します。

7。カーソルのオレンジは残りわずかです。

8. タイムライン パステルは、製品内のエージェントの視覚化に限定されます。

既知のギャップ

• CursorGothic はライセンスされた書体です。インテルが代役です。
• アニメーションのタイミング (タイムライン ピルの開始、IDE ペインの表示) は範囲外です。
• アプリ内サーフェス (コード エディター、チャット パネル、エージェント タイムライン) は、マーケティング IDE モックアップから部分的にのみキャプチャされました。
• フォーカスを超えたフォーム検証状態は、キャプチャされたサーフェスには表示されません。

Accessibility Considerations

Cursor's color system, anchored by #f7f7f4, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Cursor's color system, anchored by #f7f7f4, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Cursor's color system, anchored by #f7f7f4, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

• Opencode Design System
• Supabase Design System
• Warp Design System
• Clay Design System