# Neo-grotesca tech

Também chamado de: estilo grotesk tech, Helvetica tech, estilo tipográfico Stripe-Vercel, grotesca de marca de desenvolvedor, SaaS modernista  
Era: 2016 em diante (Stripe 2016, Vercel 2020, OpenAI 2022, Anthropic 2023)  
Página: https://designforai.dev/pt/style/neo-grotesque-tech

## Traços

- uma família neo-grotesca ou geométrico-grotesca carregando a identidade inteira (linhagem Inter, Söhne, Suisse, Geist)
- tracking apertado em títulos grandes (-0.02 a -0.04em), pesos médios, nada de bold gritando
- preto ou quase preto sobre branco com um cinza médio; um único acento contido ou nenhum
- alinhamento rígido à esquerda, grade de 8px, filetes de 1px, raios pequenos (4-8px)
- blocos de código e mono inline são elementos de design de primeira classe
- ilustração mínima: diagramas de linha fina, screenshots de produto com molduras de 1px
- movimento contido: 150-250ms, opacidade e translate pequeno

Paleta: #ffffff página, #0a0a0a texto, #666666 atenuado, #ebebeb linha, #fafafa superfície, #0070f3 ou #171717 acento

Tipografia: Geist, Instrument Sans ou Archivo (gratuitas); as equivalentes comerciais são Söhne, Suisse Int'l, Neue Haas Grotesk; h1 600 a 48-72px com -0.03em, corpo 400 a 16px, mono (Geist Mono, JetBrains Mono) a 14px

## Faça

- escolha uma grotesca e uma mono; use só os pesos 400, 500 e 600
- componha os títulos apertados (-0.03em, line-height 1.05) e o corpo confortável (line-height 1.6)
- dê ao código o mesmo cuidado da prosa: mono 14px, borda de 1px, fundo #fafafa, raio 6px, cores de sintaxe atenuadas

## Evite

- não adicione gradientes, brilhos nem vidro; este estilo é seco de propósito
- não use mais de um acento, e considere nenhum (botões pretos)
- não centralize o corpo de texto nem use pílulas arredondadas para tudo; raio de 6px é o teto para botões

Conhecido por: Vercel, docs da Stripe, OpenAI, Anthropic, Sanity

## Semente CSS

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

Construa o site em estilo neo-grotesca tech. Fundo #ffffff, texto #0a0a0a, atenuado #666666, filetes #ebebeb, superfície #fafafa, o acento é preto (botões) com #0070f3 só para links. Fontes: Geist para todo o texto com pesos 400, 500 e 600 apenas; h1 600 a 64px com -0.03em e line-height 1.05, h2 600 a 32px -0.02em, corpo 400 a 16px line-height 1.6, labels 500 a 13px; Geist Mono 14px para código. Layout: grade de 8px, max-width 1080px, coluna de conteúdo 640px, seções a 96px de distância separadas por filetes de 1px, tudo alinhado à esquerda. Botões: 40px de altura, raio 6px, preenchimento #0a0a0a com texto branco; o secundário tem borda 1px #ebebeb e fundo #fafafa. Blocos de código: #fafafa, borda 1px #ebebeb, raio 6px, padding 16px, cores de sintaxe atenuadas. Screenshots de produto numa moldura com borda de 1px e raio 8px, sem sombra. Nav: logo, quatro links de 14px, um botão preto, 64px de altura. Movimento: 150ms de opacidade no hover, fade-up de 250ms na entrada das seções.