# 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.