Design for AI

Estilo Estilo suizo / tipográfico internacional: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para estilo suizo / tipográfico internacional. También llamado estilo suizo, estilo internacional, diseño de retícula, diseño Helvetica, estilo Müller-Brockmann. Suiza, años 50; revival web de 2010 en adelante.

Rasgos

  • retícula matemática estricta (12 columnas) con una disciplina de alineación visible
  • una sola familia sans-serif (linaje Helvetica), layouts asimétricos, alineado a la izquierda con bandera derecha
  • contraste de escala enorme: titular gigante, cuerpo pequeño, muchas celdas de la retícula vacías
  • rojo primario (o un solo color fuerte) más negro sobre blanco
  • formas geométricas y diagonales usadas como estructura, no como decoración
  • fotografía objetiva, recortada con dureza, sin ilustración
  • sin ornamento, sin sombras, sin esquinas redondeadas

Paleta

#ffffff página, #000000 texto, #e30613 rojo de acento, #f2f2f2 superficie secundaria, #737373 texto apagado

Tipografía

Helvetica Neue si tienes licencia; libres: Work Sans, la parecida a Neue Haas "Instrument Sans", o Archivo; titular 700 a 72-120px con tracking -0.03em, cuerpo 400 a 16-18px, pies 12px en mayúsculas 0.08em

Haz

  • dibuja una retícula de 12 columnas con medianiles de 24px y alinea cada borde a ella, imágenes incluidas
  • usa una familia tipográfica en dos pesos y una escala de tamaños estricta (12/16/24/48/96)
  • deja columnas enteras vacías; el espacio en blanco también es un elemento de la retícula

Evita

  • no centres el texto; solo alineado a la izquierda
  • no añadas sombras, gradientes, radio ni texturas
  • no uses más de un color de acento

Conocido por: Ferrocarriles Federales Suizos, Museum für Gestaltung Zürich, Bloomberg Businessweek (años 2010), Wired.com (rediseño de 2020)

Semilla CSS
:root {
  --bg: #ffffff;
   --fg: #000000;
   --accent: #e30613;
   --muted: #737373;
   --radius: 0;
   --gutter: 24px;
   --font: 'Work Sans',sans-serif
}
Prompt

Construye el sitio en estilo tipográfico internacional suizo. Fondo #ffffff, texto #000000, un solo acento #e30613, texto apagado #737373, ningún otro color. Layout sobre una retícula estricta de 12 columnas con medianiles de 24px y un ancho máximo de 1440px; cada bloque de texto, imagen y filete se alinea a los bordes de columna. Titular en Work Sans 700 a 96px en escritorio / 48px en móvil con letter-spacing -0.03em y line-height 0.95, alineado a la izquierda, ocupando 8 columnas y dejando 4 vacías. Cuerpo Work Sans 400 a 18px, line-height 1.5, máximo 6 columnas de ancho. Pies a 12px en mayúsculas con tracking 0.08em. Usa filetes negros de 1px para separar secciones y un único rectángulo rojo grande o una banda diagonal como gráfico estructural. Sin border-radius, sin sombras, sin gradientes, sin iconos salvo flechas. Fotografía en blanco y negro, recortada a la retícula. Movimiento: ninguno salvo un cambio de color de 150ms en los enlaces.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo tipográfico internacional suizo. Fondo #ffffff, texto #000000, un solo acento #e30613, texto apagado #737373, ningún otro color. Layout sobre una retícula estricta de 12 columnas con medianiles de 24px y un ancho máximo de 1440px; cada bloque de texto, imagen y filete se alinea a los bordes de columna. Titular en Work Sans 700 a 96px en escritorio / 48px en móvil con letter-spacing -0.03em y line-height 0.95, alineado a la izquierda, ocupando 8 columnas y dejando 4 vacías. Cuerpo Work Sans 400 a 18px, line-height 1.5, máximo 6 columnas de ancho. Pies a 12px en mayúsculas con tracking 0.08em. Usa filetes negros de 1px para separar secciones y un único rectángulo rojo grande o una banda diagonal como gráfico estructural. Sin border-radius, sin sombras, sin gradientes, sin iconos salvo flechas. Fotografía en blanco y negro, recortada a la retícula. Movimiento: ninguno salvo un cambio de color de 150ms en los enlaces.

## Tokens
:root { --bg:#ffffff; --fg:#000000; --accent:#e30613; --muted:#737373; --radius:0; --gutter:24px; --font:'Work Sans',sans-serif }

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