Design for AI

Stil Neo-Grotesk Tech: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für neo-grotesk tech. Auch bekannt als Tech-Grotesk-Stil, Helvetica-Tech, Stripe-Vercel-Typografiestil, Developer-Brand-Grotesk, modernistisches SaaS. ab 2016 (Stripe 2016, Vercel 2020, OpenAI 2022, Anthropic 2023).

Merkmale

  • eine neo-groteske oder geometrisch-groteske Familie trägt die ganze Identität (Inter-, Söhne-, Suisse-, Geist-Linie)
  • enges Tracking auf großen Überschriften (-0.02 bis -0.04em), mittlere Schnitte, kein fettes Schreien
  • Schwarz oder Fast-Schwarz auf Weiß mit einem Mittelgrau; ein einzelner zurückhaltender Akzent oder keiner
  • strenge Linksbündigkeit, 8px-Raster, 1px Haarlinien, kleine Radien (4-8px)
  • Codeblöcke und Inline-Mono sind erstklassige Designelemente
  • minimale Illustration: dünne Liniendiagramme, Produkt-Screenshots mit 1px Rahmen
  • Motion ist zurückhaltend: 150-250ms, Opacity und kleines translate

Palette

#ffffff Seite, #0a0a0a Text, #666666 gedämpft, #ebebeb Linie, #fafafa Fläche, #0070f3 oder #171717 Akzent

Schrift

Geist, Instrument Sans oder Archivo (frei); kommerzielle Entsprechungen sind Söhne, Suisse Int'l, Neue Haas Grotesk; h1 600 bei 48-72px mit -0.03em, Fließtext 400 bei 16px, Mono (Geist Mono, JetBrains Mono) bei 14px

Do

  • wähle eine Grotesk und eine Mono; nutze nur die Gewichte 400, 500 und 600
  • setze Überschriften eng (-0.03em, line-height 1.05) und Fließtext bequem (line-height 1.6)
  • gib Code dieselbe Sorgfalt wie Prosa: 14px Mono, 1px Rand, #fafafa Hintergrund, 6px Radius, gedämpfte Syntaxfarben

Don't

  • füge keine Verläufe, Glows oder Glas hinzu; dieser Stil ist absichtlich trocken
  • nutze nicht mehr als einen Akzent und erwäge keinen (schwarze Buttons)
  • zentriere keinen Fließtext und nutze nicht überall runde Pillen; 6px Radius ist die Obergrenze für Buttons

Bekannt dafür: Vercel, Stripe-Docs, OpenAI, Anthropic, Sanity

CSS-Seed
:root {
  --bg: #ffffff;
   --fg: #0a0a0a;
   --muted: #666666;
   --line: #ebebeb;
   --surface: #fafafa;
   --accent: #0a0a0a;
   --radius: 6px;
   --font: 'Geist',sans-serif;
   --font-mono: 'Geist Mono',monospace
}
Prompt

Baue die Seite im Neo-Grotesk-Tech-Stil. Hintergrund #ffffff, Text #0a0a0a, gedämpft #666666, Haarlinien #ebebeb, Fläche #fafafa, Akzent ist Schwarz (Buttons) mit #0070f3 nur für Links. Schriften: Geist für allen Text mit nur den Gewichten 400, 500 und 600; h1 600 bei 64px mit -0.03em und line-height 1.05, h2 600 bei 32px -0.02em, Fließtext 400 bei 16px line-height 1.6, Labels 500 bei 13px; Geist Mono 14px für Code. Layout: 8px-Raster, max-width 1080px, Inhaltsspalte 640px, Abschnitte 96px auseinander, getrennt durch 1px Haarlinien, alles linksbündig. Buttons: 40px hoch, Radius 6px, #0a0a0a Füllung mit weißem Text; sekundär hat einen 1px #ebebeb Rand und #fafafa Hintergrund. Codeblöcke: #fafafa, 1px #ebebeb Rand, Radius 6px, 16px Padding, gedämpfte Syntaxfarben. Produkt-Screenshots in einem 1px umrandeten Rahmen mit Radius 8px, kein Schatten. Nav: Logo, vier 14px Links, ein schwarzer Button, 64px hoch. Motion: 150ms Opacity bei Hover, 250ms Fade-up beim Erscheinen von Abschnitten.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Neo-Grotesk-Tech-Stil. Hintergrund #ffffff, Text #0a0a0a, gedämpft #666666, Haarlinien #ebebeb, Fläche #fafafa, Akzent ist Schwarz (Buttons) mit #0070f3 nur für Links. Schriften: Geist für allen Text mit nur den Gewichten 400, 500 und 600; h1 600 bei 64px mit -0.03em und line-height 1.05, h2 600 bei 32px -0.02em, Fließtext 400 bei 16px line-height 1.6, Labels 500 bei 13px; Geist Mono 14px für Code. Layout: 8px-Raster, max-width 1080px, Inhaltsspalte 640px, Abschnitte 96px auseinander, getrennt durch 1px Haarlinien, alles linksbündig. Buttons: 40px hoch, Radius 6px, #0a0a0a Füllung mit weißem Text; sekundär hat einen 1px #ebebeb Rand und #fafafa Hintergrund. Codeblöcke: #fafafa, 1px #ebebeb Rand, Radius 6px, 16px Padding, gedämpfte Syntaxfarben. Produkt-Screenshots in einem 1px umrandeten Rahmen mit Radius 8px, kein Schatten. Nav: Logo, vier 14px Links, ein schwarzer Button, 64px hoch. Motion: 150ms Opacity bei Hover, 250ms Fade-up beim Erscheinen von Abschnitten.

## Tokens
:root { --bg:#ffffff; --fg:#0a0a0a; --muted:#666666; --line:#ebebeb; --surface:#fafafa; --accent:#0a0a0a; --radius:6px; --font:'Geist',sans-serif; --font-mono:'Geist Mono',monospace }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.