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

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

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

**주요 특징:**

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

색상

브랜드 및 액센트

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

표면

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

헤어라인

• **헤어라인** (`{colors.hairline}` — #e6e5e0): 1px 구분선.
• **Hairline Soft** (`{colors.hairline-soft}` — #efeee8): 더 가벼운 구분선.
• **Hairline Strong** (`{colors.hairline-strong}` — #cfcdc4): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크** (`{colors.ink}` — #26251e): 표시, 본문 강조. 따뜻한 검정색에 가깝습니다.
• **본문**(`{colors.body}` — #5a5852): 기본 실행 텍스트입니다.
• **Body Strong** (`{colors.body-strong}` — #26251e): 잉크와 동일합니다.
• **음소거됨** (`{colors.muted}` — #807d72): 부제목.
• **음소거 소프트**(`{colors.muted-soft}` — #a09c92): 비활성화된 텍스트입니다.
• **On Primary** (`{colors.on-primary}` — #ffffff): 커서 주황색에 흰색 텍스트입니다.

타임라인(AI 액션 시그니처)

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

의미론

• **성공** (`{colors.semantic-success}` — #1f8a65): 확인 표시기.
• **오류** (`{colors.semantic-error}` — #cf2d56): 유효성 검사 오류입니다.

타이포그래피

글꼴 계열

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

계층 구조

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

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

| `{typography.display-mega}` | 72px | 400 | 1.1 | -2.16px | 홈페이지 히어로 h1 |

| `{typography.display-lg}` | 36px | 400 | 1.2 | -0.72px | 부문장 |

| `{typography.display-md}` | 26px | 400 | 1.25 | -0.325px | 하위 부문장 |

| `{typography.display-sm}` | 22px | 400 | 1.3 | -0.11px | 카드 그룹 제목 |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | 구성 요소 제목 |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | 라벨 목록 |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | 기본 본문 |

| `{typography.body-tracked}` | 16px | 400 | 1.5 | 0.08px | 추적된 편집 기관 |

| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | 바닥글 본문 |

| `{typography.caption}` | 13px | 400 | 1.4 | 0 | 사진 캡션 |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | 섹션 라벨, 타임라인 알약 라벨 |

| `{typography.code}` | 13px | 400 | 1.5 | 0 | 코드 블록 — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA 알약 라벨 |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 |

원칙

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

글꼴 대체에 대한 참고 사항

CursorGothic은 라이센스가 부여되었습니다. 오픈 소스 서브

概要

Cursor のマーケティング サイトには、IDE の暗闇を乗り越えて編集者が冷静であることを信じている、静かに自信を持っている開発者ブランドのように書かれています。ベースのキャンバスは **温かみのあるクリーム色** (`{colors.canvas}` — #f7f7f4) で、本体とディスプレイの両方に温かみのある黒に近いインク (`{colors.ink}` — #26251e) が含まれています。単一ブランドの電圧は **Cursor Orange** (`{colors.primary}` — #f54e00) であり、プライマリ CTA とワードマーク用に予約されており、ほとんど使用されません。

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

このブランドの最も強力な視覚的特徴は **AI タイムライン ピル パレット**です。5 つのパステル ピル (ピーチ `{colors.timeline- Thinking}`、ミント `{colors.timeline-grep}`、ブルー `{colors.timeline-read}`、ラベンダー `{colors.timeline-edit}`、ゴールド `{colors.timeline-done}`) で、製品内のタイムライン ビジュアライゼーション内の AI アクション ステージをマークします。製品 UI でのみ使用され、システム アクションの色としては決して使用されません。

**主な特徴:**

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

色

ブランドとアクセント

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

表面

• **キャンバス** (`{colors.canvas}` — #f7f7f4): 温かみのあるクリーム色のページ床。
• **Canvas Soft** (`{colors.canvas-soft}` — #fafaf7): モックアップ内の IDE ペインの背景。
• **表面カード** (`{colors.surface-card}` — #ffffff): 純白のカード表面 — クリーム色のキャンバスに対してわずかなコントラスト。
• **Surface Strong** (`{colors.surface-strong}` — #e6e5e0): バッジ、タグ錠剤。

ヘアライン

• **ヘアライン** (`{colors.hairline}` — #e6e5e0): 1 ピクセルの分割線。
• **Hairline Soft** (`{colors.hairline-soft}` — #efeee8): より軽いディバイダー。
• **強いヘアライン** (`{colors.hairline-strong}` — #cfcdc4): より強いパネル アウトライン。

テキスト

• **インク** (`{colors.ink}` — #26251e): 表示、本文の強調。温かみのある黒に近い色。
• **本文** (`{colors.body}` — #5a5852): デフォルトの実行テキスト。
• **ボディ ストロング** (`{colors.body-strong}` — #26251e): インクと同じ。
• **ミュート** (`{colors.muted}` — #807d72): サブタイトル。
• **ミュート ソフト** (`{colors.muted-soft}` — #a09c92): テキストを無効にしました。
• **プライマリ上** (`{colors.on-primary}` — #ffffff): オレンジ色のカーソル上の白いテキスト。

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

• **思考** (`{colors.timeline- Thinking}` — #dfa88f): ピーチ。製品内のエージェント タイムライン内でのみ使用されます。
• **Grep** (`{colors.timeline-grep}` — #9fc9a2): ミント。
• **読み取り** (`{colors.timeline-read}` — #9fbbe0): パステル ブルー。
• **編集** (`{colors.timeline-edit}` — #c0a8dd): ラベンダー。
• **完了** (`{colors.timeline-done}` — #c08532): 温かみのあるゴールド。

セマンティック

• **成功** (`{colors.semantic-success}` — #1f8a65): 確認インジケーター。
• **エラー** (`{colors.semantic-error}` — #cf2d56): 検証エラー。

タイポグラフィー

フォントファミリー

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

階層

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

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

| `{typography.display-mega}` | 72ピクセル | 400 | 1.1 | -2.16ピクセル |ホームページ ヒーロー h1 |

| `{typography.display-lg}` | 36ピクセル | 400 | 1.2 | -0.72ピクセル |課長 |

| `{typography.display-md}` | 26ピクセル | 400 | 1.25 | -0.325ピクセル |サブセクションの責任者 |

| `{typography.display-sm}` | 22ピクセル | 400 | 1.3 | -0.11ピクセル |カードグループタイトル |

| `{typography.title-md}` | 18ピクセル | 600 | 1.4 | 0 |コンポーネントのタイトル |

| `{typography.title-sm}` | 16ピクセル | 600 | 1.4 | 0 |リストラベル |

| `{typography.body-md}` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの本文 |

| `{typography.body-tracked}` | 16ピクセル | 400 | 1.5 | 0.08ピクセル |追跡された編集本体 |

| `{typography.body-sm}` | 14ピクセル | 400 | 1.5 | 0 |フッター本体 |

| `{typography.caption}` | 13ピクセル | 400 | 1.4 | 0 |写真のキャプション |

| `{typography.caption-uppercase}` | 11ピクセル | 600 | 1.4 | 0.88ピクセル |セクション ラベル、タイムライン ピル ラベル |

| `{typography.code}` | 13ピクセル | 400 | 1.5 | 0 |コードブロック — JetBrains Mono |

| `{typography.button}` | 14ピクセル | 500 | 1.0 | 0 | CTA 錠剤ラベル |

| `{typography.nav-link}` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーションメニュー |

原則

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

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

CursorGothic はライセンスを取得しています。オープンソースのサブシステム