Appearance
Design System for Landing Pages
A lightweight design system lets you ship new landing pages in hours instead of weeks — consistency without rigidity.
Why This Matters
- 💻 Dev: A design system gives you reusable components, consistent spacing, and predictable markup. You stop rebuilding hero sections from scratch for every campaign and start composing pages from tested, accessible building blocks.
- 📋 PM: Design systems directly reduce time-to-ship. When your team can assemble a new landing page from existing components, you can run more experiments, test more messages, and iterate faster than competitors who design from zero every time.
- 🎨 Designer: A design system is not a cage — it is a scaffold. It handles the repetitive decisions (spacing, type sizes, button styles) so you can focus your energy on the creative work that actually differentiates each page.
The Concept (Simple)
Think of LEGO bricks.
You do not sculpt each creation from clay. You build from standardized, interchangeable components that snap together in new combinations. Every brick has consistent dimensions, consistent connectors, and consistent colors. A 2x4 red brick from 1965 still snaps onto a 2x4 red brick from 2025.
But LEGO does not limit creativity — it enables it. Because you do not have to think about how pieces connect, you think about what to build.
A landing page design system works the same way. Your "bricks" are components: hero sections, feature grids, testimonial cards, pricing tables, CTA blocks, FAQ accordions. Each component has defined spacing, typography, and color usage. When you need a new landing page, you select components, arrange them, and customize the content. The structural decisions are already made.
The result: your team ships a new landing page in an afternoon instead of a sprint. Every page looks like it belongs to the same brand. And when you update a button style, it updates everywhere.
How It Works (Detailed)
The Anatomy of a Landing Page Design System
A full design system (like Shopify Polaris or Atlassian's system) has hundreds of components and thousands of tokens. You do not need that for landing pages. Here is the minimum viable design system:
╔══════════════════════════════════════════════════════════════╗
║ DESIGN SYSTEM LAYERS ║
╠══════════════════════════════════════════════════════════════╣
║ ║
║ ┌────────────────────────────────────────────────────┐ ║
║ │ TOKENS (foundation layer) │ ║
║ │ Colors, typography, spacing, shadows, radii │ ║
║ └──────────────────────┬─────────────────────────────┘ ║
║ │ consumed by ║
║ ▼ ║
║ ┌────────────────────────────────────────────────────┐ ║
║ │ PRIMITIVES (building blocks) │ ║
║ │ Buttons, inputs, badges, icons, links │ ║
║ └──────────────────────┬─────────────────────────────┘ ║
║ │ composed into ║
║ ▼ ║
║ ┌────────────────────────────────────────────────────┐ ║
║ │ COMPONENTS (reusable sections) │ ║
║ │ Hero, features grid, testimonials, pricing, │ ║
║ │ FAQ, CTA block, footer │ ║
║ └──────────────────────┬─────────────────────────────┘ ║
║ │ assembled into ║
║ ▼ ║
║ ┌────────────────────────────────────────────────────┐ ║
║ │ PAGES (final output) │ ║
║ │ Homepage, product page, campaign page, signup │ ║
║ └────────────────────────────────────────────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════╝Design Tokens
Tokens are named values that store your design decisions. Instead of using raw values (colors: #6C5CE7, spacing: 24px), you give them semantic names. This makes the system maintainable and themeable.
Token Naming Convention:
┌──────────────────┬────────────────────┬──────────────────────────────┐
│ Category │ Token Name │ Value (example) │
├──────────────────┼────────────────────┼──────────────────────────────┤
│ Color - Primary │ --color-primary │ #6C5CE7 (brand purple) │
│ │ --color-primary- │ #5A4BD1 (hover state) │
│ │ hover │ │
│ │ --color-primary- │ #8B7EF0 (light variant) │
│ │ light │ │
├──────────────────┼────────────────────┼──────────────────────────────┤
│ Color - Neutral │ --color-text │ #1A1A2E (primary text) │
│ │ --color-text-muted │ #6B7280 (secondary text) │
│ │ --color-bg │ #FFFFFF (background) │
│ │ --color-bg-alt │ #F9FAFB (alternating bg) │
│ │ --color-border │ #E5E7EB (dividers) │
├──────────────────┼────────────────────┼──────────────────────────────┤
│ Color - Semantic │ --color-success │ #10B981 (green) │
│ │ --color-error │ #EF4444 (red) │
│ │ --color-warning │ #F59E0B (amber) │
├──────────────────┼────────────────────┼──────────────────────────────┤
│ Typography │ --font-family │ 'Inter', sans-serif │
│ │ --text-hero │ 3.5rem / 1.1 line-height │
│ │ --text-h2 │ 2.25rem / 1.2 │
│ │ --text-h3 │ 1.5rem / 1.3 │
│ │ --text-body │ 1.125rem / 1.6 │
│ │ --text-small │ 0.875rem / 1.5 │
├──────────────────┼────────────────────┼──────────────────────────────┤
│ Spacing │ --space-xs │ 4px │
│ │ --space-sm │ 8px │
│ │ --space-md │ 16px │
│ │ --space-lg │ 24px │
│ │ --space-xl │ 48px │
│ │ --space-2xl │ 80px │
│ │ --space-section │ 120px │
├──────────────────┼────────────────────┼──────────────────────────────┤
│ Borders │ --radius-sm │ 4px │
│ │ --radius-md │ 8px │
│ │ --radius-lg │ 16px │
│ │ --radius-full │ 9999px (pill shape) │
├──────────────────┼────────────────────┼──────────────────────────────┤
│ Shadows │ --shadow-sm │ 0 1px 2px rgba(0,0,0,0.05) │
│ │ --shadow-md │ 0 4px 6px rgba(0,0,0,0.07) │
│ │ --shadow-lg │ 0 10px 15px rgba(0,0,0,0.1) │
└──────────────────┴────────────────────┴──────────────────────────────┘Core Typography Scale
Keep it simple. Three to four sizes handle 95% of landing page needs:
┌─────────────────────────────────────────────┐
│ │
│ Hero Headline (3.5rem / 56px) │
│ ═══════════════════════════ │
│ │
│ Section Heading (2.25rem / 36px) │
│ ─────────────────────── │
│ │
│ Sub-heading (1.5rem / 24px) │
│ ───────────────── │
│ │
│ Body Text (1.125rem / 18px) │
│ Regular paragraph copy for readability. │
│ │
│ Small / Caption (0.875rem / 14px) │
│ Fine print and labels. │
│ │
└─────────────────────────────────────────────┘Button Styles
Three button variants cover every landing page scenario:
┌─────────────────────────────────────────────────────┐
│ │
│ ┌───────────────────────┐ │
│ │ ██ Primary Action ███ │ ◀── Filled, brand │
│ └───────────────────────┘ color background, │
│ white text │
│ │
│ ┌───────────────────────┐ │
│ │ Secondary Action │ ◀── Outlined, brand │
│ └───────────────────────┘ color border + text, │
│ transparent bg │
│ │
│ Ghost Action ─▶ ◀── Text only, no │
│ border or bg, │
│ underline on hover │
│ │
└─────────────────────────────────────────────────────┘Component Inventory
Here is the minimum set of section components you need to build any landing page:
╔══════════════════════════════════════════════════════════════╗
║ COMPONENT INVENTORY ║
╠══════════════════════════════════════════════════════════════╣
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ HERO SECTION │ ║
║ │ Variants: centered, split (text + image), video bg │ ║
║ │ Contains: headline, sub-headline, CTA, hero visual │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ LOGO BAR / TRUST STRIP │ ║
║ │ Variants: static row, scrolling marquee │ ║
║ │ Contains: 4-8 company logos, optional label │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ FEATURE GRID │ ║
║ │ Variants: 2-col, 3-col, alternating rows │ ║
║ │ Contains: icon, title, description per feature │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ TESTIMONIAL SECTION │ ║
║ │ Variants: single quote, carousel, grid │ ║
║ │ Contains: quote, name, role, company, avatar │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ PRICING TABLE │ ║
║ │ Variants: 2-tier, 3-tier, comparison matrix │ ║
║ │ Contains: plan name, price, features, CTA │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ CTA BLOCK │ ║
║ │ Variants: inline, full-width banner, floating bar │ ║
║ │ Contains: headline, sub-text, button │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ FAQ ACCORDION │ ║
║ │ Variants: single column, two column │ ║
║ │ Contains: question, expandable answer │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
║ ┌──────────────────────────────────────────────────────┐ ║
║ │ FOOTER │ ║
║ │ Variants: minimal, multi-column with links │ ║
║ │ Contains: links, legal, social icons │ ║
║ └──────────────────────────────────────────────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════╝The Spacing Grid
Use a base unit and multiply consistently. An 8px base is the industry standard (used by Material Design, Ant Design, and most modern systems). Every spacing decision should be a multiple of 8:
8px ── element padding (inside buttons, inputs)
16px ── gap between related elements (icon + label)
24px ── gap between groups (form field to form field)
48px ── section internal padding
80px ── between major sections
120px── between page-level sections (hero to features)This creates visual rhythm. The eye detects consistent spacing subconsciously, and it reads as "professional." Inconsistent spacing reads as "amateur."
Documenting Components for Handoff
Each component in your system should have a one-page spec that includes:
┌─────────────────────────────────────────────────────────────┐
│ COMPONENT SPEC: Hero Section (Split Variant) │
├─────────────────────────────────────────────────────────────┤
│ │
│ PURPOSE: Primary above-the-fold section. Communicates │
│ the core value proposition and drives primary CTA. │
│ │
│ VARIANTS: Centered, Split (text + image), Video BG │
│ │
│ TOKENS USED: │
│ - Headline: --text-hero, --color-text, font-weight 700 │
│ - Sub-headline: --text-body, --color-text-muted │
│ - CTA: Primary button variant │
│ - Background: --color-bg or --color-bg-alt │
│ - Section padding: --space-section (120px) top/bottom │
│ │
│ RESPONSIVE BEHAVIOR: │
│ - Desktop: two columns (text left, image right) │
│ - Tablet: text above, image below │
│ - Mobile: text above, image below, full-width CTA │
│ │
│ CONTENT GUIDELINES: │
│ - Headline: max 8 words │
│ - Sub-headline: max 25 words │
│ - CTA: max 4 words, action-oriented verb │
│ │
│ ACCESSIBILITY: │
│ - Hero image must have alt text │
│ - CTA must have minimum 4.5:1 contrast ratio │
│ - Heading must be an <h1> │
│ │
└─────────────────────────────────────────────────────────────┘In Practice
Stripe — Visual Consistency Across Dozens of Pages
Stripe operates dozens of landing pages — for Payments, Billing, Connect, Atlas, Terminal, Radar, and more. Despite this volume, every page is unmistakably Stripe. How?
Stripe maintains a rigorous internal design system with:
- A fixed typography scale (one display font, one body font, consistent sizes)
- A constrained color palette with gradients as a signature element
- Consistent section patterns: hero with gradient background, feature grid with icons, code example block, CTA with dark background
- Standardized spacing: generous whitespace (often 120px+ between sections) that never varies
The key lesson: Stripe does not redesign each page. They reconfigure the same components with different content. The hero component on the Payments page is structurally identical to the hero on the Billing page — different headline, different illustration, same layout, same spacing, same button style.
Linear — Design System Enables Rapid Page Creation
Linear's landing pages are clean, dark-themed, and strikingly consistent. Their system is minimal but effective:
- Two colors: near-white text on a near-black background, with a single accent color (purple-blue) for CTAs and highlights
- One font family at three sizes
- Consistent section structure: headline, short description, visual, repeat
- Animations are subtle and consistent — the same fade-up entrance used everywhere
Linear ships new feature announcement pages rapidly because the decisions are already made. A new page is just: write the headline, create the visual, slot it into the existing component structure. The design system makes speed possible without sacrificing quality.
Key Takeaways
- A landing page design system has four layers: tokens, primitives, components, and pages. Start with tokens and work up.
- You need fewer tokens than you think. Five type sizes, six spacing values, and five colors handle 95% of cases.
- Use an 8px spacing grid for visual rhythm. Every spacing value should be a multiple of 8.
- Three button variants (primary, secondary, ghost) cover every CTA scenario on a landing page.
- Eight section components (hero, logo bar, features, testimonials, pricing, CTA block, FAQ, footer) can build any landing page.
- Document each component with purpose, variants, tokens used, responsive behavior, and content guidelines.
- The goal is not to eliminate creativity — it is to eliminate repetitive decisions so your team can focus on the work that differentiates each page.
Action Items
┌──────────┬──────────────────────────────────────────────────────────────┐
│ 💻 Dev │ ☐ Define design tokens as CSS custom properties in a single │
│ │ file (tokens.css) — colors, type sizes, spacing, radii │
│ │ ☐ Build the 8 core section components as reusable │
│ │ HTML/CSS blocks (or React/Vue components) │
│ │ ☐ Create a simple page template that imports tokens and │
│ │ lets you compose sections in any order │
│ │ ☐ Set up a component playground (Storybook or a simple │
│ │ HTML page) where the team can preview all components │
├──────────┼──────────────────────────────────────────────────────────────┤
│ 📋 PM │ ☐ Audit your last 5 landing pages — how many sections were │
│ │ built from scratch vs reused? Identify reuse opportunities │
│ │ ☐ Track time-to-ship for the next landing page built with │
│ │ the system vs without — quantify the speed gain │
│ │ ☐ Maintain a living inventory of components and their │
│ │ variants so the team knows what is available │
├──────────┼──────────────────────────────────────────────────────────────┤
│ 🎨 Design│ ☐ Create a Figma component library with the 8 core │
│ │ sections and their variants │
│ │ ☐ Define and document the token system (colors, type, │
│ │ spacing) in a single source of truth │
│ │ ☐ Write content guidelines for each component (max word │
│ │ counts, tone, formatting rules) │
│ │ ☐ Build one new landing page using only existing components │
│ │ to validate the system covers real needs │
└──────────┴──────────────────────────────────────────────────────────────┘