Design for AI

Neo-grotesque tech: UI design prompt

Palette, type rules and a pasteable prompt for neo-grotesque tech. Also called tech grotesk style, Helvetica tech, Stripe-Vercel typography style, developer-brand grotesk, modernist SaaS. 2016 onward (Stripe 2016, Vercel 2020, OpenAI 2022, Anthropic 2023).

Traits

  • one neo-grotesque or geometric-grotesque family carrying the whole identity (Inter, Söhne, Suisse, Geist lineage)
  • tight tracking on large headings (-0.02 to -0.04em), medium weights, no bold shouting
  • black or near-black on white with a mid grey; a single restrained accent or none
  • strict left alignment, 8px grid, 1px hairlines, small radii (4-8px)
  • code blocks and inline mono are first-class design elements
  • minimal illustration: thin line diagrams, product screenshots with 1px frames
  • motion is restrained: 150-250ms, opacity and small translate

Palette

#ffffff page, #0a0a0a text, #666666 muted, #ebebeb line, #fafafa surface, #0070f3 or #171717 accent

Type

Geist, Instrument Sans or Archivo (free); commercial equivalents are Söhne, Suisse Int'l, Neue Haas Grotesk; h1 600 at 48-72px with -0.03em, body 400 at 16px, mono (Geist Mono, JetBrains Mono) at 14px

Do

  • pick one grotesk and one mono; use weight 400, 500 and 600 only
  • set headings tight (-0.03em, line-height 1.05) and body comfortable (line-height 1.6)
  • give code the same care as prose: 14px mono, 1px border, #fafafa background, 6px radius, syntax colours muted

Don't

  • do not add gradients, glows or glass; this style is dry on purpose
  • do not use more than one accent, and consider none (black buttons)
  • do not centre body text or use rounded pills for everything; 6px radius is the ceiling for buttons

Known for it: 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

Build the site in neo-grotesque tech style. Background #ffffff, text #0a0a0a, muted #666666, hairlines #ebebeb, surface #fafafa, accent is black (buttons) with #0070f3 for links only. Fonts: Geist for all text with weights 400, 500 and 600 only; h1 600 at 64px with -0.03em and line-height 1.05, h2 600 at 32px -0.02em, body 400 at 16px line-height 1.6, labels 500 at 13px; Geist Mono 14px for code. Layout: 8px grid, max-width 1080px, content column 640px, sections 96px apart separated by 1px hairlines, everything flush left. Buttons: 40px tall, radius 6px, #0a0a0a fill with white text; secondary has a 1px #ebebeb border and #fafafa background. Code blocks: #fafafa, 1px #ebebeb border, radius 6px, 16px padding, muted syntax colours. Product screenshots in a 1px-bordered frame with radius 8px, no shadow. Nav: logo, four 14px links, one black button, 64px tall. Motion: 150ms opacity on hover, 250ms fade-up on section entry.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in neo-grotesque tech style. Background #ffffff, text #0a0a0a, muted #666666, hairlines #ebebeb, surface #fafafa, accent is black (buttons) with #0070f3 for links only. Fonts: Geist for all text with weights 400, 500 and 600 only; h1 600 at 64px with -0.03em and line-height 1.05, h2 600 at 32px -0.02em, body 400 at 16px line-height 1.6, labels 500 at 13px; Geist Mono 14px for code. Layout: 8px grid, max-width 1080px, content column 640px, sections 96px apart separated by 1px hairlines, everything flush left. Buttons: 40px tall, radius 6px, #0a0a0a fill with white text; secondary has a 1px #ebebeb border and #fafafa background. Code blocks: #fafafa, 1px #ebebeb border, radius 6px, 16px padding, muted syntax colours. Product screenshots in a 1px-bordered frame with radius 8px, no shadow. Nav: logo, four 14px links, one black button, 64px tall. Motion: 150ms opacity on hover, 250ms fade-up on section entry.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.