Linear

# DESIGN.md: Linear style

Build every screen in this project to this specification. It records the interface of Linear (https://linear.app),
captured 2026-11-13 at 1440, 768, 390 px. Reproduce the system, not the brand:
do not copy Linear's logo, name, copy, illustrations or photos.

A near-black canvas where four greys and 1px hairlines do all the work: dense 13px interface type, pill controls and a single light button.

Theme: dark. Category: marketing-site.

## Principles

- Paint everything on #08090a. Separate regions with 1px #23252a hairlines and faint white overlays, never with card backgrounds plus drop shadows.
- Build hierarchy from the four text greys before reaching for size: #f7f8f8, #d0d6e0, #8a8f98, #62666d.
- Use weight 510 for emphasis and 590 for the strongest labels. Do not use 600 or 700.
- Interface text is 13px, body is 15px. Large type is reserved for one headline per section.
- Align to the left edge of the column. Put the headline in the left half and its paragraph in the right half.
- Every control is a pill. One light primary button per view; all other actions use the overlay fill or plain text.
- Colour is information, not decoration: indigo for selection, green, red and blue for status.
- Show the real product interface as the imagery, inside a 12px-radius panel with a 1px edge.

## Avoid

- Coloured or gradient call-to-action buttons
- Centred hero text
- Cards with visible drop shadows on the canvas
- Borders lighter than #3e3e44
- Bold (700) headings
- Decorative icons, emoji and illustration that is not product interface

## Color

### Background

| Name | Value | Use |
| --- | --- | --- |
| canvas | #08090a | Page background, everywhere |
| panel | #0f1011 | Product frames, menus and app-window surfaces |
| raised | #1c1c1f | Raised rows and message bubbles inside a panel |
| elevated | #23252a | Highest surface: selected rows, key caps |
| overlay-subtle | #ffffff0d | Secondary button fill, hovered nav item |
| overlay-strong | #ffffff14 | Chips, badges, pressed controls |
| inverse | #e5e5e6 | Primary button fill |

### Text

| Name | Value | Use |
| --- | --- | --- |
| primary | #f7f8f8 | Headlines, active nav item, button labels on dark |
| secondary | #d0d6e0 | Body copy and list text |
| tertiary | #8a8f98 | Nav links, descriptions, table row labels |
| quaternary | #62666d | Footer links, group labels, timestamps |
| on-inverse | #08090a | Label on the primary button |

### Border

| Name | Value | Use |
| --- | --- | --- |
| hairline | #23252a | 1px dividers: header bottom edge, column and row rules, panel edges |
| control | #3e3e44 | 1px ring around inputs and outlined controls |

### Accent

| Name | Value | Use |
| --- | --- | --- |
| indigo | #5e6ad2 | Switch track when on, selection. Never a button fill |
| focus-ring | #5e69d1 | 1px solid outline, 2px offset, on every focusable element |

### Semantic

| Name | Value | Use |
| --- | --- | --- |
| success | #27a644 | Done and on-track status |
| danger | #eb5757 | Destructive and at-risk status |
| info | #4ea7fc | In-progress status and links inside product frames |

### Light auth palette

Applies to: Log in and sign up screens, which are light while the rest of the site is dark

| Name | Value | Use |
| --- | --- | --- |
| canvas | #f8f8f9 | Page and input background |
| text | #2f2f31 | Titles, button labels, links |
| text-input | #1b1b1b | Typed text |
| text-hover | #656567 | Link hover |
| primary | #6d78d5 | Primary button fill and focus ring |
| primary-hover | #5e69c1 | Primary button hover and pressed |
| on-primary | #fefeff | Primary button label, secondary button fill |
| secondary-hover | #f3f3f3 | Secondary button hover, and its fill while the field above it is empty |
| field-border | #d2d2d2 | 1px input border |
| field-border-hover | #bbbbbb | Input border on hover |

## Typography

| Role | Stack | Substitute | Source |
| --- | --- | --- | --- |
| sans | "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-feature-settings: "cv01", "ss03" | Inter Variable (the variable axis is required for weights 510 and 590) | fontsource |
| mono | "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace | JetBrains Mono (Berkeley Mono is a paid face) | google-fonts |

| Name | Size | Weight | Line height | Tracking | Family | Use |
| --- | --- | --- | --- | --- | --- | --- |
| display | 64px | 510 | 1.06 | -0.022em | sans | Home hero headline, two lines |
| title-1 | 48px | 510 | 1 | -0.022em | sans | Page titles and section headlines |
| title-2 | 32px | 510 | 1.125 | -0.022em | sans | Changelog entry titles |
| title-3 | 24px | 590 | 1.33 | -0.012em | sans | Plan names, table group headings |
| title-4 | 20px | 510 | 1.33 | -0.012em | sans | Card headings |
| intro | 24px | 400 | 1.33 | -0.012em | sans | The paragraph beside a section headline |
| auth-title | 18px | 500 |  |  | sans | Title on log in and sign up screens |
| lead | 17px | 400 | 1.6 | 0 | sans | Long-form reading text (changelog) |
| body | 15px | 400 | 1.6 | -0.011em | sans | Default paragraph text |
| body-strong | 15px | 510 | 1.6 | -0.011em | sans | Disclosure row labels |
| ui | 13px | 400 | 1.5 | -0.01em | sans | Navigation, list items, menu descriptions |
| ui-strong | 13px | 510 | 1.5 | -0.01em | sans | Button labels, sidebar items, menu item titles |
| caption | 12px | 510 | 1.4 | 0 | sans | Sidebar group labels, tags |
| micro | 10px | 400 | 1.5 | -0.015em | sans | Chart axis labels, tiny badges |
| code | 14px | 400 | 24px |  | mono | Code blocks, issue identifiers, inline code |

## Spacing

- Unit: 4px
- Scale: 2px, 4px, 6px, 8px, 12px, 14px, 16px, 20px, 24px, 32px, 48px, 56px
- Container max width: 1344px, with text aligned to an inner 1280px column
- Page gutter: 48px desktop, 16px (text starts at 24px) mobile
- Gap between sections: 128px top and bottom at 1440, 48px top and 96px bottom at 768

## Radius

| Name | Value | Use |
| --- | --- | --- |
| 4 | 4px | Inline code, small badges, focus outline on text links |
| 6 | 6px | Logo link, small rows |
| 8 | 8px | Sidebar items, menu items, message bubbles |
| auth-field | 10px | Inputs on auth screens |
| 12 | 12px | Panels, app-window frames, menus |
| 16 | 16px | The outer frame around a product screenshot |
| 24 | 24px | Large feature cards |
| rounded | 9999px | Every button, nav item and chip |

## Shadow

| Name | Value | Use |
| --- | --- | --- |
| ring | rgb(62, 62, 68) 0px 0px 0px 1px | Outline of inputs and outlined controls, used instead of border |
| ring-inset | rgb(35, 37, 42) 0px 0px 0px 1px inset | Panel edge |
| highlight | rgba(255, 255, 255, 0.08) 0px 0px 0px 0.5px inset | Half-pixel top light on raised surfaces |
| button | rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px | Dark raised buttons inside product frames |
| popover | rgba(0, 0, 0, 0.25) 0px 2px 32px 0px | Menus and floating windows |

## Layout

- **Header:** 72px tall, fixed, canvas background with a 20px backdrop blur, 1px hairline below. Logo at the left edge of the 1280px column; nav links, a 1px vertical divider, Log in and the Sign up pill grouped at the right edge.
- **Hero:** Left-aligned. Two-line 64px headline, then one 15px tertiary sentence on the left with a small announcement link on the same line at the right edge. A product-window frame follows, wider than the text column (1344px) and running off the bottom of the fold.
- **Split section intro:** Headline (48px) in the left half, paragraph in the right half starting at the 50% line, with a text link and arrow under it. Nothing is centred.
- **Ruled columns:** Plans and feature columns sit side by side with 1px vertical hairlines between them and no card backgrounds. Each column has 32px inner padding.
- **Comparison table:** 44px rows. Row label in tertiary text in a 416px first column, then one column per plan with a 1px left rule, a filled check or a thin cross at 16px. Group headings in 24px with 56px of space above.
- **Standard page:** Pages other than home use a 1024px max width with 24px inline padding and 64px block padding, on a 12-column grid.
- **Reading column:** Long-form pages use a single 624px column.
- **Footer:** Five link columns on canvas, quaternary 13px links, no background change.

Responsive: At 768 the gutter is 28px and split sections stack. At 390 the header is 64px with Log in, Sign up and a two-line menu icon; the hero headline wraps to four lines; plan columns stack to one; product frames keep their size and scroll off the right edge instead of shrinking.

## Components

### Button, primary

Pill with a centred label, no icon.

- height: 32px in the header, 40px default, 44px in heroes
- padding: 0 12px at 32px, 0 14px at 40px, 0 20px at 44px
- radius: 9999px
- background: #e5e5e6
- color: #08090a
- font: 13px/510 at 32px and 40px, 16px/510 at 44px
- transition: border, background-color, color, box-shadow, opacity, filter 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)
- State hover: background #ffffff
- State active: background #ffffff, transform scale(0.97)
- State focus-visible: outline 1px solid #5e69d1, offset 2px

One per view. It is the only light surface on the page.

### Button, secondary

Same pill as primary on a faint white overlay.

- height: 40px default, 44px in heroes
- radius: 9999px
- background: #ffffff0d
- color: #f7f8f8
- font: 13px/510 at 40px, 16px/510 at 44px
- padding: 0 14px at 40px, 0 20px at 44px
- transition: border, background-color, color, box-shadow, opacity, filter 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)
- State hover: background #191a1b
- State active: background #191a1b, transform scale(0.97)
- State focus-visible: outline 1px solid #5e69d1, offset 2px

Full width when it closes a plan column.

### Nav link

Text-only pill in the header.

- height: 32px
- padding: 0 12px
- radius: 9999px
- color: #8a8f98
- font: 13px/400
- gap between links: 0
- transition: color, background 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94)
- State hover: color #f7f8f8, background #ffffff14
- State current page: color #f7f8f8
- State menu open: color #f7f8f8, background #ffffff14
- State focus-visible: outline 1px solid #5e69d1, offset 2px

### Mega menu

Outer panel flush under the header, right-aligned to the content column, holding an inner bordered panel of three columns and a footer row.

- width: about 860px
- outer radius: 16px
- inner radius: 12px
- background: #0f1011
- border: 1px #23252a
- columns: 3, separated by 1px vertical hairlines, 28px padding
- item title: 13px/510 #f7f8f8
- item description: 13px/400 #8a8f98, two lines
- footer row: label in #f7f8f8 plus text in #8a8f98 on the left, text link with arrow on the right

### Plan column

Plan name, price line, hairline, billing line with a switch, hairline, checklist, then buttons pinned to the bottom so all columns end level.

- name: 24px/590 #f7f8f8
- price: 15px, amount in #f7f8f8 and period in #8a8f98
- checklist row: 13px #d0d6e0 with a 16px filled check, 35px row pitch
- button: 40px pill, full column width
- billing label: 14px/400, line height 21px

### Switch

Small pill track with a round thumb, label to the right.

- track: 32px by 18px, #5e6ad2 when on
- thumb: 14px circle, #ffffff
- label: 14px/400 #8a8f98, 8px from the track

### Sidebar item

16px icon and a label in a full-width row; groups have a small collapsible label.

- height: 28px
- width: 208px
- font: 13px/510
- color: #d0d6e0
- group label: 24px tall, 12px/510 #62666d
- padding: 0 7px
- radius: 8px
- State hover: background rgba(255, 255, 255, 0.02)
- State selected: background rgba(255, 255, 255, 0.04)
- State focus-visible: outline 1px solid #5e69d1, offset 2px

### Disclosure row

Full-width button with a label, used for collapsible lists in long-form pages.

- height: 56px
- width: 624px
- font: 15px/510
- color: #f7f8f8
- divider: 1px #23252a between rows
- State expanded: content appears below in 17px/400

### Text link with arrow

Label followed by a thin right arrow, no underline.

- height: 24px
- font: 16px/400
- color: #8a8f98 for quiet links, #f7f8f8 for prominent ones
- transition: filter 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)
- State hover: filter brightness(1.3)
- State active: filter brightness(1.6)
- State focus-visible: outline 1px solid #5e69d1, offset 2px, radius 4px

### Icon button

Round 28px button holding one 16px icon, used in app-window toolbars.

- size: 28px
- radius: 9999px
- color: #8a8f98
- background: rgba(255, 255, 255, 0.02) or transparent
- transition: background, color 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)
- State hover: color #d0d6e0, background rgba(255, 255, 255, 0.05)
- State focus-visible: outline 1px solid #5e69d1, offset 2px

### Auth button

Full-width pill in the 288px auth column. The first option is filled, the rest are white.

- height: 44px
- width: 288px
- radius: 9999px
- font: 13px/500
- primary: background #6d78d5, label #fefeff, shadow rgba(0, 0, 0, 0.02) 0px 3px 6px -2px plus a second soft layer
- secondary: background #fefeff, label #2f2f31, 1px edge at about 12% black (sampled from the screenshot; the computed border colour reads transparent)
- gap between buttons: 16px
- padding: 0 18px
- State hover (primary): background #5e69c1
- State hover (secondary): background #f3f3f3
- State focus-visible: outline 1px solid #6d78d5, offset 2px on primary and 0 on secondary

### Auth field

Single-line input, same footprint as an auth button, no visible label; the screen title asks the question.

- height: 44px
- width: 288px
- radius: 10px
- border: 1px #d2d2d2
- background: #f8f8f9
- font: 13px, text #1b1b1b
- padding: 0 12px
- attributes: type=email, autocomplete=off, autofocus, placeholder ends with an ellipsis
- State hover: border #bbbbbb
- State focus: border #6d78d5
- State invalid: native browser validation bubble; no custom inline message

### Footer link

Plain text link in a footer column.

- font: 13px/400
- line height: 19.5px
- color: #62666d
- transition: color 0.1s ease
- State hover: color #8a8f98
- State focus-visible: outline 1px solid #5e69d1, offset 2px

### Mobile menu

Full-screen panel under the header with grouped links.

- position: fixed, from the bottom of the header to the bottom of the screen
- background: rgba(11,11,11,0.8) with backdrop blur 20px
- padding: 32px 24px
- group label: 14px/21px 510 #8a8f98
- link: 24px/31.92px 510 #f7f8f8
- State open: opacity fades in over 0.16s cubic-bezier(0.25,0.46,0.45,0.94); the burger turns into a close icon

### Integration card

Card with a 40px logo, name, 'By' line with a verified mark, and two lines of text at the bottom.

- size: 304 x 168px (148px tall on phones)
- padding: 20px
- radius: 12px
- background: #0f1011
- border: 1px rgba(255,255,255,0.05)
- name: 15px/15px 510
- by line: 12px/12px #8a8f98
- text: 14px/23.8px #8a8f98, clamped to two lines
- transition: background 0.08s, border-color 0.08s
- State hover: background #141516

### Docs card

Card with an icon area on top and a text panel at the bottom behind a 1px line.

- height: 280px
- radius: 8px
- background: rgba(255,255,255,0.05)
- border: 1px rgba(255,255,255,0.05)
- title: 15px/24px 510
- text: 14px/21px #8a8f98
- transition: background-color 0.15s, border-color 0.15s
- State hover: background #232326, border #34343a

### Docs sidebar item

Row with a 16px icon and a label.

- height: 32px
- font: 13px
- color: #8a8f98
- transition: none
- State hover: color #d0d6e0

### Row pill

Small pill action at the end of a list row (Download, Open, Open store).

- height: 24px
- radius: 9999px
- font: 12px/24px 510
- background: rgba(255,255,255,0.05)
- color: #f7f8f8
- transition: border, background-color, color 0.16s cubic-bezier(0.25,0.46,0.45,0.94)
- State hover: background #191a1b
- State quiet variant: #08090a fill, 1px #1c1c1f border, #8a8f98 text; hover #232326 fill and border, #f7f8f8 text

### Contact card

Panel card with a title, text and a link at the bottom.

- size: 432 x 232px
- radius: 8px
- background: #0f1011
- border: 1px rgba(255,255,255,0.05)
- title: 20px/28px 510
- text: 15px/24px #8a8f98
- State hover: not observed on the card itself; the link inside brightens (filter brightness(1.3), 0.2s cubic-bezier(0.165,0.84,0.44,1))

### Search pill

Pill button with a search icon, placeholder and a key hint.

- height: 40px (32px in the changelog)
- width: 224px (280px in the changelog)
- radius: 100px
- background: #141516
- color: #8a8f98
- font: 14px
- State hover: not observed
- State open: not observed (opening the search was not tested)

### Filter link

Plain text tab in a row of filters.

- font: 16px/24px
- color: #8a8f98
- gap: 16px
- transition: color 0.1s cubic-bezier(0.25,0.46,0.45,0.94)
- State current: color #f7f8f8
- State hover: color #f7f8f8

## Page templates

Every page of the site is built on one of these layouts. Pick the one that fits the page you are building.

### Home

The front page: one big claim, a product shot and a run of feature chapters that sell the whole product.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Hero: 199px from the header, h1 64px/64px 510 (40px/44px on phones) on two lines, one 15px/24px #8a8f98 line, primary 40px pill plus a text link.
3. Product shot: full container width (1344px), 804px tall, 12px radius, 1px rgba(255,255,255,0.08) border.
4. Logo strip 112px below the shot, then a 24px/31.92px statement and three pillars with art.
5. Four feature chapters on a two-column split (calc(50% + 32px) / 1fr): h2 48px/48px 510 left, 15px/24px text right, media 605-619px tall, then a three-column feature row (calc(50% + 32px) / 304px / 1fr).
6. Changelog teaser: dated entries on a horizontal timeline.
7. Quotes: an 880px and a 432px card side by side with 8px gap, 480px tall; a carousel of 320 x 360px cards on phones.
8. Closing call to action: 224px top and bottom padding (99/96px on phones), 72px/72px 510 title (38px/41.8px on phones), primary and secondary 40px pills.
9. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /, /homepage

### Product area

One product area (plan, build, intake, reviews, the helper page): a long scroll of numbered chapters with large media.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Hero: 774px tall, small 15px label, h1 72px/72px 500 on two lines, 15px/24px lead.
3. Six chapters: a 1013px wide figure, then bordered two-column grids of cells 596-597px tall with 1px #23252a lines; one chapter puts a 672 x 720px media beside its text; one chapter switches media with tabs.
4. Sibling areas: four cards linking to the other product areas.
5. Quotes and proof line as on the home page.
6. Closing call to action: 224px top and bottom padding (99/96px on phones), 72px/72px 510 title (38px/41.8px on phones), primary and secondary 40px pills.
7. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /ai, /plan, /build, /intake, /reviews

### Feature page

A single feature or audience page (insights, security, enterprise, startups, mobile): narrower than the product areas, with use cases and a spec list.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Hero in a 976px column with a 449px art block.
3. Text and media pairs, a single quote, a 566px dashboard media.
4. Use case cards 320 x 240px.
5. Logo marquee: one row scrolling left on a 60s linear loop.
6. Spec list: 9 rows of 57px with 1px #23252a lines, title left and text right.
7. Inline call to action band, then the footer.
8. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /insights, /coding-agent, /customer-requests, /asks, /enterprise, /security, /startups, /agents, /mobile

### Pricing

Plans and the full comparison table.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Title 48px/48px 510 and a 15px/24px lead.
3. Four plan columns 551px tall split by 1px lines; Basic and Business carry a 'Billed yearly' switch; each column ends in a 40px pill.
4. Logo strip.
5. Comparison table: sticky header row with plan names and buttons, rows 44px, group rows with 43/41px padding and a 15px/510 title; on phones one plan shows at a time, picked with a select.
6. Note line, then the closing call to action with 262px top padding (102px on phones).
7. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /pricing

### Company

About, careers, method, quality and switch: a statement page built from split sections and lists.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Statement hero: 199px top padding (91px on phones), 64px/64px 510 title on two lines, 15px/24px text 24px below.
3. Film: 1342 x 755px media, 8px radius (218px on phones).
4. Split sections: h2 48px/48px 510 on the left, a 24px/31.92px intro and 15px/24px paragraphs in a 544px column on the right.
5. People: a four-column grid of 328px cards (269px photo, name 15px/510, role 13px #8a8f98); a four-column name list in 15px #8a8f98 rows 25px tall with 14px gaps.
6. Backers: two fund cards 211px tall, then a two-column list of 20 people with 24px row gap.
7. Closing call to action: 224px top and bottom padding (99/96px on phones), 72px/72px 510 title (38px/41.8px on phones), primary and secondary 40px pills.
8. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /about, /careers, /method, /quality, /switch

### Index

A browsable list of stories or posts: customers and the Now page.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Title 48px/48px 510 at 152px, filter links 16px/24px #8a8f98 (current #f7f8f8) 12px below, 16px apart, scrolling sideways on phones.
3. Card grid: three columns with 64px gaps and 1px #23252a lines between columns; cards 338px tall with a 216px image (6px radius), a 20px/26.6px 510 title and a 13px action link at the bottom.
4. Stats band: 384px lead plus three 223px stats with 65px gaps and 1px lines; values 48px/48px 510, labels 14px/21px.
5. Statement 48px/48px 510 with a #8a8f98 second sentence, then a directory of 56px rows with 1px lines: logo, name, note, tags, action.
6. Closing call to action: 224px top and bottom padding (99/96px on phones), 72px/72px 510 title (38px/41.8px on phones), primary and secondary 40px pills.
7. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /customers, /now

### Changelog

The release log: dated entries on a vertical rail.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Head: 'Now' title 48px, filter links, a 280px search pill and a bell icon button; a 1px rule below.
3. Entries: a 328px date column (dot on the rail, 13px date) and a 624px body; title 26px/36px 590, media 347-416px tall, prose 17px/27.2px, h3 24px sub-heads, then collapsible 56px rows (Fixes, Improvements, API).
4. Older updates: a secondary 40px pill.
5. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /changelog

### Post

One changelog or blog post.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Back link, meta row with the date and a Share button.
3. Title 26px/36px 590 in the 624px column, 416px media, prose 17px/27.2px, collapsible 56px rows.
4. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /changelog/2026-11-12-bring-your-own-key

### Legal text

Long policy documents: terms, privacy, DPA, acceptable use.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Document column 624px: title, a mono 13px date, two uppercase lead paragraphs.
3. Table of contents as an ordered list.
4. Numbered sections with hanging numbers, 15px/24px clauses.
5. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /dpa, /terms, /privacy, /legal/aup

### Hub

A short routing page that sends people to the right place: contact and the legal index.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Title 48px/48px 510 at 152px.
3. Three panel cards 432 x 232px, 16px apart, #0f1011 with a 1px rgba(255,255,255,0.05) border and 8px radius: 20px/28px 510 title, 15px/24px #8a8f98 text 64px lower, a 13px link with an arrow. On phones they lose the panel and stack with 1px lines.
4. Resource list: a 15px #62666d label in a 448px column, then two 384px columns with 64px gap and 48px row gap; each item has a 16px/590 title, 15px/24px text and a 16px link 24px below.
5. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /contact, /legal

### Docs

Documentation and developer home: an app shell instead of the marketing chrome.

1. Sidebar: fixed, 280px wide, full height, 1px #23252a right line; a 64px top bar with logo, a 1px divider, 'Docs' and a 32px round search button; grouped links (12px/16.8px 510 #8a8f98 group label 28px tall, 32px rows with a 16px icon and 13px label) in a scroll area that fades out at the bottom; four 36px area links (Docs, Developers, Learn, Contact support) pinned at the bottom under a 1px line.
2. Top bar: 64px with a 1px line, breadcrumb 14px/510 on the left, theme icon button and a 32px Sign up pill on the right.
3. Content: 976px column, 48px top padding, h1 40px/44px 590, 15px/24px #8a8f98 lead, h2 20px/26.6px 590 48px lower.
4. Card grid: four columns of 280px cards, 16px gaps, 20px wider than the text column on each side; rgba(255,255,255,0.05) fill and border, 8px radius; icon top left, text panel at the bottom behind a 1px line with a 15px/510 title and 14px/21px text.
5. Phones: a 64px bar with logo, Sign up and a 48px burger that opens the sidebar links; cards stack in one column, no site footer.

Pages on this layout: /docs, /developers

### Centered

Single-purpose pages built around one centred action: download and brand.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Hero: 164px app icon 59px below the header, h1 32px/36px 590 30px lower, a 17px/23.8px #d0d6e0 line, a 40px primary pill with a key hint and a 12px #62666d version line.
3. Ruled blocks in an 832px column: 1px rgba(255,255,255,0.05) top line, 32px top and 40px bottom padding, a 14px/21px lead on the left and a 360px list of 56px rows on the right (label with a 14px icon, 24px pill actions).
4. Phones: store buttons stack, the blocks become one column with the list indented 24px.
5. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /download, /brand

### Integrations

The integration directory: categories with a sticky side list.

1. Site header: sticky, 72px plus a 1px #23252a line (64px plus line below 640px), backdrop blur 20px over rgba(8,9,10,0.8); logo left, Product and Resources menus, Customers, Pricing, Now, Contact, a 1px divider, Log in, Sign up pill 32px; a burger replaces the links below 900px.
2. Head in a 1024px column (24px padding): h1 40px/44px 510 57px below the header, a 224 x 40px search pill with a key hint on the right; a 1px #18191a rule 56px lower.
3. Side list: 316px, sticky at 96px, 44px rows of 16px/24px #8a8f98 with an icon, current #f7f8f8.
4. Twelve category sections in a 640px column, 810px apart with a 1px #18191a line: 15px/24px 510 title and #8a8f98 text, then a two-column grid of 304 x 168px cards (32px gaps, #0f1011, 1px rgba(255,255,255,0.05), 12px radius; 40px logo, 15px/510 name, 12px 'By' line with a verified mark, two lines of 14px/23.8px text) and a 15px/510 #828fff 'Browse all' link.
5. Build block: 580px tall, a 640 x 440px art behind a centred 40px/44px 510 title, 15px/19.95px text and a 40px primary pill.
6. Phones: no side list or search, one column of 148px cards 16px apart.
7. Footer: 1px top line, logo mark plus five link columns (Product, Features, Company, Resources, Connect) on a 6 x 160px grid, 4 x 150px at 900px, 2 x 155px below 640px; links 13px/400 #8a8f98; legal row at the bottom.

Pages on this layout: /integrations

### Auth

Log in and sign up: a light, centred form with no site chrome.

1. Light palette (see color.alternate): centred logo and title, a stack of full-width provider buttons, then the email step with one field and a continue button; a small switch link between log in and sign up below.

Pages on this layout: /login, /signup

## Motion

Durations, easings and keyframes are measured values. Use them as written; honour `prefers-reduced-motion`.

### Durations

| Name | Value | Use |
| --- | --- | --- |
| quick | 0.1s | Colour and background on hover: nav links, inline links |
| highlight-out | 0.15s | A hover highlight fading out (fade in is instant, 0s) |
| control | 0.16s | Buttons and icon buttons: background, colour, filter, transform |
| link | 0.2s | Brightness on text links with an arrow |
| regular | 0.25s | Default for anything larger than a control |
| background-flash | 0.4s | Highlight behind changed code or text, ease-out |
| illustration | 0.7s | Transforms and strokes inside illustrations |

### Easings

| Name | Value | Use |
| --- | --- | --- |
| ease-out-quad | cubic-bezier(0.25, 0.46, 0.45, 0.94) | The default for every hover and press |
| ease-out-quart | cubic-bezier(0.165, 0.84, 0.44, 1) | Text links |
| ease-out-cubic | cubic-bezier(0.215, 0.61, 0.355, 1) | Part of the platform's easing set; where it is applied was not observed |
| ease-out-expo | cubic-bezier(0.19, 1, 0.22, 1) | Part of the platform's easing set; where it is applied was not observed |
| ease-in-out-cubic | cubic-bezier(0.645, 0.045, 0.355, 1) | Part of the platform's easing set; where it is applied was not observed |
| drawer | cubic-bezier(0.32, 0.72, 0, 1) | Illustration movement and bottom sheets |

### Transitions

| Target | Properties | Duration | Easing |
| --- | --- | --- | --- |
| Nav link | color, background | 0.1s | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| Inline link | color | 0.1s | ease |
| Button | border, background-color, color, box-shadow, opacity, filter | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| Button, pressed | transform to scale(0.97) | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| Chip button | filter, transform | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| Icon button | background, color | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| Text link with arrow | filter to brightness(1.3) | 0.2s | cubic-bezier(0.165, 0.84, 0.44, 1) |
| Disclosure chevron | transform | 0.15s | ease |
| Illustration parts | transform, stroke | 0.7s | cubic-bezier(0.32, 0.72, 0, 1) |
| Integration card | background, border-color | 0.08s | ease |
| Docs card | background-color, border-color | 0.15s | ease |
| Mobile menu | opacity | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94) |

### Keyframes

**tooltip-open:** Tooltips and context menus appear; closing runs it in reverse.

```css
@keyframes tooltip-open { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
```

**scale-in:** Navigation menu panel and dialogs appear; closing runs it in reverse.

```css
@keyframes scale-in { 0% { opacity: 0; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } }
```

**slide-from-right:** Menu content when moving to the next top-level item; mirrored for the previous one.

```css
@keyframes slide-from-right { 0% { transform: translateX(var(--anim-amount)); } 100% { transform: translate(0px); } }
```

**fade-in:** Mobile menu and overlays.

```css
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
```

**dialog-bounce:** A dialog that refuses to close nudges once.

```css
@keyframes dialog-bounce { 50% { transform: translate(-50%) scale(0.98); } }
```

**marquee:** Customer logo row scrolling sideways, looping.

```css
@keyframes marquee { 0% { transform: translate(0px); } 100% { transform: translateX(calc(-100% - var(--marquee-gap))); } }
```

**shimmer-sweep:** Loading text: a light band crosses the label.

```css
@keyframes shimmer-sweep { 0% { background-position: 150% 0px; } 100% { background-position: -50% 0px; } }
```

### Not measured

- Running duration of the menu, tooltip and dialog keyframes: the keyframes are recorded, but they were not running when measured. Use the 0.16s control duration for tooltips and 0.25s for panels.
- The hero product window plays a scripted sequence (typing, a moving cursor, rows changing). It is driven by script and is not specified here.
- A decorative dot grid moves each dot up and down on a 2.8s linear infinite loop.
- Search pill open state on the changelog and integrations pages: the search was not opened, so its panel and motion are not observed.
- Scroll-linked highlight of the current category in the integrations side list: not observed; only the static current state was measured.
- Logo marquee pause on hover: not observed.

## Flow: Log in

Starts at `/login`. Light canvas (#f8f8f9), no header, footer or card. One 288px column centred horizontally, starting 258px down a 900px viewport: a 48px box holding a 42px logo mark, 32px gap, 18px/500 centred title, 24px gap, then 44px controls 16px apart, 32px gap, the closing 13px line.

### 1. Choose a method

- Logo mark
- Title naming the action ("Log in to <product>")
- Primary auth button: continue with Google
- Three secondary auth buttons: continue with email, continue with SAML SSO, log in with passkey
- 13px line: a question in muted text with two text links (sign up, learn more)
- Action: Continue with email: swaps to step 2 in place, the URL stays /login
- Action: Sign up link: goes to /signup

### 2. Enter email

- Logo mark
- Title as a question ("What's your email address?")
- Auth field, focused on arrival
- Secondary auth button repeating the method name
- 13px text link back to step 1
- Action: Enter or the button submits
- Action: Back link returns to step 1
- Validation: A malformed address is stopped by the browser's native validation bubble. An empty submit does nothing. No custom inline error was observed.

Not recorded: Everything after a valid email (the code or magic-link screen) and all in-app onboarding sit behind an account.

## Flow: Sign up

Starts at `/signup`. Light canvas (#f8f8f9), no header, footer or card. One 288px column centred horizontally, starting 258px down a 900px viewport: a 48px box holding a 42px logo mark, 32px gap, 18px/500 centred title, 24px gap, then 44px controls 16px apart, 32px gap, the closing 13px line.

### 1. Choose a method

- Logo mark
- Title naming the outcome ("Create your workspace")
- Primary auth button: continue with Google
- Secondary auth button: continue with email
- 13px muted line agreeing to the terms, with text links
- Action: Continue with email: swaps to step 2 in place, the URL stays /signup

### 2. Enter email

- Logo mark
- Title as a question
- Auth field, focused on arrival
- Secondary auth button
- 13px text link back to step 1
- Action: Enter or the button submits
- Action: Back link returns to step 1
- Validation: Same as log in: native browser validation only.

Not recorded: Workspace creation and onboarding sit behind an account.

## Libraries

Detected in the pages Linear serves. Use these before reaching for an alternative.

| Name | npm | Purpose | Evidence |
| --- | --- | --- | --- |
| React | react | UI runtime | "react.transitional.element" in the marketing site scripts, "react.element" in the app bundle served at /login |
| Next.js | next | Framework for the marketing site | "__NEXT_DATA__" in a site script, window.next defined |
| Base UI | @base-ui/react | Navigation menu, tooltip, combobox and other unstyled primitives | data-base-ui-navigation-menu-trigger and data-base-ui-tooltip-trigger on rendered elements; "data-base-ui-" in site and app scripts |
| Radix UI | radix-ui | Unstyled primitives, alongside Base UI | "data-radix-" in a site script |
| Motion | motion | Script-driven animation: presence, layout, springs | "framerAppearId" in site and app scripts |
| Vaul | vaul | Bottom-sheet drawer on phones | "data-vaul-drawer" in a site script; keyframes vaulFadeIn, vaulSlideFromBottom |
| cmdk | cmdk | Command menu | "[cmdk-" selector in a site script |
| Sonner | sonner | Toasts | "data-sonner-toast" in site and app scripts |
| styled-components | styled-components | Styling | "data-styled" in site and app scripts |
| StyleX | @stylexjs/stylex | Styling | the string "stylex" in site and app scripts; keyframes named sx-…-B. Weaker evidence than an attribute |
| Shiki | shiki | Code highlighting | the string "shiki" in a site script. Weaker evidence than an attribute |
| MobX | mobx | Client state | "[MobX]" in site and app scripts |
| TanStack Query | @tanstack/react-query | Server state in the app | "No QueryClient set" in the app bundle served at /login |
| ProseMirror | prosemirror-view | Rich text editor in the app | "ProseMirror" in the app bundle served at /login |
| Inter Variable | @fontsource-variable/inter | Text face, weights 100 to 900 | loaded font face "Inter Variable 100 900" |
| Berkeley Mono | (not on npm) | Monospace face (paid licence) | loaded font face "Berkeley Mono 100 900" |

Recommended for the parts that could not be identified:

| Name | npm | Purpose |
| --- | --- | --- |
| Lucide | lucide-react | 16px line icons at 1.5px stroke |
| Tailwind CSS | tailwindcss | Map the tokens above to theme variables |