LANDING PAGE TEARDOWN
What makes Linear's landing page work — and how to build yours like it.
Framework
Next.js (React)
CSS approach
Tailwind CSS + custom properties
Page load time
1.2s
Sections
8 sections
CTA count
4 CTAs
Mobile responsive
Yes
What it does
Immediate product positioning — communicates what Linear does in one sentence with a live product screenshot.
Why it works
Dark background with a single glowing UI screenshot creates visual focus. The headline is short and specific. No hero image bloat — the product IS the hero.
Design tokens
Colors
#5E6AD2 (brand purple)
#F2F2F2 (text)
#000000 (bg)
Fonts
Inter (headings + body)
monospace (code snippets)
Spacing
80px top padding
48px bottom padding
24px gap
What it does
Show breadth of product capabilities without overwhelming the reader.
Why it works
3-column grid with consistent card height. Each card has an icon, short title, and one-line description. Hover reveals subtle border glow. Scannable in seconds.
Design tokens
Colors
#1A1A2E (card bg)
#5E6AD2 (icon accent)
#888 (body)
Fonts
Inter 600 (card title)
Inter 400 (card body)
Spacing
24px card padding
16px gap
48px section padding
What it does
Deep-dive into key workflows (Issues, Cycles, Projects) with animated UI screenshots.
Why it works
Alternating text-left/image-right layout breaks visual monotony. Each showcase section has a short paragraph + live product UI. Scroll-triggered fade-in keeps the page feeling dynamic.
Design tokens
Colors
#5E6AD2 (accent)
#F2F2F2 (heading)
#888 (body text)
Fonts
Inter 700 (section heading)
Inter 400 (body)
Spacing
120px between sections
64px image gap
What it does
Build trust with logos and quotes from recognizable companies.
Why it works
Logo bar uses grayscale + opacity to avoid visual clutter. Testimonial cards are minimal — avatar, name, company, one sentence. No star ratings (feels premium).
Design tokens
Colors
#1A1A2E (card bg)
#F2F2F2 (quote text)
#666 (name)
Fonts
Inter 400 italic (quote)
Inter 500 (name)
Spacing
32px card padding
24px gap between cards
What it does
Show that Linear works with existing tools (GitHub, Slack, Figma).
Why it works
Icon grid with familiar logos provides instant recognition. Minimal text — the logos speak for themselves. Subtle hover animation on each icon.
Design tokens
Colors
#1A1A2E (bg)
#5E6AD2 (hover border)
Fonts
Inter 500 (integration name)
Spacing
16px icon padding
12px gap
What it does
Surface pricing without friction — free tier highlighted.
Why it works
Simple two-column layout: Free vs Pro. Free tier is visually prominent. No complex tier matrix. Reduces decision anxiety.
Design tokens
Colors
#5E6AD2 (CTA)
#1A1A2E (card bg)
#F2F2F2 (price)
Fonts
Inter 700 (price)
Inter 400 (feature list)
Spacing
32px card padding
24px between features
What it does
Convert visitors who scrolled the entire page.
Why it works
Full-width dark section with centered headline and single CTA button. No distractions. Gradient glow behind CTA draws the eye.
Design tokens
Colors
#5E6AD2 (button)
#F2F2F2 (text)
#000 (bg)
Fonts
Inter 700 (headline)
Inter 600 (button)
Spacing
96px vertical padding
32px below headline
What it does
Navigation, legal links, and social proof.
Why it works
4-column grid with clear categories. Muted text keeps it unobtrusive. Links to changelog and status page signal transparency.
Design tokens
Colors
#0A0A0A (bg)
#666 (link text)
#888 (hover)
Fonts
Inter 400 (links)
Inter 600 (column headers)
Spacing
64px top padding
16px link gap
Entire page is dark by default with carefully controlled contrast ratios. Text hierarchy uses opacity/brightness rather than different colors.
Instead of an illustration, the actual product UI is the hero image. Creates immediate product understanding.
Cards and interactive elements use a subtle purple glow on hover, creating depth without heavy shadows.
Feature deep-dives alternate between text-left/image-right and text-right/image-left, preventing visual fatigue.
Grayscale logos + short quotes instead of star ratings and review counts. Signals premium positioning.
Use your product UI as the hero image — it communicates value faster than any illustration.
Dark backgrounds with controlled contrast create focus and feel premium.
Feature grids should be scannable: icon + title + one sentence. No paragraphs.
Alternate layout direction in long-scroll pages to prevent visual fatigue.
Minimal social proof (logos + short quotes) feels more premium than review aggregators.
Clone Linear with ui.rip. Get the component structure, design tokens, and layout as a Next.js project.
Free to inspect · Pay only when you download