# Foundations do E-PROC > Gerado do guide vivo em 2026-09-03. Fonte: `content/9.design-patterns/5.foundations/`. **Resumo** das foundations (regras + boas práticas + escalas). Os **tokens canônicos e o enforcement** por stack vivem na suite **me-foundations** (nuxt/shadcn) — este MD não a substitui. Não editar à mão — re-gerar. ## Geral _Visão geral do sistema de cor — camadas, boas práticas, semânticas e paletas base do EDS._ **Quando usar:** - Cores base só como ponto de partida para compor semânticas e tokens. - "Nomenclatura oficial da escala do sistema (ex.: `me-brand-500`)." - Consultar a paleta base para achar o tom exato ao mapear uma nova necessidade. - Manter consistência usando apenas as famílias já aprovadas. - Níveis de intensidade da escala para orientar contraste e acessibilidade. **Quando NÃO usar:** - Cores base ou HEX direto em componentes, telas e código final. - Valores HEX soltos, arbitrários ou inventados fora das escalas. - "Associar significado direto à cor base (ex.: \"Red 500 é a cor de erro\")." - Alterar opacidade (alpha) ou criar tons manualmente fora da estrutura. - Pular a hierarquia aplicando cor base sem passar pela camada semântica. **Seções:** Cores semânticas · Paletas base (Nuxt UI Colors) --- ## Primary _Cores primárias do sistema — ações de destaque e identidade de marca, prontas para temas._ **Quando usar:** - Estabelecer e reforçar a identidade da marca ativa em toda a plataforma. - Ações principais (CTAs) e elementos de maior hierarquia. - Aplicar via tokens (`--ui-primary`); ao trocar de tema, muda só a origem. **Quando NÃO usar:** - HEX bruto no componente — quebra tokens e tematização. - Como semântica de erro, sucesso ou atenção. - Opacidade manual — use a variante alpha correspondente. - Misturar famílias base na mesma escala primária. **Seções:** Cores padrão · Tematizações alternativas --- ## Neutral _Tons neutros — texto, fundo, borda e hierarquia visual, prontos para temas._ **Quando usar:** - Texto, fundos, bordas e superfícies em toda a plataforma. - Hierarquia visual — tipografia, divisores, camadas. - Aplicar via tokens; ao trocar de tema, muda só a origem da neutra. **Quando NÃO usar:** - HEX bruto no componente. - Para CTAs principais ou destaque de marca (use Primary). - Opacidade manual — use a variante alpha. - Misturar famílias base na mesma escala neutra. **Seções:** Cores padrão · Tematizações alternativas --- ## Secondary _Cores secundárias — apoio visual e hierarquia complementar, prontas para temas._ **Quando usar:** - Reforçar hierarquia e complementar a marca ativa. - Tokens de apoio — tags, badges, chips, elementos abaixo da primária. - Aplicar via tokens (`--ui-secondary`). **Quando NÃO usar:** - HEX bruto no componente. - Como CTA principal ou maior destaque (use Primary). - Opacidade manual — use a variante alpha. - Misturar famílias base na mesma escala secundária. **Seções:** Cores padrão · Tematizações alternativas --- ## Success _Família Success — confirmações, validações positivas e feedback de conclusão._ **Quando usar:** - Conclusão positiva, confirmações e validações. - Tokens de feedback — toasts, badges, alertas, indicadores de operação concluída. - Mapeia sempre para a paleta Green. **Quando NÃO usar:** - HEX bruto no componente. - Para erros, avisos ou informações neutras. - Opacidade manual — use a variante alpha. - Como única indicação — combine com texto ou ícone. **Seções:** Cores padrão --- ## Error _Família Error — falhas, validações negativas e ações destrutivas._ **Quando usar:** - Falhas, validações negativas e ações destrutivas. - Tokens de feedback — toasts, badges, alertas, indicadores de falha. - Mapeia sempre para a paleta Red. **Quando NÃO usar:** - HEX bruto no componente. - Para sucessos, avisos leves ou informações neutras. - Opacidade manual — use a variante alpha. - Em situações negativas que não representem falha real. **Seções:** Cores padrão --- ## Warning _Família Warning — avisos, pendências e feedback de cautela sem indicar erro grave._ **Quando usar:** - Avisos, pendências e cautelas que não bloqueiam o fluxo. - Tokens de feedback — toasts, badges, indicadores de atenção moderada. - Mapeia sempre para a paleta Yellow. **Quando NÃO usar:** - HEX bruto no componente. - Para erros graves, sucessos ou informações puramente neutras. - Opacidade manual — use a variante alpha. - Como substituto de Error em problemas que exigem ação imediata. **Seções:** Cores padrão --- ## Info _Família Info — contexto, orientações e mensagens informativas sem tom de alerta._ **Quando usar:** - Contexto, orientações e mensagens que não exigem ação imediata. - Tokens informativos — banners, toasts de processamento, indicadores de contexto. - Mapeia sempre para a paleta Blue. **Quando NÃO usar:** - HEX bruto no componente. - Para erros, sucessos, avisos ou ações primárias de destaque. - Opacidade manual — use a variante alpha. - Como cor primária da marca — Info tem papel estritamente informativo. **Seções:** Cores padrão --- ## Geral _Visão geral dos tokens — regras de aplicação, famílias, modos claro/escuro e exemplos de uso._ **Quando usar:** - Definir fundo, texto e bordas com os tokens oficiais das famílias documentadas. - Comunicar sucesso, erro, atenção e informação com os tokens de feedback. - Variantes com transparência (alpha) para overlays, hovers e fundos sutis. - Conferir a família correta antes de passar para o dev. **Quando NÃO usar:** - "Cores digitadas manualmente (`#1052E0`, `rgb(...)`, etc.)." - Tons avulsos de paleta quando já existe um token para aquele papel. - Duplicar estilos de modo escuro quando o token já se adapta sozinho. - Criar tokens novos fora do que está documentado aqui. **Seções:** Famílias de tokens · Regras de aplicação · Como ler a tabela · Contraste e legibilidade · Modo claro e escuro · Trocar de tema · Estados interativos · Exemplos de uso --- ## Marca _Tokens de marca — primária e secundária para ações e identidade._ **Quando usar:** - Ações principais e CTAs com `--ui-primary` (ou variantes alpha). - Apoio visual e chips com `--ui-secondary`. - Hover e foco com tokens alpha (`--ui-primary-25`, `--ui-primary-10`). **Quando NÃO usar:** - HEX ou rgb soltos no lugar dos tokens de marca. - Opacidade manual quando já existe token alpha. - Secundária como substituto da primária em ações principais. **Seções:** Guia de decisão · Pareamentos recomendados · Onde aparece --- ## Feedback _Tokens de feedback — sucesso, info, atenção e erro._ **Quando usar:** - Sucesso em confirmações e conclusão de fluxos. - Info em banners orientativos e contexto. - Warning em situações que exigem atenção sem bloqueio. - Error em falhas, validação e bloqueios. - Alpha para fundos sutis de alerta e badges. **Quando NÃO usar:** - Cores de feedback fora dos tokens documentados. - Error ou Warning como decoração sem significado. - Misturar famílias de feedback na mesma mensagem. **Seções:** Guia de decisão · Pareamentos recomendados · Status → tom (mapa canônico) · Onde aparece --- ## Neutro _Token neutro base para componentes sem ênfase de marca ou feedback._ **Quando usar:** - Componentes com `color="neutral"` ou equivalente semântico. - Base neutra quando o contexto não exige marca ou feedback. **Quando NÃO usar:** - Substituir `--ui-text` ou `--ui-bg` quando o token específico já existe. - Inventar tons neutros fora do mapeamento. **Seções:** Onde aparece --- ## Texto _Tokens de texto — hierarquia de leitura do mais forte ao mais suave, incluindo invertido._ **Quando usar:** - Títulos e ênfase com `--ui-text-highlighted`. - Corpo e labels com `--ui-text`. - Legendas e metadados com `--ui-text-muted` / `--ui-text-dimmed`. - Texto sobre fundos invertidos com `--ui-text-inverted`. **Quando NÃO usar:** - Texto principal com tokens muted/dimmed. - Combinações texto/fundo que prejudiquem contraste. - Opacidade manual no lugar de tokens alpha de texto. **Seções:** Guia de decisão · Pareamentos recomendados · Onde aparece --- ## Background _Tokens de background — fundos de página, cards, modais e overlays._ **Quando usar:** - Fundo principal da página com `--ui-bg`. - Cards e blocos com `--ui-bg-elevated` ou `--ui-bg-muted`. - Destaque estrutural com `--ui-bg-accented`. - Overlays e scrims com tokens alpha (`--ui-bg-90`, `--ui-bg-inverted-80`). **Quando NÃO usar:** - "Fundos avulsos (`#fff`, `gray-100`) fora dos tokens." - Alpha improvisada quando o token alpha já existe. - Background invertido sem par com texto invertido. **Seções:** Hierarquia de elevação · Guia de decisão · Pareamentos recomendados · Onde aparece --- ## Borda _Tokens de borda — divisores e contornos que delimitam e reforçam hierarquia._ **Quando usar:** - Divisores e contornos padrão com `--ui-border`. - Separadores discretos com `--ui-border-muted`. - Ênfase estrutural com `--ui-border-accented`. - Contornos em superfícies invertidas com `--ui-border-inverted`. **Quando NÃO usar:** - Bordas com cor fixa fora dos tokens. - `border-accented` em excesso — dilui a hierarquia. - Borda como único indicador de estado (prefira tokens de feedback). **Seções:** Tokens · Guia de decisão · Pareamentos recomendados · Onde aparece --- ## Charts _Tokens de cor das séries de gráfico — paleta categórica de 10 cores (--chart-1 a --chart-10), não-semântica, com light/dark automático._ **Quando usar:** - Diferenciar séries num mesmo gráfico (linhas, barras, fatias) com --chart-1…10. - UI de dado customizada via var(--chart-1) ou utilitários bg-/text-/fill-/stroke-. - Sobrescrever a paleta de um chart — sempre mantendo-se nos --chart-*. **Quando NÃO usar:** - "Cor de série para comunicar status (verde=ok, vermelho=erro) — use os tokens de feedback." - "HEX cru no lugar dos tokens --chart-*." - "Mais de ~10 séries coloridas — o olho não diferencia; prefira Top N + \"Outros\"." **Seções:** Tokens · Como usar --- ## Typography _A tipografia organiza a leitura e cria hierarquia visual nas interfaces. Esta página reúne os estilos, tamanhos e regras aprovadas para uso consistente._ **Quando usar:** - Aplicar os estilos tipográficos definidos pelo sistema ao criar interfaces no Figma ou no código. - Utilizar estilos de texto conforme sua finalidade (títulos, corpo, labels, destaques). - Combinar tamanho e peso seguindo a hierarquia documentada. - Consultar esta referência para manter consistência entre design e desenvolvimento. **Quando NÃO usar:** - Criar tamanhos ou pesos personalizados fora dos estilos aprovados. - Utilizar fontes diferentes da família tipográfica definida pelo sistema. - Misturar estilos de forma inconsistente quando já existe um padrão. - Utilizar itálico ou peso excessivo para substituir hierarquia visual. **Seções:** Fontes · Regras de aplicação · Exemplos de uso --- ## Spacing _Os espaçamentos ajudam a estruturar conteúdos e manter a leitura mais confortável. Esta página reúne as regras e escalas oficiais do sistema._ **Quando usar:** - Aplicar padding, margin e gap seguindo a escala definida pelo sistema. - Priorizar a escala padrão antes de recorrer a ajustes específicos. - Manter consistência de espaçamento entre componentes e seções similares. - Seguir esta referência para preservar ritmo e hierarquia visual. **Quando NÃO usar:** - Utilizar valores fora da escala definida. - Aplicar espaçamentos diferentes sem uma necessidade clara. - Misturar padrões de espaçamento na mesma interface. - Utilizar espaçamentos que prejudiquem a hierarquia da interface. **Seções:** Spacing · Regras de aplicação · Exemplos de uso --- ## Border Radius _Os cantos arredondados ajudam a definir a identidade visual e a hierarquia dos componentes. Esta página reúne as escalas e diretrizes oficiais do sistema._ **Quando usar:** - Aplicar border radius seguindo a escala definida pelo sistema. - Utilizar os arredondamentos oficiais para manter consistência visual. - Manter consistência de arredondamento entre componentes semelhantes. - Aplicar arredondamentos proporcionais ao contexto do componente. **Quando NÃO usar:** - Utilizar valores fora da escala oficial. - Aplicar arredondamentos sem contexto ou necessidade clara. - Misturar diferentes padrões de radius na mesma interface. - Utilizar cantos que comprometam legibilidade ou consistência visual. **Seções:** Border Radius · Regras de aplicação · Exemplos de uso --- ## Shadows & Elevation _Sombras e elevação ajudam a criar profundidade, hierarquia e destaque visual na interface. Esta página reúne as escalas e diretrizes oficiais do sistema._ **Quando usar:** - Aplicar sombras seguindo os níveis definidos pelo sistema. - Utilizar sombras para reforçar hierarquia e destaque visual. - Manter consistência entre componentes com o mesmo nível de profundidade. - Aplicar sombras proporcionais ao contexto do componente. - Utilizar sombras para indicar sobreposição, foco ou interação. **Quando NÃO usar:** - Utilizar sombras fora da escala oficial. - Aplicar sombras sem necessidade ou significado visual. - Misturar diferentes níveis de sombra sem critério. - Utilizar sombras excessivas que prejudiquem legibilidade ou contraste. **Seções:** Shadows & Elevation · Regras de aplicação · Exemplos de uso --- ## Breakpoints _Use breakpoints para orientar mudanças de layout em diferentes larguras de tela, mantendo a interface consistente, legível e responsiva._ **Quando usar:** - Tokens de responsividade (sm, md, lg…) só para estruturar colunas e a adaptação da página em diferentes telas. - Tokens de largura (3xs a 7xl) para limitar elementos internos — cards, modais, seções. - "Resoluções de desktop padrão (ex.: 1440×800) como referência principal de projeto." - Consultar esta doc para alinhar proporções e limites entre design e engenharia. - Separar a lógica de adaptação da tela das regras que limitam o conteúdo interno. **Quando NÃO usar:** - "Criar pontos de quebra manuais (ex.: 900px) ou medidas fixas fora das escalas oficiais." - "Confundir escalas: tokens de mesmo nome (ex.: `sm`) têm valores/funções diferentes para tela e componente." - Projetar pensando só em telas grandes, sem prever a quebra em telas menores. - "Inverter as lógicas: token de conteúdo ditando regra de tela, ou vice-versa." - Forçar medidas estáticas; confie no comportamento dinâmico da estrutura. **Seções:** Breakpoints · Regras de aplicação · Comportamento responsivo · Exemplos de uso --- ## Icons _Ícones ajudam a comunicar ações, estados e navegação de forma rápida e consistente. Esta página reúne os tamanhos, padrões e biblioteca oficial._ **Quando usar:** - Utilizar os ícones oficiais definidos pelo sistema. - Aplicar tamanhos consistentes conforme o contexto da interface. - Reforçar ações, navegação e feedbacks visuais. - Manter o mesmo padrão de ícones entre componentes semelhantes. - Consultar o catálogo oficial antes de adicionar novos ícones. **Quando NÃO usar:** - Misturar diferentes estilos de ícones na mesma interface. - Utilizar tamanhos arbitrários fora dos padrões definidos. - Criar ou editar ícones manualmente sem necessidade. - Ícones decorativos que prejudiquem a hierarquia visual. - Aplicar ícones sem contexto ou significado claro. **Seções:** Catálogo · Regras de aplicação · Exemplos de uso --- ## Illustrations _Ilustrações padronizadas no Design System, com tamanhos fixos, critérios de uso e catálogo de contextos para aplicação._ **Quando usar:** - "Empty states — listas, tabelas e áreas sem registros." - "Tabelas e grids — células/áreas vazias com mensagem de ausência, erro ou orientação." - "Cards — dashboards e blocos informativos sem dados." - "Widgets — dashboards e componentes compactos, respeitando espaço e hierarquia." - "Telas de erro — 404, falhas de carregamento, permissões, conteúdo indisponível." **Quando NÃO usar:** - Fotos, ilustrações stock ou SVGs exportados manualmente. - Redimensionar fora de 76px / 108px / 142px (área do token). - Alterar cores da paleta das ilustrações manualmente. - Usar ilustração sem mensagem — ela complementa, não substitui texto. - Movimentar elementos e transformar em uma nova ilustração. **Seções:** Componente · Referências · Regras de aplicação · Exemplos de uso --- ## Brand _Logos, marcas e assinaturas oficiais do ME para garantir consistência visual em produtos, materiais internos e comunicações._ **Quando usar:** - "ME Logo Default — fundos claros, páginas institucionais, comunicações padrão." - "ME Logo Primary — quando houver necessidade de reforço visual da marca." - "ME Monograma — espaços reduzidos, ícones, favicons, aplicações compactas." - "Versões com sufixo — quando o produto exigir identificação específica." - "Logo em negativo — fundos escuros ou coloridos, com contraste adequado." **Quando NÃO usar:** - Recriar a marca manualmente — use sempre os arquivos oficiais. - Alterar cores ou proporções — mantenha escala, paleta e composição. - Aplicar efeitos (sombra, contorno, gradiente, blur…). - Usar versões antigas ou não aprovadas. - Combinar a marca com elementos não previstos. **Seções:** Configurador de marca · Referência · Regras de aplicação · Exemplos de uso --- ## Voz e conteúdo _Como o ME escreve — voz, mensagens e nomenclatura. Texto é UX._ **Seções:** Princípios · Mensagens · Idioma e i18n · Labeling · Nomenclatura de ações · Rótulos de ação — verbo + entidade explícita --- ## Acessibilidade _Como o ME garante que a interface funcione para todos — teclado, foco, contraste, leitores de tela e alvos de toque._ **Seções:** Princípios · Teclado e foco · Contraste · Leitores de tela · Formulários · Alvos de toque e movimento --- ## Motion _Como o movimento funciona no ME — durações, curvas, onde usar e o respeito a "reduzir movimento". Funcional, nunca decorativo._ **Seções:** Princípios · Durações · Curvas (easing) · Onde usar · Reduzir movimento (acessibilidade) --- ## Estados _Vocabulário canônico de estados — interação (hover, foco, selecionado, desabilitado) e dados (carregando, vazio, erro) — e como o ME expressa cada um._ **Seções:** Estados de interação · Estados de dados (assíncrono) ---