Design for AI

Estilo Tech neogrotesca: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para tech neogrotesca. También llamado estilo grotesk tech, Helvetica tech, estilo tipográfico Stripe-Vercel, grotesk de marca de desarrollador, SaaS modernista. 2016 en adelante (Stripe 2016, Vercel 2020, OpenAI 2022, Anthropic 2023).

Rasgos

  • una sola familia neogrotesca o geométrico-grotesca lleva toda la identidad (linaje Inter, Söhne, Suisse, Geist)
  • tracking apretado en los títulos grandes (-0.02 a -0.04em), pesos medios, sin negritas a gritos
  • negro o casi negro sobre blanco con un gris medio; un único acento contenido o ninguno
  • alineación a la izquierda estricta, retícula de 8px, filetes de 1px, radios pequeños (4-8px)
  • los bloques de código y la mono en línea son elementos de diseño de primera clase
  • ilustración mínima: diagramas de línea fina, capturas de producto con marcos de 1px
  • movimiento contenido: 150-250ms, opacidad y translate pequeño

Paleta

#ffffff página, #0a0a0a texto, #666666 apagado, #ebebeb línea, #fafafa superficie, #0070f3 o #171717 acento

Tipografía

Geist, Instrument Sans o Archivo (libres); los equivalentes comerciales son Söhne, Suisse Int'l, Neue Haas Grotesk; h1 600 a 48-72px con -0.03em, cuerpo 400 a 16px, mono (Geist Mono, JetBrains Mono) a 14px

Haz

  • elige una grotesk y una mono; usa solo los pesos 400, 500 y 600
  • compón los títulos apretados (-0.03em, line-height 1.05) y el cuerpo cómodo (line-height 1.6)
  • cuida el código tanto como la prosa: mono a 14px, borde 1px, fondo #fafafa, radio 6px, colores de sintaxis apagados

Evita

  • no añadas gradientes, resplandores ni cristal; este estilo es seco a propósito
  • no uses más de un acento, y plantéate ninguno (botones negros)
  • no centres el texto del cuerpo ni uses píldoras redondeadas para todo; el radio de 6px es el techo para los botones

Conocido por: Vercel, docs de Stripe, OpenAI, Anthropic, Sanity

Semilla 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

Construye el sitio en estilo tech neogrotesco. Fondo #ffffff, texto #0a0a0a, apagado #666666, filetes #ebebeb, superficie #fafafa, el acento es negro (botones) con #0070f3 solo para enlaces. Fuentes: Geist para todo el texto con pesos 400, 500 y 600 únicamente; h1 600 a 64px con -0.03em y line-height 1.05, h2 600 a 32px -0.02em, cuerpo 400 a 16px con line-height 1.6, etiquetas 500 a 13px; Geist Mono 14px para código. Layout: retícula de 8px, max-width 1080px, columna de contenido de 640px, secciones separadas 96px por filetes de 1px, todo alineado a la izquierda. Botones: 40px de alto, radio 6px, relleno #0a0a0a con texto blanco; el secundario lleva borde 1px #ebebeb y fondo #fafafa. Bloques de código: #fafafa, borde 1px #ebebeb, radio 6px, padding 16px, colores de sintaxis apagados. Capturas de producto en un marco con borde de 1px y radio 8px, sin sombra. Nav: logo, cuatro enlaces de 14px, un botón negro, 64px de alto. Movimiento: 150ms de opacidad en hover, fade-up de 250ms al entrar en cada sección.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo tech neogrotesco. Fondo #ffffff, texto #0a0a0a, apagado #666666, filetes #ebebeb, superficie #fafafa, el acento es negro (botones) con #0070f3 solo para enlaces. Fuentes: Geist para todo el texto con pesos 400, 500 y 600 únicamente; h1 600 a 64px con -0.03em y line-height 1.05, h2 600 a 32px -0.02em, cuerpo 400 a 16px con line-height 1.6, etiquetas 500 a 13px; Geist Mono 14px para código. Layout: retícula de 8px, max-width 1080px, columna de contenido de 640px, secciones separadas 96px por filetes de 1px, todo alineado a la izquierda. Botones: 40px de alto, radio 6px, relleno #0a0a0a con texto blanco; el secundario lleva borde 1px #ebebeb y fondo #fafafa. Bloques de código: #fafafa, borde 1px #ebebeb, radio 6px, padding 16px, colores de sintaxis apagados. Capturas de producto en un marco con borde de 1px y radio 8px, sin sombra. Nav: logo, cuatro enlaces de 14px, un botón negro, 64px de alto. Movimiento: 150ms de opacidad en hover, fade-up de 250ms al entrar en cada sección.

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

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.