# Linear-style Dark SaaS

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

- Nickname: Linear look
- Also called: Linear style, Dark precision UI, Dev-tool dark
- Category: Futuristic & Tech
- Moods: Techy, Serious, Calm, Luxury
- Industries: SaaS, Startup & Tech, AI Products, Corporate & B2B, Fintech & Banking
- Style page: https://uilingo.dev/styles/linear-dark-saas/

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

## Audit
Passed after 1 round · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Linear-style Dark SaaS" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark

## The style in one line
Precise near-black product UI: hairline borders, a faint indigo spotlight, gradient-edged highlights and tight medium-weight Inter.
Design keywords: near-black #08090A, hairline borders, indigo spotlight glow, gradient-border highlight, tight Inter medium, gradient-faded headline, tilted product screenshot, ⌘K shortcut hints, status dots.

## Visual language
Precise, calm, engineered dark product UI in the manner of Linear, Vercel and Raycast. Everything sits on near-black #08090A, separated by 1px rgba(255,255,255,.08) hairlines instead of shadows. A single faint indigo radial glow lights the top of the page like a spotlight over a barely visible grid, and only the hero element gets a gradient border that catches the light. Type is Inter at medium weight with tight negative tracking; headlines fade from white to grey. Density is high, statuses are tiny coloured dots and keyboard shortcuts appear in the UI.

## Signature details (must be visible)
- Canvas #08090A with radial-gradient(60% 42% at 50% -8%, rgba(94,106,210,.26), transparent 75%) and a 64px grid of rgba(255,255,255,.035) lines masked to fade out from the top
- Hairlines everywhere: 1px rgba(255,255,255,.08) borders, no resting drop shadows
- Gradient border on the single most important surface: background linear-gradient(#121316,#0B0C0E) padding-box, linear-gradient(150deg, rgba(255,255,255,.32), rgba(255,255,255,.05) 35%, rgba(140,148,242,.55)) border-box with 1px transparent border
- Headline gradient text: linear-gradient(180deg, #F7F8F8 30%, rgba(247,248,248,.55))
- Inter 500 headings with −0.035em tracking; UI text 13–15px; Geist Mono for meta and shortcuts
- Hero product shot tilted in 3D: rotateX(20deg) scale(.96) from the top edge, masked to fade out at the bottom, with an indigo glow behind
- Status dots: 7px circles inside hairline pills (green #4CB782, yellow #F2C94C, red #EB5757, hollow grey for backlog)
- ⌘K kbd chip inside the search field: hairline border, 4px radius, mono 0.7rem

## Design tokens — use these exact values
Colours (dark mode):
  - background #08090A
  - surface #0F1011
  - surface-2 #141516
  - text #F7F8F8
  - text-muted #8A8F98
  - primary #5E6AD2 (text on it #FFFFFF)
  - secondary #E6E8EB (text on it #08090A)
  - accent #8C94F2
  - border rgba(255,255,255,0.08)
  - success #4CB782 · warning #F2C94C · danger #EB5757
  - chart series #5E6AD2, #4CB782, #F2994A, #8A8F98, #E6E8EB
Radius: sm 6px, md 8px, lg 12px, xl 16px, pill 999px
Border width: 1px
Shadows: sm `0 1px 2px rgba(0,0,0,0.4)`, md `0 4px 24px rgba(0,0,0,0.45)`, lg `0 24px 80px rgba(0,0,0,0.6)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 0.95 density
Motion: 160ms cubic-bezier(.25,.1,.25,1)

## Typography (Latin + Thai)
- Headings: Inter 500/600 with Thai fallback Noto Sans Thai 500/600
- Body: Inter 400/500 with Thai fallback Noto Sans Thai 400/500
- Mono: Geist Mono
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600&display=swap
- CSS stacks: heading `"Inter", "Noto Sans Thai", system-ui, sans-serif`; body `"Inter", "Noto Sans Thai", system-ui, sans-serif`; mono `"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.75rem, 6vw, 4.75rem), heading weight 500, heading tracking -0.035em (Latin only), sentence-case labels.
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Noto Sans Thai is the loopless, neutral Thai companion designed to sit beside Inter-like grotesques, with matching x-height and calm, even strokes.

## Components
- Primary button: indigo gradient #6C78E0 → #5E6AD2, 8px radius, 500 weight, inset top highlight, 1px lighter border and soft indigo glow
- Secondary button: rgba(255,255,255,.04) fill with hairline border; hover slightly brighter; marketing nav CTA is a light #E6E8EB button with dark text
- Cards: rgba(255,255,255,.03) → .012 vertical gradient over the canvas, 12px radius, hairline border; hover only brightens the fill
- Feature grid: one bordered container split into hairline cells (shared borders, no gaps), icons bare and muted
- Eyebrow: hairline pill with a small indigo ✦ chip and a trailing →
- Inputs: rgba(255,255,255,.02) fill, 8px radius, 40px tall; focus = indigo border + 3px rgba(94,106,210,.22) ring
- Sidebar: same near-black as canvas with a hairline edge, 13–14px items with 16px icons, active item rgba(255,255,255,.06) fill
- Tables: dense 10px rows, muted 500-weight headers, hover row tint rgba(255,255,255,.025)
- Charts: 1.75px indigo line with soft glow, hairline solid grid, muted secondary series
- Switch: compact 40×22 track, indigo when on

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: centred headline with the product visual below it. Navigation: bar style. Sections in order: hero → logos → features → showcase → steps → testimonials → pricing → cta. Feature section as grid.
Landing: centred hero — announcement pill, large gradient-faded headline, muted lead, indigo + hairline buttons, mono footnote — then the tilted product screenshot with an indigo glow fading into the page. Follow with a quiet logo row, a hairline feature cell grid, a showcase panel, numbered steps divided by hairlines, testimonials, pricing with a gradient-bordered featured plan and a CTA with a top indigo glow. Dashboard: dense app shell — near-black sidebar, search with ⌘K, compact KPI cards, an issues table with status dots, activity, forecast and system status.

## Content
Use realistic product copy (fictional brand) suited to: Developer tools and B2B SaaS. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## 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
- Colourful gradients, blobs or neon — the colour is a whisper of indigo
- Drop shadows on resting cards or thick borders
- Radii above 16px or pill-shaped cards
- Bold 700+ headlines or wide letter-spacing
- Pure #000 with no glow or grid — that is plain OLED dark mode
- Gradient borders on more than one or two elements per view

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Linear-style Dark SaaS" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```