3.1 KiB
linear — Linear (Modern Builder Tool)
- School: Modern Tool / Builder SaaS
- Vibe: Quiet luxury for developer tools; warm dark, hairline detail, restraint as confidence
- Best for: Developer tools, AI tools, B2B SaaS where "serious + designed" matters
- Touchstone: linear.app, the Linear changelog page, Linear Method site
Palette
- Ground:
#08090A(near-black with warm undertone, not pure black) - Surface 1:
#16171C - Surface 2:
#1E1F25 - Surface 3 (raised):
#26272E - Hairline border:
rgba(255,255,255,0.06) - Primary text:
#F7F8F8 - Secondary text:
#9CA3AF - Muted text:
#6B7280 - Accent: Linear purple
#5E6AD2— used on < 5% of pixels - Gradient meshes (very controlled, < 8% opacity) in the hero only
Typography
- Display: Inter Tight at weight 600 (or Söhne, or Geist Sans) — never plain Inter at default weight, that's the AI-default
- Body: Inter at 14–15px, weight 400–500, line-height 1.55
- Mono: GeistMono, JetBrains Mono, or Berkeley Mono for inline code and shortcut chips
- Letter-spacing on display headlines: -0.02em (tight)
Spacing: 4 / 8 / 12 / 16 / 24 / 40 / 64 / 96
Radius: 6 (small UI) / 12 (medium cards) / 16 (large panels). Never above 16. Linear's radius character is "modest, precise, never gummy."
Shadow: barely there — soft 0 1px 2px rgba(0,0,0,0.3) on raised surfaces. Never glow, never colored shadow.
Motion: ease-out around 150ms for hover, 350–450ms for layout moves with a quint curve (e.g., the famous cubic-bezier(0.22, 1, 0.36, 1)). State changes feel "snappy but not bouncy."
Signature moves
- Hairline 1px borders in
rgba(255,255,255,0.06)separating every panel, everywhere - Selective accent use — purple appears on focused / active states, on tiny pills, on key brand surfaces; never on body backgrounds
- Inline code styled with monospaced font and dim background
#1E1F25, color#A78BFA - Subtle gradient meshes in the hero (extremely controlled saturation, < 8% opacity) — not the bright purple-pink-blue AI cliché
- Keyboard-shortcut chips throughout the UI (the brand celebrates keyboard-first)
- A bottom-pinned screenshot of the actual product on landing pages
Avoid
- Emoji
- Bouncy springs or elastic easings
- More than one saturated color (Linear's purple is the only accent)
- Border-radius above 16
- Stock photography of people
- "Get Started Free" hero CTAs styled like a 2018 SaaS landing page
AI prompt seed
Abstract product UI screenshot, warm dark #08090A background, hairline borders, panels with #16171C and #1E1F25 surfaces, very subtle blue-purple ambient lighting at top edge, no people, no text on the image itself, 16:9.
Don't use when
- The brand is consumer-friendly / playful — Linear reads as professional and serious
- The product needs warmth or hand-touched feel
- The audience is non-technical (the keyboard-shortcut and monospace signals don't land)
Same school — Modern Tool / Builder SaaS:
vercel-mesh·raycast·notion-pre-ai
Browse all 25 recipes: INDEX.md