Linear

Design Principles

• Information hierarchy through grayscale value contrast, not color
• Product UI as the hero — show don't tell
• Monospace typography signals technical credibility
• Minimal color accent reserved for interactive states and status indicators
• Dark mode as default signals power-user positioning

Signature Moves

Key Strengths

• Pure black background creates maximum contrast and feels 'native' to developer environments
• Real product screenshot eliminates guesswork about what users are signing up for
• Sidebar navigation in the screenshot mirrors familiar IDE/Slack patterns
• Activity feed and status badges demonstrate feature depth without requiring clicks
• Restrained color palette means the few colored elements carry significant meaning

Steps

1. 01Set background to pure black (#000000) and commit to dark-mode-first design
2. 02Choose Inter or similar geometric sans-serif, pair with monospace for code elements
3. 03Establish gray scale: white (#ffffff) for headings, mid-gray (#8a8f98) for body/secondary text
4. 04Build three-column dashboard layout: collapsible sidebar, main content, detail panel
5. 05Design compact cards with minimal padding (~16px) and subtle borders or background shifts
6. 06Use border-radius sparingly — ~6px for buttons, ~8px for cards
7. 07Add color only for semantic meaning: green=success, yellow=starred, purple=brand accent
8. 08Include real product screenshots or embedded app UI as primary marketing content

Key Decisions

• Pure black vs dark gray background — Linear chose pure black for maximum authority
• Real UI vs illustrations — showing actual product builds credibility
• Text hierarchy through value contrast, not size — keeps density high
• Minimal nav items with clean separation — reduces cognitive load
• Sidebar icon + text pattern for scannable navigation

Pitfalls to Avoid

• ✕Adding gradients or glows that undermine the minimal severity
• ✕Using too many accent colors — defeats the intentional restraint
• ✕Making the product screenshot too small to read — it needs to be functional
• ✕Softening the black background to dark gray — loses the distinctive edge

CSS Variables

:root {
  --primary: #ffffff;
  --secondary: #8a8f98;
  --accent: #5e6ad2;
  --bg: #000000;
  --bg-elevated: #1a1a1a;
  --bg-card: #141414;
  --radius: ~6px;
  --radius-lg: ~12px;
  --font-body: Inter;
  --font-mono: SF Mono;
}

Key Techniques

• CSS custom properties for consistent theming
• Subtle box-shadow or border for card elevation on pure black
• Grid or flexbox for three-column dashboard layout
• Transition on opacity/background for hover states
• Monospace font-family for code snippets inline