📚 Pré-requisitos Teóricos: este projeto aplica conceitos ensinados em Módulo 06: Design de Interfaces UI/UX. Recomendado revisar antes de começar.
🎨 Design System, Tokens W3C & Living Styleguide
📁 Código deste projeto:
web-vanilla/(os caminhos citados abaixo são relativos à subpasta).
v1.0 — Design Tokens, Tipografia Modular, Cores Semânticas e Acessibilidade
Trilha de Especialização Pedagógica — Projeto 1 de 4
- ➡️ v1 (este): Design Tokens W3C · CSS Custom Properties · Dark/Light Mode · Living Styleguide
- v2: Storybook Component-Driven Architecture
- v3: Conformidade Acessível WCAG 2.1 AAA com axe-core
- v4: Design System com Microinterações e Animações Fluidas
🎓 Nível Profissional Simulado: Designer UI/UX / Frontend Júnior. Interfaces profissionais não usam cores “hardcoded” (
#ff0000) nem espaçamentos arbitrários (padding: 13px). Um engenheiro de interface projeta com Design Tokens semânticos, garantindo consistência, acessibilidade e temas dinâmicos em escala corporativa.
🎯 Objetivo & Escopo do Projeto
Construir o Living Styleguide e Design System de um e-commerce corporativo, definindo tokens de cores primárias, secundárias e semânticas (sucesso, alerta, erro), escala tipográfica modular, raio de borda, sombras e alternância nativa de Dark/Light Mode com CSS puro.
🧑💼 Fase 1 — Levantamento de Requisitos
O Briefing do Cliente (Head de Produto e Design)
“Nossos desenvolvedores frontend usam 14 tons diferentes de cinza e tamanhos de fonte aleatórios. Precisamos de um Design System com tokens padronizados de cores, tipografia e espaçamento, um catálogo vivo (Living Styleguide) exibindo todos os botões, cards e badges, e suporte automático a modo escuro com alto contraste WCAG AA.”
Requisitos Funcionais (RF) e Não-Funcionais (RNF)
| ID | Tipo | Descrição | Origem no Briefing |
|---|---|---|---|
| RF01 | Funcional | Definir tokens globais de cores, tipografia, espaçamento e sombras em CSS. | “tokens padronizados” |
| RF02 | Funcional | Criar catálogo visual navegável com botões, cards, inputs e badges. | “catálogo vivo (Living Styleguide)” |
| RF03 | Funcional | Permitir alternância instantânea entre Dark Mode e Light Mode. | “suporte a modo escuro” |
| RNF01 | Não-Funcional | Razão de contraste mínima de 4.5:1 para conformidade WCAG AA. | Acessibilidade |
| RNF02 | Não-Funcional | Zero dependências externas de frameworks pesados (CSS puro). | Performance Web |
📋 Fase 2 — Backlog & User Stories
| ID | User Story | Prioridade |
|---|---|---|
| US01 | Como desenvolvedor, quero consumir variáveis CSS para cores e espaçamento sem valores mágicos. | Alta |
| US02 | Como usuário, quero alternar para o modo escuro para maior conforto visual noturno. | Alta |
🌿 Fase 3 — Engenharia em Equipe (Git Flow & Setup)
# Branch da funcionalidade
git checkout -b feature/US01-design-tokens
# Abrir o living styleguide no navegador
open index.html
🛠️ Fase 4 — Implementação Guiada (tokens.css)
:root {
--color-primary: #2563eb;
--color-success: #16a34a;
--color-error: #dc2626;
--bg-surface: #ffffff;
--text-main: #0f172a;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
}
[data-theme="dark"] {
--bg-surface: #0f172a;
--text-main: #f8fafc;
}
🚀 Roteiro de Execução & Homologação no Laboratório
1. Inclusão dos Tokens em qualquer página HTML
<link rel="stylesheet" href="web-vanilla/tokens.css">
2. Alternância de Tema via JavaScript
// Ativar modo escuro
document.documentElement.setAttribute('data-theme', 'dark');
// Ativar modo claro
document.documentElement.setAttribute('data-theme', 'light');
🧭 Decisões de Arquitetura (ADRs)
- ADR 001: Adoção de CSS Custom Properties para controle global de Design Tokens e alternância de temas.
🧪 Testes de Validação & Acessibilidade
- Teste de contraste realizado com Lighthouse / axe-core: Nota 100 em Acessibilidade.
✅ Checkpoint Final
- Design Tokens documentados e reutilizáveis.
- Dark Mode nativo funcionando perfeitamente via atributo
data-theme.
| ⬅️ Ver Todos os Projetos no Catálogo de Projetos | 🏠 Página Inicial do Portal |