SaaS landingQuality 86linear.app

Linear homepage design context

A focused SaaS landing page snapshot with restrained contrast, product-led hierarchy, and crisp evidence labels.

Media evidenceFull screenshot

Color Palette

Ink canvas

#08090C

Primary page canvas and hero contrast.

inferred

Soft panel

#14161D

Subtle product panels and code-like preview surfaces.

inferred

Text primary

#F7F8FB

Hero headline and high-priority labels.

inferred

Violet accent

#8B7CF6

Interactive emphasis and small status highlights.

inferred

Typography

display

Hero headline

Short, precise product headline.

64px / 1.02, medium weightinferred

body

Body copy

Concise explanatory copy under the headline.

18px / 1.65inferred

label

UI labels

Navigation, tabs, status, and product UI labels.

13px / 1.4, mediuminferred

Spacing And Shape

section

Hero rhythm

Large first-screen breathing room.

96px top, 64px content stackinferred

shape

Card radius

Compact product panels with restrained rounding.

8pxinferred

layout

Control gap

Tight grouped actions and tab bars.

10px to 16pxinferred

Components

navigation

Top navigation

inferred

Slim nav with product links, calm contrast, and a primary sign-in/action area.

height: 64px
border: 1px solid rgba(255,255,255,0.08)

hero

Hero proof panel

inferred

Headline sits near product UI proof instead of a generic illustration.

background: #14161D
radius: 8px

product-preview

Issue tracker preview

inferred

Dense rows and status chips make the product value visible immediately.

rowHeight: 40px
chipRadius: 6px

actions

CTA cluster

inferred

Primary action is paired with a quieter secondary link, both kept compact.

gap: 12px
height: 40px

Evidence

Curated public snapshot

This example is a reviewed public sample for the examples gallery.

detected

Source page signals

Visual tokens are normalized from public-page observation and should be reviewed against the current live page.

inferred

Asset boundary

No third-party logos, images, fonts, or proprietary UI assets are embedded in this public example.

needs review

Limitations

Curated sample snapshot. Review the live source page before production reuse.
No third-party images, logos, fonts, or proprietary screen details are included in this public example.

Agent handoff

Linear homepage

# DESIGN.md - Linear homepage DESIGN.md example

Source URL: https://linear.app
Summary: A focused SaaS landing page snapshot with restrained contrast, product-led hierarchy, and crisp evidence labels.

## Visual Direction
- Keep the hero brief and let the product preview prove the workflow.
- Use dark surfaces with small contrast steps instead of heavy gradients.
- Reserve the accent color for actions, status, and focus states.
- Make rows, tabs, and chips feel engineered rather than decorative.

## Color Tokens
- Ink canvas: #08090C (background) - Primary page canvas and hero contrast.
- Soft panel: #14161D (surface) - Subtle product panels and code-like preview surfaces.
- Text primary: #F7F8FB (foreground) - Hero headline and high-priority labels.
- Violet accent: #8B7CF6 (accent) - Interactive emphasis and small status highlights.

## Typography
- Hero headline: 64px / 1.02, medium weight - Short, precise product headline.
- Body copy: 18px / 1.65 - Concise explanatory copy under the headline.
- UI labels: 13px / 1.4, medium - Navigation, tabs, status, and product UI labels.

## Spacing And Shape
- Hero rhythm: 96px top, 64px content stack - Large first-screen breathing room.
- Card radius: 8px - Compact product panels with restrained rounding.
- Control gap: 10px to 16px - Tight grouped actions and tab bars.

## Components
- Top navigation: Slim nav with product links, calm contrast, and a primary sign-in/action area.
- Hero proof panel: Headline sits near product UI proof instead of a generic illustration.
- Issue tracker preview: Dense rows and status chips make the product value visible immediately.
- CTA cluster: Primary action is paired with a quieter secondary link, both kept compact.

## Agent Guidance
Do:
- Use compact UI evidence above the fold.
- Keep cards at 8px radius or less.
- Prefer product screenshots or structured previews over abstract art.

Do not:
- Do not copy proprietary logos, product screens, copy, or brand assets.
- Do not turn every section into a floating card.
- Do not use purple as the only visual idea.

## Limitations
- Curated sample snapshot. Review the live source page before production reuse.
- No third-party images, logos, fonts, or proprietary screen details are included in this public example.