--- version: alpha name: "linear.app" description: "Design system extracted from https://linear.app/ on 2026-10-28" colors: background: "#08090a" surface: "#101112" surface-2: "#1c1d1e" surface-3: "#07220a" foreground: "#f7f8f8" muted-foreground: "#8a8f98" primary: "#e5e5e6" on-primary: "#111111" secondary: "#5e6ad2" border: "#1c1d1e" typography: headline-display: fontFamily: "Inter Variable" fontSize: "64px" fontWeight: 510 lineHeight: "64px" letterSpacing: "-1.408px" headline-lg: fontFamily: "Inter Variable" fontSize: "48px" fontWeight: 510 lineHeight: "48px" letterSpacing: "-1.056px" headline-md: fontFamily: "Inter Variable" fontSize: "13px" fontWeight: 510 lineHeight: "19.5px" letterSpacing: "-0.13px" body-md: fontFamily: "Inter Variable" fontSize: "24px" fontWeight: 400 lineHeight: "31.92px" letterSpacing: "-0.288px" label-md: fontFamily: "Inter Variable" fontSize: "12px" fontWeight: 400 lineHeight: "1.17" button: fontFamily: "Inter Variable" fontSize: "15px" fontWeight: 400 lineHeight: "24px" letterSpacing: "-0.165px" code: fontFamily: "Berkeley Mono" fontSize: "14px" fontWeight: 400 lineHeight: "24px" rounded: none: "0px" full: "9999px" lg: "12px" sm: "4px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "20px" 6: "24px" 7: "28px" 8: "32px" 9: "36px" 10: "48px" components: button-ghost: backgroundColor: "#08090a" textColor: "#8a8f98" typography: "{typography.button}" rounded: "9999px" height: "32px" padding: "0px 12px" button-primary: backgroundColor: "{colors.primary}" textColor: "#08090a" typography: "{typography.button}" rounded: "9999px" height: "32px" padding: "0px 12px" button-secondary: backgroundColor: "#ffffff03" textColor: "#d0d6e0" typography: "{typography.button}" rounded: "16px" height: "24px" padding: "0px 11px" card: backgroundColor: "#0f1011" rounded: "12px" padding: "0px" --- # linear.app ## Overview Linear – The system for product development: Purpose-built for planning and building products with AI agents. Pill-shaped controls, layered shadows for depth, large display type at 64px / 510, a single neutral accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 4535 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-symbol.png`: possible standalone brand symbol - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture - `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `screenshots/desktop-1440-light.png`: Desktop 1440, light mode - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png - `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("Linear Agent +"), rest - `screenshots/c-button-1--focus.png`: Button 1 ("Linear Agent +"), focus - `screenshots/c-button-1--active.png`: Button 1 ("Linear Agent +"), active - `screenshots/c-button-1--disabled.png`: Button 1 ("Linear Agent +"), disabled - `screenshots/c-link-1--rest.png`: Text link 1 ("NewLoops →"), rest - `screenshots/c-link-1--focus.png`: Text link 1 ("NewLoops →"), focus - `screenshots/c-link-1--active.png`: Text link 1 ("NewLoops →"), active - `screenshots/c-textarea-1--rest.png`: Textarea 1 ("import React from 'react"), rest - `screenshots/c-textarea-1--focus.png`: Textarea 1 ("import React from 'react"), focus - `screenshots/c-textarea-1--disabled.png`: Textarea 1 ("import React from 'react"), disabled - `screenshots/c-textarea-1--filled.png`: Textarea 1 ("import React from 'react"), filled - `screenshots/c-combobox-1--rest.png`: Combobox / custom select 1 ("Linear"), rest - `screenshots/c-combobox-1--focus.png`: Combobox / custom select 1 ("Linear"), focus - `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by combobox "Linear" - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Customers"), rest - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Customers"), focus - `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Product"), rest - `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Product"), hover - `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("Product"), clicked - `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Intake"), rest - `screenshots/c-tooltip-1--rest.png`: Tooltip 1 ("Log in"), rest - `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("Opus 5.5"), rest - `screenshots/c-avatar-1--rest.png`: Avatar 1, rest - `screenshots/c-code-1--rest.png`: Code block / inline code 1 ("import React from 'react"), rest - `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest - `screenshots/c-icon-button-2--focus.png`: Icon button 2, focus - `screenshots/c-icon-button-2--active.png`: Icon button 2, active - `screenshots/c-icon-button-2--disabled.png`: Icon button 2, disabled - `screenshots/c-menu-button-2--rest.png`: Menu / dropdown trigger 2 ("Linear"), rest - `screenshots/c-overlay-dropdown-menu-2--open.png`: Dropdown menu 2 opened by menu-button "Linear" - `screenshots/c-badge-2--rest.png`: Badge / pill / tag 2 ("vehicle_state"), rest ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#08090a` | Page background | | surface | `#101112` | Cards, panels, raised or recessed surfaces | | surface-2 | `#1c1d1e` | Secondary surface | | surface-3 | `#07220a` | Secondary surface | | foreground | `#f7f8f8` | Primary text | | muted-foreground | `#8a8f98` | Secondary text, captions | | primary | `#e5e5e6` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#111111` | Text on the accent | | secondary | `#5e6ad2` | Secondary accent (violet) | | border | `#1c1d1e` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#08090a`, `#101112`, `#e4f222`, `#1c1d1e`, `#07220a`, `#e5e5e6`, `#000000`, `#260809`. Gradients in use: `radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%), linear-gradient(rgb(8, 9, 10) 10%, rgb(208, 214, 224) 100%)`; `radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%)`; `linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), none`. The accent `#e5e5e6` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **Inter Variable** for h1, h2, h3, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. - **Berkeley Mono** for code: self-hosted webfont; verify availability and permission; **JetBrains Mono** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | Inter Variable | 64px | 510 | 64px | -1.408px | | headline-lg | Inter Variable | 48px | 510 | 48px | -1.056px | | headline-md | Inter Variable | 13px | 510 | 19.5px | -0.13px | | body-md | Inter Variable | 24px | 400 | 31.92px | -0.288px | | label-md | Inter Variable | 12px | 400 | 1.17 | normal | | button | Inter Variable | 15px | 400 | 24px | -0.165px | | code | Berkeley Mono | 14px | 400 | 24px | normal | Type scale in use: 10px, 11px, 12px, 13px, 14px, 15px, 16px, 20px, 24px, 48px, 64px, 72px. Base body size 24px. The hero heading (h1) renders at 64px / 510, start aligned, up to 1282px wide, tracking -1.408px. Sample: "The product development system for teams and agentsThe product developmentsystem". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 28, 32, 36, 48 (px). - Flex and grid gaps: 4, 8, 12, 16 px. - Content max width: 1344px, centred. - Breakpoints: 640px, 768px, 928px, 1024px, 1280px. - Header: 73px tall, fixed, backdrop blur, background `rgba(0, 0, 0, 0)`, bottom hairline 1px solid rgba(255, 255, 255, 0.08); 7 nav links at 16px / 400 (Customers · Pricing · Now · Contact · Log in · Sign up). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px` - shadow-2: `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset` - shadow-3: `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px` - shadow-4: `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset` ## Shapes - Buttons: 9999px - Inputs: 0px - Cards and panels: 12px - Images and media: 9999px - Radius scale: none 0px, full 9999px, lg 12px, sm 4px ## Components ### Button, ghost Background transparent (it sits on `#08090a`, so place it on that colour), text `#8a8f98`, border none, radius 9999px, height 32px, padding 0px 12px, 13px / 400. Sample label: "Product". ### Button, primary Background `#e5e5e6`, text `#08090a`, border 1px solid #e5e5e6, radius 9999px, height 32px, padding 0px 12px, 13px / 510, shadow `rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px`. Sample label: "Sign up". ### Button, secondary Background transparent (it sits on `#ffffff03`, so place it on that colour), text `#d0d6e0`, border 1px solid #2e2e32, radius 16px, height 24px, padding 0px 11px, 12px / 400. Sample label: "Performance". ### Card Background `#0f1011`, border 1px solid #ffffff1f, radius 12px, padding 0px, shadow `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`. Typical size about 400×560px. ### Link Colour `#8a8f98`, no underline at rest, weight 400. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (24 of 87 in the checklist, 48 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 17 state changes, 2 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | ghost, ghost-with-icon, ghost-with-icon lg, ghost-with-icon, outline, secondary, filled-with-icon, success-with-icon lg | focus, active, disabled | "Linear Agent +" | | Icon button | ghost, ghost, ghost, ghost | focus, active, disabled | | | Text link | plain | focus, active | "NewLoops →" | | Text input | filled-icon-right | rest only | | | Textarea | outlined | focus, disabled, filled | "import React from 'react' impo" | | Combobox / custom select | outlined lg | focus, open | "Linear" | | Header / navbar | default | rest only | "ProductResourcesCustomersPrici" | | Navigation link | plain | focus | "Customers" | | Menu / dropdown trigger | ghost, ghost | hover, open | "Product" | | Footer | default | rest only | "ProductIntakePlanAIBuildPricin" | | Footer link | plain | rest only | "Intake" | | Tooltip | default | rest only | "Log in" | | Badge / pill / tag | neutral-square, inverse-square, inverse-square | rest only | "Opus 5.5" | | Card | outlined, elevated-with-media, elevated-with-media, elevated-with-media, outlined, elevated | rest only | "ENG-2085Reduce UI flicker duri" | | Avatar | 16px-rounded, 24px-rounded, 16px-round | rest only | | | Avatar stack | default | rest only | | | Code block / inline code | block | rest only | "import React from 'react'impor" | | Image / figure | aspect-1.79, aspect-1.84-rounded, aspect-2.41-rounded | rest only | | | Icon | filled-14px, filled-14px, filled-14px | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Select (native), Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Divider, Keyboard key, Blockquote, Video / media embed, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar. ## Dark Mode Both themes exist; the default render is dark and the light theme was reached via data-theme=light. Token pairs, light → dark: | Token | Light | Dark | | --- | --- | --- | | background | `#ffffff` | `#08090a` | | surface | `#feedee` | `#101112` | | surface-2 | `#e6ffe6` | `#1c1d1e` | | foreground | `#282a30` | `#f7f8f8` | | muted-foreground | `#6f6e77` | `#8a8f98` | | primary | `#282a30` | `#e5e5e6` | | on-primary | `#ffffff` | `#111111` | | secondary | `#eb5757` | `#5e6ad2` | | border | `#ebebeb` | `#1c1d1e` | Light-theme shadows: `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`; `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset`; `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`; `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset` ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 1344px | 78px | 16px | 64px, 2 lines, start | 73px, 6 links, 1 CTA | text only | 2→2 col; 2→1 col; 2→1 col | content-width | | laptop 1024px | 968px | 34px | 16px | 56px, 2 lines, start | 73px, 5 links, 1 CTA | text only | 2→2 col; 2→1 col; 2→1 col | content-width | | tablet 768px | 712px | 34px | 16px | 56px, 2 lines, start | 73px, hamburger (icon), 1 CTA | text only | 2→2 col; 2→1 col; 2→1 col | content-width | | phone 390px | 358px | 23px | 16px | 38px, 4 lines, start | 65px, hamburger (icon), 1 CTA | text only | 2→2 col; 2→1 col; 3→3 col | content-width | - H1 goes 64px → 38px (59%), 2 → 4 lines. - Nav collapses to a hamburger by 390px (first seen at 768px); header 73px → 65px. - Body text is 16px at the sampled desktop and phone widths. - Phone side gutter 23px. ## Interaction & Motion 394 elements carry transitions; typical 0.1s with cubic-bezier(0.25, 0.46, 0.45, 0.94), mostly on color, transform, filter. 10 running keyframe animations (fFDhtq_dotIn 0.42s 1; -VOcTG_agentLabelSweep 2s 1; grid-dot-0-0-upDown 2.8s infinite). - Hover on button-primary ("Sign up"): no visible change; cursor pointer; transition border, background-color, color, box-shadow, opacity, filter, transform | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94). - Hover on button-secondary: no visible change; cursor default. - Hover on nav-link ("Customers"): no visible change; cursor pointer; transition color, background | 0.1s | cubic-bezier(0.25, 0.46, 0.45, 0.94). - Hover on body-link ("NewLoops →"): no visible change; cursor pointer; transition filter | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94). - Focus on button-primary: outline 1px solid rgb(94, 105, 209), offset 2px. - Focus on body-link: outline 1px solid rgb(94, 105, 209), offset 2px. - No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding. - Hover/click menus: below the trigger, 12px gap, shifted right; #08090ae6, radius 14px, padding 0px 0px, shadow yes; 18 items, 206px tall, 16px, padding 0px 0px, with descriptions, 2 columns; fades in (opacity 0.64 at 40ms → 1.00); hides within 400ms of leaving (transition or unmount). - 5 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe). Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#e5e5e6` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 24px in Inter Variable. - Do match corner radii per element class (buttons 9999px, cards 12px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette. - Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.