Linear

Overview

Linear's marketing canvas is the deepest dark surface in this collection — `{colors.canvas}` is #010102, essentially pure black with a faint blue tint. On top sits a four-step surface ladder (`{colors.surface-1}` through `{colors.surface-4}`) for cards, panels, and lifted tiles, with hairline borders running from `{colors.hairline}` (#23252a) up through `{colors.hairline-strong}` and `{colors.hairline-tertiary}`. Light gray text (`{colors.ink}` #f7f8f8) carries the body and headlines.

The single chromatic accent is **Linear lavender-blue** `{colors.primary}` (#5e6ad2) — used on the brand mark, focus rings, and the primary CTA button. A lighter hover state (`{colors.primary-hover}` #828fff) and a focus-tinted variant (`{colors.primary-focus}` #5e69d1) extend the same hue. Linear avoids saturated greens, oranges, reds, etc. on the marketing canvas — the only semantic color is `{colors.semantic-success}` (#27a644) for status pills and the rare success indicator.

Display type runs Linear's custom sans (with `SF Pro Display` fallback) at weight 500–700 with negative letter-spacing scaling from -3.0px at 80px down to 0 at body. The body family is Linear's text cut, and a Linear Mono is reserved for code snippets in product screenshots.

The page rhythm is **dense product screenshots** — Linear's marketing leads with high-fidelity captures of the product UI (issue list, project view, dashboard) framed in `{colors.surface-1}` panels with `{rounded.xl}` 16px corners. The chrome is intentionally minimal so the app screenshots can do the heavy lifting.

**Key Characteristics:**

• **Dark-canvas marketing system** — `{colors.canvas}` (#010102) is the deepest dark in this collection.
• **Lavender-blue brand accent** (`{colors.primary}` #5e6ad2) — used scarcely on brand mark, focus, and the primary CTA.
• Four-step surface ladder (canvas → surface-1 → surface-2 → surface-3 → surface-4) carries hierarchy without shadow.
• Display tracking pulls aggressively negative (-3.0px at 80px); body holds at -0.05px.
• Cards use `{rounded.lg}` 12px corners with 1px hairline borders — never pill, rarely 16px.
• **Product UI screenshots** dominate the page. The marketing chrome is a dark frame for the app.
• No second chromatic color. No atmospheric gradients. No spotlight cards.

Colors

> Source pages: linear.app (home), /intake, /pricing, /contact/sales, /build.

Brand & Accent

• **Lavender-Blue** ({colors.primary}): The signature Linear accent — primary CTA, brand mark, link emphasis.
• **Lavender Hover** ({colors.primary-hover}): Lighter lavender (#828fff) — hovered state of the primary CTA.
• **Lavender Focus** ({colors.primary-focus}): Focus-ring tint (#5e69d1) — focused inputs, focused buttons.
• **Brand Secure** ({colors.brand-secure}): Muted lavender-gray (#7a7fad) — used in "Linear Security" surfaces.

Surface

• **Canvas** ({colors.canvas}): Default page background — #010102, near-pure black with a faint blue tint.
• **Surface 1** ({colors.surface-1}): One step above canvas — feature cards, pricing cards, product screenshot panels.
• **Surface 2** ({colors.surface-2}): Two steps above — featured pricing card, hovered cards.
• **Surface 3** ({colors.surface-3}): Three steps above — line-tertiary backgrounds, sub-nav.
• **Surface 4** ({colors.surface-4}): Four steps above — bg-level-3, deepest lifted surface.
• **Hairline** ({colors.hairline}): 1px borders on cards and dividers.
• **Hairline Strong** ({colors.hairline-strong}): Stronger 1px borders — input focus rings.
• **Hairline Tertiary** ({colors.hairline-tertiary}): Tertiary borders for nested surfaces.
• **Inverse Canvas** ({colors.inverse-canvas}): Pure white — surface of the inverse pill CTA on a small set of section openers.
• **Inverse Surface 1** ({colors.inverse-surface-1}): One step above inverse canvas.
• **Inverse Surface 2** ({colors.inverse-surface-2}): Two steps above inverse canvas.

Text

• **Ink** ({colors.ink}): All headlines and emphasized body type — light gray #f7f8f8.
• **Ink Muted** ({colors.ink-muted}): Secondary type at #d0d6e0 — meta info on hero panels.
• **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #8a8f98 — deselected pricing tabs, footer columns.
• **Ink Tertiary** ({colors.ink-tertiary}): Quaternary at #62666d — disabled, footnotes.

Semantic

• **Success Green** ({colors.semantic-success}): Status pills, success indicators. The only semantic color on marketing.
• **Overlay** ({colors.semantic-overlay}): Pure black overlay scrim for modals.

Typography

Font Family

• **Linear Display** — Linear's custom display sans; fallback `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto`. Carries display-xl through subhead.
• **Linear Text** — Linear's custom text sans (a slightly different cut tuned for body sizes); same fallback stack. Carries body sizes, button labels, captions.
• **Linear Mono** — Linear's custom mono; fallback `ui-monospace, SF Mono, Menlo`. Used for code snippets in product screenshots and for status / ID tokens.

The marketing surface treats Display and Text as one continuous voice; the family change is silent.

Hierarchy

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

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

| `{typography.display-xl}` | 80px | 600 | 1.05 | -3.0px | Largest hero headline |

| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.8px | Section opener headlines |

| `{typography.display-md}` | 40px | 600 | 1.15 | -1.0px | Sub-section headlines |

| `{typography.headline}` | 28px | 600 | 1.20 | -0.6px | Pricing tier titles, CTA banner heading |

| `{typography.card-title}` | 22px | 500 | 1.25 | -0.4px | Feature card title |

| `{typography.subhead}` | 20px | 400 | 1.40 | -0.2px | Lead body, intro paragraphs |

| `{typography.body-lg}` | 18px | 400 | 1.50 | -0.1px | Hero subhead, lead paragraphs |

| `{typography.body}` | 16px | 400 | 1.50 | -0.05px | Default body |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Card body, footer columns |

| `{typography.caption}` | 12px | 400 | 1.40 | 0 | Captions, meta, status |

| `{typography.button}` | 14px | 500 | 1.20 | 0 | All button labels |

| `{typography.eyebrow}` | 13px | 500 | 1.30 | 0.4px | Section eyebrow (slight positive tracking) |

| `{typography.mono}` | 13px | 400 | 1.50 | 0 | Linear Mono for code in product screenshots |

Principles

• **Aggressive negative tracking on display** (-3.0px at 80px ≈ 4% of size).
• **Single voice from display to body.** Display-xl at 600 → body at 400 — same family, narrower weights.
• **Eyebrow uses positive tracking** (+0.4px) — contrast against the negative-tracked display marks the eyebrow as taxonomy.
• **Mono only in code contexts.** Linear Mono lives inside product screenshots — not on marketing chrome.

Note on Font Substitutes

Linear's custom typeface isn't publicly distributed; the documented fallback `SF Pro Display, -apple-system, system-ui` is the recommended substitute on macOS. For cross-platform implementation, **Inter** at weight 500 / 600 / 700 is the closest free substitute. **Geist Sans** is also viable. For mono, **JetBrains Mono** or **Geist Mono** at weight 400 closely approximates Linear Mono.

Layout

Spacing System

• **Base unit**: 4px.
• **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• Card interior padding: `{spacing.lg}` 24px on feature/pricing cards; `{spacing.xl}` 32px on testimonial cards; `{spacing.xxl}` 48px on CTA banners.
• Pill button padding: 8px vertical · 14px horizontal — Linear's compact button spec.
• Form input padding: 8px vertical · 12px horizontal.

Grid & Container

• Max content width sits around 1280px.
• Card grids are 3-up at desktop, 2-up at tablet, 1-up at mobile.
• Pricing tier grid is 3-up; comparison strip below shows checkmarks per tier.
• Product screenshot panels span full content width — they're the protagonist.

Whitespace Philosophy

The dark canvas IS the whitespace. Sections separate by lift onto surface-1 panels, not by gaps in white. Within a panel, generous `{spacing.lg}` 24px gaps between content blocks; `{spacing.section}` 96px between sections.

Elevation & Depth

| Level | Treatment | Use |

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

| 0 (flat) | No shadow, no border | Default for body type, hero text, footer |

| 1 (charcoal lift) | `{colors.surface-1}` background on canvas, 1px `{colors.hairline}` | Default cards, product panels |

| 2 (surface-2 lift) | `{colors.surface-2}` background, 1px `{colors.hairline-strong}` | Featured pricing card, hovered cards |

| 3 (surface-3 lift) | `{colors.surface-3}` background | Sub-nav, dropdown menus |

| 4 (focus ring) | 2px `{colors.primary-focus}` outline at 50% opacity | Focused input, focused button |

Linear's depth is carried by surface ladder + hairline borders. The brand resists drop shadows on dark almost entirely.

Decorative Depth

• **Product UI screenshots** dominate as decorative depth.
• **No atmospheric gradients, no spotlight cards.**
• **Subtle white edge highlight** on the top edge of lifted panels — gives the dark surface a faint "pixel rendered" feel.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.xs}` | 4px | Small chips, status badges |

| `{rounded.sm}` | 6px | Inline tags |

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

| `{rounded.lg}` | 12px | Pricing cards, feature cards, testimonial cards |

| `{rounded.xl}` | 16px | Product screenshot panels |

| `{rounded.xxl}` | 24px | Oversized CTA banners (rare) |

| `{rounded.pill}` | 9999px | Pricing tab toggles, status pills |

| `{rounded.full}` | 9999px | Avatar circles |

Photography & Illustration Geometry

• Product UI screenshots dominate; they sit in `{rounded.xl}` 16px tiles with `{spacing.lg}` 24px outer padding.
• Customer logo tiles render at small sizes (~24px logo height) on `{colors.canvas}` with no border.
• Avatar circles in testimonial cards use `{rounded.full}` at 32–40px sizes.

Components

Buttons

**`button-primary`** — Lavender CTA. The default primary CTA across all pages.

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 8px 14px, rounded `{rounded.md}`.
• Pressed state lives in `button-primary-pressed` (background shifts to `{colors.primary-focus}`).
• Hover state lives in `button-primary-hover` (background shifts to `{colors.primary-hover}` lighter lavender).

**`button-secondary`** — Charcoal button. Used for secondary CTAs ("Sign in", "Read changelog").

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.button}`, padding 8px 14px, rounded `{rounded.md}`. 1px `{colors.hairline}` border.

**`button-tertiary`** — Plain text button.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 8px 14px.

**`button-inverse`** — White-on-dark inverse CTA.

• Background `{colors.inverse-canvas}`, text `{colors.inverse-ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 8px 14px.

Pricing Tabs

**`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`.

• Default: `{colors.canvas}` background, `{colors.ink-subtle}` text, rounded `{rounded.pill}`, padding 6px 14px.
• Selected: `{colors.surface-2}` background, `{colors.ink}` text — selected = surface lift.

Cards & Containers

**`pricing-card`** — Each tier on `/pricing`.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px. 1px `{colors.hairline}` border.

**`pricing-card-featured`** — Recommended tier — surface lift to surface-2.

• Background `{colors.surface-2}`, otherwise identical structure.

**`feature-card`** — Generic feature highlight tile.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.

**`product-screenshot-card`** — The dominant card type — frames a high-fidelity Linear app UI screenshot.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.

**`testimonial-card`** — Customer quote with avatar + name + role.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-lg}`, rounded `{rounded.lg}`, padding 32px.

**`customer-logo-tile`** — Small tile in the customer marquee.

• Background `{colors.canvas}`, text `{colors.ink-subtle}`, type `{typography.caption}`, rounded `{rounded.xs}`, padding 16px.

**`cta-banner`** — Closing CTA panel near page bottom.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.headline}`, rounded `{rounded.lg}`, padding 48px.

Inputs & Forms

**`text-input`** + **`text-input-focused`** — Form fields on `/contact/sales` and signup overlays.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 8px 12px.
• Focused state retains the same surface; the focus ring is a 2px `{colors.primary-focus}` outline at 50% opacity.

Status & Build Page

**`changelog-row`** — Each row in `/build` (changelog page) listing version, date, and changes.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xs}`, padding 24px 0. 1px `{colors.hairline}` bottom rule.

**`status-badge`** — Small status pill.

• Background `{colors.surface-2}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.pill}`, padding 2px 8px.

Navigation

**`top-nav`** — Sticky dark bar with the Linear wordmark left, primary nav links centered, and a `button-secondary` ("Sign in") + `button-primary` ("Get started") pair right.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.

Footer

**`footer`** — Dense link grid on `{colors.canvas}` with the Linear wordmark left.

• Background `{colors.canvas}`, text `{colors.ink-subtle}`, type `{typography.caption}`, padding 64px 32px.

Do's and Don'ts

Do

• Reserve `{colors.canvas}` (#010102) as the system's anchor surface — the faint blue tint is intentional.
• Use `{colors.primary}` lavender ONLY for: brand mark, primary CTA, focus ring, link emphasis.
• Use the four-step surface ladder for hierarchy. Avoid skipping levels.
• Pair display weight 600 with body weight 400 — Linear resists 700+ display weights.
• Apply negative letter-spacing aggressively on display.
• Use product UI screenshots as the protagonist of every section.
• Compose CTAs as `{rounded.md}` 8px corners.

Don't

• Don't ship a light-mode marketing page.
• Don't use lavender as a section background or card fill.
• Don't introduce a second chromatic accent (orange, pink, green for marketing).
• Don't add atmospheric gradients or spotlight cards.
• Don't pill-round CTAs.
• Don't use `#000000` true black as the canvas.
• Don't combine multiple bright accents in product screenshot mockups.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Desktop-XL | 1440px | Default desktop layout |

| Desktop | 1280px | Card grid 3-up maintained |

| Tablet | 1024px | Card grid 3-up → 2-up |

| Mobile-Lg | 768px | Pricing comparison becomes accordion; nav hamburger |

| Mobile | 480px | Single-column; display-xl scales 80px → ~36px |

Touch Targets

• CTAs hold ≥40px tap height across viewports.
• Pricing tab pills hold ≥36px tap height; touch viewports grow to ≥44px.
• Form inputs hold ≥44px tap target on touch.

Collapsing Strategy

• **Top nav**: links collapse to hamburger below 768px.
• **Card grids**: 3-up → 2-up at 1024px → 1-up below 768px.
• **Pricing comparison**: per-tier accordion below 768px.
• **Display type**: `{typography.display-xl}` 80px scales toward `{typography.display-md}` 40px on mobile.

Image Behavior

• Product UI screenshots maintain aspect ratio and never crop.
• Customer logos in the marquee may collapse from 6-up to 3-up below 768px.

Iteration Guide

1. Focus on ONE component at a time and reference it by its `components:` token name.

2. When introducing a section, decide first which surface lift it lives on.

3. Default body to `{typography.body}` at weight 400.

4. Run `npx @google/design.md lint DESIGN.md` after edits.

5. Add new variants as separate component entries.

6. Treat lavender as scarce: brand mark, primary CTA, focus, link emphasis.

7. Lead every section with a product UI screenshot.

Known Gaps

• The four-step surface ladder values are extracted directly from Linear's `--color-bg-level-3`, `--color-line-tint`, etc. CSS variables; they are Linear's canonical surface spec.
• Form-field error and validation styling is not visible on the inspected pages.
• Light mode is not documented because the marketing site does not ship a light theme.
• Linear's actual product UI uses a richer color-tag palette (red, orange, yellow, green, blue, purple) for issue priorities and project labels — those colors live in the in-product surfaces shown in mockups.
• The custom display, text, and mono families are proprietary; an open-source substitute is acceptable.

개요

Linear의 마케팅 캔버스는 이 컬렉션에서 가장 깊고 어두운 표면입니다. `{colors.canvas}`는 #010102이며 본질적으로 희미한 푸른 색조가 있는 순수한 검정색입니다. 맨 위에는 카드, 패널 및 리프팅 타일을 위한 4단계 표면 사다리(`{colors.surface-1}` - `{colors.surface-4}`)가 있으며, `{colors.hairline}`(#23252a)에서 `{colors.hairline-strong}` 및 `{colors.hairline-tertiary}`까지 가는 가는 선 테두리가 있습니다. 밝은 회색 텍스트(`{colors.ink}` #f7f8f8)는 본문과 헤드라인을 포함합니다.

단일 색채 악센트는 **선형 라벤더 블루** `{colors.primary}`(#5e6ad2)입니다. 이는 브랜드 마크, 포커스 링 및 기본 CTA 버튼에 사용됩니다. 더 밝은 호버 상태(`{colors.primary-hover}` #828fff)와 초점이 적용된 변형(`{colors.primary-focus}` #5e69d1)은 동일한 색상을 확장합니다. 선형은 마케팅 캔버스에서 포화된 녹색, 주황색, 빨간색 등을 피합니다. 상태 알약과 드문 성공 표시기에 대한 유일한 의미 색상은 `{colors.semantic-success}`(#27a644)입니다.

디스플레이 유형은 가중치 500-700에서 Linear의 사용자 정의 산세(`SF Pro Display` 대체 사용)를 실행하며 음수 문자 간격 조정은 80px에서 -3.0px에서 본문에서 0까지입니다. 바디 패밀리는 Linear의 텍스트 컷이며 Linear Mono는 제품 스크린샷의 코드 조각용으로 예약되어 있습니다.

페이지 리듬은 **밀집된 제품 스크린샷**입니다. Linear의 마케팅은 `{rounded.xl}` 16픽셀 모서리가 있는 `{colors.surface-1}` 패널에 프레임이 있는 제품 UI(문제 목록, 프로젝트 보기, 대시보드)의 고품질 캡처를 통해 마케팅을 주도합니다. 크롬은 의도적으로 최소화되어 앱 스크린샷이 무거운 작업을 수행할 수 있습니다.

**주요 특징:**

• **다크 캔버스 마케팅 시스템** — `{colors.canvas}`(#010102)는 이 컬렉션에서 가장 어두운 색상입니다.
• **라벤더 블루 브랜드 강조** (`{colors.primary}` #5e6ad2) — 브랜드 마크, 초점 및 기본 CTA에는 거의 사용되지 않습니다.
• 4단계 표면사다리(캔버스 → 표면-1 → 표면-2 → 표면-3 → 표면-4)는 그림자 없이 계층을 이룹니다.
• 디스플레이 추적이 적극적으로 음수를 가져옵니다(80px에서 -3.0px). 본문은 -0.05px를 유지합니다.
• 카드는 1px 가는선 테두리가 있는 `{rounded.lg}` 12px 모서리를 사용합니다. 절대 알록달록하지 않으며 16px인 경우는 거의 없습니다.
• **제품 UI 스크린샷**이 페이지의 대부분을 차지합니다. 마케팅 크롬은 앱의 어두운 프레임입니다.
• 두 번째 유채색이 없습니다. 대기 그라데이션이 없습니다. 스포트라이트 카드가 없습니다.

색상

> 소스 페이지: 선형.app(홈), /intake, /pricing, /contact/sales, /build.

브랜드 및 액센트

• **라벤더 블루** ({colors.primary}): 시그니처 선형 악센트 — 기본 CTA, 브랜드 마크, 링크 강조.
• **라벤더 호버**({colors.primary-hover}): 더 밝은 라벤더(#828fff) — 기본 CTA의 호버링 상태입니다.
• **라벤더 포커스** ({colors.primary-focus}): 포커스 링 색조(#5e69d1) — 포커스된 입력, 포커스된 버튼.
• **브랜드 보안**({colors.brand-secure}): 차분한 연보라색(#7a7fad) — "선형 보안" 표면에 사용됩니다.

표면

• **캔버스** ({colors.canvas}): 기본 페이지 배경 — #010102, 희미한 푸른 색조가 있는 거의 순수한 검정색입니다.
• **표면 1**({colors.surface-1}): 캔버스보다 한 단계 위 — 기능 카드, 가격 카드, 제품 스크린샷 패널.
• **Surface 2** ({colors.surface-2}): 위의 두 단계 — 추천 가격 카드, 마우스 오버 카드.
• **표면 3** ({colors.surface-3}): 위의 3단계 — 라인-3차 배경, 하위 탐색.
• **표면 4** ({colors.surface-4}): 4단계 위 — bg-level-3, 가장 깊게 들어 올려진 표면.
• **헤어라인**({colors.hairline}): 카드 및 구분선의 1px 테두리입니다.
• **Hairline Strong** ({colors.hairline-strong}): 1px 테두리가 더 강해졌습니다. — 입력 포커스 링입니다.
• **Hairline Tertiary** ({colors.hairline-tertiary}): 중첩된 표면의 3차 경계입니다.
• **역 캔버스** ({colors.inverse-canvas}): 순백색 — 작은 섹션 오프너 세트에 있는 역 알약 CTA의 표면입니다.
• **역 표면 1** ({colors.inverse-surface-1}): 역 캔버스보다 한 단계 위입니다.
• **역 표면 2** ({colors.inverse-surface-2}): 역 캔버스보다 두 단계 위입니다.

텍스트

• **잉크** ({colors.ink}): 모든 헤드라인 및 강조된 본문 유형 — 밝은 회색 #f7f8f8.
• **잉크 음소거** ({colors.ink-muted}): #d0d6e0의 보조 유형 — 히어로 패널의 메타 정보.
• **Ink Subtle** ({colors.ink-subtle}): #8a8f98의 3차 유형 — 선택 해제된 가격 탭, 바닥글 열.
• **잉크 3차**({colors.ink-tertiary}): #62666d의 4차 — 비활성화됨, 각주.

의미론

• **성공 녹색** ({colors.semantic-success}): 상태 알약, 성공 표시기. 마케팅의 유일한 의미 색상입니다.
• **오버레이** ({colors.semantic-overlay}): 모달용 순수 검정색 오버레이 스크림입니다.

타이포그래피

글꼴 계열

• **선형 디스플레이** — Linear의 사용자 정의 디스플레이가 없습니다. 대체 `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto`. 부제목을 통해 디스플레이-xl을 전달합니다.
• **선형 텍스트** — 선형의 사용자 정의 텍스트가 없습니다(신체 크기에 맞게 조정된 약간 다른 컷). 동일한 대체 스택. 신체 크기, 버튼 라벨, 캡션을 전달합니다.
• **선형 모

概要

Linear のマーケティング キャンバスは、このコレクションの中で最も深い暗い表面です。「{colors.canvas}」は #010102 で、ほのかな青みがかった純粋な黒です。上部には、カード、パネル、リフト タイル用の 4 段の表面ラダー (`{colors.surface-1}` から `{colors.surface-4}`) があり、ヘアラインの境界線が `{colors.hairline}` (#23252a) から `{colors.hairline-strong}` および `{colors.hairline-tertiary}` まで続いています。明るい灰色のテキスト (`{colors.ink}` #f7f8f8) が本文と見出しを表します。

単一の色のアクセントは **リニア ラベンダー ブルー** `{colors.primary}` (#5e6ad2) で、ブランド マーク、フォーカス リング、およびプライマリ CTA ボタンに使用されます。明るいホバー状態 (`{colors.primary-hover}` #828fff) とフォーカス色付きのバリアント (`{colors.primary-focus}` #5e69d1) は同じ色相を拡張します。 Linear は、マーケティング キャンバス上で飽和した緑、オレンジ、赤などを避けます。唯一のセマンティック カラーはステータス ピルとまれな成功インジケーターの `{colors.semantic-success}` (#27a644) です。

表示タイプは、重み 500 ～ 700 で Linear のカスタム サンズ (「SF Pro Display」フォールバックを使用) を実行し、負の文字間隔スケーリングは 80 ピクセルで -3.0 ピクセルから本文の 0 までです。本体ファミリーは Linear のテキスト カットであり、Linear Mono は製品スクリーンショットのコード スニペット用に予約されています。

ページのリズムは **高密度の製品スクリーンショット**です。リニアのマーケティング リードは、「{rounded.xl}」 16 ピクセルの角を持つ `{colors.surface-1}` パネルに囲まれた製品 UI (課題リスト、プロジェクト ビュー、ダッシュボード) の高忠実度のキャプチャで構成されています。クロムは意図的に最小限に抑えられているため、アプリのスクリーンショットで面倒な作業を行うことができます。

**主な特徴:**

• **ダークキャンバス マーケティング システム** — `{colors.canvas}` (#010102) は、このコレクションの中で最も深いダークです。
• **ラベンダーブルーのブランドアクセント** (`{colors.primary}` #5e6ad2) — ブランド マーク、フォーカス、主要 CTA ではほとんど使用されません。
• 4 段階の面ラダー (キャンバス → 面 1 → 面 2 → 面 3 → 面 4) は、影のない階層を運びます。
• ディスプレイ トラッキングは積極的にマイナスに引き上げます (80 ピクセルで -3.0 ピクセル)。 body は -0.05px を保持します。
• カードは `{rounded.lg}` 12 ピクセルの角と 1 ピクセルのヘアライン境界線を使用します。毛玉になることはありません。16 ピクセルになることはほとんどありません。
• **製品 UI のスクリーンショット**がページの大部分を占めています。マーケティング クロムはアプリのダーク フレームです。
• 2 番目の有彩色はありません。大気の勾配はありません。スポットライトカードはありません。

色

> ソース ページ: Linear.app (home)、/intake、/pricing、/contact/sales、/build。

ブランドとアクセント

• **ラベンダー ブルー** ({colors.primary}): 特徴的なリニア アクセント — プライマリ CTA、ブランド マーク、リンクの強調。
• **ラベンダー ホバー** ({colors.primary-hover}): 明るいラベンダー (#828fff) — プライマリ CTA のホバー状態。
• **ラベンダー フォーカス** ({colors.primary-focus}): フォーカス リングの色合い (#5e69d1) — フォーカスされた入力、フォーカスされたボタン。
• **ブランド セキュア** ({colors.brand-secure}): 落ち着いたラベンダー グレー (#7a7fad) — 「リニア セキュリティ」表面で使用されます。

表面

• **キャンバス** ({colors.canvas}): デフォルトのページ背景 — #010102、淡い青みがかったほぼ純粋な黒。
• **Surface 1** ({colors.surface-1}): キャンバスの 1 つ上のステップ - フィーチャー カード、価格カード、製品スクリーンショット パネル。
• **Surface 2** ({colors.surface-2}): 上の 2 つのステップ — 目玉の価格カード、ホバーされたカード。
• **Surface 3** ({colors.surface-3}): 3 つ上のステップ — 行 - 三次背景、サブナビゲーション。
• **サーフェス 4** ({colors.surface-4}): 4 つ上のステップ — bg-level-3、最も深いリフト サーフェス。
• **ヘアライン** ({colors.hairline}): カードと仕切りの 1 ピクセルの境界線。
• **強いヘアライン** ({colors.hairline-strong}): より強い 1 ピクセルの境界線 — 入力フォーカス リング。
• **ヘアライン三次** ({colors.hairline-tertiary}): ネストされたサーフェスの三次境界線。
• **反転キャンバス** ({colors.inverse-canvas}): 純白 — セクション オープナーの小さなセット上の反転ピル CTA の表面。
• **反転サーフェス 1** ({colors.inverse-surface-1}): 反転キャンバスの 1 つ上のステップ。
• **反転サーフェス 2** ({colors.inverse-surface-2}): 反転キャンバスの 2 ステップ上。

テキスト

• **インク** ({colors.ink}): すべての見出しと強調された本文タイプ — ライトグレー #f7f8f8。
• **インクミュート** ({colors.ink-muted}): #d0d6e0 のセカンダリ タイプ — ヒーロー パネルのメタ情報。
• **Ink Subtle** ({colors.ink-subtle}): #8a8f98 の第 3 タイプ — 選択解除された価格設定タブ、フッター列。
• **インク三次** ({colors.ink-tertiary}): 第四次 #62666d — 無効、脚注。

セマンティック

• **成功グリーン** ({colors.semantic-success}): ステータス薬、成功インジケーター。マーケティングにおける唯一のセマンティックカラー。
• **オーバーレイ** ({colors.semantic-overlay}): モーダル用の純粋な黒のオーバーレイ スクリム。

タイポグラフィー

フォントファミリー

• **Linear Display** — Linear のカスタム ディスプレイはありません。フォールバック `SF Pro Display、-apple-system、system-ui、Segoe UI、Roboto`。小見出しを通してdisplay-xlを伝送します。
• **Linear Text** — Linear のカスタム テキストなし (ボディ サイズに合わせて調整されたわずかに異なるカット)。同じフォールバックスタック。本体サイズ、ボタンラベル、キャプションを保持します。
• **リニアMo