# Midnight SaaS

Also called: Linear style, dark SaaS, dark mode developer landing, dark product UI, Raycast look  
Era: 2019 onward (Linear 2019, Raycast 2020, Vercel dark 2021)  
Page: https://designforai.dev/style/midnight-saas

## Traits

- near-black page (#08090a to #0f1115), never pure #000
- text in three greys: white for headings, light grey for body, dim grey for meta
- one cool accent (indigo, violet or cyan) used for glows, links and one button
- 1px borders at 6-10% white instead of shadows; surfaces are barely lighter than the page
- product screenshots in subtle bevelled frames with a faint gradient glow behind
- small type sizes, tight tracking, lots of 13-14px UI copy
- motion: fade-up on scroll, 400-600ms, staggered by 60ms

Palette: #08090a page, #131416 surface, rgba(255,255,255,0.08) border, #f7f8f8 heading, #b4bcd0 body, #62666d muted, #5e6ad2 accent

Type: Geist or IBM Plex Sans for UI, JetBrains Mono for code; h1 600 at 56-64px with -0.03em, body 400 at 16px, UI copy 13-14px

## Do

- build a 3-step grey scale for text and use it strictly: heading, body, meta
- use borders at 8% white and surfaces 3-5% lighter than the page instead of drop shadows
- put a single soft radial glow (accent at 20% alpha, blur 120px) behind the hero screenshot

## Don't

- do not use pure black or pure white anywhere
- do not add multiple accent colours; one indigo is the style
- do not over-glow; one glow per screen, no neon

Known for it: Linear, Raycast, Vercel, Resend

## CSS seed

```css
:root{--bg:#08090a; --surface:#131416; --line:rgba(255,255,255,0.08); --fg:#f7f8f8; --body:#b4bcd0; --muted:#62666d; --accent:#5e6ad2; --radius:8px; --font:'Geist',sans-serif}
```

## Prompt

Build the site in dark midnight SaaS style (Linear-like). Page #08090a, surfaces #131416, borders 1px rgba(255,255,255,0.08), headings #f7f8f8, body #b4bcd0, meta #62666d, single accent #5e6ad2. Font Geist: h1 600 at 60px with -0.03em and line-height 1.05, h2 600 at 32px, body 400 at 16px, UI labels 13px 500. Border-radius 8px on cards and buttons, 12px on screenshot frames. No drop shadows; depth comes from borders and a 1px inset highlight rgba(255,255,255,0.04) on top of cards. Hero: centred headline, one-line subhead, primary button solid #5e6ad2 white text, secondary button transparent with border. Below it a product screenshot in a bordered frame with a radial glow behind (rgba(94,106,210,0.25), blur 120px). Feature list as three columns with 16px icons in #b4bcd0. Motion: sections fade up 16px over 500ms on scroll, staggered 60ms; hover on buttons brightens 6%.