# Linear homepage design spec (free) - Site: linear.app - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Linear. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Linear's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero — oversized type over a cropped product interface **Evidence provenance:** Desktop capture at 1440×900, scrollY 0, plus phone capture at 390×844, scrollY 0. Use the supplied viewport-relative boxes and computed styles; the captures establish the visible product artwork and crop, not its behavior. **CRAFT ARCHETYPE: product-UI-led** ## The big idea Set an unusually spacious, dark opening: a large two-line heading, a restrained support line, a small inline announcement, then a wide product-interface image. The interface image supplies the hero’s visual mass; the heading remains the first read. Keep this hierarchy without reproducing the source’s identity, text, or product data. ## Layers At desktop, the heading box is x=78, y=272, 1282×128px; use 64px type, 64px line height, weight 510, and −1.408px tracking. The supporting line is x=80, y=432, 505×24px, in 15px/24px type. The announcement link sits at x=1256, y=432, 104×25px. The image begins at x=0, y=491 and is 1440×804px. Preserve the substantial dark interval between the fixed navigation and heading, and the 35px vertical gap from support line to image. The artwork itself is dark UI, not an invitation to invent interface content. ## Type Use a neutral sans-serif stack. Keep the headline medium-weight and tightly tracked; supporting text is smaller and muted. No source wording is specified for reuse. ## Colour Use near-black, pale neutral headline text, and subdued gray support copy. Match the captured low-contrast interface treatment without adding unobserved accent colors or gradients. ## States and motion Hover, autoplay, and animation behavior are unknown. Do not infer motion from a static capture. ## Do NOT copy or add Do not reproduce source branding, logo, wording, interface data, or source-specific issue details. Do not add unobserved buttons, badges, or effects. ## Phone at 390px At 390×844, the heading is x=23, y=196, 343×167px, 38px/41.8px, weight 510, tracking −0.836px, and four lines. Supporting copy moves below it to x=24, y=383, 276×48px; announcement moves to x=24, y=451, 93×24px. The preview begins at y=521 in the phone screenshot, visibly inset to about x=18; the desktop-wide interface is cut off at the right edge, not fully composed within the phone width. The supplied phone style rows do not report the image element’s box, so do not prescribe its height or exact crop beyond what is visible. Desktop navigation links are absent from the phone header; the phone header instead shows account actions and a menu icon. ## Checks you can run At 1440px, verify the heading box, 64px typography, image top at 491px, and image width 1440px. At 390px, verify four heading lines, support at y=383, announcement at y=451, preview visible from y=521 with right-edge crop, and no horizontal page overflow. --- # Navigation — fixed, restrained desktop bar **Evidence provenance:** Desktop capture at 1440×900, scrollY 0, with repeated desktop captures at scrollY 900, 1800, and 2700; phone capture at 390×844, scrollY 0. Coordinates and computed styles are from the supplied evidence. No menu-open capture is available. **CRAFT ARCHETYPE: type-led** ## The big idea A fixed, near-black horizontal bar balances a left identity area against a right-aligned run of quiet navigation links and a pale pill action. At phone width the desktop link run is not shown: account actions remain and a menu control appears. Treat that as the observed closed-header composition, not evidence of drawer behavior. ## Layers The desktop header box is 1440×73px; its nav row is 1440×72px. The identity link is x=71, y=20, 104×32px. Navigation controls begin at x=741; the observed links and buttons occupy 32px-high boxes, with the terminal pill at x=1288, 73×32px. The sequence’s controls are closely spaced, without visible separators between ordinary links. At 390px the header is 390×65px and nav row 390×64px. Identity is x=15, y=16, 104×32px; account links are x=188 and x=258, each 32px high; menu button is x=331, y=0, 64×64px. The central desktop navigation is absent in this phone capture. ## Type Use the neutral sans-serif stack. Desktop labels are 13px/19.5px, regular weight; the pale terminal action is weight 510 with 32px line height. Account links on phone retain 13px sizing. Do not use extracted source labels as copy. ## Colour Keep the bar dark with the subtle horizontal boundary visible in the captures. Ordinary links are gray; the terminal action is pale neutral with dark text and a fully rounded 9999px radius. Avoid an invented active indicator. ## States and motion The fixed header stays at y=0 in captures at scrollY 900, 1800, and 2700. Link color/background transitions are 0.1s; the terminal action’s listed transitions are 0.16s. Hover results, menu contents, and menu transition are unknown. ## Do NOT copy or add Do not copy source identity, logo, labels, destinations, or menu contents. Do not invent dropdowns, a mobile drawer, or a scroll-triggered redesign. ## Checks you can run At 1440px, check fixed positioning, 73px header, 72px nav row, identity at x=71, and action at x=1288 with 73×32px bounds. At 390px, check 64px nav row, identity x=15, account controls x=188 and x=258, and menu button x=331 at 64×64px. At the supplied scroll positions, confirm the header remains pinned at y=0. --- # Signature feature — three illustrated editorial panels **Evidence provenance:** Desktop capture at 1440×900, scrollY 1800 (“below-1800”), matched to its viewport-relative computed-style rows. The screenshot shows three dark, line-drawn illustrations above three captions and descriptions. This spec covers that distinct panel, not the later section visible below it. **CRAFT ARCHETYPE: illustration-led** ## The big idea Use a quiet three-part editorial feature: sparse technical illustrations occupy the upper area, while small figure labels, concise headings, and muted descriptions provide a grounded reading sequence below. Fine vertical rules divide the columns without enclosing them in cards. Keep the visual contrast deliberately restrained against the dark page. ## Layers The section’s visible content spans approximately x=48–1392, or 1344px. The three figure labels begin at x=80, x=539, and x=965, all at y=76; each is a 50×17px label. Caption starts are x=80, x=539, and x=965, at y=464, with 24px height. Descriptions start at y=496 and measure 368×48px, 362×48px, and 368×48px respectively. In the screenshot, the illustrations occupy the broad space between labels and captions; their forms are dark fine-line drawings, not filled tiles. Dividers are visible around x=361 and x=663. Preserve the differing column widths and whitespace rather than forcing three equal card widths. The next section begins at viewport y=746, so the feature’s lower captions remain distinct from it. ## Type Use 15px/24px sans-serif captions at weight 510 and descriptions at weight 400. Use 12px monospaced figure labels with 16.8px line height. Captions are brighter than the 15px/24px gray descriptions; keep this hierarchy compact. ## Colour Continue the near-black canvas. Use subdued gray for figure labels, low-contrast gray strokes and dividers, brighter neutral captions, and muted descriptions. Avoid bright illustration strokes, colored panels, or gradients. ## States and motion The evidence establishes a static appearance only. Hover, animation, and interaction are unknown; do not add them. ## Do NOT copy or add Do not reuse the source’s illustrations, identity, figure labels, wording, or claims. Do not introduce metrics, testimonials, card fills, or extra columns. ## Checks you can run At 1440px and scrollY 1800, verify three panel starts at x=80, 539, and 965; figure labels at y=76; captions at y=464; and descriptions at y=496. Check 1344px overall span, dividers near x=361 and x=663, 12px mono labels, and 15px/24px caption and body type. Confirm the next section begins around y=746.