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의 마케팅 캔버스는 이 컬렉션에서 가장 어두운 표면입니다. ``은(는) #010102이며 본질적으로 희미한 푸른 색조가 있는 순수한 검정색입니다. 맨 위에는 ``(#23252a)에서 `` 및 ``까지 가는 가는 경계선이 있는 카드, 패널 및 리프팅 타일을 위한 4단계 표면 사다리(``~``)가 있습니다. 밝은 회색 텍스트(`` #f7f8f8)는 본문과 헤드라인을 포함합니다.

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

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

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

**주요 특성:**

• **다크 캔버스 마케팅 시스템** — ``(#010102)은 이 컬렉션에서 가장 어두운 색상입니다.
• **라벤더 블루 브랜드 강조** (`` #5e6ad2) — 브랜드 마크, 초점 및 기본 CTA에는 거의 사용되지 않습니다.
• 4단계 표면 사다리(캔버스 → 표면-1 → 표면-2 → 표면-3 → 표면-4)는 그림자 없이 계층 구조를 전달합니다.
• 디스플레이 추적이 적극적으로 음수를 가져옵니다(80픽셀에서 -3.0픽셀). 본문은 -0.05px에서 유지됩니다.
• 카드는 `` 1픽셀 가는선 테두리가 있는 12픽셀 모서리를 사용합니다. 보풀이 생기지 않으며 거의 16픽셀이 아닙니다.
• **제품 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}): 캔버스보다 한 단계 위 — 기능 카드, 가격 카드, 제품 스크린샷 패널.
• **표면 2**({colors.surface-2}): 위의 두 단계 — 추천 가격 카드, 마우스오버된 카드.
• **표면 3**({colors.surface-3}): 위의 3단계 — 라인-3차 배경, 하위 탐색
• **표면 4**({colors.surface-4}): 위의 4단계 — bg-level-3, 가장 깊게 들어 올려진 표면.
• **가는 선**({colors.hairline}): 카드 및 구분선의 1px 테두리.
• **가는 선 강함** ({colors.hairline-strong}): 더 강한 1px 테두리 — 입력 초점 링.
• **헤어라인 3차**({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의 보조 유형 — 히어로 패널의 메타 정보.
• **잉크 미묘함**({colors.ink-subtle}): #8a8f98의 3차 유형 — 선택 해제된 가격 탭, 바닥글 열.
• **잉크 3차**({colors.ink-tertiary}): #62666d의 4차 — 비활성화됨, 각주.

의미

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

타이포그래피

글꼴군

• **선형 디스플레이** — 선형의 사용자 정의 디스플레이가 없습니다. 대체 `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto`. 부제목을 통해 디스플레이-xl을 전달합니다.
• **선형 텍스트** — 선형의 사용자 정의 텍스트가 없습니다(본체 크기에 맞게 조정된 약간 다른 컷). 동일한 대체 스택. 본문 크기, 버튼 라벨, 캡션을 전달합니다.
• **리니어 모노** — 리니어의 맞춤형 모노; 대체 `ui-monospace, SF Mono, Menlo`. 제품 스크린샷의 코드 조각과 상태/ID 토큰에 사용됩니다.

마케팅 표면에서는 디스플레이와 텍스트를 하나의 연속된 음성으로 취급합니다. 가족의 변화는 조용합니다.

계층

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

사용

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

| _`` | 80px | 600 | 1.05 | -3.0px | 가장 큰 영웅 헤드라인 |

| _`` | 56px | 600 | 1.10 | -1.8px | 섹션 오프너 헤드라인 |

| _`` | 40px | 600 | 1.15 | -1.0px | 하위 섹션 헤드라인 |

| _`` | 28px | 600 | 1.20 | -0.6px | 가격 등급 제목, CTA 배너 제목 |

| _`` | 22px | 500 | 1.25 | -0.4px | 기능 카드 제목 |

| _`` | 20픽셀 | 400 | 1.40 | -0.2px | 본문, 소개 단락 |

| _`` | 18px | 400 | 1.50 | -0.1px | 주요 부제목, 리드 단락 |

| _`` | 16px | 400 | 1.50 | -0.05px | 기본 본문 |

| _`` | 14px | 400 | 1.50 | 0 | 카드 본문, 바닥글 열 |

| _`` | 12px | 400 | 1.40 | 0 | 캡션, 메타, 상태 |

| _`` | 14px | 500 | 1.20 | 0 | 모든 버튼 라벨 |

| _`` | 13px | 500 | 1.30 | 0.4px | 섹션 눈썹(약간 긍정적인 추적) |

| _`` | 13px | 400 | 1.50 | 0 | 제품 스크린샷의 코드에 대한 선형 모노 |

원칙

• **디스플레이에서 공격적인 부정 추적**(80px에서 -3.0px ≒ 4% 크기).
• **디스플레이에서 본체까지 단일 음성.** 600의 디스플레이-xl → 400의 본체 — 동일한 제품군, 더 좁은 가중치.
• **눈썹은 포지티브 추적을 사용합니다**(+0.4px) - 네거티브 추적 디스플레이와의 대비는 눈썹을 분류로 표시합니다.
• **코드 컨텍스트에서만 모노입니다.** 선형 모노는 마케팅 크롬이 아닌 제품 스크린샷 내부에 있습니다.

글꼴 대체에 대한 참고사항

Linear의 사용자 정의 서체는 공개적으로 배포되지 않습니다. 문서화된 대체 `SF Pro Display, -apple-system, system-ui`은 macOS에서 권장되는 대체 방법입니다. 크로스 플랫폼 구현의 경우 가중치 500/600/700의 **Inter**가 가장 가까운 무료 대체품입니다. **Geist Sans**도 실행 가능합니다. 모노의 경우 무게 400의 **JetBrains Mono** 또는 **Geist Mono**는 선형 모노에 매우 가깝습니다.

레이아웃

간격 시스템

• **기본 단위**: 4px.
• **토큰(머리말)**: `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• 카드 내부 패딩: `` 기능/가격 카드의 24px; _`` 추천 카드의 경우 32px; `` CTA 배너의 48px.
• 알약 버튼 패딩: 세로 8px · 가로 14px — Linear의 컴팩트 버튼 사양
• 양식 입력 패딩: 세로 8픽셀 · 가로 12픽셀.

그리드 및 컨테이너

• 최대 콘텐츠 너비는 약 1280픽셀입니다.
• 카드 그리드는 데스크톱에서 3업, 태블릿에서 2업, 모바일에서 1업입니다.
• 가격 등급 표는 3개로 구성됩니다. 아래 비교 스트립에는 계층별 체크 표시가 표시됩니다.
• 제품 스크린샷 패널은 전체 콘텐츠 폭을 포괄하며 이것이 바로 주인공입니다.

공백 철학

어두운 캔버스는 공백입니다. 섹션은 흰색 간격이 아닌 표면 1 패널 위로 들어 올려 분리됩니다. 패널 내에서 콘텐츠 블록 사이에 `` 24px 간격을 넉넉하게 두세요. `` 섹션 간 96픽셀.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 0(플랫) | 그림자 없음, 테두리 없음 | 본문 유형, 영웅 텍스트, 바닥글 기본값 |

| 1(숯 리프트) | _`` 캔버스의 배경, 1px `` | 기본 카드, 제품 패널 |

| 2(표면-2 리프트) | _`` 배경, 1px `` | 추천 가격 카드, 마우스오버된 카드 |

| 3개(표면-3 리프트) | _`` 배경 | 하위 탐색, 드롭다운 메뉴 |

| 4(포커스 링) | 불투명도 50%의 2px `` 윤곽선 | 집중 입력, 집중 버튼 |

리니어의 깊이는 표면 래더 + 헤어라인 테두리에 의해 전달됩니다. 이 브랜드는 어둠 속에서 그림자가 생기는 것을 거의 완전히 방지합니다.

장식적 깊이

• **제품 UI 스크린샷**은 장식적인 깊이로 두드러집니다.
• **대기 그라데이션도 없고 스포트라이트 카드도 없습니다.**
• **올려진 패널의 상단 가장자리에 있는 미묘한 흰색 가장자리 강조 표시** - 어두운 표면에 희미한 "픽셀 렌더링" 느낌을 줍니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 4픽셀 | 작은 칩, 상태 배지 |

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

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

| _`` | 12px | 가격 카드, 기능 카드, 추천 카드 |

| _`` | 16px | 제품 스크린샷 패널 |

| _`` | 24px | 대형 CTA 배너(드물게) |

| _`` | 9999px | 가격 탭 토글, 상태 알약 |

| _`` | 9999px | 아바타 서클 |

사진 및 일러스트레이션 기하학

• 제품 UI 스크린샷이 지배적입니다. `` 16px 타일에 `` 24px 외부 패딩이 있습니다.
• 고객 로고 타일은 ``에서 테두리 없이 작은 크기(~24px 로고 높이)로 렌더링됩니다.
• 평가 카드의 아바타 원은 32~40픽셀 크기의 ``을(를) 사용합니다.

구성요소

버튼

**`button-primary`** — 라벤더 CTA. 모든 페이지의 기본 기본 CTA입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 8px 14px, 반올림 ``.
• 누른 상태는 `button-primary-pressed`에 있습니다(백그라운드는 ``으로 전환됩니다).
• 호버 상태는 `button-primary-hover`에 있습니다(배경은 `` 밝은 라벤더로 전환됩니다).

**`button-secondary`** — 목탄 버튼. 보조 CTA("로그인", "변경 로그 읽기")에 사용됩니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 8px 14px, 반올림 ``. 1px `` 테두리.

_**`button-tertiary`** — 일반 텍스트 버튼.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 8px 14px.

**`button-inverse`** — 어두운 바탕에 흰색 역 CTA.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 8px 14px.

가격 탭

**`pricing-tab-default`** + **`pricing-tab-selected`** — `/pricing`에 대한 알약 토글.

• 기본값: `` 배경, `` 텍스트, 반올림 ``, 패딩 6px 14px.
• 선택됨: `` 배경, `` 텍스트 — 선택됨 = 표면 리프트

카드 및 용기

**`pricing-card`** — `/pricing`의 각 계층.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px. 1px `` 테두리.

**`pricing-card-featured`** — 권장 계층 — 표면 리프트-2.

• 배경 ``, 그 외에는 동일한 구조.

**`feature-card`** — 일반 기능 강조 타일.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.

**`product-screenshot-card`** — 주요 카드 유형 — 충실도가 높은 선형 앱 UI 스크린샷을 프레임화합니다.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.

**`testimonial-card`** — 아바타 + 이름 + 역할이 포함된 고객 견적.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 32px.

**`customer-logo-tile`** — 고객 선택 윤곽의 작은 타일.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 16px.

**`cta-banner`** — 페이지 하단 근처에서 CTA 패널을 닫습니다.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 48px.

입력 및 양식

**`text-input`** + **`text-input-focused`** — `/contact/sales`의 양식 필드 및 가입 오버레이.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 8px 12px.
• 초점 상태는 동일한 표면을 유지합니다. 초점 링은 불투명도 50%의 2px `` 윤곽선입니다.

상태 및 빌드 페이지

_**`changelog-row`** — 버전, 날짜 및 변경 사항을 나열하는 `/build`(변경 로그 페이지)의 각 행입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px 0. 1px `` 하단 규칙.

_**`status-badge`** — 작은 상태 알약.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 2px 8px.

탐색

**`top-nav`** — 선형 워드마크가 왼쪽에 있고 기본 탐색 링크가 중앙에 있으며 `button-secondary`("로그인") + `button-primary`("시작하기") 쌍이 오른쪽에 있는 끈적끈적한 어두운 막대.

• 배경 ``, 텍스트 ``, 유형 ``, 높이 56px.

바닥글

**`footer`** — 선형 워드마크가 왼쪽에 있는 ``의 밀집 링크 그리드입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 64px 32px.

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

하라

• ``(#010102)을 시스템의 앵커 표면으로 예약합니다. 희미한 파란색 색조는 의도적인 것입니다.
• 브랜드 마크, 기본 CTA, 포커스 링, 링크 강조에만 `` 라벤더를 사용하세요.
• 계층 구조에는 4단계 표면 사다리를 사용하세요. 레벨을 건너뛰지 마세요.
• 디스플레이 무게 600과 체중 400 쌍 — 선형 저항 700개 이상의 디스플레이 무게.
• 디스플레이에 음수 문자 간격을 적극적으로 적용합니다.
• 제품 UI 스크린샷을 모든 섹션의 주인공으로 사용하세요.
• CTA를 `` 8픽셀 모서리로 구성합니다.

하지 마세요

• 라이트 모드 마케팅 페이지를 제공하지 마세요.
• 라벤더를 섹션 배경이나 카드 채우기로 사용하지 마세요.
• 두 번째 색채 악센트(마케팅용 주황색, 분홍색, 녹색)를 도입하지 마세요.
• 대기적인 그라데이션이나 스포트라이트 카드를 추가하지 마세요.
• CTA를 단순하게 작성하지 마세요.
• 진짜 검정색을 캔버스로 사용하지 마세요.
``
• 제품 스크린샷 모형에 여러 개의 밝은 악센트를 결합하지 마세요.

반응적 행동

중단점

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

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

| 데스크탑-XL | 1440px | 기본 데스크탑 레이아웃 |

| 데스크탑 | 1280px | 카드 그리드 3업 유지 |

| 태블릿 | 1024px | 카드 그리드 3업 → 2업 |

| 모바일LG | 768px | 가격 비교가 아코디언이 됩니다. 탐색 햄버거 |

| 모바일 | 480px | 단일 열; display-xl은 80px → ~36px |

크기를 조정합니다.

터치 대상

• CTA는 뷰포트 전체에서 40px 이상의 탭 높이를 유지합니다.
• 가격 탭 알약은 ≥36px 탭 높이를 유지합니다. 터치 뷰포트가 44px 이상으로 늘어납니다.
• 양식 입력은 터치 시 ≥44px 탭 대상을 유지합니다.

축소 전략

• **상위 탐색**: 링크가 768px 미만에서 햄버거로 축소됩니다.
• **카드 그리드**: 3-up → 1024px에서 2-up → 768px 미만 1-up.
• **가격 비교**: 768px 이하의 계층별 아코디언.
• **디스플레이 유형**: `` 80px는 모바일에서 `` 40px로 조정됩니다.

이미지 동작

• 제품 UI 스크린샷은 화면 비율을 유지하며 잘리지 않습니다.
• 선택 윤곽의 고객 로고는 768픽셀 아래에서 6~3위로 축소될 수 있습니다.

반복 가이드

1. 한 번에 하나의 구성 요소에 집중하고 `components:` 토큰 이름으로 참조하세요.

2. 섹션을 소개할 때 먼저 어느 표면 리프트에 있는지 결정하세요.

3. 기본 본문은 무게 400에서 ``입니다.

4. 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행합니다.

5. 별도의 구성 요소 항목으로 새 변형을 추가합니다.

6. 라벤더를 희소한 것으로 취급: 브랜드 마크, 기본 CTA, 초점, 링크 강조.

7. 제품 UI 스크린샷으로 모든 섹션을 안내하세요.

알려진 격차

• 4단계 표면 사다리 값은 Linear의 `--color-bg-level-3`, `--color-line-tint` 등에서 직접 추출됩니다. CSS 변수; 이는 Linear의 표준 표면 사양입니다.
• 양식 필드 오류 및 유효성 검사 스타일이 검사된 페이지에 표시되지 않습니다.
• 마케팅 사이트에서 밝은 테마를 제공하지 않기 때문에 밝은 모드는 문서화되지 않았습니다.
• Linear의 실제 제품 UI는 이슈 우선순위 및 프로젝트 라벨에 더 풍부한 색상 태그 팔레트(빨간색, 주황색, 노란색, 녹색, 파란색, 보라색)를 사용합니다. 이러한 색상은 모형에 표시된 제품 내 표면에 표시됩니다.
• 사용자 정의 디스플레이, 텍스트 및 모노 계열은 독점적입니다. 오픈 소스 대체물이 허용됩니다.

概要

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

単一の色彩アクセントは **リニア ラベンダー ブルー** `` (#5e6ad2) — ブランド マーク、フォーカス リング、およびプライマリ CTA ボタンで使用されます。明るいホバー状態 (`` #828fff) とフォーカス着色バリアント (`` #5e69d1) は同じ色相を拡張します。リニアは、マーケティング キャンバス上で飽和した緑、オレンジ、赤などを避けます。唯一のセマンティック カラーは、状況を知らせる薬とまれな成功インジケーターの `` (#27a644) です。

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

ページのリズムは **高密度の製品スクリーンショット** — Linear のマーケティング リードは、__CODEBCK_679___ 16 ピクセルのコーナーを持つ `` パネルにフレーム化された製品 UI (問題リスト、プロジェクト ビュー、ダッシュボード) の高忠実度キャプチャで構成されています。クロムは意図的に最小限に抑えられているため、アプリのスクリーンショットで面倒な作業を行うことができます。

**主な特徴:**

• **ダークキャンバス マーケティング システム** — `` (#010102) は、このコレクションの中で最も深いダークです。
• **ラベンダー ブルーのブランド アクセント** (`` #5e6ad2) — ブランド マーク、フォーカス、主要 CTA ではほとんど使用されません。
• 4 段階のサーフェス ラダー (キャンバス → サーフェス 1 → サーフェス 2 → サーフェス 3 → サーフェス 4) は、影のない階層を保持します。
• ディスプレイ トラッキングは大幅にマイナスになります (80 ピクセルで -3.0 ピクセル)。本文は -0.05px を保持します。
• カードは `` 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 つ上のステップ — 背景レベル 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 のセカンダリ タイプ — ヒーロー パネルのメタ情報。
• **インク微妙** ({colors.ink-subtle}): #8a8f98 の第 3 タイプ — 価格タブ、フッター列の選択が解除されています。
• **インク三次** ({colors.ink-tertiary}): #62666d の第四紀 — 無効、脚注。

セマンティック

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

タイポグラフィ

フォント ファミリー

• **Linear Display** — Linear のカスタム表示はありません。フォールバック__CODEBCK_683___。小見出しを通して display-xl を伝えます。
• **Linear Text** — Linear のカスタム テキストなし (ボディ サイズに合わせて調整されたわずかに異なるカット)。同じフォールバックスタック。本文のサイズ、ボタンのラベル、キャプションを保持します。
• **Linear Mono** — Linear のカスタム モノラル。フォールバック__CODEBCK_684___。 製品スクリーンショットのコード スニペットとステータス/ID トークンに使用されます。

マーケティング面では、ディスプレイとテキストを 1 つの連続した音声として扱います。家族の変化は静かに行われます。

階層

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

を使用します

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

| `` | 80ピクセル | 600 | 1.05 | -3.0ピクセル |最大のヒーローの見出し |

| `` | 56ピクセル | 600 | 1.10 | -1.8ピクセル |セクション冒頭の見出し |

| `` | 40ピクセル | 600 | 1.15 | -1.0ピクセル |サブセクションの見出し |

| `` | 28ピクセル | 600 | 1.20 | -0.6ピクセル |価格帯のタイトル、CTA バナーの見出し |

| `` | 22ピクセル | 500 | 1.25 | -0.4ピクセル |フィーチャー カードのタイトル |

| `` | 20ピクセル | 400 | 1.40 | -0.2ピクセル |リード本文、導入段落 |

| `` | 18ピクセル | 400 | 1.50 | -0.1ピクセル |ヒーローの小見出し、先頭段落 |

| `` | 16ピクセル | 400 | 1.50 | -0.05ピクセル |デフォルトの本文 |

| `` | 14ピクセル | 400 | 1.50 | 0 |カード本文、フッター列 |

| `` | 12ピクセル | 400 | 1.40 | 0 |キャプション、メタ、ステータス |

| `` | 14ピクセル | 500 | 1.20 | 0 |すべてのボタンのラベル |

| `` | 13ピクセル | 500 | 1.30 | 0.4ピクセル |眉毛セクション (わずかなポジティブ トラッキング) |

| `` | 13ピクセル | 400 | 1.50 | 0 |製品スクリーンショットのコード用リニア モノラル |

原則

• **ディスプレイ上の積極的なネガティブ トラッキング** (80 ピクセルで -3.0 ピクセル ≈ サイズの 4%)。
• **ディスプレイから本体まで単一音声。** Display-xl 600 → 本体 400 — 同じファミリー、より狭いウェイト。
• **眉毛はポジティブ トラッキングを使用します** (+0.4px) - ネガティブ トラッキング表示に対するコントラストにより、分類法として眉毛がマークされます。
• **Mono はコード コンテキスト内でのみ使用されます。** Linear Mono はマーケティング Chrome ではなく、製品のスクリーンショット内に存在します。

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

_Linear のカスタム 書体は公的に配布されていません。文書化されたフォールバック `SF Pro Display, -apple-system, system-ui` が、macOS で推奨される代替品です。クロスプラットフォーム実装の場合、重み 500 / 600 / 700 の **Inter** が最も近い無料の代替品です。 **Geist Sans** も実行可能です。 モノラルの場合、重み 400 の **JetBrains Mono** または **Geist Mono** は Linear Mono に非常に近似します。

レイアウト

間隔システム

• **ベースユニット**: 4px.
• **トークン (前付)**: `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• カード内部のパディング: `` 機能/価格カードでは 24 ピクセル。 `` 紹介カードでは 32 ピクセル。 `` CTA バナーでは 48 ピクセル。
• ピル ボタンのパディング: 縦 8 ピクセル、横 14 ピクセル — Linear のコンパクト ボタン仕様
• フォーム入力パディング: 縦 8 ピクセル、横 12 ピクセル。

グリッドとコンテナ

• コンテンツの最大幅は約 1280 ピクセルです。
• カード グリッドはデスクトップでは 3 アップ、タブレットでは 2 アップ、モバイルでは 1 アップです。
• _価格階層グリッドは 3 段階です。以下の比較ストリップには、階層ごとのチェックマークが表示されます。
• 製品のスクリーンショット パネルはコンテンツの幅全体に広がります。これが主役です。

ホワイトスペースの哲学

暗いキャンバスは空白です。セクションは、白い隙間ではなく、表面 1 パネル上でリフトによって分離されます。パネル内では、コンテンツ ブロック間の十分な `` 24 ピクセルのギャップ。 `` セクション間は 96 ピクセル。

標高と深さ

|レベル |治療 | |

を使用します

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

| 0 (フラット) |影も境界線もありません |本文タイプ、ヒーロー テキスト、フッターのデフォルト |

| 1 (チャコールリフト) | `` キャンバス上の背景、1 ピクセル `` |デフォルトのカード、製品パネル |

| 2 (表面 2 リフト) | `` 背景、1 ピクセル `` |注目の価格設定カード、ホバー カード |

| 3 (表面-3 リフト) | `` 背景 |サブナビゲーション、ドロップダウン メニュー |

| 4（フォーカスリング） | 2px `` 不透明度 50% のアウトライン |フォーカスされた入力、フォーカスされたボタン |

Linear の深さは、サーフェス ラダー + ヘアライン ボーダーによって伝えられます。 このブランドは、ほぼ完全に暗い場所でのドロップ シャドウに抵抗します。

装飾の深さ_

• **製品 UI のスクリーンショット** は装飾的な深みとして重要です。
• **大気のグラデーションやスポットライト カードはありません。**
• **持ち上げられたパネルの上端にある微妙な白いエッジ ハイライト** — 暗い表面にかすかな「ピクセル レンダリング」の雰囲気を与えます。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 4ピクセル |小さなチップ、ステータス バッジ |

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

| `` | 8ピクセル |すべてのボタン、フォーム入力 |

| `` | 12ピクセル |価格カード、特徴カード、お客様の声カード |

| `` | 16ピクセル |製品のスクリーンショット パネル |

| `` | 24ピクセル |特大 CTA バナー (まれ) |

| `` | 9999ピクセル |価格タブの切り替え、ステータス ピル |

| `` | 9999ピクセル |アバター サークル |

写真とイラストの幾何学

• _製品 UI のスクリーンショットが大半を占めます。これらは `` 16 ピクセルのタイル内に配置され、__CODEBCK_727___ 24 ピクセルの外側パディングが付いています。
• 顧客のロゴ タイルは、__CODEBCK_728___ 上に小さなサイズ (ロゴの高さ約 24 ピクセル) で枠なしでレンダリングされます。
• お客様の声カードのアバター サークルでは、__CODEBCK_729___ を 32 ～ 40 ピクセルのサイズで使用します。

コンポーネント

ボタン

_**`button-primary`** — ラベンダーの CTA。すべてのページにわたるデフォルトのプライマリ CTA。

• 背景__CODEBCK_731___、テキスト__CODEBCK_732___、入力__CODEBCK_733___、パディング8px 14px、丸め__CODEBCK_734___.
• 押された状態は__CODEBCK_735___にあります(背景は__CODEBCK_736___に移動します)。
• ホバー状態は__CODEBCK_737___にあります(背景は__CODEBCK_738___の明るいラベンダーに変わります)。

_**`button-secondary`** — 木炭ボタン。二次 CTA (「サインイン」、「変更ログを読む」) に使用されます。

• 背景__CODEBCK_740___、テキスト__CODEBCK_741___、入力__CODEBCK_742___、パディング8px 14px、丸め__CODEBCK_743___。 1 ピクセル `` 境界線.

_**`button-tertiary`** — プレーン テキスト ボタン。

• 背景__CODEBCK_746___、テキスト__CODEBCK_747___、入力__CODEBCK_748___、丸め__CODEBCK_749___、パディング8px 14px。

**`button-inverse`** — 黒地に白の逆 CTA。

• 背景__CODEBCK_751___、テキスト__CODEBCK_752___、入力__CODEBCK_753___、丸め__CODEBCK_754___、パディング8px 14px.

価格タブ

_**`pricing-tab-default`** + **`pricing-tab-selected`** — `/pricing`.

のピルトグル

• デフォルト:__CODEBCK_758___背景、__CODEBCK_759___テキスト、角丸__CODEBCK_760___、パディング6px 14px。
• 選択済み: `` 背景、__CODEBCK_762___ テキスト - 選択済み = 表面リフト。

カードとコンテナ

**`pricing-card`** — `/pricing`.

の各層

• 背景__CODEBCK_765___、テキスト__CODEBCK_766___、入力__CODEBCK_767___、丸め__CODEBCK_768___、パディング24ピクセル。 1 ピクセル `` 境界線.

**`pricing-card-featured`** — 推奨層 — 表面リフトから表面-2.

• 背景__CODEBCK_771___、それ以外は同一構造

**`feature-card`** — 一般的な機能ハイライト タイル。

• 背景__CODEBCK_773___、テキスト__CODEBCK_774___、入力__CODEBCK_775___、丸め__CODEBCK_776___、パディング24ピクセル

**`product-screenshot-card`** — 主要なカード タイプ — 高忠実度のリニア アプリ UI スクリーンショットをフレーム化します。

• 背景__CODEBCK_778___、テキスト__CODEBCK_779___、入力__CODEBCK_780___、丸め__CODEBCK_781___、パディング24ピクセル

**`testimonial-card`** — アバター + 名前 + 役割を含む顧客の見積もり。

• 背景__CODEBCK_783___、テキスト__CODEBCK_784___、入力__CODEBCK_785___、丸め__CODEBCK_786___、パディング32ピクセル。

**`customer-logo-tile`** — 顧客マーキーの小さなタイル。

• 背景__CODEBCK_788___、テキスト__CODEBCK_789___、入力__CODEBCK_790___、丸め__CODEBCK_791___、パディング16ピクセル。

**`cta-banner`** — ページ下部付近の CTA パネルを閉じます。

• 背景__CODEBCK_793___、テキスト__CODEBCK_794___、入力__CODEBCK_795___、丸め__CODEBCK_796___、パディング48ピクセル。

入力とフォーム

**`text-input`** + **`text-input-focused`** — `/contact/sales` およびサインアップ オーバーレイのフォーム フィールド。

• 背景__CODEBCK_800___、テキスト__CODEBCK_801___、入力__CODEBCK_802___、丸め__CODEBCK_803___、パディング8px 12px。
• フォーカスされた状態は同じ表面を保持します。フォーカス リングは、不透明度 50% の 2 ピクセル `` のアウトラインです。

ステータスとビルド ページ

**`changelog-row`** — `/build` (変更履歴ページ) の各行には、バージョン、日付、および変更点がリストされます。

• 背景__CODEBCK_807___、テキスト__CODEBCK_808___、入力__CODEBCK_809___、丸め__CODEBCK_810___、パディング24ピクセル0。 1px `` 一番下のルール。

**`status-badge`** — 小さなステータス薬。

• 背景__CODEBCK_813___、テキスト__CODEBCK_814___、入力__CODEBCK_815___、丸め__CODEBCK_816___、パディング2px 8px.

ナビゲーション

_**`top-nav`** — リニア ワードマークが左側、プライマリ ナビゲーション リンクが中央、右側に `button-secondary` (「サインイン」) + `button-primary` (「始める」) ペアが配置された濃い色のバーです。

• 背景__CODEBCK_820___、テキスト__CODEBCK_821___、タイプ__CODEBCK_822___、高さ56ピクセル

フッター

**`footer`** — リニア ワードマークを残した`` 上の高密度リンク グリッド。

• 背景__CODEBCK_825___、テキスト__CODEBCK_826___、入力__CODEBCK_827___、パディング64ピクセル32ピクセル。

推奨事項と禁止事項

実行

• __CODEBCK_828___ (#010102) をシステムのアンカー サーフェスとして予約します。かすかな青色の色合いは意図的です。
• __CODEBCK_829___ ラベンダーは、ブランド マーク、プライマリ CTA、フォーカス リング、リンクの強調にのみ使用してください。
• 階層には 4 段の表面ラダーを使用します。 レベルをスキップしないでください。
• ディスプレイ ウェイト 600 と本体ウェイト 400 をペアにする — リニアは 700 以上のディスプレイ ウェイトに耐えます。
• 表示上で負の文字間隔を積極的に適用します。
• 製品 UI のスクリーンショットをすべてのセクションの主役として使用します。
• CTA を__CODEBCK_830___ 8 ピクセルの角として作成します。

しないでください

• ライトモードのマーケティング ページを配布しないでください。
• セクションの背景やカードの塗りつぶしとしてラベンダーを使用しないでください。
• 2 番目の有彩色のアクセント (マーケティング用のオレンジ、ピンク、緑) を導入しないでください。
• 雰囲気のグラデーションやスポットライト カードを追加しないでください。
• 丸型 CTA を使用しないでください。
• __CODEBCK_831___ 真の黒をキャンバスとして使用しないでください。
• 製品のスクリーンショットのモックアップでは、複数の明るいアクセントを組み合わせないでください。

応答動作

ブレークポイント

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

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

|デスクトップXL | 1440ピクセル |デフォルトのデスクトップ レイアウト |

|デスクトップ | 1280ピクセル |カード グリッド 3 アップを維持 |

|タブレット | 1024ピクセル |カード グリッド 3 アップ → 2 アップ |

|モバイルLG | 768ピクセル |価格比較はアコーディオンになります。ナビハンバーガー |

|モバイル | 480ピクセル |単一列。 display-xl は 80px → ~36px にスケールします |

タッチターゲット

• CTA はビューポート全体で 40 ピクセル以上のタップ高さを保持します。
• 価格設定タブの錠剤はタップ高さ 36 ピクセル以上を保持します。タッチ ビューポートは 44 ピクセル以上に拡大します。
• フォーム入力はタッチ時に 44 ピクセル以上のタップ ターゲットを保持します。

戦略の崩壊

• **トップナビゲーション**: リンクは 768 ピクセル以下でハンバーガーに折りたたまれます。
• **カード グリッド**: 3 アップ → 1024 ピクセルで 2 アップ → 768 ピクセル未満で 1 アップ。
• **価格比較**: 768 ピクセル未満の層ごとのアコーディオン。
• **表示タイプ**: `` 80 ピクセルは、モバイルでは `` 40 ピクセルに合わせて拡大縮小されます。

画像の動作

• 製品 UI のスクリーンショットはアスペクト比を維持し、トリミングされません。
• マーキー内の顧客のロゴは、768 ピクセル未満で最大 6 から 3 まで折りたたまれる場合があります。

_反復ガイド

1.一度に 1 つのコンポーネントに注目し、__CODEBCK_834___ トークン名で参照します。

2.セクションを導入するときは、最初にそのセクションがどの表面リフト上にあるのかを決定します。

3.デフォルトのボディは__CODEBCK_835___、ウェイト400です。

4.編集後に__CODEBCK_836___を実行します。

5.新しいバリアントを個別のコンポーネント エントリとして追加します。

6.ラベンダーを希少なものとして扱います: ブランド マーク、主要な CTA、焦点、リンクの強調。

7.製品 UI のスクリーンショットを使用して各セクションをリードします。

既知のギャップ

• 4 ステップのサーフェス ラダー値は、Linear の `--color-bg-level-3`、__CODEBCK_838___ などから直接抽出されます。 CSS変数。これらは Linear の標準的なサーフェス仕様です。
• フォーム フィールド エラーと検証スタイルが検査されたページに表示されません。
• マーケティング サイトにはライト テーマが同梱されていないため、ライト モードは文書化されていません。
• Linear の実際の製品 UI では、問題の優先順位とプロジェクト ラベルに、より豊富なカラータグ パレット (赤、オレンジ、黄、緑、青、紫) が使用されています。これらの色は、モックアップに表示される製品内の表面に表示されます。
• _カスタム ディスプレイ、テキスト、モノラル ファミリは独自のものです。オープンソースの代替品も受け入れられます。

Color Strategy Analysis

With 245 documented color tokens, Linear balances brand consistency with functional hierarchy. The primary palette (#010102) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Linear avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 245 documented color tokens, Linear balances brand consistency with functional hierarchy. The primary palette (#010102) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Linear avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 245 documented color tokens, Linear balances brand consistency with functional hierarchy. The primary palette (#010102) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Linear avoids through careful saturation management and deliberate negative space.

Related Design Systems

Explore similar design languages from the same category:

• Sanity Design System
• Warp Design System
• Cursor Design System
• Mintlify Design System