# Estilo suíço / tipográfico internacional

Também chamado de: estilo suíço, International Style, design de grade, design Helvetica, estilo Müller-Brockmann  
Era: Suíça dos anos 1950; revival na web dos anos 2010 em diante  
Página: https://designforai.dev/pt/style/swiss-international-typographic-style

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

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