kennedys0/taste-style-swiss-editorial

Use esta skill apenas depois que um usuário escolher explicitamente ou uma configuração de projeto confirmada a especificar. Para requisições de UI novas não explicadas, use um seletor de estilo em vez de decidir o gosto do usuário aqui. Marcas existentes, acessibilidade e substituições do usuário sobrepõem todos os exemplos abaixo. O seguinte guia de estilo não é permissão para começar a codificar UI antes da seleção de estilo.

Pacote de estilo: Suíço / Editorial

ID: swiss-editorial
Assinatura: Hierarquia tipográfica rigorosa baseada em grade, contraste de escala gritante, linhas estruturais finas, índices numerados e espaço negativo intencional.

Este é um pacote de estilo, não um padrão obrigatório. Carregue-o apenas após seleção explícita ou estilo de projeto aplicável confirmado. As instruções do projeto podem substituir escolhas individuais. Preserve acessibilidade, utilidade e restrições da marca. As fontes são sugestões, não dependências obrigatórias. Uma página simples com texto sans-serif preto não se qualifica como Suíço Editorial.

Boa adequação / compensações

• Funciona bem para: Agências de design de alto padrão, publicações arquitetônicas, portfólios editoriais, revistas culturais, relatórios anuais e narrativas de produtos de luxo.
• Tenha cuidado com: Ferramentas operacionais transacionais de ritmo acelerado onde a tipografia massiva de exibição diminui a entrada repetitiva de dados.
• Direções de referência:
  • Estilo Internacional Clássico de Zurique: Fundo branco nítido de papel (#FFFFFF ou #F7F7F7), tipografia preta intensa (#111111), linhas divisórias estruturais de 1px, índices numerados (01, 02) e um único toque de Vermelho Suíço (#E3000F).
  • Moderno Editorial Klein Blue: Tela monocromática ultra-limpa com International Klein Blue (#002FA7) como um acento focal de alta precisão na navegação e ações primárias.

Portão de fidelidade suíço editorial — obrigatório

Antes de chamar uma página swiss-editorial de completa, a viewport de abertura deve ser visivelmente lida como um trabalho editorial tipográfico rigoroso e alinhado à grade. Se um usuário escolheu este estilo, uma página mínima genérica sem contraste de escala dramática e regras estruturais é uma FALHA.

Uma implementação suíço-editorial bem-sucedida demonstra todos os seguintes:

1. Contraste Extremo de Escala Tipográfica: Um contraste decisivo e intransigente entre manchetes grotescas massivas de exibição (48px–72px desktop / 32px–44px mobile, tracking apertado) e corpo de texto disciplinado (16px, altura da linha 1,55), com rótulos de seção em maiúsculas e tracking (letter-spacing: 0.08em).
2. Linhas Estruturais Horizontais Finas: Seções de conteúdo, limites de coluna e cabeçalhos de metadados são demarcados por regras sólidas limpas de 1px (border-top: 1px solid #111111), estabelecendo prateleiras visuais claras.
3. Hierarquia de Seção Numerada: Numeração de índice editorial distinta (01, 02, 03) colocada acima ou ao lado de blocos de artigo primários, criando âncoras visuais digitalizáveis.
4. Alinhamento Rigoroso de Grade Multi-Coluna: O layout está estritamente em conformidade com uma grade de desktop de 12 colunas com margens e calhas generosas e assimétricas. O conteúdo nunca flutua livremente sem ancoragem na grade.
5. Base Monocromática + 1 Acento de Sinal de Alto Impacto: O layout permanece estritamente monocromático (preto, off-white, cinza papel) com exatamente um acento de sinal deliberado (Vermelho Suíço #E3000F ou Klein Blue #002FA7) aplicado com moderação a links ativos, tags de índice ou CTAs primários.

Teste da primeira viewport: Em uma captura de tela desktop, identifique a escala massiva da manchete, as regras divisórias estruturais de 1px, os marcadores de seção numerados e a grade assimétrica deliberada sem ler o título da página. Se parecer com um modelo de blog padrão, eleve a escala tipográfica e as regras da grade.

Exceção tipográfica suíço-editorial explícita — escala dramática é necessária

Substituição específica do suíço-editorial: A precaução universal anti-slop contra tamanhos de fonte excessivos ou espaço vazio NÃO DEVE ser interpretada como uma proibição de manchetes grandes de exibição (48px–72px) ou espaços em branco generosos aqui. Na Tipografia Suíça (Josef Müller-Brockmann, Max Bill), o espaço negativo ativo e o contraste de escala ousado são os principais materiais estruturais, substituindo gráficos decorativos ou sombras.

• Tratamentos tipográficos permitidos: Escala de exibição massiva (até 72px), tipografia de índice numerada, bordas estruturais finas, metadados em maiúsculas com tracking e links de acento único de alto impacto.
• Limite anti-slop: Não cole citações destacadas aleatórias sem contexto editorial, números de edição de publicação falsos ou manchetes superdimensionadas que sobrecarregam o conteúdo legível real.
• Interpretação anti-slop: Avalie layouts suíços por disciplina de grade, ritmo tipográfico e clareza de informação, não por tentar preencher cada centímetro quadrado com cartões. Espaço branco que direciona o foco é design autêntico.

Tipografia e composição

Sans-serif grotesca objetiva: Helvetica Neue, Neue Haas Grotesk, Arial, Inter ou system sans. Manchetes: 48–72 px desktop (peso 700–800, letter-spacing: -0.03em); subtítulos: 24–32 px; corpo: 16–18 px (altura da linha 1.55–1.65); numerais de índice e legendas: 12–14 px maiúsculas (letter-spacing: 0.08em).

Direção de cores

• Modo Claro (Papel Branco Nítido de Galeria):
  • Base da Tela: Branco papel (#FFFFFF ou branco galeria quente #FBFBFA).
  • Tinta / Tipografia: Preto obsidiana profundo (#111111).
  • Regras Divisórias: Traço fino sólido (#111111 ou #D1D5DB).
  • Cinza Secundário: Neutro editorial (#6B7280).
• Modo Escuro (Monólito Escuro Dramático):
  • Base da Tela: Tela obsidiana escura (#0D0D0D).
  • Tinta / Tipografia: Tipografia de exibição branco osso (#F5F5F5).
  • Regras Divisórias: Regra fina branca translúcida (rgba(255, 255, 255, 0.20) ou #2A2A2A).
  • Cinza Secundário: Cinza pedra (#9CA3AF).
• Acento de Sinal Singular: Vermelho Suíço (#E3000F claro / #EF4444 escuro) ou International Klein Blue (#002FA7 claro / #3B82F6 escuro).
• Regra de Inversão de Tema: No editorial suíço, o modo escuro/claro é uma inversão de polaridade tipográfica autoritária. No modo escuro, a tela é #0D0D0D e a tipografia é #F5F5F5. Os botões primários invertem de forma limpa (modo claro: bloco preto sólido com texto branco; modo escuro: bloco branco sólido com texto preto). Texto preto em tela escura ou texto branco em tela branca é estritamente proibido.

Layout e geometria

Cantos são nitidamente afiados (0px border-radius por padrão, no máximo 2px); margens externas generosas; alinhamento estrito de grade de 12 colunas. Regras horizontais estruturais de 1px emolduram blocos de conteúdo.

Superfícies, profundidade, textura

As superfícies são completamente planas, sem ornamentos e nítidas como tinta. Zero sombras, zero gradientes de fundo, zero desfoque. A profundidade é comunicada puramente através da escala tipográfica, peso e justaposição espacial.

Anatomia do componente e interação

• CTA Primário Editorial: Bloco preto sólido nítido com tipografia branca, ou link de texto sublinhado limpo com deslocamento de traço de 2px.
• Tag de Índice Numerada: Tag pequena em maiúsculas: [ 01 / ARQUITETURA ].
• Regra Divisória: border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;.
• Metadados Tabulares: Pares chave-valor de duas colunas separados por divisores finos.

Movimento

Mínimo, instantâneo ou transições lineares limpas de 120–160 ms. Sem spring bounce, sem parallax flutuante. Foco em mudanças de estado nítidas.

Receita opcional Anime.js v4

• Decisão de movimento: Fade de opacidade de texto limpo ou expansão de regra horizontal ao rolar.
• Duração inicial: 140ms (0 = imediato); ajuste à tarefa e preferência do usuário.
• Evite: movimento elástico, rotações 3D, oscilações lúdicas.
• Dependência: CSS/nativo por padrão. Use Anime.js v4 apenas se a interação solicitada o justificar. Siga o references/motion-engine.md do Taste Engine quando disponível; skill autônoma segue os princípios de movimento reduzido e sem loop decorativo acima.

Escrita de UI e microcópia

Culto, conciso e articulado. Exemplos: “Selected Works 2026”, “Índice”, “Ler Documentação”, “01 / Visão Geral”. Evite gírias coloquiais ou entusiasmo de vendas exagerado.

Tokens iniciais (sugestões, não um tema completo)

Token	Padrão modo claro	Padrão modo escuro
--taste-swiss-bg	#ffffff	#0d0d0d
--taste-swiss-ink	#111111	#f5f5f5
--taste-swiss-accent	#e3000f	#ef4444
--taste-swiss-muted	#6b7280	#9ca3af
--taste-swiss-rule	1px solid #111111	1px solid rgba(255, 255, 255, 0.20)
--taste-swiss-radius	0px	0px
--taste-swiss-font-heading	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-font-body	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-motion-duration	120ms	120ms

Tokens representam uma direção e não são garantia de copiar e colar para cada paleta/plataforma. Defina --taste-swiss-* no nível do projeto, garanta contraste de cor e adapte via tokens de tema em vez de espalhar valores literais.

Composição do herói (primeira viewport completa)

Quando um portfólio/landing/homepage público tiver um herói: use uma composição de cabeçalho+herói de uma tela visível. Altura base em min-height: 100svh com fallback 100vh, subtraindo o cabeçalho real apenas quando ele está em fluxo normal; deixe o herói expandir para acessibilidade e telas móveis curtas. Não aplique isso a dashboards privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica do estilo: Ancora a tela de abertura com um título de exibição massivo e autoritário, numeração de seção clara e uma divisão de grade assimétrica entre a narrativa do herói e a navegação principal. O espaço em branco deve parecer deliberado e composto, não vazio. Veja o references/hero-layout.md do roteador quando presente. O uso autônomo segue os mesmos princípios responsivos e anti-slop.

Portão de qualidade específico do estilo

• Faça: Verifique o alinhamento estrito da grade de 12 colunas; mantenha a proporção dramática de escala entre manchete e corpo; garanta que as regras finas de 1px separem as seções de forma limpa; mantenha a cor de acento estritamente singular; verifique a alternância de modo escuro/claro para que tipografia, tela, regras finas e ações primárias invertam de forma limpa sem colisões de cor (contraste mínimo de 4.5:1).
• Não faça: Não adicione sombras, bolhas arredondadas ou gradientes decorativos; não polua o espaço em branco com chips de emblema sem sentido; evite texto cinza de baixo contraste em rótulos pequenos; não deixe tipografia preta em tela obsidiana escura.
• Confirme a consistência desktop e mobile; foco visível do teclado (:focus-visible); estados de carregamento, vazio, desabilitado, erro e sucesso; comportamento de movimento reduzido (prefers-reduced-motion).
• Não injete suposições específicas de estilo em projetos não relacionados. Ao combinar estilos, nomeie explicitamente o estilo primário e os recursos emprestados.

Portão universal anti-slop (autocontido)

Cada elemento deve merecer seu lugar. Conteúdo antes da decoração. Não decore a incerteza. Não invente saldos, métricas, depoimentos, usuários, logotipos, aprovação, status verificado/ativo/online, atividade falsa ou confirmações de sucesso; use estados vazios/carregamento/erro honestos em vez disso. Dados de demonstração são aceitáveis apenas se solicitados e visivelmente rotulados.

Não adicione camadas decorativas de cartão dentro de cartão: uma superfície aninhada deve representar uma interação distinta ou limite de informação. Evite grades de 3 recursos geradas automaticamente, dashboards de 4 estatísticas, alegações falsas de herói, gráficos sem propósito, spam de emblema/chip/ícone, arte decorativa não relacionada e loops aleatórios meramente para preencher a viewport. Prefira agrupar com tipografia, espaçamento, alinhamento e divisores. Pares iguais precisam de equilíbrio visual intencional.

Redação anti-slop: nenhum "Desbloqueie seu potencial", "Experimente o futuro", "Acelere seu fluxo de trabalho", alegações "perfeitas" ou equivalentes traduzidos. Os títulos devem comunicar o conteúdo real, os CTAs devem nomear a ação e o texto vazio/erro/sucesso deve descrever estados reais e próximos passos. Evite urgência falsa, contagens inventadas, hype vago de IA, emoji gratuito e paredes de maiúsculas inacessíveis. Adapte o texto a este estilo e ao idioma do usuário sem alterar a verdade.

Integridade de contraste de tema e modo: Quando um usuário solicitar modo escuro ou modo claro (ou construir um seletor de tema), as cores de fundo e primeiro plano DEVEM inverter em pares sincronizados em todas as superfícies, texto, bordas, entradas e emblemas semânticos. Nunca deixe texto preto em fundo escuro, texto branco em fundo branco ou pílulas de status ilegíveis de baixo contraste. Todos os estados devem atender ao contraste WCAG AA (mínimo 4.5:1 para texto normal/corpo, 3:1 para manchetes grandes e limites interativos).

Responsivo e movimento: componha mobile deliberadamente, verifique rótulos longos, estados de foco e contraste acessível; sem corte de texto para caber em um layout moderno. Estático por padrão; use movimento para interações significativas, respeite preferências de movimento reduzido, evite decoração saltitante/flutuante/pulsante sem um estado real.

Bloqueio de conclusão de itens Críticos/Altos: status/dados fabricados, ações quebradas, controles inacessíveis/clipados, texto enganoso, colisões de contraste de tema ou falha significativa no mobile devem ser corrigidos. Relate o que foi realmente verificado; não reivindique testes que não foram executados.

Não é um veto estético: cores expressivas, sombras, gradientes, layouts de cartão ou tratamentos decorativos são legítimos quando são partes intencionais da estética selecionada e passam nas verificações de usabilidade. Não force silenciosamente o minimalismo.

Anti-slop: específico do estilo

Autoridade tipográfica, não minimalismo genérico.

• Rejeite: Manchetes fracas, wrappers de cartão decorativos em torno de texto, múltiplas cores de acento concorrentes, legendas pequenas de baixo contraste e colisões de tema (como tipografia preta permanecendo em uma tela editorial escura).
• Em vez disso: Confie no contraste de escala, alinhamento preciso da coluna, sinal de acento singular e inversão de polaridade escuro/claro sincronizada.
• Verificação de texto: O texto deve ser lido como uma publicação editorial—articulada, estruturada e intencional.
• Auditoria: Execute o propósito universal anti-slop, verdade, superfície aninhada, redação, responsivo