# Linear Dark
거의 검정에 가까운 캔버스 위에 Inter의 촘촘한 음수 자간과 인디고 브랜드 액센트를 얹은 다크 네이티브 프로덕트 스타일 — 절제된 엘리베이션과 선명한 대비가 미학이다.
- taxonomy: cinematic-dark · dark-native, product-saas, high-contrast, inter-tight-tracking, indigo-accent, subtle-elevation, developer-tool, refined-minimal · complexity=medium
- page types: landing, app, dashboard, marketing
- best for: 프로덕트/SaaS 랜딩 페이지, 개발자·생산성 도구 마케팅 사이트, 다크 네이티브 앱 UI와 대시보드, 스타트업 브랜드 히어로
- avoid for: 따뜻하고 여백 많은 라이프스타일·리테일 브랜드, 인쇄 편집(에디토리얼) 감성 사이트, 장난스러운 파스텔 소비자 앱, 사진·일러스트 중심의 밝은 마케팅 페이지
- provenance: website (Linear – The system for product development) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, effects=vision-inferred, dark=computed-css, light=vision-inferred
## Design rules
# Linear Dark
## Overview
A dark-native product/SaaS aesthetic extracted from linear.app. The canvas is near-black, text is near-white, contrast is high and crisp, and the entire brand rests on a single indigo accent. Hierarchy is built from brightness steps and Inter's signature tight tracking — not from color. Dark is the real style; the light mode is a synthesized counterpart because Linear ships dark-only.
## Colors & Roles
Measured, dark-first. `background` is near-black `oklch(0.139 0.003 246.3)` (#08090a); `foreground` is near-white `oklch(0.978 0.001 197.1)` (#f7f8f8). Elevation is a quiet tonal climb: `card` 0.168 → `popover` 0.185, each a hair above the last. `muted-foreground` `oklch(0.649 0.015 262.4)` (#8a8f98) is the gray used for nav and secondary copy.
The brand is one color: indigo `oklch(0.567 0.159 275.2)` (#5e6ad2), assigned to `primary`, `accent`, `ring`, and `chart-1`. It is a punctuation mark — primary actions, focus, and emphasis only. Everything else neutral. The lime, green, red, and cyan Linear uses are *status/data signals*, not brand: `chart-2` lime `oklch(0.920 0.201 114.0)`, `chart-3` green `oklch(0.637 0.175 146.7)`, `chart-4`/`destructive` red `oklch(0.655 0.201 23.3)`, `chart-5` cyan `oklch(0.716 0.123 208.5)`. `border` is a solid `oklch(0.264 0.010 268.3)` (#23252a). Light mode keeps the exact indigo brand on a clean white canvas, darkening lime/cyan slightly for contrast.
## Typography Rules
One family: Inter (display included; Google-Fonts fallback "Inter", mono "JetBrains Mono"). The signature is tight negative tracking on large type — the measured H1 (64px / weight 510 / −1.408px) is ≈ −0.022em, applied to display, h1, and h2 alike. Weights are the measured Inter Variable set: 400 body, 510 display/headings, 590 small headings and emphasis labels. Even body carries −0.011em for density. Mono (Berkeley Mono) is reserved for code, keycaps, and numeric badges. Scale ratio ≈ 1.25.
## Layout Principles
Centered container ~1024–1140px on a 12-column / 24px-gutter grid with generous side gutters. Hero copy is left-aligned with a large empty top, then a product-UI mockup below. Feature sections follow a left-copy / right-(or-below)-preview rhythm. Section gaps are large: `clamp(5rem, 10vw, 9rem)`. On the dark canvas, whitespace *is* the premium signal; density lives inside cards and panels.
## Depth & Elevation
Elevation is primarily the background tonal step (background → card → popover) plus a 1px border. Soft shadows are used only on genuinely floating elements — dropdowns, popovers, command menus, toasts — not on section cards. The one composed shadow is subtle (`0 8px 16px -4px`, black at 40%). A low-opacity (~4–10%) indigo aurora radial glow sits behind the hero; the rest of the background stays flat near-black. The sticky nav uses a backdrop blur over a translucent background.
## Shapes
Small radii: `box` 8px (cards), `field` 6px (inputs), `selector` 6px. Nav links and some CTAs are full pills (radius 9999px). Nothing is sharp-cornered and nothing is bubble-round.
## Component Stylings
- **Button**: primary = indigo fill + near-white text, radius ~8px (hero CTA often a white pill); 13–14px / 510. Hover brightens the fill over 120–200ms with an optional 1px lift. Focus = 2px indigo ring (no bare outline). Secondary = transparent/`secondary` with a 1px border; ghost = transparent, muted-foreground text going to foreground on hover (nav pills).
- **Card**: `card` background (a step above `background`), 1px border, radius 8px, padding 24–32px, no default shadow. Emphasis cards may fill with brand lime or indigo (quote/stat cards).
- **Input**: `input` background or 2% white, 1px border, radius 6px, padding 12×14px; placeholder in muted-foreground; focus border → indigo ring.
- **Nav**: sticky, backdrop-blurred translucent bar; wordmark left, ghost pill links center/right, `Log in` text + white `Sign up` pill at the far right, 1px bottom hairline.
- **Badge**: pill or 6px, 12px text; status colors as a 10% tint background + colored text. Indigo reserved for "New"-type emphasis.
## Motion
Smooth, quick, restrained. Opacity fades plus 8–12px slides, tiny background/border transitions on hover, and very small scale — durations 120/200/400ms, `ease-standard` cubic-bezier(0.4,0,0.2,1), `ease-emphasis` cubic-bezier(0.16,1,0.3,1). No bounce, spring overshoot, or heavy parallax. Precise and calm — the Linear feel is buttery but never showy.
## Do's and Don'ts
**Do:** design dark-first and derive light from the same indigo; build hierarchy from brightness steps and near-white/gray text contrast; keep indigo for actions/focus/emphasis only; apply −0.022em tracking to large Inter headings; divide with 1px borders and tonal steps, shadows only on floating UI.
**Don't:** use large radii or heavy drop shadows; flood the screen with indigo; over-use gradients, glass, or pastels (hero glow stays very low-opacity); add bounce/spring/parallax; treat a bright light background as canonical — this style is dark-native.
## Responsive Behavior
The 12-column grid collapses to a single column on mobile; display type scales via `clamp()` so tracking stays tight at every size. The sticky nav collapses its center pill links into a menu while keeping the wordmark and the `Sign up` pill. Hero mockups scale to full width with the same border/radius treatment.
## Agent Prompt Guide
> Build this in the 'Linear Dark' style: a dark-native product/SaaS aesthetic on a near-black canvas (oklch 0.139 0.003 246), near-white text (oklch 0.978), and a single indigo brand accent (oklch 0.567 0.159 275 / #5e6ad2) for primary actions, focus rings, and emphasis. Inter throughout with tight negative tracking on large headings (≈ −0.022em), weights 400/510/590. Small radius (6–8px), thin 1px borders (#23252a) and subtle background tonal steps instead of heavy shadows, soft shadows only on floating menus/popovers/toasts, a low-opacity indigo aurora glow behind the hero, and a backdrop-blurred sticky nav. Lime/green/red/cyan are status/chart signals only. Motion is smooth, quick, restrained. Author light mode as a clean white counterpart that keeps the same indigo brand.
## Known Gaps / Confidence
Colors (dark), typography, and radius are `computed-css` from a Playwright computed-style walk of linear.app. Color *role* assignment, taxonomy, motion, layout, and effects are `vision-inferred` from the screenshots. The entire light theme is synthesized (`vision-inferred`) — Linear has no light mode — so treat it as a tasteful reconstruction, not a measurement. `card`/`popover`/`secondary`/`muted` dark surfaces are interpolated one-step-up neutrals grounded in the measured background and borders. The measured sans stack begins with "Inter Variable"; the token uses a clean "Inter"-led stack for portability.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Linear Dark — theme.css (generated, do not edit) */
:root {
--radius: 8px;
--radius-selector: 6px;
--radius-field: 6px;
--font-sans: "Inter", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
--font-display: "Inter", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--spacing: 8px;
--shadow: 0px 8px 16px -4px color-mix(in oklab, oklch(0 0 0) 40%, transparent);
--ks-display-weight: 510;
--ks-display-tracking: -0.022em;
--background: oklch(0.994 0.001 250);
--foreground: oklch(0.205 0.008 262);
--card: oklch(1 0 0);
--card-foreground: oklch(0.205 0.008 262);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.205 0.008 262);
--primary: oklch(0.567 0.159 275.2);
--primary-foreground: oklch(0.99 0.002 250);
--secondary: oklch(0.965 0.004 258);
--secondary-foreground: oklch(0.28 0.01 262);
--muted: oklch(0.97 0.003 258);
--muted-foreground: oklch(0.505 0.012 261.8);
--accent: oklch(0.567 0.159 275.2);
--accent-foreground: oklch(0.99 0.002 250);
--destructive: oklch(0.585 0.207 23.3);
--destructive-foreground: oklch(0.99 0.002 250);
--border: oklch(0.915 0.004 258);
--input: oklch(0.915 0.004 258);
--ring: oklch(0.567 0.159 275.2);
--chart-1: oklch(0.567 0.159 275.2);
--chart-2: oklch(0.78 0.16 110);
--chart-3: oklch(0.60 0.16 146.7);
--chart-4: oklch(0.585 0.207 23.3);
--chart-5: oklch(0.62 0.115 220);
}
.dark {
--background: oklch(0.139 0.003 246.3);
--foreground: oklch(0.978 0.001 197.1);
--card: oklch(0.168 0.004 250);
--card-foreground: oklch(0.978 0.001 197.1);
--popover: oklch(0.185 0.005 252);
--popover-foreground: oklch(0.978 0.001 197.1);
--primary: oklch(0.567 0.159 275.2);
--primary-foreground: oklch(0.985 0.001 197.1);
--secondary: oklch(0.216 0.006 252);
--secondary-foreground: oklch(0.874 0.015 260.7);
--muted: oklch(0.205 0.005 250);
--muted-foreground: oklch(0.649 0.015 262.4);
--accent: oklch(0.567 0.159 275.2);
--accent-foreground: oklch(0.985 0.001 197.1);
--destructive: oklch(0.655 0.201 23.3);
--destructive-foreground: oklch(0.985 0.001 197.1);
--border: oklch(0.264 0.010 268.3);
--input: oklch(0.30 0.008 258);
--ring: oklch(0.567 0.159 275.2);
--chart-1: oklch(0.567 0.159 275.2);
--chart-2: oklch(0.920 0.201 114.0);
--chart-3: oklch(0.637 0.175 146.7);
--chart-4: oklch(0.655 0.201 23.3);
--chart-5: oklch(0.716 0.123 208.5);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
New · Coding Sessions
The product development system for teams and agents
Purpose-built for planning and building products. Designed for the AI era.
"You'll probably build a better product, just because of the craft that using Linear infuses in your brain."
Gabriel Rose · Product
"Our speed is intense and Linear helps us be action biased."
Bill Robbins · Engineering
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/linear.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `