Kadeka-SI/web-design-base-v1

O que web-design-base-v1 faz?

Padrão. Cada site parece ter direção de arte para seu próprio assunto, não pode ser confundido com um template, é tecnicamente correto em cada detalhe e usa a tipografia como sua principal ferramenta.

Método. Leia o assunto, nomeie uma ideia visual concreta, construa o sistema, planeje o conteúdo e então codifique. O sistema existe antes da primeira linha de código, porque escolhas feitas durante a codificação tendem a derivar para padrões.

0. Como ler esta habilidade

Nível	Significado
Portão	Verificado no final. Uma página que falha em um portão não está concluída.
DEVE / NÃO DEVE	Lei padrão. Desvie apenas quando o usuário pedir; diga isso em uma frase.
DEVERIA	Padrão forte. Desvie silenciosamente quando o assunto exigir.
PODE	Permitido quando serve ao assunto.

Prioridade: Portões 1 e 2 (acessibilidade) → solicitação explícita do usuário → DEVE → DEVERIA → PODE. Se o usuário pedir algo que quebra um portão, construa a versão mais próxima que passe e diga o que mudou. Dentro de um nível, a regra mais específica vence.

Exemplos são demonstrações, não templates. Toda paleta, par de fontes, horário de balsa e valor de código abaixo mostra o formato de uma boa resposta. Copiar um inalterado para um assunto não relacionado é a falha mais comum desta habilidade. Se você escolher uma paleta ou par listado como está, justifique no plano com um fato sobre o assunto.

1. Cinco portões

1. Primeira pintura e sem JS. O título do hero é visível desde o primeiro quadro: não deslocado, não cortado (incluindo pontos de trema em Ä Ö Ü), nunca animado. Com JavaScript desabilitado ou redução de movimento ativada, a página está completa.
2. Contraste. Texto do corpo ≥ 7:1, texto suave e acento como texto ≥ 4.5:1, títulos grandes ≥ 4.5:1, bordas estruturais, anéis de foco e partes de UI ≥ 3:1. Calculado para cada par texto/superfície realmente usado, não assumido (§6).
3. Disciplina de paleta. Fundo, tinta, um acento, mais tonalidades de fundo/tinta. Sem gradientes, brilho, glassmorfismo ou sombras coloridas.
4. Completude. Cada seção tem substância real (§8), cada link vai para algum lugar intencional, cada estado requerido existe.
5. Específico. Se a paleta e o tipo pudessem ser movidos para um assunto diferente inalterados, o trabalho não está concluído.

2. Escolha o modo

Modo	Use para	Regras que se aplicam
Showcase	landing, portfólio, vitrine de loja, editorial, evento, corporativo	tudo exceto §12
UI de Produto	dashboard, admin, ferramenta, app, fluxos com muitos formulários	§1–§6, §10, §11, §12; pule arquétipos de hero e o pool de seções
Documentação	documentação, manuais, cartões de modelo	Tipografia e cor do Showcase, estrutura da UI de Produto (TOC, código, estados)
Auditoria	"revisar/melhorar minha página"	liste descobertas, corrija apenas o que está quebrado, mantenha a identidade existente
Iteração	"mudar X"	mude o token ou regra nomeado e seus dependentes diretos apenas; sem refatorações silenciosas

Quando o usuário fornece uma marca (cores, logotipo, fontes), a marca é a paleta e o tipo. Calcule seu contraste. Se o acento da marca falhar 4.5:1 como texto, use-o apenas para elementos grandes ou não textuais e adicione uma variante de texto mais escura do mesmo matiz.

3. Método para Construção

Escreva o plano antes do código: 12–16 linhas no idioma do usuário (Iteração: um diff de 3 linhas).

3.1 Leia o assunto. O que o visitante deve fazer ou entender? Como o assunto parece, soa e se sente em seu lugar real (porto, fundição, laboratório, cozinha, tribunal, arquivo)? Qual é a única coisa que eles devem lembrar?

3.2 Nomeie a ideia visual. Uma frase nomeando um objeto concreto, material ou convenção do assunto. Exemplo para uma linha de balsas: "uma tabela de horários impressa: numerais condensados e pesados, linhas regradas, o quadro como hero." Adjetivos abstratos ("moderno, limpo, ousado") e listas de cores não são ideias. Teste de originalidade: nomeie três coisas que um site genérico nesta categoria tem e confirme que este design não tem nenhuma delas.

3.3 Construa o sistema como uma tabela no plano:

Campo	Valor
Paleta	bg, tinta, acento (hex), o material pelo qual é nomeado, proporções calculadas por par usado
Tipo	face display + texto, razão ligada ao assunto, palavra mais longa e seu tamanho móvel
Hero	arquétipo (§7.1) + justificativa de uma linha
Layout	lógica base (§7.2) e como as seções a variam
Movimento	um padrão de assinatura + padrão de suporte opcional
Seções	ordenadas, cada uma com seu trabalho e forma
Momento de assinatura	a única coisa que um visitante lembra

3.4 Planeje o conteúdo. Liste cada seção com fatos concretos, etapas, nomes, números, datas, preços. Conteúdo inventado é permitido se internamente consistente e marcado (§8.3).

4. Fundamentos

4.1 O cabeçalho faz parte do design

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fähre Norddeich: Abfahrten und Frachtraten</title>
  <meta name="description" content="Abfahrtsplan, Frachtraten und Kontakt der Fährlinie Norddeich–Borkum.">
  <meta name="theme-color" content="#F6F1E6">
  <meta property="og:title" content="Fähre Norddeich: Abfahrten und Frachtraten">
  <meta property="og:description" content="Abfahrtsplan, Frachtraten und Kontakt.">
  <meta property="og:locale" content="de_DE">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23C0430B'/%3E%3C/svg%3E">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Public+Sans:wght@400;500;600&display=swap">
  <script>
    /* Gate de movimento: estados iniciais ocultos existem apenas se esta classe for definida (§9) */
    if (!matchMedia("(prefers-reduced-motion: reduce)").matches && "IntersectionObserver" in window)
      document.documentElement.classList.add("js-motion");
  </script>
  <style>/* §4.2 base, §4.3 tokens, então componentes */</style>
</head>

• DEVE: lang corresponde ao texto, title e description são específicos, a URL da fonte corresponde às famílias escolhidas em §5 e termina com display=swap, um favicon está presente (evita um 404 e parece completo).
• NÃO DEVE: cabeçalho vazio, lang="en" em texto alemão, fontes sem display=swap.
• Privacidade (UE/AL). O Google Fonts carregado dos servidores do Google transmite IPs dos visitantes; tribunais alemães trataram isso como um problema de GDPR. Para um protótipo é aceitável. Para produção, diga no relatório que as fontes devem ser auto-hospedadas (arquivos woff2, @font-face). Se o ambiente bloquear fontes externas, as pilhas de fallback (§4.5) ainda devem parecer projetadas.

4.2 CSS Base

Comece cada página com esta base. Ela impede tipografia deslocada, cortada e quebrada por herança.

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h, 0px); }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
  font-synthesis: none;              /* sem negrito/italico falso se um peso não for carregado */
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, table, form { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }  /* links permanecem reconhecíveis */
nav a, .btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: var(--header-h, 0px); }
table { border-collapse: collapse; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: var(--gutter); inset-block-start: 0.75rem; z-index: 20;
  background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; }

• NÃO DEVE: 100vw para conteúdo, overflow: hidden para cortar tipo, margens negativas ou transform no título do hero. Aceite o side bearing natural da fonte em vez de corrigi-lo opticamente.
• DEVE colocar todo o texto dentro de .container. O título do hero compartilha a borda esquerda do texto do corpo, a menos que um layout deslocado seja nomeado no plano.
• DEVE dimensionar heroes de altura total com min-height: 100vh; min-height: 100svh; (a linha svh vence onde suportada, para que as barras do navegador móvel não cortem o hero).
• O texto do corpo usa rem, nunca px fixo, para que a configuração de fonte do navegador do visitante ainda funcione.

4.3 Tokens

Cada valor de cor, fonte, tamanho e espaçamento vive em um bloco. Substitua os valores de exemplo pela sua própria paleta (§6).

:root {
  color-scheme: light;                     /* "dark" para paletas escuras: controles de formulário e barras de rolagem seguem */
  --bg: #F6F1E6;  --bg-soft: #ECE3D3;
  --ink: #1C1A17; --ink-muted: #635A4C;    /* suave: apenas rótulos e legendas */
  --accent: #C0430B; --on-accent: #F6F1E6; /* texto sobre preenchimentos de acento */
  --line: #857A66;                         /* regras estruturais: ≥ 3:1 em bg e bg-soft */
  --line-soft: #C9BEA8;                    /* apenas fios decorativos */
  --focus: var(--accent);                  /* reatribuído dentro de faixas invertidas */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-text: "Public Sans", "Segoe UI", sans-serif;
  --step-hero: clamp(3.25rem, 1rem + 11vw, 13rem);
  --step-h2:   clamp(2.25rem, 1rem + 5vw, 6rem);
  --step-label: 0.8125rem;
  --space-xs: 0.5rem;  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-l: clamp(3rem, 2rem + 4vw, 6.5rem);
  --space-xl: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --measure: 66ch;
  --header-h: 0px;                         /* definido como a altura do cabeçalho fixo, senão 0 */
  --rule: 1px solid var(--line);
}

DEVE: cada valor nas regras vem desses tokens. NÃO DEVE: hex inline em regras, ou paletas padrão de frameworks (gray-500, slate-200). Tamanhos fluidos misturam rem e vw para que o zoom do navegador e as configurações de fonte ainda os escalem (vw puro ignora zoom).

4.4 Idioma e localidade

• O texto está no idioma da solicitação. lang corresponde. Sie/du permanece consistente.
• Alemão: hyphens: auto em colunas estreitas (precisa de lang correto); o subconjunto da fonte DEVE cobrir äöüß e „ “ ‚ ‘ –. Aspas tipográficas („…“), sem palavras de marketing em inglês em uma página alemã,   entre número e unidade (12 kg, 9:30 Uhr), datas como 1. November 2026.
• Sites alemães para empresas precisam de links Impressum e Datenschutz no rodapé (seções de demonstração na página são adequadas para um protótipo). Desde 2025, o BFSG torna a acessibilidade um dever legal para muitos serviços de comércio eletrônico voltados ao consumidor; WCAG 2.1 AA é o piso, e os portões desta habilidade já o excedem.

4.5 Fontes que sobrevivem a falhas de rede

Escolha fallbacks da mesma classe (condensado → "Arial Narrow"; serif → Georgia; grotesk → system-ui). Os dois fallbacks DEVEM permanecer visivelmente distintos, para que a página mantenha sua hierarquia quando as fontes falharem. Carregue apenas os pesos que você usa. Os pesos usados para display DEVEM existir na família carregada (veja §5).

4.6 Pontos de quebra e 375 px

Mobile-first. Pontos de quebra: 480, 760, 1024, 1320 px. Em 375 px: sem rolagem horizontal, título do hero ≤ 5 linhas, palavra mais longa cabe, alvos de toque ≥ 44 × 44 px, cabeçalhos fixos não cobrem âncoras (--header-h), cada layout de duas colunas tem uma forma móvel projetada.

Regra da palavra mais longa. Largura disponível ≈ 375 − 2 × 19 ≈ 335 px. Tamanho máximo do hero em px ≈ 335 ÷ (letras na palavra mais longa × fator de largura). Fatores de largura: condensado 0.42, serif 0.52, grotesk 0.58, expandido 0.68. Defina o mínimo de clamp() para esse valor. "Frachtabfertigung" (17 letras) em uma face condensada permite ≈ 47 px, então o mínimo de 52 px acima transbordaria: abaixe o mínimo ou adicione hífens suaves (Fracht­abfertigung). Nunca deixe um composto alemão longo forçar overflow-wrap: anywhere no hero.

5. Tipografia: a principal ferramenta

Use exatamente duas famílias: uma display, uma texto.

Display	Texto	Adequado para
Big Shoulders Display	Public Sans	horários, logística, frete, esporte
Barlow Condensed	Barlow	transporte, sinalização, clubes, eventos
Fraunces	Karla	comida, artesanato, impressão, hospitalidade
Instrument Serif (apenas 400)	Work Sans	editorial, moda, arquitetura
Newsreader	Libre Franklin	jurídico, institucional, pesquisa
Familjen Grotesk	Source Serif 4	revistas, cultura, organizações sem fins lucrativos
IBM Plex Mono (display)	IBM Plex Sans	laboratórios, ferramentas, dados, documentação
Archivo (eixo width 112–125)	Spline Sans	portos, indústria, fichas de produto
Anton (apenas 400)	Barlow	campanhas, locais, cartazes
Bodoni Moda	Karla	artigos de luxo, galerias, leilões

Estes são pontos de partida. Escolha pelo assunto; pousar na linha 1 para um assunto não logístico significa que você escolheu pela posição, não pelo assunto. Verifique os eixos e pesos reais da fonte: Instrument Serif e Anton têm um peso, então "pesado" não está disponível e font-synthesis: none impede o navegador de falsificá-lo; Archivo precisa de wdth na URL (Archivo:wdth,[email protected],700..900) e font-stretch no CSS.

NÃO DEVE usar Inter, Roboto, Arial, Poppins, Playfair Display, Lora ou Merriweather como o par de identidade. NÃO DEVE usar uma família para tudo. Monospace como display...

... (continuação truncada para tradução)