Minimalismo

"Menos é mais. Remova até que nada reste além do essencial."

Quando Usar

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

Princípios Fundamentais

1. Espaço em Branco Extremo: Margens e preenchimentos devem ser o dobro do que você inicialmente considera apropriado.
2. Tipografia Rigorosa: Confie em pesos e tamanhos de fonte para estabelecer hierarquia, não cores ou caixas.
3. Ausência de Decoração: Sem bordas, sem sombras, sem texturas de fundo.

DNA Visual

• Cores: Melhor combinado com paletas Minimalist Slate ou Modern Editorial. Fundos devem ser absolutos (branco puro ou off-white/preto).
• Tipografia: Sans-serif, geométrica. (ex: Inter, Helvetica Neue, SF Pro). Use contraste extremo em pesos (Thin vs Black).
• Espaçamento: Use uma grade de linha generosa (ex: múltiplos de 8px, favorecendo fortemente preenchimento de 48px a 120px).

Implementação Web

• Use Flexbox/Grid com propriedades gap grandes.
• Exemplo de CSS:

.minimal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 24px;
  background-color: var(--bg-primary);
}
.minimal-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 48px;
}
.minimal-btn {
  background: transparent;
  border: 1px solid var(--text-primary);
  padding: 16px 32px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

Implementação de Aplicativo

SwiftUI

struct MinimalView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 48) {
                Text("Headline")
                    .font(.system(size: 34, weight: .light))
                    .tracking(-0.5)
                
                Text("Body text sits quietly with generous space around it. Let the content breathe.")
                    .font(.system(size: 17, weight: .regular))
                    .foregroundColor(.secondary)
                    .lineSpacing(6)
                
                // Minimal button — just a thin border, no fill
                Button(action: {}) {
                    Text("Continue")
                        .font(.system(size: 14, weight: .medium))
                        .tracking(1.5)
                        .textCase(.uppercase)
                        .padding(.horizontal, 32)
                        .padding(.vertical, 16)
                        .overlay(
                            RoundedRectangle(cornerRadius: 0)
                                .stroke(Color.primary, lineWidth: 1)
                        )
                }
            }
            .padding(.horizontal, 24)
            .padding(.vertical, 80)
        }
        .background(Color(.systemBackground))
    }
}

• Use VStack(spacing: 40...64) para separação generosa entre elementos.
• Nunca use contêineres como .shadow() ou Card. Deixe o espaço em branco definir o agrupamento.
• Use Divider() com moderação — apenas quando duas seções adjacentes precisarem de separação.

Flutter

class MinimalScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 80),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Título',
              style: TextStyle(
                fontSize: 34,
                fontWeight: FontWeight.w300,
                letterSpacing: -0.5,
                color: Colors.black87,
              ),
            ),
            const SizedBox(height: 48),
            Text(
              'O texto do corpo fica quieto com espaço generoso ao redor.',
              style: TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.w400,
                height: 1.6,
                color: Colors.black54,
              ),
            ),
            const SizedBox(height: 48),
            // Botão minimalista — contornado, sem elevação
            OutlinedButton(
              onPressed: () {},
              style: OutlinedButton.styleFrom(
                side: const BorderSide(color: Colors.black87, width: 1),
                shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),

…