Linear

---
version: alpha
name: "Linear — Calm dark product narrative with precise interface evidence"
description: "An independently described visual reference, based on the archived desktop screenshot."
colors:
  primary: "#F0F0F0"
  neutral: "#08090A"
  surface: "#151617"
  muted: "#979A9F"
  accent: "#DCEE35"
typography:
  display:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.03em
  body:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    lineHeight: 1.5
rounded:
  card: 8px
  button: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  section: 96px
components:
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label}"
    rounded: "{rounded.button}"
    padding: "{spacing.md}"
---
## Overview

This product-development reference uses an almost-black canvas, crisp sans-serif headings and detailed charcoal interface previews. The desktop hero is left aligned and leads directly into a wide application screenshot. Most of the page is deliberately restrained; a pale testimonial panel paired with an acid-yellow panel supplies a late contrasting moment.

Reference: https://linear.app/ · archived screenshot: 2026-09-12T11:37:02.149029+00:00 · desktop viewport: 1440px.
This describes the captured reference, not an official brand specification. Palette,
fonts, dimensions and responsive suggestions below are **inferred implementation
starting points** from the screenshot, not extracted CSS or verified source tokens.
Do not treat partially loaded sections as intentional blank space.

To use: place this file in your repository and ask your coding agent to follow its
visual direction with the reference screenshot. Adapt the content to your product;
do not reuse source logos, photographs, illustrations or endorsements without rights.

## Colors

Use #08090A for the main canvas, #F0F0F0 for primary text, and
#151617 for secondary surfaces. Supporting text starts at #979A9F; verify
contrast at the actual size and background. The accent #DCEE35 is selective,
not a default fill for all elements. These approximate rendered colors are not
claims of exact brand values.

## Typography

Start with Arial, Helvetica, sans-serif for display text and Arial, Helvetica, sans-serif for body copy.
The supplied font stacks are portable approximations; exact families and font
licensing were not verified. Use 56px desktop display text, 16px body and
14px labels as a starting scale. Preserve concise line lengths and clear hierarchy.
For narrow screens, reduce display text to roughly 36–42px and avoid overflow.

## Layout

Use a wide centered column with about 64–80px desktop gutters in the 1440px reference. Set the hero heading near 56px with a tight line height and a two-line measure. Give the application preview most of the first viewport width. Follow with a horizontal customer-logo strip and a large statement section. Subsequent feature chapters alternate a left headline and right explanatory paragraph above wide product imagery. Small explanatory columns below each demonstration provide detail. Close with a changelog row, an asymmetric paired testimonial panel, centered CTA and a multi-column footer.

Mobile layouts were not captured. Suggested adaptation, not an observed source
behavior: use 20–24px side gutters, stack split content below about 760px, preserve
text before related imagery, and let multi-column groups become one column. Keep
code samples scrollable and controls at least 44px high. Verify these decisions in
a real narrow viewport before shipping.

## Elevation & Depth

Use the page/surface contrast and subtle boundaries to establish hierarchy. Product
screenshots may depict deeper nested UI; avoid copying their internal depth rules
onto every marketing section. No live shadows, animations or transition values were
measured. Start with restrained elevation and test legibility in the chosen theme.

## Shapes

Use the 8px card-radius token as an estimate for small surface rounding.
Compact pill-like actions use the button radius; retain rectangular product imagery
where it is visually appropriate. Do not apply one oversized corner radius to every
container.

## Components

Application screenshots use charcoal surfaces and very fine divisions, with restrained task/status accents. Feature chapters have ample negative space, not prominent outer card containers. Thin neutral borders should distinguish actual interface regions rather than frame every marketing section. Primary signup actions are small white/light pills on the dark page. The late testimonial block uses pale lavender beside a saturated yellow-green panel; keep this exceptional rather than spreading the accent across navigation and hero.

Hover, focus, loading and expanded states were not observable from this still
capture. Provide keyboard-visible focus, distinct disabled states and accessible
expanded controls as implementation requirements, not claims about the reference.
Do not rely on color alone to express state; honor reduced-motion preferences.

## Do's and Don'ts

Prioritize alignment, restrained typography and credible product UI. Preserve the quiet narrative rhythm and the isolated testimonial contrast. Do not add glowing gradients to every section, replace detailed previews with generic icon cards, or copy protected product graphics and customer endorsements.

Use the captured design as direction, not a pixel-perfect or legally licensed
clone. Prefer your own content and assets. Validate the file and compare your output
against the archived screenshot; refresh this guide externally when that reference
materially changes.