Design for AIStil Midnight SaaS: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für midnight saas. Auch bekannt als Linear-Stil, Dark SaaS, Dark-Mode-Developer-Landing, dunkles Produkt-UI, Raycast-Look. ab 2019 (Linear 2019, Raycast 2020, Vercel Dark 2021).
Merkmale
- fast schwarze Seite (#08090a bis #0f1115), nie reines #000
- Text in drei Grautönen: Weiß für Überschriften, Hellgrau für Fließtext, Dunkelgrau für Meta
- ein kühler Akzent (Indigo, Violett oder Cyan) für Glows, Links und einen Button
- 1px-Ränder bei 6-10 % Weiß statt Schatten; Flächen sind kaum heller als die Seite
- Produkt-Screenshots in dezent abgeschrägten Rahmen mit einem schwachen Verlaufs-Glow dahinter
- kleine Schriftgrößen, enges Tracking, viel 13-14px UI-Text
- Motion: Fade-up beim Scrollen, 400-600ms, um 60ms gestaffelt
Palette
#08090a Seite, #131416 Fläche, rgba(255,255,255,0.08) Rand, #f7f8f8 Überschrift, #b4bcd0 Fließtext, #62666d gedämpft, #5e6ad2 Akzent
Schrift
Geist oder IBM Plex Sans für UI, JetBrains Mono für Code; h1 600 bei 56-64px mit -0.03em, Fließtext 400 bei 16px, UI-Text 13-14px
Do
- baue eine 3-stufige Grauskala für Text und nutze sie strikt: Überschrift, Fließtext, Meta
- nutze Ränder bei 8 % Weiß und Flächen 3-5 % heller als die Seite statt Drop-Shadows
- lege einen einzelnen weichen radialen Glow (Akzent bei 20 % Alpha, blur 120px) hinter den Hero-Screenshot
Don't
- nutze nirgends reines Schwarz oder reines Weiß
- füge nicht mehrere Akzentfarben hinzu; ein Indigo ist der Stil
- übertreib den Glow nicht; ein Glow pro Screen, kein Neon
Bekannt dafür: 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
Baue die Seite im dunklen Midnight-SaaS-Stil (Linear-artig). Seite #08090a, Flächen #131416, Ränder 1px rgba(255,255,255,0.08), Überschriften #f7f8f8, Fließtext #b4bcd0, Meta #62666d, einziger Akzent #5e6ad2. Schrift Geist: h1 600 bei 60px mit -0.03em und line-height 1.05, h2 600 bei 32px, Fließtext 400 bei 16px, UI-Labels 13px 500. Border-radius 8px auf Karten und Buttons, 12px auf Screenshot-Rahmen. Keine Drop-Shadows; Tiefe entsteht aus Rändern und einem 1px inset Glanzlicht rgba(255,255,255,0.04) oben auf Karten. Hero: zentrierte Headline, einzeilige Subline, Primärbutton solides #5e6ad2 mit weißem Text, Sekundärbutton transparent mit Rand. Darunter ein Produkt-Screenshot in einem umrandeten Rahmen mit radialem Glow dahinter (rgba(94,106,210,0.25), blur 120px). Feature-Liste als drei Spalten mit 16px Icons in #b4bcd0. Motion: Abschnitte faden beim Scrollen 16px nach oben über 500ms, um 60ms gestaffelt; Hover auf Buttons hellt 6 % auf.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im dunklen Midnight-SaaS-Stil (Linear-artig). Seite #08090a, Flächen #131416, Ränder 1px rgba(255,255,255,0.08), Überschriften #f7f8f8, Fließtext #b4bcd0, Meta #62666d, einziger Akzent #5e6ad2. Schrift Geist: h1 600 bei 60px mit -0.03em und line-height 1.05, h2 600 bei 32px, Fließtext 400 bei 16px, UI-Labels 13px 500. Border-radius 8px auf Karten und Buttons, 12px auf Screenshot-Rahmen. Keine Drop-Shadows; Tiefe entsteht aus Rändern und einem 1px inset Glanzlicht rgba(255,255,255,0.04) oben auf Karten. Hero: zentrierte Headline, einzeilige Subline, Primärbutton solides #5e6ad2 mit weißem Text, Sekundärbutton transparent mit Rand. Darunter ein Produkt-Screenshot in einem umrandeten Rahmen mit radialem Glow dahinter (rgba(94,106,210,0.25), blur 120px). Feature-Liste als drei Spalten mit 16px Icons in #b4bcd0. Motion: Abschnitte faden beim Scrollen 16px nach oben über 500ms, um 60ms gestaffelt; Hover auf Buttons hellt 6 % auf.
## 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 }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.