📚 Pré-requisitos Teóricos: este projeto aplica conceitos ensinados em Módulo 03: Design de Interfaces UI/UX. Recomendado revisar antes de começar.

🎨 Design System, Tokens W3C & Living Styleguide

v1.0 — Design Tokens, Tipografia Modular, Cores Semânticas e Acessibilidade

Trilha de Especialização Pedagógica — Projeto 1 de 4

🎓 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;
}

—`

🚀 Como Executar no Laboratório

1. Abra o terminal na pasta deste projeto

No seu editor/IDE, abra a pasta deste projeto (File > Open Folder) ou navegue via terminal:

cd design_01_design_system_tokens

2. Execute a aplicação ou testes

npm install
npm run dev
# ou abrir index.html no navegador

[!TIP] Dica para execução a partir da raiz do repositório: Se você abriu o repositório completo no VS Code, basta navegar até a pasta antes de executar: cd proj_aplicacoes_full_stack/projetos/design_01_design_system_tokens`

🧭 Decisões de Arquitetura (ADRs)

—`

🧪 Testes de Validação & Acessibilidade

—`

✅ Checkpoint Final

  1. Design Tokens documentados e reutilizáveis.
  2. Dark Mode nativo funcionando perfeitamente via atributo data-theme.
⬅️ Ver Todos os Projetos no Super-Hub 🏠 Página Inicial do Portal