Pular para conteúdo

Projeto 06: Gerenciamento Global de Estilos e Elevações 💎

Escopo do Projeto

Objetivo: Configurar o catálogo corporativo de estilos no Figma: estilos de cores, tipografia, efeitos de sombra/elevação (Elevation 1 a 4) e desfoque (Blur).

🎯 1. Contexto & Desafio Prático

A consistência visual de um produto em escala exige a padronização de sombras e profundidade. Você construirá a matriz de elevações tridimensionais (Drop Shadows suaves em múltiplos passos) e publicará o painel consolidado de estilos.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Matriz de Sombras): Criar 4 níveis de elevação: Elevation-1 (Cards baixos), Elevation-2 (Menus dropdown), Elevation-3 (Modais), Elevation-4 (Toasts e Floating Buttons).
  • R2 (Sombras Suaves / Soft Shadows): Construir cada elevação com dupla camada de sombra: uma para oclusão de contato próxima e outra para dispersão de luz difusa.
  • R3 (Efeito de Blur): Criar estilo de Background Blur para barras de navegação translúcidas (efeito Glassmorphism).
  • R4 (Página de Fundações): Organizar a folha de estilo consolidada pronta para publicação em biblioteca de time.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    Flat["Superfície Plana (0dp)"] --> E1["Elevation 1 (2dp): Cards em Repouso"]
    E1 --> E2["Elevation 2 (4dp): Hover & Dropdowns"]
    E2 --> E3["Elevation 3 (8dp): Janelas Modais"]
    E3 --> E4["Elevation 4 (16dp): Notificações Flutuantes"]
    style Flat fill:#e1f5fe,stroke:#01579b
    style E1 fill:#fff3e0,stroke:#e65100
    style E2 fill:#f3e5f5,stroke:#7b1fa2
    style E3 fill:#e8f5e9,stroke:#2e7d32
    style E4 fill:#e0f2f1,stroke:#00695c

💻 4. Especificação Técnica & Código de Referência

// elevation_tokens.css
/* Elevation 1 (Card Baixo) */
--elevation-1: 0px 1px 3px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.04);

/* Elevation 2 (Dropdowns e Menus) */
--elevation-2: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);

/* Elevation 3 (Modais e Dialogs) */
--elevation-3: 0px 10px 15px -3px rgba(0, 0, 0, 0.12), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);

📦 5. Critérios de Avaliação e Entrega

  1. 4 estilos de efeito (Effect Styles) cadastrados no painel do Figma.
  2. Sombras realistas sem contornos pretos duros (rgba(0,0,0,0.08)).
  3. Exemplo visual demonstrando a diferença de profundidade entre card e modal.