Design Suíço (Estilo Tipográfico Internacional)

"A forma segue a função. A grade é absoluta. A tipografia é o elemento visual primário."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência secundária da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Grades Matemáticas: Tudo se alinha a uma grade subjacente rigorosa. A assimetria é preferível ao texto centralizado.
2. Tipografia Sans-Serif: Helvetica é a rainha, mas qualquer sans-serif limpa e neutra funciona. Alinhamento de texto à esquerda, com margem direita irregular.
3. Fotografia Objetiva: Se imagens forem usadas, elas devem ser fotos objetivas, em estilo documental, não ilustrações estilizadas.

DNA Visual

• Cores: Muito limitadas. Geralmente apenas preto, branco e UMA cor de destaque altamente saturada (frequentemente vermelho, azul ou amarelo primário). A paleta Industrial Chic funciona perfeitamente.
• Tipografia: Helvetica Neue, Inter ou Roboto. Enorme contraste nos tamanhos das fontes (por exemplo, cabeçalhos massivos de 6rem combinados com texto do corpo de 1rem).
• Layout: NÃO centralize o texto. Nunca.

Implementação Web

• Use CSS Grid extensivamente. Deixe as colunas ditarem o layout.
• Exemplo de CSS:

body {
  background-color: #f4f4f4;
  color: #111;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

.swiss-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 40px;
}

.swiss-header {
  grid-column: 1 / 11; /* spans across multiple columns, leaving right side empty */
  font-size: 6vw;
  font-weight: 700;
  text-transform: lowercase; /* Optional, but common in brutalist/swiss */
  margin-bottom: 2rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.swiss-content {
  grid-column: 4 / 9; /* Indented alignment */
  font-size: 1.25rem;
  text-align: left; /* Flush left, ragged right */
}

.swiss-accent {
  color: #E2001A; /* Classic Swiss Red */
}

Implementação de Aplicativos

SwiftUI

struct SwissDesignView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 0) {
                // Header Block
                VStack(alignment: .leading, spacing: 8) {
                    Text("the grid")
                        .font(.custom("Helvetica Neue", size: 60))
                        .fontWeight(.heavy)
                        .tracking(-2) // Tight letter spacing
                    Text("is absolute.")
                        .font(.custom("Helvetica Neue", size: 60))
                        .fontWeight(.heavy)
                        .tracking(-2)
                        .foregroundColor(Color(hex: "E2001A")) // Swiss Red
                }
                .padding(.horizontal, 24)
                .padding(.top, 60)
                .padding(.bottom, 40)
                
                Divider().background(Color.black)
                
                // Asymmetrical Content Block
                HStack(alignment: .top, spacing: 20) {
                    // Empty left column (negative space is structural)
                    Spacer().frame(width: 40)
                    
                    VStack(alignment: .leading, spacing: 16) {
                        Text("Form follows function.")
                            .font(.custom("Helvetica Neue", size: 24))
                            .fontWeight(.bold)
                        
                        Text("Typography is the primary visual element. Everything aligns to a strict underlying grid. Asymmetry is preferred over centered text.")
                            .font(.custom("Helvetica Neue", size: 16))
                            .lineSpacing(6)
                    }
                    .padding(.vertical, 40)
                    .padding(.trailing, 24)
                }
                
                Divider().background(Color.black)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
        }
        .background(Color(white: 0.96))
        .foregroundColor(.black)
    }
}

• Rigoroso alignment: .leading em todos os lugares. Nunca use .center.
• Use Spacer().frame(width: X) em HStacks para empurrar intencionalmente o conteúdo para fora da margem esquerda, criando a clássica grade assimétrica com recuo suíço.

Flutter

class SwissDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF4F4F4),

…