Swiss UI Design

Este skill transforma os princípios da Escola Suíça em decisões concretas de UI. A ideia fundadora da escola, de Ernst Keller, é que a solução de design deve surgir do conteúdo do problema. Tudo abaixo segue disso: a grade é a lógica, o tipo é a imagem, a cor são planos fortes com funções claras, o espaço em branco é estrutura, e nada é decoração.

O segundo objetivo: o resultado não deve parecer gerado por IA. Interfaces de IA genéricas compartilham uma aparência (herói centralizado, gradiente roxo, cards arredondados com sombras suaves, três recursos com ícones, texto vago). O estilo suíço é o oposto disso, então aplicá-lo com disciplina resolve a maior parte do problema; a Parte 5 cuida do resto.

O terceiro objetivo: o resultado deve ter força. Uma página arrumada com fundo creme e um bloco laranja é suíça apenas na grade. Os pôsteres pelos quais este estilo é conhecido são cobertos de cor: cor forte e plana ou preto cobre 83–97% da folha, ou uma tinta cromática carrega tudo e um painel matizado preenche o resto. Portanto, o Passo 4 escolhe um Look (fundo, esquema de cores, tratamento de imagem) antes de qualquer layout. references/looks.md contém cinco Looks amostrados de pôsteres reais, com CSS testado; scripts/color_power.py mede o resultado.

Como este arquivo está organizado

Fluxo de trabalho — as etapas, em ordem
Grade, espaçamento, tipo e cor — tokens, escalas, paletas, receitas de layout, CSS base
Árabe e RTL
Componentes
Como não parecer feito por IA — a lista de verificação
Fonte: a Escola Suíça em resumo (do livreto A Escola Suíça de Design)

Também neste skill: references/looks.md (Looks, pares de contraste, mecânicas CSS testadas) e scripts/color_power.py (verificação de potência de cor para capturas de tela).

Parte 1 — Fluxo de trabalho

1. Comece pelo conteúdo

Escreva a única coisa para a qual a tela existe (uma mensagem, uma ação). Ela se torna o elemento dominante.
Classifique o restante em no máximo 3–4 níveis de hierarquia.
Se o usuário não forneceu conteúdo, escreva conteúdo real e específico no idioma alvo: nomes locais realistas, números exatos, datas, preços, lugares. Nunca lorem ipsum, nunca preenchimento de marketing ("Desbloqueie o poder de…", ou seu equivalente em árabe "descubra o poder de…"). Conteúdo específico é o sinal mais forte de que um ser humano fez a página. Informe ao usuário quais detalhes são suposições a serem substituídas.
Escreva o texto à moda suíça: objetivo e factual, livre de alegações exageradas de publicidade e propaganda (definição de Meggs para o estilo). O designer atua como um canal claro para a informação, não como um vendedor. Fatos, números, condições e verbos simples convencem melhor aqui do que adjetivos.
Decida o idioma e a direção. Árabe → dir="rtl" e aplique a Parte 3, que altera alinhamento, fontes e altura da linha.

2. Escolha uma direção — de propósito

A Escola Suíça não tem uma aparência única. Escolha uma destas direções, cada uma baseada nos princípios de um pioneiro ou escola (use os princípios; nunca copie seus pôsteres):

Direção	Caráter	Adequado para
Zurique — Müller-Brockmann	Grade rigorosa, às vezes visível; tom objetivo; tipo pequeno e preciso ao lado de uma grande foto ou forma geométrica abstrata; muito espaço em branco.	Documentação, aplicativos densos, painéis, instituições, finanças
Basileia — Hofmann	Preto e branco, alto contraste, figura–fundo, poucas formas grandes, tipo como forma.	Cultura, portfólios, eventos, arquitetura
Ballmer	Títulos construídos na grade, pesos pesados, vermelho + preto, palavras empilhadas, estrutura visível.	Marcas, campanhas, lançamentos, landing pages com atitude
Keller	Campos de cor planos e ousados, formas geométricas simples, tipo superdimensionado cortado pela borda.	Produtos de consumo, educação, comunidade, museus
Pôster de objeto de Basileia (Sachplakat)	Um objeto (o produto, uma ferramenta, um prato, um dispositivo) mostrado enorme, em close-up e nitidamente fotografado, com quase nada além de um nome.	Produtos físicos, alimentos, varejo, hardware
Fotomontagem (Herbert Matter)	Fotografias combinadas em escalas dramaticamente diferentes, cortadas na grade, com tipo travado nelas.	Turismo, lugares, eventos, mídia

Contexto que ajuda na escolha: a Biblioteca Nacional Suíça descreve duas correntes do pós-guerra, Zurique = Arte Concreta (construção matemática, planos geométricos puros; Max Bill construiu a primeira grade de layout verdadeira no final dos anos 1930) e Basileia = Nova Objetividade (o objeto, a fotografia, contraste de forma). Keller mesmo não ensinou um estilo fixo: ele acreditava que a solução deveria emergir do conteúdo, então seu próprio trabalho é muito diverso. O skill o segue: a direção vem do conteúdo, não do hábito.

Zurique é a escolha "segura" e é fácil cair nela toda vez; isso faz todo resultado parecer igual. Escolha Zurique quando o conteúdo for denso e funcional. Para landing pages, marcas e campanhas, prefira Ballmer, Keller ou Basileia — eles dão à página um momento forte (um campo cheio de cor forte, uma palavra gigante cortada, uma forma de alto contraste) que uma página silenciosa não tem. Informe ao usuário em uma linha qual direção você escolheu e por quê. Não escreva dentro da interface.

Direção e Look são escolhas separadas. A direção decide a estrutura; o Look (Passo 4) decide a cor. Uma grade de Zurique pode usar o Look Sol, e Ballmer pode usar Preto + espectro.

3. Encontre o conceito no conteúdo

A Escola de Basileia colocou assim (Kenneth Hiebert, um aluno de Hofmann): uma estrutura abstrata é o veículo para a comunicação, e encontrá-la força você a isolar a essência da mensagem antes de qualquer estilo superficial. Faça isso por escrito antes de projetar:

Liste 5–8 fatos concretos do conteúdo: um número, um lugar, um objeto físico, um tempo, um processo, um nome, um contraste (antes/depois, pequeno/grande).
Escreva três conceitos diferentes, uma frase cada, cada um construído sobre um fato diferente. Exemplo para um espaço de coworking: (a) o endereço do prédio e a planta baixa como imagem; (b) as 15 horas do dia como uma grade que você reserva diretamente; (c) os objetos reais — uma mesa, uma chave, uma cadeira — mostrados enormes (pôster de objeto).
Escolha aquele que é mais específico para este produto, aquele que não poderia ser movido para a página de um concorrente mudando o nome. Diga em uma linha qual você escolheu.

O elemento gigante deve vir do conteúdo, não de uma chamada para ação. Um verbo imperativo gigante ("Reserve", "Comece", ou seus equivalentes em árabe) é um truque: serve para qualquer produto e rapidamente se torna o novo modelo. Use um substantivo, número ou nome que apenas este produto tenha: o lugar, o número chave, o objeto, a data.

4. Escolha o Look, depois defina o sistema

Look primeiro. Antes de qualquer layout, escolha um Look e abra references/looks.md para seus tokens, pares de tipo, composição e CSS testado. O fundo vem primeiro: cor forte e plana ou tinta cobre pelo menos 60% da primeira tela. Os dois Looks de fundo de papel são a exceção: uma tinta cromática carrega todo o tipo e um painel matizado preenche pelo menos 30%. Escolha a partir do conteúdo, nunca use o mesmo Look duas vezes seguidas e use um Look por página (as seções variam a composição, não a paleta).

Look	Fundo	Paleta	Adequado para
1 Sol	um tom forte e seu complemento	amarelo `#FFC611` · índigo `#3A3A9C` · marinho `#16154A`	landing pages, eventos, cultura, educação
2 Tinta violeta	branco; uma tinta cromática para todo o tipo	violeta `#4F2A7D` · pervinca `#CFDBF1` · orquídea `#BD9CBB`	editorial, diários, relatórios
3 Faixas primárias	3–4 faixas empilhadas em sangria	azul `#2F7BFF` · verde `#0FA23A` · amarelo `#EFB83E` · vermelho `#E6040A` · tinta	landing pages orientadas a fatos, campanhas, instituições
4 Preto + espectro	preto de tinta	6–9 matizes puros, cada um pelo menos duas vezes	catálogos, reservas, famílias de produtos, legendas de painéis
5 Pôster de show	creme ou preto	tinta + vermelho, ciano, amarelo, roxo, com sobreposição	eventos, música, comunidade, lançamentos

Laranja + marinho, cobalto + amarelo, rosa + verde escuro e outros fundos estão no mesmo arquivo. Se o briefing nomear uma cor de marca, ela se torna o fundo ou um plano, e os parceiros são escolhidos pelo esquema.

Depois os tokens (Parte 2): a linha do corpo (tamanho e altura da linha), uma grade derivada dela (12/8/4 colunas por padrão, ou outro número se o conteúdo pedir), unidade de linha de base (8px), uma família tipográfica (ou uma árabe + uma parceira latina) com uma escala íngreme, e a paleta do Look com uma cor de texto por superfície, cada par verificado quanto ao contraste.

5. Componha com assimetria

A fonte descreve equilíbrio através da distribuição de forças visuais, não simetria.

Não centralize o herói. Coloque um elemento pesado (título enorme, foto grande, campo de cor) contra um lado, equilibrado por espaço em branco e texto pequeno no outro.
Use intervalos de colunas desiguais: 5+7, 4+8, 3+9, 2+6+4. Terços iguais em todo lugar é o padrão da IA.
Desloque de propósito: título nas colunas 1–9, introdução em 7–11 abaixo, metadados em 1–3.
Dê a cada seção uma composição diferente na mesma grade. Repetir "título centralizado + grade de cards" em todas as seções é um forte sinal de IA.
Antes de codificar uma seção, escreva seus intervalos como um comentário (/* hero: h1 1–10, meta 1–3, lead 6–11 */). Isso mantém a grade honesta.

6. Adicione a camada de pôster — o que o torna suíço, não apenas limpo

Este passo é a diferença entre um design suíço e um arrumado. A fonte em si observa que os princípios suíços se tornaram a base da UI moderna. Isso significa que apenas as regras funcionais (grade, linhas finas, texto alinhado à esquerda, uma lista de índice, uma faixa de estatísticas, um acento) agora produzem algo que todo sistema de design já se parece. É limpo, mas não é novo e não é reconhecivelmente suíço. O que tornou a escola suíça distinta foram seus pôsteres: tipo usado como imagem, planos de cor ousados, geometria, tensão de escala e estrutura visível. Traga essa linguagem para a interface.

As fontes dizem a mesma coisa de dois lados. Um estudo sobre design plano (Aristova & Vasilieva) traça o design web plano de volta ao Estilo Internacional, e adverte que sua propagação torna os sites uniformes e enfraquece a identidade de cada site e instituição. Um livro de história do design observa que, uma vez que o estilo suíço se tornou universal, sua linguagem visual se tornou menos inovadora. A cura não é abandonar os princípios. É usá-los como os designers originais fizeram, como um método para encontrar uma forma específica para cada peça de conteúdo.

Regra: uma landing page, um site de marketing ou uma página de marca precisa de pelo menos três movimentos de assinatura. Um vai no herói, e pelo menos mais dois vão em outras seções. Uma UI de produto (painel, aplicativo) permanece funcional, mas ganha um momento de pôster: o cabeçalho da página, a tela de login, um estado vazio ou um divisor de seção.

Movimentos de assinatura (cada um vem de um princípio visto nos exemplos de pôsteres da fonte; use o princípio e nunca reproduza um pôster):

#	Movimento	Como em UI	CSS
1	Letras como arquitetura (Ballmer)	Uma palavra ou inicial construída a partir de módulos da grade: letras enormes divididas por linhas de coluna, ou letras montadas a partir de quadrados. Em árabe, o Kufi quadrado é o equivalente natural, pois é uma escrita construída sobre uma grade. Use para uma marca palavra ou uma palavra de herói, desenhada em SVG a partir de quadrados e mantida legível.	SVG `<rect>` em uma grade modular; `grid` de células
2	Tipo gigante cortado (Keller)	Título maior que a viewport, cortado por uma ou duas bordas. A identidade da página é a própria palavra.	`font-size: 28vw; line-height: .8; margin-inline-start: -.05em;` seção `overflow: clip`
3	Tipo entrelaçado (Hofmann)	Palavras empilhadas com entrelinhamento negativo para que se toquem ou sobreponham, formando um bloco tipográfico.	`line-height: .75`, margens negativas, `mix-blend-mode: multiply` em uma segunda cor
4	Plano rotacionado (Müller-Brockmann)	Um bloco de conteúdo, uma grade ou uma dispersão de pequenos quadrados colocados em um plano girado 45° ou 90°, contra a grade reta.	`transform: rotate(-45deg)` em um wrapper; mantenha o texto dentro legível ou gire 90°
5	Geometria figura–fundo (Hofmann)	Um círculo grande, semicírculo ou anel em tinta ou uma cor forte da paleta, cortado pela borda da tela. O texto fica dentro da forma ou a envolve.	elemento `border-radius: 50%` / SVG, `clip-path`, `shape-outside`
6	Coluna vertical de palavra (Ballmer)	Uma coluna estreita de cor de altura total com uma palavra definida verticalmente. Árabe: gire a palavra inteira (nunca empilhe letras).	`writing-mode: vertical-rl`, `transform: rotate(180deg)`
7	Campo de cor + bloco de tinta (Keller)	Uma seção inteira em uma cor de campo forte com um retângulo preto sólido segurando o texto, ou duas cores fortes se encontrando borda a borda.	dois blocos na grade, sem sombras
8	Grade como conteúdo (Müller-Brockmann)	Linhas de grade desenhadas de propósito, com dados, números ou texto ajustados nas células. Use para um horário, uma grade de preços ou um índice de seção.	bordas nas células, ou linhas `repeating-linear-gradient`
9	Tensão de escala em uma linha	Uma palavra de 200px ao lado de metadados de 12px na mesma linha de base.	flex com `align-items: baseline`
10	Sobreposição tonal	Duas palavras de exibição em camadas, uma em cinza claro atrás e outra em tinta ou papel na frente, deslocadas na grade.	posicionamento absoluto dentro de uma célula da grade
11	Herói de objeto (Basel Sachplakat)	Um objeto real fotografado em close-up, maior que o natural, recortado ou cortado rente, com apenas o nome e um fato.	`object-fit: cover`, imagem abrangendo 8–12 colunas, cortada pela borda
12	Fotomontagem (Matter)	Duas ou três fotografias em escalas muito diferentes (um detalhe enorme, uma visão ampla pequena) cortadas em campos da grade, com tipo colocado sobre ou entre elas.	campos da grade com `overflow: clip`, imagens alinhadas às bordas do campo
13	Confronto (Hofmann)	Dois elementos diferentes se encontram de propósito: uma letra contra uma forma geométrica, um bloco de texto denso contra um campo vazio, uma forma redonda contra uma grade reta, preto contra branco.	duas áreas da grade compartilhando uma borda ou sobreposição

7. Codifique com CSS real

Use clamp(), min() e max() para tipografia fluida e espaçamento. Exemplo: font-size: clamp(1.5rem, 4vw, 4rem).
Prefira grid para layout geral e flex para componentes internos. Defina o grid no contêiner: grid-template-columns: repeat(12, 1fr); gap: 8px;.
Use margin-inline-start e margin-inline-end para espaçamento lógico (suporta RTL).
Use aspect-ratio para imagens e formas.
Use color-contrast() ou relative color para verificar contraste (se o navegador suportar).
Mantenha o CSS base em um arquivo separado; não repita tokens em cada seção.

8. Revise com a lista "Não parece IA" (Parte 5)

Após implementar, percorra a lista da Parte 5 e corrija qualquer item que ainda pareça genérico.

Parte 2 — Grade, espaçamento, tipo e cor

Grade

Colunas: 12 para telas largas, 8 para tablets, 4 para celular. Ou outro número se o conteúdo pedir (por exemplo, 16 para um catálogo denso, 6 para um editorial espaçoso).
Calha: 8px (unidade de linha de base). Pode ser 16px entre seções.
Margens: 16px em dispositivos móveis, 24px em tablet, 48px ou mais em desktop.
Linha de base: 8px. Múltiplos de 8 para padding, margin e altura.

Tipografia

Família: Uma família sem serifa (ex: Helvetica, Inter, Noto Sans, ou uma árabe + uma latina). Prefira pesos disponíveis: Light, Regular, Medium, Bold.
Escala: Use uma escala tipográfica íngreme (ex: 1.25 ou 1.333). Exemplo de escala:
- Micro: 12px
- Corpo: 16px
- Lead: 20px
- Subtítulo: 24px
- Título 3: 32px
- Título 2: 48px
- Título 1: 64px
- Herói: 96px+
Altura da linha: 1.4 para corpo, 1.1 para títulos grandes, 0.8 para tipo gigante.
Alinhamento: Flush-start (esquerda para LTR, direita para RTL). Nunca justifique.

Cor

Paleta: Use a paleta do Look escolhido. Cada cor tem um papel: fundo, texto, destaque, plano.
Contraste: Verifique contraste suficiente entre texto e fundo (WCAG AA: 4.5:1 para texto normal, 3:1 para texto grande).
Superfícies: Defina uma cor de texto por superfície (ex: texto em fundo claro = tinta, texto em fundo escuro = papel).

Parte 3 — Árabe e RTL

Ajustes

Defina dir="rtl" no elemento raiz ou contêiner.
Use fontes árabes compatíveis (ex: Noto Naskh Arabic, Tajawal, Readex Pro). A altura da linha para árabe é geralmente maior (1.6–1.8) devido às formas alongadas.
Inverta o alinhamento: flush-start vira flush-end (direita).
Espelhe gradientes, sombras e transformações: linear-gradient(to left, …) se torna to right.
Números e datas mantêm a direção LTR se forem números (ex: telefone, preço). Use unicode-bidi: isolate para números em meio a texto.
Kufi quadrado: use SVG ou fontes de Kufi geométrico para o efeito de letras como arquitetura. Certifique-se de que as palavras sejam legíveis e não percam o significado.

Parte 4 — Componentes

(Esta seção está truncada. Ela conteria componentes específicos de UI no estilo suíço, como cabeçalhos, cards, formulários, navegação, etc., construídos com os princípios acima.)

Parte 5 — Como não parecer feito por IA — lista de verificação

Revise o resultado contra esta lista. Se algum item for verdadeiro, corrija-o:

Herói centralizado: O principal conteúdo do topo está centralizado? → Torne-o assimétrico (desloque para um lado, use intervalos de coluna desiguais).
Gradiente roxo/azul: Há um gradiente suave? → Substitua por cor plana forte.
Cards arredondados com sombra suave: Os cards têm border-radius e box-shadow? → Use cantos retos e sem sombras, ou apenas uma borda de 1px.
Três recursos com ícones: Há uma seção "Por que nós" com três colunas, cada uma com um ícone e um texto vago? → Substitua por dados reais, uma imagem grande, ou um único fato forte.
Texto vago e marketing: O texto contém frases como "descubra o poder de" ou "transforme sua experiência"? → Reescreva com objetividade factual.
Simetria em toda parte: Cada seção é simétrica? → Varie a composição: uma seção com bloco de cor à esquerda, outra com texto à direita, outra com grade de fotos.
Falta de movimento de pôster: A página não tem nenhum dos movimentos de assinatura da Parte 6? → Adicione pelo menos três.
Todas as cores são pastéis ou neutras monótonas: A paleta é segura? → Use uma das paletas fortes dos Looks.
Espaço em branco genérico: O espaço em branco é apenas padding padrão de framework? → Projete o espaço em branco como estrutura ativa: use margens grandes e desiguais, deixe algumas áreas vazias de propósito.
Tipo colorido demais: Muitas cores no texto? → Mantenha uma cor de texto por superfície (exceto para destaque muito específico).

Parte 6 — Fonte: a Escola Suíça em resumo

(Do livreto A Escola Suíça de Design)

A Escola Suíça, também conhecida como Estilo Tipográfico Internacional, emergiu na Suíça nas décadas de 1940 e 1950. Seus princípios foram influenciados pelos movimentos De Stijl, Bauhaus e Construtivismo, e por designers como Ernst Keller, Max Bill, Josef Müller-Brockmann e Armin Hofmann.

Princípios-chave:

O design deve emergir do conteúdo, não de um estilo pré-concebido.
A tipografia é a principal ferramenta visual e a imagem.
Uso de grades modulares para organização e estrutura.
Assimetria como princípio de equilíbrio.
Fotografia objetiva e precisa.
Cor plana e ousada, sem texturas ou gradientes.
Clareza e legibilidade acima de decoração.

O estilo se expandiu globalmente e influenciou profundamente o design gráfico moderno e, por extensão, o design de interface.

Este arquivo é um skill para agentes de IA, como Claude Code, Cursor ou Codex, para gerar designs de UI no estilo suíço com disciplina e autenticidade.

swiss-ui-design

O que é swiss-ui-design?

Perguntar na sua IA favorita

Documentação