Design for AI

Estilo Estilo suíço / tipográfico internacional: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de estilo suíço / tipográfico internacional. Também chamado de estilo suíço, International Style, design de grade, design Helvetica, estilo Müller-Brockmann. Suíça dos anos 1950; revival na web dos anos 2010 em diante.

Traços

  • grade matemática rígida (12 colunas) com disciplina de alinhamento visível
  • uma família sans-serif (linhagem Helvetica), layouts assimétricos, alinhado à esquerda com margem direita irregular
  • contraste de escala enorme: manchete gigante, corpo pequeno, muitas células vazias na grade
  • vermelho primário (ou uma cor forte) mais preto sobre branco
  • formas geométricas e diagonais usadas como estrutura, não decoração
  • fotografia objetiva, recorte duro, sem ilustração
  • sem ornamento, sem sombras, sem cantos arredondados

Paleta

#ffffff página, #000000 texto, #e30613 vermelho de acento, #f2f2f2 superfície secundária, #737373 texto atenuado

Tipografia

Helvetica Neue se licenciada; gratuitas: Work Sans, a "Instrument Sans" parecida com Neue Haas, ou Archivo; manchete 700 a 72-120px com tracking -0.03em, corpo 400 a 16-18px, legendas 12px em caixa alta 0.08em

Faça

  • desenhe uma grade de 12 colunas com gutters de 24px e alinhe cada aresta a ela, incluindo imagens
  • use uma família tipográfica em dois pesos e uma escala de tamanhos rígida (12/16/24/48/96)
  • deixe colunas inteiras vazias; o espaço em branco também é elemento da grade

Evite

  • não centralize texto; só alinhado à esquerda
  • não adicione sombras, gradientes, raio nem texturas
  • não use mais de uma cor de acento

Conhecido por: Ferrovias Federais Suíças, Museum für Gestaltung Zürich, Bloomberg Businessweek (anos 2010), Wired.com (redesign de 2020)

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

Construa o site em Estilo Tipográfico Internacional suíço. Fundo #ffffff, texto #000000, acento único #e30613, texto atenuado #737373, nenhuma outra cor. Layout numa grade rígida de 12 colunas com gutters de 24px e largura máxima de 1440px; cada bloco de texto, imagem e filete alinha às arestas das colunas. Manchete em Work Sans 700 a 96px no desktop / 48px no mobile com letter-spacing -0.03em e line-height 0.95, alinhada à esquerda, ocupando 8 colunas e deixando 4 vazias. Corpo Work Sans 400 a 18px, line-height 1.5, no máximo 6 colunas de largura. Legendas 12px em caixa alta com tracking 0.08em. Use filetes pretos de 1px para separar seções e um único retângulo vermelho grande ou faixa diagonal como gráfico estrutural. Sem border-radius, sem sombras, sem gradientes, sem ícones além de setas. Fotografia em preto e branco, recortada na grade. Movimento: nenhum além de uma troca de cor de 150ms nos links.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em Estilo Tipográfico Internacional suíço. Fundo #ffffff, texto #000000, acento único #e30613, texto atenuado #737373, nenhuma outra cor. Layout numa grade rígida de 12 colunas com gutters de 24px e largura máxima de 1440px; cada bloco de texto, imagem e filete alinha às arestas das colunas. Manchete em Work Sans 700 a 96px no desktop / 48px no mobile com letter-spacing -0.03em e line-height 0.95, alinhada à esquerda, ocupando 8 colunas e deixando 4 vazias. Corpo Work Sans 400 a 18px, line-height 1.5, no máximo 6 colunas de largura. Legendas 12px em caixa alta com tracking 0.08em. Use filetes pretos de 1px para separar seções e um único retângulo vermelho grande ou faixa diagonal como gráfico estrutural. Sem border-radius, sem sombras, sem gradientes, sem ícones além de setas. Fotografia em preto e branco, recortada na grade. Movimento: nenhum além de uma troca de cor de 150ms nos links.

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

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.