# METADAX Design > Referência viva e navegável do Design System METADAX v2: paleta de cores (institucional, tecnológica, semântica, transações e trading), temas dark/light, tipografia (Audiowide, Inter, Geist, JetBrains Mono), componentes (botões, badges, AI Timeline, code block, formulários), usabilidade mobile-first, política de anúncios e biblioteca de padrões de página. Este site (`design.metadax.com.br`) não guarda uma cópia congelada do sistema — cada página busca o markdown-fonte diretamente do CDN oficial da METADAX em tempo real, então o conteúdo abaixo está sempre sincronizado com a fonte da verdade. ## Fontes primárias (markdown/texto puro — leia estas para indexar o sistema) - [Design System v2 — completo](https://cdn.metadax.com.br/design/v2/global-design-system.md): tokens de cor institucional/tecnológica/semântica/transação/trading, temas dark (padrão) e light, tipografia Audiowide/Inter/Geist/JetBrains Mono, componentes de produto (botões retangulares, badges, AI Timeline, code block, inputs/selects/checkbox/radio/switch), header/footer/loader prontos via CDN, grid e layout, elevação/sombra, border radius, uso da marca, usabilidade mobile-first, política de anúncios, breakpoints, diagnóstico do `global.css`, rodapé institucional obrigatório, guia para agentes/prompts e biblioteca de padrões de página (hero, about, features, documentation, pricing, FAQ, depoimentos). - [Geração de Imagem & Vídeo por IA](https://cdn.metadax.com.br/design/v2/media-generate.md): guia de referência rápida de cor, gradiente e composição para prompts de Midjourney, DALL·E, Runway, Sora e ferramentas equivalentes, consistente com a marca METADAX. - [Kit de Integração — Como Usar](https://cdn.metadax.com.br/how_can_i_use_it/metadax_bh_use.txt): links diretos de CDN (CSS global, favicon, loader, header/footer, logos, botão de WhatsApp), snippets prontos de ``/`` (Google Tag Manager, gtag, Meta Pixel, meta tags de SEO institucional) para incluir em qualquer novo projeto METADAX. ## Páginas navegáveis (HTML — mesmo conteúdo acima, renderizado com sumário, âncoras e busca de seção) - [Início](https://design.metadax.com.br/): visão geral e links para as três referências. - [Design System v2](https://design.metadax.com.br/global-design-system/): versão navegável do documento completo, com sumário lateral e links âncora por seção. - [Geração por IA](https://design.metadax.com.br/media-generate/): versão navegável do guia de prompts visuais. - [Como Usar](https://design.metadax.com.br/usage/): versão navegável do kit de integração. ## Notas para agentes - O Azul METADAX (`#0056B3`) é a cor institucional primária e está registrada (INPI nº 850250075442) — não a troque por outra cor de "marca" em nenhuma sugestão. - O Vermelho Sinal (`#FF4A3D`) é acento de novidade/energia, não cor de erro — use `--color-error` (`#E5342A` dark / `#C4281F` light) para estados de falha. - Produtos e dashboards nascem em `data-theme="dark"`; o site institucional de marketing nasce em `light`. Nunca misture tokens de um tema com superfícies do outro. - Header, footer e loader são componentes centralizados no CDN da METADAX e nunca devem ser recriados do zero — ver a Seção 6 do Design System v2 e o Kit de Integração. - Toda superfície pública deve exibir o bloco institucional obrigatório de rodapé (razão social, CNPJ, endereço completo) — ver Seção 15 do Design System v2. - Em caso de dúvida ou conflito entre este índice e as fontes primárias em markdown, as fontes primárias no CDN são sempre a referência final. --- *Gerado a partir da estrutura oficial do Design System METADAX v2. © METADAX CONSULTORIA LTDA.*