62 lines
3.1 KiB
Markdown
62 lines
3.1 KiB
Markdown
# 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`](./vercel-mesh.md) · [`raycast`](./raycast.md) · [`notion-pre-ai`](./notion-pre-ai.md)
|
||
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)
|