bighardperson/coleção-de-habilidades-de-ciência-da-computação

Padrões de Design Web

Padrões de implementação CSS para interfaces de produção. Para fundamentos de design e tomada de decisão, veja ui-design. Este skill foca em código.

Veja também: ui-design para teoria de tipografia/cor/espaçamento, frontend-design para estética criativa.

Instalação

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install web-design

Princípios de Layout

Use CSS Grid para layouts bidimensionais e Flexbox para fluxo unidimensional. Escolha a ferramenta certa para cada contexto.

Necessidade de Layout	Ferramenta	Porquê
Estrutura de página	CSS Grid (grid-template-areas)	Regiões nomeadas, controle explícito de linhas/colunas
Barras de navegação	Flexbox	Alinhamento em eixo único, espaçamento com gap
Grades de cards	Grid (auto-fill / auto-fit)	Responsivo sem media queries
Centralização	Grid (place-items: center)	Centralização mais curta e confiável
Sidebar + conteúdo	Grid (grid-template-columns: 250px 1fr)	Dimensionamento proporcional com barra lateral fixa
Sobreposições empilhadas	Grid + grid-area: 1/1	Camadas de elementos sem position: absolute

Composição Espacial

Vá além de layouts previsíveis. Assimetria intencional, elementos sobrepostos e acentos que quebram a grade criam interesse visual. Use empilhamento de grade (grid-area: 1/1) em vez de position: absolute para elementos sobrepostos. Escolha espaço negativo generoso para estética de luxo/editorial, ou densidade controlada para interfaces ricas em dados — a escolha deve ser intencional.

Tipografia

A tipografia carrega 90% da personalidade de um design. Escolha fontes que correspondam ao propósito da interface.

Contexto	Direção da Fonte de Destaque	Direção da Fonte de Corpo	Exemplo de Combinação
Editorial / revista	Serifa de alto contraste	Sem serifa humanista neutra	Playfair Display + Source Sans 3
Painel SaaS	Sem serifa geométrica	Sem serifa de peso correspondente	DM Sans + DM Mono (dados)
Portfólio criativo	Fonte de destaque expressiva	Sem serifa legível e limpa	Syne + Outfit
E-commerce de luxo	Serifa moderna fina	Sem serifa elegante	Cormorant Garamond + Jost
Ferramentas de desenvolvedor	Monoespaçada de destaque	Monoespaçada de corpo	JetBrains Mono + IBM Plex Mono

Escala Tipográfica

Use uma proporção consistente. Uma escala de 1.25 (terça maior) funciona para a maioria das interfaces: text-xs 0.64rem, text-sm 0.8rem, text-base 1rem, text-lg 1.25rem, text-xl 1.563rem, text-2xl 1.953rem, text-3xl 2.441rem, text-4xl 3.052rem. Defina o texto do corpo como 1rem (mínimo de 16px), line-height 1.5 para corpo, 1.1–1.2 para títulos. Limite o comprimento da linha a 60–75ch.

Cor

Construindo uma Paleta

Toda paleta precisa de cinco papéis funcionais:

Papel	Propósito	Exemplo de Uso
Primária	Identidade da marca, ações primárias	Botões, links, estados ativos
Neutra	Texto, bordas, fundos	Texto do corpo, cards, divisores
Destaque	Ações secundárias, realces	Tags, badges, botões secundários
Sucesso / Aviso / Erro	Feedback semântico	Toasts, validação de formulário, status
Superfície	Fundos em camadas	Cards em página, modais sobre sobreposição

Contraste e Profundidade

Crie profundidade com camadas de superfície, não apenas sombras:

:root {
  --surface-0: hsl(220 15% 8%);    /* fundo da página */
  --surface-1: hsl(220 15% 12%);   /* card */
  --surface-2: hsl(220 15% 16%);   /* elemento elevado */
  --surface-3: hsl(220 15% 20%);   /* popover / modal */
}

Use HSL ou OKLCH para manipulação de cor perceptual uniforme. Cor dominante com acentos fortes supera paletas distribuídas uniformemente. Sempre verifique o contraste WCAG: 4.5:1 para texto normal, 3:1 para texto grande.

Espaçamento

O espaçamento consistente cria ritmo. Use uma unidade base de 8px (ou 4px para UIs densas):

Token	Valor	Uso
--space-1	0.25rem (4px)	Espaçamentos de ícone em linha, padding apertado
--space-2	0.5rem (8px)	Padding de input, listas compactas
--space-3	0.75rem (12px)	Padding de botão, espaçamento interno de card
--space-4	1rem (16px)	Espaçamento padrão entre elementos
--space-6	1.5rem (24px)	Padding de seção, espaços entre cards
--space-8	2rem (32px)	Separação de seções
--space-12	3rem (48px)	Quebras de seção principais
--space-16	4rem (64px)	Ritmo vertical no nível da página

Aplique espaçamento consistentemente: use gap em contêineres Grid/Flexbox em vez de margens nos filhos. Isso elimina bugs de colapso de margem e simplifica ajustes responsivos.

Hierarquia Visual

Guie o olhar através de contraste deliberado em tamanho, peso, cor e espaço.

Técnicas de Hierarquia

Técnica	Como	Impacto
Contraste de tamanho	Título hero 3–4x o tamanho do corpo	Ponto focal imediato
Contraste de peso	Títulos em negrito + corpo regular	Escaneabilidade
Contraste de cor	Texto primário vs. secundário suave	Camadas de informação
Agrupamento espacial	Espaçamento apertado dentro de grupos, amplo entre	Proximidade Gestalt
Elevação	Sombras / camadas de superfície	Affordance interativo
Isolamento por espaço em branco	Espaço vazio em torno de elemento-chave	Ênfase através da ausência

Padrão Prático — Hierarquia de Card

Camadas de hierarquia dentro de cards: título auxiliar (xs, maiúsculas, suave) → título (xl, seminegrito) → corpo (base, cor secundária, line-height 1.6) → ação (espaçada com margin-top). Use cor de superfície para separação e padding consistente a partir de tokens de espaçamento.

Design Responsivo

Estratégia de Breakpoints

Breakpoint	Alvo	Abordagem
< 640px	Mobile	Coluna única, navegação empilhada, alvos de toque ≥ 44px
640–1024px	Tablet	Opções de duas colunas, barras laterais recolhíveis
1024–1440px	Desktop	Layout completo, interações de hover ativadas
> 1440px	Widescreen	Contêiner com largura máxima (1280px), evite comprimentos de linha ultra longos

Técnicas Fluídas

Prefira dimensionamento fluido em vez de breakpoints rígidos quando possível:

/* Tipografia fluida — escala entre viewport de 640px e 1440px */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

/* Espaçamento fluido */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }

/* Grade intrínseca — sem necessidade de media queries */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }

Use container queries (@container) para responsividade no nível de componente quando o layout de um componente deve responder ao seu contêiner, não à viewport.

Acessibilidade

Acessibilidade não é opcional. Construa-a desde o início.

Requisito	Implementação	Padrão
Contraste de cor	4.5:1 texto normal, 3:1 texto grande / UI	WCAG 2.1 AA
Navegação por teclado	Todos os elementos interativos focalizáveis e operáveis	WCAG 2.1.1
Indicadores de foco	Anel :focus-visible visível, deslocamento de 2px+	WCAG 2.4.7
HTML semântico	Use <button>, <nav>, <main>, <article> etc.	WCAG 1.3.1
Texto alternativo	Descritivo para imagens informativas, alt="" para decorativas	WCAG 1.1.1
Segurança de movimento	Respeite prefers-reduced-motion	WCAG 2.3.3
Alvos de toque	Áreas interativas mínimas de 44×44px	WCAG 2.5.8
ARIA quando necessário	aria-label, aria-live, role apenas quando semântica nativa é insuficiente	WCAG 4.1.2

/* Indicador de foco robusto */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Respeite preferências de movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Design de Componentes

Anatomia de um Componente Bem Projetado

Cada componente de UI deve ter estados claros, espaçamento consistente e comportamento previsível:

Estado	Tratamento Visual	Exemplo
Padrão	Estilização base	Botão em repouso
Hover	Mudança sutil — fundo, sombra ou escala	background clareia 5-10%
Ativo / Pressionado	Sensação comprimida — sombra reduzida, leve recuo	transform: scale(0.98)
Foco	Anel de alta visibilidade, sem remoção de contorno	Anel :focus-visible
Desabilitado	Opacidade reduzida, cursor: not-allowed	opacity: 0.5
Carregando	Spinner ou skeleton, interação desabilitada	Spinner inline substituindo rótulo

Arquitetura de Tokens de Design

Estruture tokens em três camadas para capacidade de manutenção:

/* Camada 1: Valores primitivos */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;

/* Camada 2: Apelidos semânticos */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);

/* Camada 3: Específico do componente */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);

Esta abordagem de três camadas permite a troca de tema remapeando a Camada 2 sem tocar nos componentes.

Padrões de Interação

Movimento e Animação

Use movimento para comunicar mudanças de estado, não para decorar. Foco em momentos de alto impacto:

Interação	Duração	Facilitação (Easing)	Propósito
Hover de botão	150ms	ease-out	Reconhecer interação
Abertura de modal	250ms	ease-out	Atrair atenção
Fechamento de modal	200ms	ease-in	Dispensa rápida
Transição de página	300ms	ease-in-out	Manter contexto espacial
Revelação escalonada	50–80ms de atraso por item	ease-out	Carregamento sequencial de conteúdo
Micro feedback	100ms	ease-out	Alternância, checkbox, switch

/* Animação de entrada escalonada */
.stagger-item {
  opacity: 0;
  translate: 0 1rem;
  animation: reveal 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }

@keyframes reveal {
  to { opacity: 1; translate: 0 0; }
}

Efeitos Baseados em Rolagem

Use animation-timeline: scroll() nativo (dentro de @supports) para efeitos de parallax e revelação sem JavaScript. Envolva em detecção de recurso para degradação graciosa.

Checklist de Qualidade de Design

Antes de enviar, verifique contra estes critérios:

• Tipografia: Combinação intencional de fontes, escala consistente, comprimentos de linha legíveis
• Cor: Paleta coesa, contraste WCAG atendido, cores de feedback semântico definidas
• Espaçamento: Ritmo consistente usando tokens de espaçamento, sem valores de pixel ad-hoc
• Hierarquia: Fluxo visual claro — caminho do olho segue a ordem de leitura pretendida
• Responsividade: Testado em mobile, tablet, desktop; sem overflow horizontal
• Acessibilidade: Navegável por teclado, foco visível, testado com leitor de tela, seguro para movimento
• Estados: Todos os elementos interativos têm estados hover, ativo, foco, desabilitado e carregando
• Personalidade: O design tem um ponto de vista claro — não é uma estética de modelo genérico
• Desempenho: Imagens otimizadas, subconjuntos de fontes, animações aceleradas por GPU (transform, opacity)
• Modo escuro: Se suportado, as superfícies usam claridade em camadas, não cores invertidas