swiss-editorial-minimalist (SKILLS.md v3.1)

Uma página construída por um modelo geralmente se parece com a média de todas as páginas que ele já viu: um hero com gradiente, uma fileira de cards arredondados com ícones de emoji, uma sombra embaixo de cada botão e um CDN do Tailwind que carrega um arco-íris de cores. Nada está errado, e nada foi decidido.

Este arquivo substitui esses padrões por decisões. Ele cobre três coisas: o estilo da casa (o que mostrar e o que omitir), as regras técnicas que o sustentam (tokens, escalas, breakpoints, acessibilidade) e os portões que verificam o resultado antes de ser enviado.

Siga as regras como escritas. Onde uma solicitação entrar em conflito com elas, a seção 0 diz o que fazer.

0. Metarregras (leia primeiro)

O que fazer ao receber este arquivo

Leia o arquivo inteiro antes de escrever qualquer código. As regras dependem umas das outras.
Não peça esclarecimentos sobre nada que este arquivo já decida. Execute com suposições razoáveis e declare-as em uma linha.
Se a solicitação entrar em conflito com o estilo da casa (por exemplo, "colorido", "divertido", "hero com gradiente", "ícones de emoji", "cards com 20px de arredondamento"), confirme uma vez antes de prosseguir:

Esta solicitação quebra a seção X do SKILLS.md. Vou interpretá-la no estilo Swiss-editorial Minimalist, a menos que você queira sair do guia.

Aguarde a resposta e então construa.
A saída padrão é um arquivo HTML completo com <style> e <script> inline. Não entregue fragmentos a menos que o usuário os solicite.
Sempre comece o CSS com o bloco :root da seção 12.

Como nomear este estilo

Use estes termos para que o vocabulário permaneça consistente. Não use "moderno", "limpo" ou "elegante" sozinhos; eles não dizem nada específico.

"Swiss-editorial Minimalist": o padrão, descrito neste arquivo.
"Soft Brutalism": bordas mais grossas e uma grade mais áspera.
"Neo-Brutalist Editorial": uma cor de destaque adicionada e uma sombra deslocada forte. Sombras são proibidas no estilo padrão, então use este nome apenas quando o usuário solicitar explicitamente.
"Monochrome Magazine": liderado pela tipografia, sem cards ilustrados.

1. Filosofia de design

Três princípios, nenhum negociável:

O conteúdo é o rei; a tipografia é a arquitetura. Não há ilustrações decorativas. O grande título é o principal elemento visual.
A estrutura permanece visível. Bordas, grades e números de seção aparecem como são. Eles não são ocultados.
Monocromático primeiro, cor depois. O padrão é preto, branco e cinza. A cor aparece apenas no modo escuro ou como um destaque mínimo.

A página deve parecer calma, firme, inteligente e editorial, como uma revista impressa feita por engenheiros.

2. Paleta

Modo claro (padrão)

:root {
  --bg:     #f5f5f5; /* fundo principal, não branco puro */
  --ink:    #111111; /* texto primário, não preto puro */
  --muted:  #666666; /* texto secundário */
  --line:   #e0e0e0; /* bordas e divisores */
  --card:   #eeeeee; /* fundo do card */
  --accent: #d4d4d4; /* destaque neutro */
  --dark:   #0a0a0a; /* seções de alto contraste (declaração, rodapé) */
  --white:  #ffffff;
}

Modo escuro

body.dark {
  --bg:     #121212;
  --ink:    #f0f0f0;
  --muted:  #999999;
  --line:   #333333;
  --card:   #1e1e1e;
  --accent: #2a2a2a;
  --dark:   #050505;
  --white:  #181818;
}

Regras de cor (obrigatórias)

O fundo do corpo nunca é #fff. Use off-white #f5f5f5.
O texto nunca é #000. Use #111.
A cor da marca aparece uma ou duas vezes por página no máximo, e sempre através de uma variável CSS, nunca codificada.
Cores brilhantes são proibidas para status, ícones e texto. Exemplos do que é proibido: esmeralda-500, verde-600, vermelho-500, azul-500, amarelo-400, #27c93f, #ff5f56, #ffbd2e. Substitua-os por símbolos monocromáticos (●, ▲, ✕, →) em var(--ink) ou var(--muted).
Seções de contraste (declaração, CTA, rodapé) usam var(--dark) com texto claro.
O modo escuro é obrigatório. Siga prefers-color-scheme por padrão e permita que o usuário o substitua, salvando a escolha no localStorage. O alternador usa a marcação obrigatória na seção 5 ("Alternador de tema").

3. Tipografia

Combinação de fontes

Título:  'Space Grotesk'  (ou Inter Tight, General Sans, Neue Montreal)
Corpo:   'DM Sans'        (ou Inter, Satoshi, IBM Plex Sans)
Mono:    'JetBrains Mono' (ou monoespaçada do sistema)

Não use fontes decorativas, script ou serifadas para o texto do corpo. Uma serifada é permitida apenas para citações ou assinaturas (por exemplo, Georgia, itálico).

Escala tipográfica (clamp é obrigatório, para que a tipografia escale sem media queries)

/* Hero H1 */
font-size: clamp(55px, 5.6vw, 94px);   /* ou clamp(32px, 4.3vw, 62px) para um hero estreito */
line-height: 1.025;
letter-spacing: -0.07em;               /* negativo, sempre */
font-weight: 500;                      /* não 700, não 400 */

/* Seção H2 */
font-size: clamp(42px, 4.2vw, 69px);
line-height: 1.08;
letter-spacing: -0.06em;
font-weight: 500;

/* Card H3 */
font-size: clamp(22px, 2.2vw, 27px);
line-height: 1.2;
letter-spacing: -0.04em;
font-weight: 500;

/* Corpo */
font-size: 16px–18px;
line-height: 1.7–1.8;
color: var(--muted);

/* Micro / sobrancelha / rótulo */
font-size: 12px;
letter-spacing: 0.15em–0.17em;
font-weight: 700;
text-transform: uppercase;

Regras rígidas de tipografia

Os títulos sempre usam espaçamento negativo entre letras (entre -0.04em e -0.07em). Esta é a assinatura do estilo.
O peso do título é 500. O negrito 700 achata a sensação editorial.
Sobrancelhas e microrrótulos estão sempre em MAIÚSCULAS com amplo tracking (0.15em ou mais).
Números de seção (01, 02, 03) aparecem como microrrótulos. Não os oculte.
Um ponto final no final de um título pode servir como um destaque, como opção:
```
<h1>Título.<span style="color:var(--muted)">.</span></h1>
```
O texto do corpo é alinhado à esquerda. Não centralize parágrafos longos.

4. Layout e grade

Container

.wrap {
  max-width: 1440px;
  margin: auto;
  padding: 0 clamp(24px, 5vw, 84px);
}

Espaçamento vertical

Entre seções: padding: 130px 0 no desktop, reduzindo para 85px no mobile.
Altura do cabeçalho: 88px no desktop, 75px no mobile.
Espaçamento entre cards: 15–16px. Mantenha-o justo, não 24px ou mais.

Padrões comuns de grade

/* Hero assimétrico */
.hero { grid-template-columns: 1.04fr .96fr; }

/* Cabeçalho de seção de duas colunas */
.section-head { grid-template-columns: 1fr 1fr; align-items: end; }

/* Recursos de três colunas */
.features { grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* Declaração */
.statement-grid { grid-template-columns: 1fr 1fr; gap: 60px; }

/* Depoimento (veja seção 8) */
.testimonial-grid { grid-template-columns: 1.2fr .8fr; gap: 60px; }

Regras de layout (obrigatórias)

As seções são separadas por uma borda de 1px var(--line), não por uma sombra ou um fundo diferente.
Evite bordas arredondadas grandes. Botões e cards recebem no máximo 4px. Apenas imagens e capturas de tela recebem 12–22px.
Use align-items: end nos cabeçalhos de seção para que o título e o parágrafo se alinhem na mesma linha de base. Este é o truque editorial.
Grades assimétricas (1.04fr / .96fr) parecem melhores do que 1fr / 1fr.
Nunca centralize o texto do corpo. Sempre alinhe à esquerda.
Toda seção precisa de um border-top ou border-bottom de 1px var(--line).

5. Componentes

Botões

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 4px;                 /* quase quadrado */
  padding: 15px 20px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); background: #333333; }
}

/* Variantes */
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.light   { background: var(--bg); color: var(--ink); border-color: var(--bg); }

Regras de botão:

Todo botão tem um ícone de seta: ↗ para um link externo, ↓ para uma rolagem.
O hover levanta o botão em -2px, apenas dentro de @media (hover: hover). Não escala e não adiciona sombra.
Nunca use #fff para .btn.light. Use var(--bg).

Cards de recursos

┌─────────────────────────┐
│  [SVG line-art 8:5]     │  ← ilustração monocromática abstrata, ou vazio
├─────────────────────────┤
│  RÓTULO MICRO           │  ← maiúsculas, tracking amplo
│  Título do card.        │  ← Space Grotesk 24–27px
│  Descrição 1–2 frases   │  ← muted, 14px
└─────────────────────────┘

Fundo var(--card), sem borda arredondada (ou no máximo 4px).
Sem borda (o card se mistura ao fundo), ou 1px solid var(--line).

Hover: transform: translateY(-5px), apenas dentro de @media (hover: hover):

@media (hover: hover) { .card:hover { transform: translateY(-5px); } }

A ilustração é SVG line-art com stroke-width: 1.2px, fill: none, na cor da tinta. Não é uma foto, não é um gradiente, não é um emoji.

Cabeçalho

Altura 88px, border-bottom: 1px solid var(--line).
Marca: logotipo de 34px e o nome em Space Grotesk 22px, letter-spacing: -1.1px.
Nav: 14px, peso 600, espaçamento 36px.
Ações: alternador de tema (ícone sol/lua, marcação obrigatória em "Alternador de tema" abaixo), o botão CTA e o hambúrguer no mobile.
A navegação mobile abre como um painel absoluto abaixo do cabeçalho e fecha ao pressionar Escape.
O hambúrguer precisa de aria-label, aria-expanded e aria-controls. O alternador de tema precisa de aria-label e aria-pressed (veja abaixo).

Alternador de tema (marcação obrigatória)

Toda página tem um alternador de modo escuro, e ele sempre usa esta marcação. Não redesenhe os ícones, troque-os por emoji ou adicione um rótulo de texto. Os caminhos SVG, os valores id e o aria-label são fixos.

<div class="header-actions">
  <!-- Botão de alternância de modo escuro -->
  <button id="theme-toggle" type="button" class="theme-toggle" aria-label="Alternar modo escuro/claro" aria-pressed="false">
    <!-- Ícone do sol (oculto no modo claro, visível no modo escuro) -->
    <svg id="sun-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <circle cx="12" cy="12" r="5"></circle>
      <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
    </svg>
    <!-- Ícone da lua (visível no modo claro, oculto no modo escuro) -->
    <svg id="moon-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </button>
  <!-- Botão CTA e hambúrguer vão aqui, dentro do mesmo wrapper -->
</div>

.header-actions { display: flex; align-items: center; gap: 16px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;                    /* alvo de toque */
  min-height: 44px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}
@media (hover: hover) {
  .theme-toggle:hover { background: var(--card); }
}
.theme-icon { width: 20px; height: 20px; }

/* O estado do ícone segue body.dark, então nenhuma troca de classe em JavaScript */
#sun-icon  { display: none; }
#moon-icon { display: block; }
body.dark #sun-icon  { display: block; }
body.dark #moon-icon { display: none; }

<!-- Primeiro elemento dentro de <body>, para que o tema salvo seja aplicado antes da primeira pintura -->
<script>
  (function () {
    var KEY = 'theme';
    var saved = null;
    try { saved = localStorage.getItem(KEY); } catch (e) {}
    var dark = saved ? saved === 'dark'
                     : window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.body.classList.toggle('dark', dark);

    document.addEventListener('DOMContentLoaded', function () {
      var btn = document.getElementById('theme-toggle');
      if (!btn) return;
      btn.setAttribute('aria-pressed', String(document.body.classList.contains('dark')));
      btn.addEventListener('click', function () {
        var isDark = document.body.classList.toggle('dark');
        btn.setAttribute('aria-pressed', String(isDark));
        try { localStorage.setItem(KEY, isDark ? 'dark' : 'light'); } catch (e) {}
      });
    });
  })();
</script>

Regras do alternador de tema:

Mantenha o wrapper (.header-actions), o botão id="theme-toggle" e os ids dos ícones sun-icon e moon-icon exatamente como escritos. Scripts e a lista de verificação os procuram.
A lua mostra no modo claro (clique para escurecer). O sol mostra no modo escuro (clique para clarear). O estado padrão é claro, a menos que prefers-color-scheme: dark ou uma escolha salva diga o contrário.
O botão recebe sua cor apenas de variáveis: var(--ink) para o ícone e texto, var(--line) para a borda, var(--card) para o fundo hover. Nunca codifique uma cor.
O border-radius é no máximo 4px, o alvo de toque tem pelo menos 44×44px e o estado hover fica dentro de @media (hover: hover).
Os ícones têm 20px, stroke="currentColor", stroke-width="1.8", fill="none", com aria-hidden="true". O botão carrega o aria-label.
Use aria-pressed neste botão. aria-expanded é para o hambúrguer, não para o alternador de tema.
Salve a escolha no localStorage sob a chave theme, com valores light ou dark. Envolva as chamadas de armazenamento em try/catch.
O alternador funciona sem Tailwind. O trecho original usava classes utilitárias Tailwind (flex items-center gap-4, p-2, w-5 h-5, hidden/block), e elas são substituídas aqui pelo CSS vanilla acima, porque o CDN do Tailwind é proibido (seção 10). Se um projeto já executa Tailwind com uma etapa de construção, as classes utilitárias podem permanecer, mas a cor deve ser escrita text-[var(--ink)]. A forma text.var(--ink) é um erro de digitação e não faz nada.

Rodapé

Fundo `

… [truncado para tradução]

RydzzKen/swiss-editorial-minimalist

O que é swiss-editorial-minimalist?

Perguntar na sua IA favorita

Documentação