UI Lingo
Shortlist 0

Linear-style Dark SaaS

Also called: Linear style, Dark precision UI, Dev-tool dark

Precise near-black product UI: hairline borders, a faint indigo spotlight, gradient-edged highlights and tight medium-weight Inter.

“Linear look”Futuristic & TechEra: 2020s (Linear, Vercel, Raycast era)TechySeriousCalmLuxuryNew
Prompt builder
Open full screen ↗
linear-dark-saas / landingEN
linear-dark-saas / landingTH

Design keywords

Say these words to ask for this style.

near-black #08090Ahairline bordersindigo spotlight glowgradient-border highlighttight Inter mediumgradient-faded headlinetilted product screenshot⌘K shortcut hintsstatus dots

Linear-style dark SaaS is the look of modern developer and productivity tools. Everything sits on #08090A with 1px rgba(255,255,255,.08) hairlines instead of shadows; a soft indigo radial glow lights the top of the page like a spotlight, and only the most important surfaces get a gradient border that catches the light. Type is Inter at medium weight with tight negative tracking and gradient-faded headlines, density is high, statuses are tiny coloured dots, and keyboard shortcuts (⌘K) appear right in the UI. Calm, exact, engineered.

Best for

  • Developer tools and B2B SaaS
  • Issue trackers, CI/CD and infra products
  • AI products aimed at professionals
  • Product launch and changelog pages

Avoid for

  • Consumer brands that need warmth or colour
  • Older or low-vision audiences (low contrast greys)
  • Content sites with lots of imagery

✓ Do

  • Use 1px rgba(255,255,255,0.08) hairlines everywhere and no drop shadows on resting cards
  • Keep one faint indigo (#5E6AD2) radial glow per view and a gradient border only on the hero element
  • Set Inter at 500 with −0.03em tracking for headings, 13–14px for dense UI text

✕ Don't

  • Don’t add colourful gradients or blobs — the colour is a whisper
  • Don’t use big radii (>16px) or pill-shaped cards
  • Don’t use bold 700+ headlines or wide letter-spacing

Not to be confused with

Dark Mode (OLED) →OLED dark mode is a generic true-black theme; Linear style adds hairline grids, an indigo spotlight and gradient-edged highlights with tight Inter.Enterprise SaaS →Enterprise SaaS is light, neutral and component-library-driven; Linear style is dark, dense and crafted with glow and gradient borders.Glassmorphism →Glassmorphism relies on blur over colourful blobs; Linear style is opaque near-black with hairlines and only a faint glow.

On mobile

Keep the hairline grouped lists and 13–15px type; the tab bar is a blurred near-black bar with a hairline top, and only the featured card gets the gradient border and indigo glow.

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

✓ Audited by agent review (1×)
Copied!