Protocolo: Arquitetura de UI Minimalista Utilitária Premium

1. Visão Geral do Protocolo

Nome: Minimalismo Utilitário Premium & UI Editorial Descrição: Uma diretiva avançada de engenharia frontend para gerar interfaces web altamente refinadas, ultra-minimalistas, em "estilo documento", análogas a plataformas de workspace de ponta. Este protocolo impõe rigorosamente uma paleta monocromática quente de alto contraste, hierarquias tipográficas personalizadas, macro-espaçamento estrutural meticuloso, layouts bento-grid e uma arquitetura de componentes ultra-plana com acentos pastel suaves deliberados. Ele rejeita ativamente as tendências genéricas de design SaaS padrão.

2. Restrições Negativas Absolutas (Elementos Banidos)

A IA deve evitar estritamente os seguintes padrões genéricos de desenvolvimento web:

• NÃO use as fontes "Inter", "Roboto" ou "Open Sans".
• NÃO use bibliotecas genéricas de ícones de linha fina como "Lucide", "Feather" ou "Heroicons" padrão.
• NÃO use sombras de queda pesadas padrão do Tailwind (por exemplo, shadow-md, shadow-lg, shadow-xl). As sombras devem ser praticamente inexistentes ou altamente personalizadas para serem ultra-difusas e de baixa opacidade (< 0,05).
• NÃO use fundos de cores primárias para elementos ou seções grandes (por exemplo, sem seções hero de azul brilhante, verde ou vermelho).
• NÃO use gradientes, cores neon ou glassmorfismo 3D (além de desfoques sutis na barra de navegação).
• NÃO use rounded-full (formas de pílula) para contêineres grandes, cartões ou botões primários.
• NÃO use emojis em nenhum lugar do código, marcação, conteúdo de texto, títulos ou texto alternativo. Substitua por ícones adequados ou primitivas SVG limpas.
• NÃO use nomes genéricos de placeholder como "John Doe", "Acme Corp" ou "Lorem Ipsum". Use conteúdo realista e contextual.
• NÃO use clichês de copywriting de IA: "Elevar", "Perfeito", "Desbloquear", "Próxima Geração", "Revolucionário", "Aprofundar". Escreva linguagem simples e específica.

3. Arquitetura Tipográfica

A interface deve depender de contraste tipográfico extremo e seleção de fontes premium para estabelecer uma sensação editorial.

• Sans-Serif Primária (Corpo, UI, Botões): Use fontes limpas, geométricas ou nativas do sistema com personalidade. Alvo: font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Serif Editorial (Títulos Hero e Citações): Alvo: font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Aplique kerning apertado (letter-spacing: -0.02em a -0.04em) e altura de linha apertada (1.1).
• Monospace (Código, Teclas Pressionadas, Metadados): Alvo: font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Cores de Texto: O texto do corpo nunca deve ser preto absoluto (#000000). Use off-black/carvão (#111111 ou #2F3437) com um generoso line-height de 1.6 para legibilidade. O texto secundário deve ser cinza suave (#787774).

4. Paleta de Cores (Monocromático Quente + Pastéis Pontuais)

A cor é um recurso escasso, utilizado apenas para significado semântico ou acentos sutis.

• Tela / Fundo: Branco Puro #FFFFFF ou Osso Quente/Off-White #F7F6F3 / #FBFBFA.
• Superfície Primária (Cartões): #FFFFFF ou #F9F9F8.
• Bordas Estruturais / Divisores: Cinza ultra-claro #EAEAEA ou rgba(0,0,0,0.06).
• Cores de Acento: Use exclusivamente pastéis altamente dessaturados e desbotados para tags, fundos de código inline ou fundos de ícones sutis.
  • Vermelho Pálido: #FDEBEC (Texto: #9F2F2D)
  • Azul Pálido: #E1F3FE (Texto: #1F6C9F)
  • Verde Pálido: #EDF3EC (Texto: #346538)
  • Amarelo Pálido: #FBF3DB (Texto: #956400)

5. Especificações de Componentes

• Grades de Recursos Bento Box:
  • Utilize layouts CSS Grid assimétricos.
  • Os cartões devem ter exatamente border: 1px solid #EAEAEA.
  • O raio da borda deve ser nítido: 8px ou 12px no máximo.
  • O preenchimento interno deve ser generoso (por exemplo, 24px a 40px).
• Chamada Principal para Ação (Botões):
  • Fundo sólido #111111, texto #FFFFFF.
  • Leve raio de borda (4px a 6px). Sem box-shadow.
  • O estado hover deve ser uma mudança sutil de cor para #333333 ou um transform: scale(0.98) em microescala.
• Tags e Selos de Status:
  • Forma de pílula (border-radius: 9999px), tipografia muito pequena (text-xs), maiúsculas com kerning largo (letter-spacing: 0.05em).
  • O fundo deve usar os Pastéis Suaves definidos.
• Acordeões (FAQ):
  • Remova todas as caixas de contêiner. Separe os itens apenas com um border-bottom: 1px solid #EAEAEA.
  • Use um ícone + e - limpo e nítido para o estado de alternância.
• Micro-UIs de Teclas Pressionadas:
  • Renderize atalhos como teclas físicas usando tags <kbd>: border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, usando a fonte Monospace.

…