Design for AIMidnight SaaS: UI design prompt
Palette, type rules and a pasteable prompt for midnight saas. Also called Linear style, dark SaaS, dark mode developer landing, dark product UI, Raycast look. 2019 onward (Linear 2019, Raycast 2020, Vercel dark 2021).
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
: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%.
For design.md, .cursorrules or AGENTS.md
## Design direction
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%.
## Tokens
: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 }
Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.