# Linear — DESIGN.md

Precision in the product. Atmosphere on the marketing site.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-20

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **Inter Variable**. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Dark editorial

### Observed palette
- Canvas: `#08090a`
- Surface: `#0f1011`
- Primary text: `#f7f8f8`
- Secondary text: `#d0d6e0`
- Muted text: `#8a8f98`
- Accent: `#5e6ad2`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero | 64px / 64px | 510 | −1.408px |
| Section heading | 48px / 48px | 510 | −1.056px |
| Body | 16px / 24px | 400 | normal |
| Navigation | 13px / 19.5px | 400 | normal |

### Layout & hierarchy
- Large uninterrupted dark surfaces; use product imagery as the main visual proof.
- Use restrained contrast between the canvas and raised sections.
- Observed navigation controls: 32px high, 12px horizontal padding and pill corners.

### Components & behavior
- Pair concise feature headings with detailed, high-fidelity product examples.
- Use bright neutral text for the strongest actions; reserve purple for selective emphasis.
- Observed demo controls use 8px corner radii and compact 13px labels.

## Product — Light workspace

### Observed palette
- Canvas: `lch(99.997 0.5 282)`
- Sidebar surface: `lch(97.94 0.5 282)`
- Subtle fill: `lch(93.483 0.5 282)`
- Primary text: `lch(9.794 0 282)`
- Secondary text: `lch(37.776 1.25 282)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Base | 16px / 24px | 400 | normal |
| Compact controls | 12px / normal | 500 | normal |
| Workspace selector | 13.333px / normal | 400 | normal |

### Layout & hierarchy
- Observed navigation rail is 244 CSS pixels wide at a 2560px viewport.
- Keep persistent navigation separate from the main content and issue properties.
- Dense toolbars and status-grouped rows make space for the actual work.

### Components & behavior
- Use 8px corners for compact controls; the workspace selector uses 10px.
- Creation forms are overlays; they preserve the current page behind a dimmed backdrop.
- Empty states explain the concept and provide one clear first action.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, collapse rails on small screens, stack grids and allow tables to scroll.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- Active issues: Grouped issue list with status, priority and shortcuts. Four starter issues in the research workspace. Screenshot: `captures/linear-product-issues.jpg`.
- Issue detail: Editable issue title and description, activity thread and a dedicated properties rail. Starter content only. Screenshot: `captures/linear-product-issue-detail.jpg`.
- New issue composer: A lightweight overlay keeps context behind the form. Status, priority and assignee are compact controls. No issue submitted. Screenshot: `captures/linear-product-new-issue.jpg`.
- Projects empty state: A focused explanation pairs a first-project action with documentation; the surrounding filters stay visible. Screenshot: `captures/linear-product-projects.jpg`.
- New project composer: Project name and summary precede metadata, a rich description and optional milestones. No project submitted. Screenshot: `captures/linear-product-new-project.jpg`.
- My issues: Personal work queue with assigned, created, subscribed and activity views. Empty in this research account. Screenshot: `captures/linear-product-my-issues.jpg`.
- Workspace search: A dedicated search surface with content-type tabs, filtering and an instructional empty state. Screenshot: `captures/linear-product-search.jpg`.

## Avoid
- Do not apply the marketing headline scale to dense product navigation.
- Do not replace meaningful empty states with fabricated charts.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured hover states, mobile layouts or paid-plan behavior.

## Reference pages
- Homepage: https://linear.app/homepage
- Pricing: https://linear.app/pricing
- Planning: https://linear.app/plan

## Capture scope
Email verification and onboarding captured using a disposable research account. Invitations and external integrations were skipped. SAML and magic-link completion were not exercised.
Product exploration includes read-only pages and unsubmitted composers. Vercel has no deployed project, so analytics is its project-selection state.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.