Warp

Overview

Warp is an "agentic development environment" — a terminal application that wraps an AI agent — and its marketing site mirrors the product's posture: a single dark band running the entire page, warmer than pure black (`{colors.canvas}` `#2b2622` carries a hint of brown-beige from the brand's oklch-defined warmth value), with copy set almost entirely in Inter. The page reads more like a developer's reading-mode editor than a marketing surface.

The decoration is restrained. Two terminal screenshots open the hero (split between the two main product modes — agent + terminal). A partner-logo strip (Anthropic / OpenAI / Google / Stanford) sits below the hero on a slightly warmer tile surface. A single testimonial card with a portrait photograph. A press-coverage list. Then the page closes with download tiles for Mac / Linux / Windows. There is no gradient, no atmospheric backdrop, no illustration system.

Type is the second decisive voice. Hero display sits at 64 px Inter weight 400 with `-1.6px` tracking — restrained for a hero, deliberately quiet. The brand carries DM Mono as its monospace face for code blocks, and Instrument Serif italics occasionally appear for editorial moments. Body text is 16 px Inter at line-height 1.5, very readable.

**Key Characteristics:**

• A single primary "color" — really an off-white `{colors.primary}` (`#f7f5f0`) — that doubles as text on canvas and as the button-primary fill. There is no chromatic brand accent.
• Warm dark canvas (`{colors.canvas}` `#2b2622`) is the only page surface. The brand's defining tone is the brown-warmth, not pure black.
• Extremely tight button radii — 3 / 4 px (1 / 2× the brand's `{rounded.md}` 4 px base) — the brand never uses generous pill shapes for CTAs. Only icon containers use `{rounded.full}`.
• Inter sans + DM Mono mono is the canonical pairing. Instrument Serif appears as a third editorial face for occasional italics.
• Terminal-mockup imagery is the brand's only consistent decorative system — no gradients, no atmospheric overlays.
• A subtle warm tint runs through every neutral; even body text and dividers carry a hint of warmth rather than neutral gray.

Colors

Brand & Accent

• **Off White Primary** (`{colors.primary}` — `#f7f5f0`): The brand's "primary" is a warm off-white. Used as button-primary fill, as default text on canvas, as the wordmark color. There is no chromatic brand accent — the off-white IS the brand's distinguishing tone.

Surface

• **Canvas** (`{colors.canvas}` — `#2b2622`): The warm dark page background. Resolved from `oklch(22.0% 0.004 84.6)`. Slightly browner than pure black, slightly warmer than a neutral gray — the warmth IS the brand's identity.
• **Canvas Soft** (`{colors.canvas-soft}` — `#383330`): A lighter warm-dark fill used for cards, mockup chrome, and partner-logo tiles.
• **Hairline** (`{colors.hairline}` — `#3f3a36`): 1 px solid divider on dark surfaces.

Text

• **Ink** (`{colors.ink}` — `#f7f5f0`): Default text on canvas — same off-white as the primary, intentionally unified.
• **Body Strong** (`{colors.body-strong}` — `#dad2c1`): Mid-emphasis body text.
• **Body** (`{colors.body}` — `#c9c0ad`): Secondary body text — captions, supporting copy, press-coverage rows.
• **Mute** (`{colors.mute}` — `#aea69c`): Lowest-priority text — timestamps, fine print, footer secondary lines. Resolved from `oklch(71.5% 0.008 84.6)`.

Semantic

The brand doesn't surface a separate error / warning / success palette in its marketing pages. Validation cues come from the unified off-white system; in-product semantic colors live in the terminal application proper.

Typography

Font Family

Three faces ladder the system:

1. **Inter** for every display, body, button, link, and label role. Weights 400 / 500 are the working pair. Used with the brand's "Inter Fallback" custom face as the metric-compatible system fallback.

2. **DM Mono** for terminal mockups, command snippets, and code blocks. Weight 400 only. Loaded as `--font-dm-mono`.

3. **Instrument Serif** for occasional editorial italic moments — rare on the marketing surface, but documented as a third face for emphasised tagline-style phrases. **Abel** is also loaded as a fourth fallback for headline emphasis.

Hierarchy

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

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

| `{typography.display-xl}` | 64px | 400 | 70.4px | -1.6px | Hero headline ("Warp is the agentic development environment"). |

| `{typography.display-lg}` | 48px | 400 | 52.8px | -1.2px | Section headlines. |

| `{typography.display-md}` | 32px | 500 | 40px | -0.8px | Sub-section displays. |

| `{typography.display-sm}` | 24px | 500 | 32px | -0.4px | Card titles and lead emphasis. |

| `{typography.display-serif}` | 48px | 400 | 52px | -0.5px | Instrument Serif italic editorial moments. |

| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraphs. |

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

| `{typography.body-md-strong}` | 16px | 500 | 24px | 0 | Bold inline body. |

| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body. |

| `{typography.body-sm-strong}` | 14px | 500 | 20px | 0 | Nav link / button labels. |

| `{typography.caption}` | 12px | 400 | 16px | 0 | Captions, fine print. |

| `{typography.code}` | 13px | 400 | 18px | 0 | Terminal mockup body. |

| `{typography.code-md}` | 14px | 400 | 20px | 0 | Inline command snippets. |

| `{typography.button-md}` | 14px | 500 | 20px | 0 | Button labels. |

Principles

• **Hero display at weight 400** — the brand reads as quietly confident, not as a billboard.
• **Negative tracking is part of the voice.** `-1.6 px` at 64 px hero, scaling down through display levels.
• **Inter for narrative, DM Mono for technical.** Strict role separation.

Note on Font Substitutes

All three faces are open or freely-loadable:

• **Inter** — load directly from Google Fonts or Vercel-hosted CDN.
• **DM Mono** — open-source on Google Fonts.
• **Instrument Serif** — open-source on Google Fonts.

Layout

Spacing System

• **Base unit**: 4 px (with occasional 10 px and 6 px values for button padding).
• **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 10 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px · `{spacing.5xl}` 96 px.
• **Section padding**: hero / content bands use `{spacing.5xl}` 96 px on desktop.
• **Card interior**: cards sit at `{spacing.xl}` 24 px.

Grid & Container

• Marketing content centres at roughly 1200 px width.
• Hero: 2-column at desktop (split between two terminal screenshots), stacks at mobile.
• Partner logos: 5-up wrapping flex row.
• Download tiles: 3-up at desktop (Mac / Linux / Windows), 1-up at mobile.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

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

| Mobile | < 768px | Hero stacks; 1-up grids; nav hamburger. |

| Tablet | 768–1023px | 2-up grids. |

| Desktop | ≥ 1024px | Full hero split; 3-up download tiles. |

#### Touch Targets

Buttons render at ~36 px tall (8 px vertical padding + 20 px line-height). Mobile inflates touch area through additional padding to meet WCAG 44 × 44 px floor.

#### Collapsing Strategy

• Nav: full link row + Sign in / Download right cluster at desktop. Hamburger at mobile.
• Hero terminal-mockup split: stacks vertically at mobile.
• Press / job rows: full-width single column; stay legible at all widths.

#### Image Behavior

• **Terminal mockups**: rendered as dark cards with the actual terminal UI inside (warm canvas + colored syntax). Aspect ratio ~3:2.
• **Partner logos**: monochrome SVGs on dark tile cards.
• **Testimonial portraits**: 1:1 square crop inside `{rounded.md}` card chrome.

Elevation & Depth

| Level | Treatment | Use |

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

| Level 0 — Flat | No shadow, no border. | Default for hero band. |

| Level 1 — Hairline | 1 px solid `{colors.hairline}` border on `{colors.canvas-soft}`. | Default card chrome. |

| Level 2 — Inset Card | Canvas-soft fill against canvas background with 1 px hairline. | Mockup cards, download tiles, testimonial cards. |

The brand uses surface-contrast and hairline borders for elevation; soft drop-shadows do not appear in the marketing surface.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.none}` | 0px | Full-bleed bands. |

| `{rounded.xxs}` | 1px | Tightest in-text indicator. |

| `{rounded.xs}` | 2px | Inline very-small chips. |

| `{rounded.sm}` | 3px | Default button radius — extremely tight. |

| `{rounded.md}` | 4px | Card chrome (the brand's `--radius` base). |

| `{rounded.lg}` | 6px | Slightly larger cards. |

| `{rounded.pill}` | 9999px | Icon containers, status pills. |

Photography Geometry

• Terminal mockups: ~3:2 inside `{rounded.md}` card chrome.
• Partner logos: monochrome SVGs at consistent 24 px height inside tile cards.
• Testimonial portraits: 1:1 square inside `{rounded.md}`.

Components

Buttons

**`button-primary`** — the off-white CTA on dark canvas.

• Background `{colors.primary}` (off-white), text `{colors.on-primary}` (warm dark), label `{typography.button-md}`, padding `{spacing.sm} {spacing.lg}`, shape `{rounded.sm}` 3 px. Tight.

**`button-secondary-ghost`** — the ghost-style secondary used for nav and tertiary actions.

• Background `{colors.canvas}`, text `{colors.ink}`, no border, same typography / shape.

**`button-icon-circular`** — the circular icon container.

• Background `{colors.canvas}`, ink icon, shape `{rounded.full}`. Used for nav controls (search, theme).

Cards & Containers

**`card-content`** — the default content card on canvas-soft.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, padding `{spacing.xl}`, shape `{rounded.md}`.

**`card-mockup`** — the terminal-screenshot mockup card.

• Same chrome as `card-content` but body in `{typography.code}` (DM Mono) when text appears inside.

**`download-tile`** — the Mac / Linux / Windows download tile.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, hairline border, padding `{spacing.xl}`, shape `{rounded.md}`. Hosts a platform icon + label + download CTA.

**`partner-logo-tile`** — the canvas-soft tile hosting a partner logo.

• Background `{colors.canvas-soft}`, monochrome logo SVG inside, padding `{spacing.lg}`, shape `{rounded.md}`.

**`testimonial-card`** — the single quote-style card with a portrait.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.md}`. Portrait 1:1 + body in `{typography.body-md}`.

**`press-row`** — the press-coverage list item.

• Background `{colors.canvas}` (no fill — sits on the canvas band), 1 px solid bottom border `{colors.hairline}`, body in `{typography.body-md}`, padding `{spacing.lg}` 0.

**`job-row`** — the "Join our team" list item (single row per open role).

• Background `{colors.canvas}`, 1 px solid bottom border, body in `{typography.body-md-strong}`, padding `{spacing.lg}` 0.

Inputs & Forms

**`text-input`** — the dark-canvas text input.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, body in `{typography.body-sm}`, padding `{spacing.sm} {spacing.md}`, shape `{rounded.sm}`.

Navigation

**`nav-bar`** — the sticky top nav.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.xl}`.

**`nav-link`** — link items in nav.

• Background `{colors.canvas}`, text `{colors.ink}`, body in `{typography.body-sm-strong}`, padding `{spacing.xs} {spacing.md}`, shape `{rounded.sm}`.

**`footer`** — the footer band.

• Background `{colors.canvas}`, text `{colors.body}`, padding `{spacing.3xl} {spacing.xl}`. Body in `{typography.body-sm}`.

Signature Components

**`hero-band`** — the dark hero band hosting the 64-px Inter headline.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.xl}`. Headline `{typography.display-xl}` (64 px / 400 / `-1.6 px`). Below: a 2-column terminal-mockup split.

**`content-band`** — the standard content band.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.5xl} {spacing.xl}`. Section headline `{typography.display-md}`.

Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

Do's and Don'ts

Do

• Reserve `{colors.primary}` off-white for primary CTA pills and default text. There is no chromatic accent.
• Use tight `{rounded.sm}` 3 px or `{rounded.md}` 4 px button radii. The brand never uses generous pills for CTAs.
• Set hero headlines in Inter weight 400 with `-1.6 px` tracking. The brand reads as quietly confident.
• Pair Inter (sentence-case) with DM Mono (code blocks, terminal mockups).
• Keep the warm-dark canvas tone — pure black breaks the brand's identity.

Don't

• Don't introduce a chromatic brand accent. The off-white-on-warm-dark IS the brand's voice.
• Don't render the hero headline in heavy weight (700+). The brand's display is intentionally light.
• Don't use generous pill CTAs. The brand's button radius is 3-4 px, almost rectangular.
• Don't replace the warm dark canvas with neutral gray or pure black. The warmth IS the brand.
• Don't drop a soft drop-shadow on cards. Hairlines + surface contrast carry elevation.

개요

Warp는 "에이전트 개발 환경"(AI 에이전트를 래핑하는 터미널 애플리케이션)이며 해당 마케팅 사이트는 제품의 상태를 반영합니다. 전체 페이지를 실행하는 단일 어두운 밴드는 순수한 검정색보다 따뜻하며(`{colors.canvas}` `#2b2622`는 브랜드의 oklch 정의 따뜻함 값에서 갈색-베이지색의 힌트를 전달합니다.) 복사본 세트는 거의 Inter에 있습니다. 페이지는 마케팅 영역이라기보다는 개발자의 읽기 모드 편집기에 더 가깝습니다.

장식이 제한되어 있습니다. 두 개의 터미널 스크린샷이 Hero를 엽니다(두 가지 주요 제품 모드(에이전트 + 터미널) 사이에 분할됨). 파트너 로고 스트립(Anthropic / OpenAI / Google / Stanford)은 영웅 아래 약간 따뜻한 타일 표면에 위치합니다. 인물 사진이 포함된 평가 카드 1장입니다. 언론보도 목록입니다. 그런 다음 Mac/Linux/Windows용 다운로드 타일과 함께 페이지가 닫힙니다. 그라데이션도 없고, 분위기 있는 배경도 없고, 일러스트레이션 시스템도 없습니다.

유형은 두 번째 결정적인 목소리입니다. 영웅 디스플레이는 `-1.6px` 추적을 사용하여 64px 간 가중치 400에 위치합니다. 영웅을 위해 제한되고 의도적으로 조용합니다. 이 브랜드는 코드 블록의 고정폭 문자로 DM Mono를 사용하며, 편집 순간에 Instrument Serif 이탤릭체가 가끔 표시됩니다. 본문 텍스트는 줄 높이 1.5에서 16px Inter로 매우 읽기 쉽습니다.

**주요 특징:**

• 단일 기본 "색상"(실제로는 회백색 `{colors.primary}`(`#f7f5f0`))으로 캔버스의 텍스트 역할과 버튼 기본 채우기 역할을 합니다. 색채적인 브랜드 액센트가 없습니다.
• 따뜻하고 어두운 캔버스(`{colors.canvas}` `#2b2622`)가 유일한 페이지 표면입니다. 브랜드를 정의하는 톤은 순수한 검정색이 아닌 갈색의 따뜻함입니다.
• 매우 좁은 버튼 반경 - 3/4픽셀(1/2× 브랜드의 `{rounded.md}` 4픽셀 기준) - 브랜드는 CTA에 넉넉한 알약 모양을 사용하지 않습니다. 아이콘 컨테이너만 `{rounded.full}`을 사용합니다.
• Inter sans + DM Mono mono가 정식 페어링입니다. 악기 세리프(Instrument Serif)는 가끔 이탤릭체로 사용되는 세 번째 편집면으로 나타납니다.
• 터미널 모형 이미지는 브랜드의 유일한 일관된 장식 시스템으로 그라데이션이나 대기 오버레이가 없습니다.
• 은은하고 따뜻한 색조가 모든 뉴트럴 컬러를 관통합니다. 본문 텍스트와 구분선도 중성 회색보다는 따뜻함을 나타냅니다.

색상

브랜드 및 액센트

• **황색 기본** (`{colors.primary}` — `#f7f5f0`): 브랜드의 "기본"은 따뜻한 황백색입니다. 버튼 기본 채우기, 캔버스의 기본 텍스트, 워드마크 색상으로 사용됩니다. 브랜드의 색채를 강조하는 요소는 없습니다. 황백색은 브랜드를 구별하는 톤입니다.

표면

• **캔버스** (`{colors.canvas}` — `#2b2622`): 따뜻하고 어두운 페이지 배경입니다. `oklch(22.0% 0.004 84.6)`에서 해결되었습니다. 퓨어 블랙보다 살짝 브라운, 뉴트럴 그레이보다 살짝 따뜻한 느낌이 바로 브랜드의 아이덴티티입니다.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#383330`): 카드, 모형 크롬 및 파트너 로고 타일에 사용되는 더 밝은 따뜻한 어두운 채우기입니다.
• **헤어라인** (`{colors.hairline}` — `#3f3a36`): 어두운 표면의 1px 솔리드 구분선입니다.

텍스트

• **잉크**(`{colors.ink}` — `#f7f5f0`): 캔버스의 기본 텍스트 — 기본 텍스트와 동일한 황백색이며 의도적으로 통합되었습니다.
• **Body Strong** (`{colors.body-strong}` — `#dad2c1`): 중간 강조 본문 텍스트입니다.
• **본문**(`{colors.body}` — `#c9c0ad`): 보조 본문 텍스트 — 캡션, 지원 문구, 언론 보도 행.
• **음소거**(`{colors.mute}` — `#aea69c`): 가장 낮은 우선순위 텍스트 — 타임스탬프, 작은 글씨, 바닥글 보조 줄. `oklch(71.5% 0.008 84.6)`에서 해결되었습니다.

의미론

브랜드는 마케팅 페이지에 별도의 오류/경고/성공 팔레트를 표시하지 않습니다. 검증 단서는 통합된 황백색 시스템에서 나옵니다. 제품 내 의미 색상은 적절한 터미널 애플리케이션에 적용됩니다.

타이포그래피

글꼴 계열

3면이 시스템에 사다리를 형성합니다.

1. 모든 디스플레이, 본문, 버튼, 링크 및 라벨 역할에 대한 **상호**. 가중치 400/500이 작동하는 쌍입니다. 미터법 호환 시스템 폴백으로 브랜드의 "Inter Fallback" 사용자 정의 페이스와 함께 사용됩니다.

2. 터미널 모형, 명령 조각 및 코드 블록을 위한 **DM 모노**. 무게는 400만. `--font-dm-mono`로 로드됩니다.

3. 가끔씩 편집되는 이탤릭체 순간을 위한 **악기 세리프** — 마케팅 표면에서는 드물지만 강조된 태그라인 스타일 문구를 위한 제3의 얼굴로 문서화되었습니다. **Abel**은 헤드라인 강조를 위한 네 번째 대체 요소로도 로드됩니다.

계층 구조

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

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

| `{typography.display-xl}` | 64px | 400 | 70.4px | -1.6px | 영웅 헤드라인("Warp는 에이전트 개발 환경입니다"). |

| `{typography.display-lg}` | 48px | 400 | 52.8px | -1.2px | 섹션 헤드라인. |

| `{typography.display-md}` | 32px | 500 | 40px | -0.8px | 하위 섹션이 표시됩니다. |

| `{typography.display-sm}` | 24px | 500 | 32px | -0.4px | 카드 제목과 리드 강조. |

| `{typography.display-serif}` | 48px | 400 | 52px | -0.5px | Instrument Serif 기울임꼴 편집 순간. |

| `{typography.body-lg}` | 18px | 400 | 28px | 0

概要

Warp は「エージェント開発環境」 (AI エージェントをラップするターミナル アプリケーション) であり、そのマーケティング サイトは製品の姿勢を反映しています。ページ全体を走る単一の暗い帯で、純粋な黒よりも温かみがあり (`{colors.canvas}` `#2b2622` には、ブランドの oklch で定義された暖かさの値からブラウン ベージュのヒントが含まれています)、コピー セットはほぼすべて Inter で設定されています。このページは、マーケティング画面というよりも、開発者の読み取りモードのエディターに似ています。

装飾は控えめです。 2 つの端末のスクリーンショットでヒーローが開きます (エージェントと端末の 2 つの主要な製品モードに分かれています)。パートナーのロゴ ストリップ (Anthropic / OpenAI / Google / Stanford) が、ヒーローの下の少し暖かいタイル表面に配置されています。ポートレート写真が入った1枚の証カード。報道関係者リスト。次にページが閉じて、Mac / Linux / Windows 用のダウンロード タイルが表示されます。グラデーションや雰囲気のある背景、イラスト システムはありません。

タイプは2番目の決定的な音声です。ヒーローのディスプレイは、「-1.6px」トラッキングを備えた 64 ピクセルのインター ウェイト 400 に設定されています。ヒーローとしては抑制されており、意図的に静かになっています。このブランドは、コード ブロックの等幅文字として DM Mono を採用しており、編集上の瞬間にインストゥルメント セリフのイタリック体が時折表示されます。本文テキストは行高 1.5、16 ピクセルインターで、非常に読みやすいです。

**主な特徴:**

• 単一のプライマリ「カラー」 — 実際にはオフホワイトの `{colors.primary}` (`#f7f5f0`) — キャンバス上のテキストとボタンのプライマリ塗りつぶしとして機能します。色鮮やかなブランドアクセントはありません。
• 温かみのあるダークキャンバス (`{colors.canvas}` `#2b2622`) が唯一のページ表面です。ブランドの特徴的なトーンは、純粋な黒ではなく、温かみのあるブラウンです。
• 非常に狭いボタン半径 — 3 / 4 ピクセル (ブランドの `{rounded.md}` 4 ピクセル ベースの 1 / 2 倍) — ブランドは CTA に寛大な錠剤の形状を使用しません。アイコンコンテナのみ `{rounded.full}` を使用します。
• Inter sans + DM Mono mono は標準的な組み合わせです。楽器セリフは、時折斜体で表示される 3 番目の編集面として表示されます。
• 端末モックアップ画像はブランドの唯一の一貫した装飾システムであり、グラデーションや雰囲気のあるオーバーレイはありません。
• 微妙な温かみのある色合いがすべてのニュートラルに浸透します。本文や仕切りにも、ニュートラルなグレーではなく、温かみが感じられます。

色

ブランドとアクセント

• **オフホワイト プライマリー** (`{colors.primary}` — `#f7f5f0`): ブランドの「プライマリー」は温かみのあるオフホワイトです。ボタンの主な塗りつぶし、キャンバス上のデフォルトのテキスト、ワードマークの色として使用されます。有彩色のブランドアクセントはありません。オフホワイトがブランドの特徴的なトーンです。

表面

• **キャンバス** (`{colors.canvas}` — `#2b2622`): 温かみのある暗いページの背景。 「oklch(22.0% 0.004 84.6)」から解決されました。純粋な黒よりわずかに茶色、ニュートラルグレーよりわずかに暖かい、その暖かさがブランドのアイデンティティです。
• **キャンバス ソフト** (`{colors.canvas-soft}` — `#383330`): カード、モックアップ クロム、およびパートナー ロゴ タイルに使用される、明るい暖色系の暗い塗りつぶし。
• **ヘアライン** (`{colors.hairline}` — `#3f3a36`): 暗い表面上の 1 ピクセルのソリッド ディバイダ。

テキスト

• **インク** (`{colors.ink}` — `#f7f5f0`): キャンバス上のデフォルトのテキスト — プライマリと同じオフホワイトで、意図的に統一されています。
• **Body Strong** (`{colors.body-strong}` — `#dad2c1`): 中程度に強調された本文テキスト。
• **本文** (`{colors.body}` — `#c9c0ad`): 二次本文テキスト — キャプション、サポートコピー、報道範囲の行。
• **ミュート** (`{colors.mute}` — `#aea69c`): 優先度の最も低いテキスト — タイムスタンプ、細字、フッターの二次行。 「oklch(71.5% 0.008 84.6)」から解決されました。

セマンティック

このブランドは、マーケティング ページに個別のエラー/警告/成功パレットを表示しません。検証の合図は、統一されたオフホワイト システムから得られます。製品内のセマンティック カラーは、端末アプリケーション自体に存在します。

タイポグラフィー

フォントファミリー

3 つの面がシステムを構成します。

1. すべてのディスプレイ、本文、ボタン、リンク、ラベルの役割の **Inter**。ウェイト 400 / 500 が動作ペアです。メトリック互換システム フォールバックとして、ブランドの「Inter Fallback」カスタム フェイスとともに使用されます。

2. **DM Mono** 端末モックアップ、コマンド スニペット、コード ブロック用。重量400のみ。 `--font-dm-mono` としてロードされます。

3. **インストゥルメント セリフ** は、時折編集上のイタリックな瞬間に使用されます。マーケティングの表面ではまれですが、強調されたキャッチフレーズ スタイルのフレーズの 3 番目の顔として文書化されています。 **Abel** も、見出しを強調するための 4 番目のフォールバックとしてロードされます。

階層

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

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

| `{typography.display-xl}` | 64ピクセル | 400 | 70.4ピクセル | -1.6ピクセル |ヒーローの見出し (「Warp はエージェント開発環境」)。 |

| `{typography.display-lg}` | 48ピクセル | 400 | 52.8ピクセル | -1.2ピクセル |セクションの見出し。 |

| `{typography.display-md}` | 32ピクセル | 500 | 40ピクセル | -0.8ピクセル |サブセクションが表示されます。 |

| `{typography.display-sm}` | 24ピクセル | 500 | 32ピクセル | -0.4ピクセル |カードのタイトルとリードの強調。 |

| `{typography.display-serif}` | 48ピクセル | 400 | 52ピクセル | -0.5ピクセル |インストゥルメントセリフイタリック編集の瞬間。 |

| `{typography.body-lg}` | 18ピクセル | 400 | 28ピクセル | 0