# Neo-Grotesk Tech

Auch bekannt als: Tech-Grotesk-Stil, Helvetica-Tech, Stripe-Vercel-Typografiestil, Developer-Brand-Grotesk, modernistisches SaaS  
Ära: ab 2016 (Stripe 2016, Vercel 2020, OpenAI 2022, Anthropic 2023)  
Seite: https://designforai.dev/de/style/neo-grotesque-tech

## 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

```css
: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.