# Design System — METADAX v2.0 > **Status:** Evolução do Design System v1 (institucional). Nada do que já funciona foi removido — este documento **estende** o sistema atual com tema escuro prioritário, paleta tecnológica com acento vermelho, tipografia Vercel (Geist) e JetBrains Mono para produtos/dashboards/valores financeiros, cores semânticas, de transação e de trading, geometria de botão retangular para produto, o componente de assinatura AI Timeline, diretrizes de code block, sistema completo de formulários, diretrizes de usabilidade mobile-first, política de anúncios, biblioteca de padrões de página (hero/about/features/documentation) e componentes prontos (header/footer/loader) já publicados no CDN. > > **O que muda em relação ao v1:** nada é quebrado. O Azul METADAX (`#0056B3`) continua sendo a cor institucional primária (está registrada — INPI nº 850250075442). O que muda é a **camada tecnológica**: um novo acento vermelho/coral para produtos, dashboards e destaques de inovação, tema escuro como padrão de exibição, e uma tipografia de produto (Geist, da Vercel) para telas densas em dados — como o `metadaxerp`. --- ## 0. Sumário 1. Filosofia & Direção Visual v2 2. Paleta de Cores Completa (institucional, tecnológica, semântica, transações, trading) 3. Temas — Dark (padrão) e Light — tokens CSS 4. Tipografia — Audiowide, Inter, Geist e JetBrains Mono 5. Estilização de Componentes (botões retangulares, badges, AI Timeline, code block, formulários) 6. Header & Footer — Componentes Prontos (CDN) 7. Princípios de Layout & Grid 8. Elevação & Sombra (dark/light) 9. Escala de Border Radius 10. Uso Correto da Marca 11. Usabilidade Mobile-First 12. Anúncios — Diretrizes de Uso 13. Comportamento Responsivo (institucional + escala de produto/app) 14. Arquitetura do `global.css` — Diagnóstico e Otimização 15. Diretrizes Institucionais Obrigatórias (rodapé) 16. Guia para Agentes & Prompts 17. Padrões de Criação de Sites, SPAs e Landing Pages 18. Changelog v1 → v2 / Lacunas Conhecidas --- ## 1. Filosofia & Direção Visual v2 O v1 estabeleceu a METADAX como uma marca institucional: azul de confiança, preto tecnológico, tipografia limpa, densidade baixa. O v2 não abandona isso — ele adiciona uma **segunda voz**, usada especificamente em produtos, dashboards e superfícies que precisam comunicar **tecnologia, futuro, inovação e atenção**: um acento vermelho/coral quente que dança em conjunto com o azul institucional, nunca o substituindo. A leitura é a seguinte: **Azul METADAX = confiança e institucional** (site, marca, contratos, CTAs primários). **Vermelho Sinal = energia e inovação** (badges de novidade, gradientes de destaque em telas de produto, alertas de atenção, estados críticos em dashboards). As duas cores foram calibradas para funcionarem como um duo — o vermelho tem temperatura suficiente para não ser lido como "erro" isolado (esse papel fica com um vermelho semântico separado, mais saturado e puro — ver seção 2.3). **Tema escuro é o padrão de exibição no v2.** Onde o v1 alternava tiles claros e escuros como ritmo de seção, o v2 assume o dark como canvas primário de produto (dashboards, `metadaxerp`, ferramentas internas) — o site institucional continua predominantemente claro. Os dois temas são totalmente especificados (seção 3); nenhuma superfície do sistema deve existir em apenas um tema. **Características centrais do v2 (adicionadas ao v1):** - Acento tecnológico: Vermelho Sinal (`#FF4A3D`) usado com moderação — gradientes de destaque, glows em dark theme, badges de "Novo"/"Beta", nunca como cor de erro. - Tema escuro como canvas primário de produto; tema claro mantido e totalmente tokenizado. - Paleta semântica completa: sucesso, atenção, alerta e erro com tons distintos do acento de marca, para nunca haver ambiguidade entre "novidade" e "problema". - Paleta de transação dedicada (receita, despesa, pendente, transferência, investimento) — essencial para produtos financeiros como o `metadaxerp`. - Tipografia de produto: **Geist Sans** e **Geist Mono** (Vercel) para dashboards e dados tabulares, coexistindo com Inter (institucional) e Audiowide (logotipo exclusivo). - Mobile-first assumido como requisito, não como breakpoint reduzido — toda especificação de componente já nasce pensada para toque antes de mouse. --- ## 2. Paleta de Cores Completa ### 2.1 Institucional (herdada do v1 — não alterar) | Token | Valor | Papel | |---|---|---| | `--metadax-blue` | `#0056B3` | CTA primário, links, foco, títulos de destaque (site institucional) | | `--metadax-black` | `#1E1E1E` | Superfície escura, logotipo dark | | `--metadax-white` | `#FFFFFF` | Canvas claro, texto sobre escuro | | `--metadax-pure-black` | `#000000` | Nav global, overlays de vídeo | ### 2.2 Tecnológica — Acento v2 (novo) | Token | Valor | Papel | |---|---|---| | `--metadax-red` | `#FF4A3D` | Acento de inovação — badges "Novo"/"Beta", glow em dark theme, elemento final de gradiente | | `--metadax-red-soft` | `rgba(255, 74, 61, 0.14)` | Fundo de badge/pill sobre superfície escura | | `--metadax-red-strong` | `#E8362A` | Estado hover/pressionado do acento vermelho | | `--metadax-blue-bright` | `#1E7FE0` | Variante clara do azul institucional — usada sobre fundo escuro, onde `#0056B3` perde contraste | | `--metadax-gradient-nova` | `linear-gradient(135deg, #0056B3 0%, #FF4A3D 100%)` | Gradiente de destaque — **uso raro**: hero de produto no dark theme, capa de release notes, splash de loading. Nunca em botões, nunca em texto de corpo. | > **Regra de uso:** o Vermelho Sinal é um *tempero*, não um segundo CTA. Em qualquer tela, o Azul METADAX continua sendo a única cor de "clique aqui"; o vermelho sinaliza "isto é novo / preste atenção", nunca "aja aqui". ### 2.3 Semântica — Estado do Sistema (novo) Cores de estado são deliberadamente distintas do acento de marca para eliminar ambiguidade entre "novidade" (vermelho de marca) e "erro" (vermelho semântico). | Token | Valor (dark) | Valor (light) | Papel | |---|---|---|---| | `--color-success` | `#22C55E` | `#16A34A` | Confirmações, operações concluídas, badges "Ativo" | | `--color-success-bg` | `rgba(34, 197, 94, 0.14)` | `rgba(22, 163, 74, 0.10)` | Fundo de alerta/badge de sucesso | | `--color-warning` | `#F5B301` | `#B87503` | Atenção moderada — pendências, revisões necessárias | | `--color-warning-bg` | `rgba(245, 179, 1, 0.14)` | `rgba(184, 117, 3, 0.10)` | Fundo de alerta de atenção | | `--color-caution` | `#FB8B24` | `#C2600C` | Risco intermediário — abaixo de erro, acima de atenção (ex: limite próximo, vencimento em breve) | | `--color-caution-bg` | `rgba(251, 139, 36, 0.14)` | `rgba(194, 96, 12, 0.10)` | Fundo de alerta de risco intermediário | | `--color-error` | `#E5342A` | `#C4281F` | Falhas, exclusões destrutivas, campos inválidos | | `--color-error-bg` | `rgba(229, 52, 42, 0.14)` | `rgba(196, 40, 31, 0.10)` | Fundo de alerta de erro | | `--color-info` / `--focus-ring` | `#3B82F6` | `#3B82F6` | Badges informativos e **anel de foco padrão** de todo input, select e componente interativo do sistema — valor único, igual nos dois temas | | `--color-info-bg` | `rgba(59, 130, 246, 0.14)` | `rgba(59, 130, 246, 0.10)` | Fundo de banner informativo | > **Atualização v2:** o token de info foi recalibrado para `#3B82F6` e passa a acumular o papel de **anel de foco universal** (`--focus-ring`) — o mesmo valor é usado em `outline` de qualquer campo focado, em ambos os temas, garantindo que o indicador de foco nunca dependa do tema ativo para ser reconhecível. ### 2.4 Transações Financeiras (novo — para produtos como o `metadaxerp`) | Token | Valor | Papel | |---|---|---| | `--tx-income` | `#22C55E` | Receita, entrada, crédito | | `--tx-expense` | `#E5342A` | Despesa, saída, débito | | `--tx-pending` | `#F5B301` | Transação pendente/em processamento | | `--tx-transfer` | `#2E90FA` | Transferência entre contas | | `--tx-investment` | `#A855F7` | Aplicação/investimento | | `--tx-neutral` | `#6C757D` | Estorno, ajuste contábil, saldo neutro | **Convenção de exibição:** valores positivos sempre em `--tx-income` com prefixo `+`; valores negativos sempre em `--tx-expense` com prefixo `-`. Nunca usar cor para indicar sinal sem o prefixo textual correspondente — é uma exigência de acessibilidade (não depender apenas de cor). ### 2.5 Neutros de Superfície — Dark (novo) | Token | Valor | Papel | |---|---|---| | `--surface-canvas-dark` | `#0A0A0A` | Canvas de fundo do produto (mais escuro que o Preto METADAX) | | `--surface-1-dark` | `#141414` | Primeira camada de elevação (cards) | | `--surface-2-dark` | `#1E1E1E` | Segunda camada (equivale ao Preto METADAX do v1) | | `--surface-3-dark` | `#262626` | Terceira camada (modais, popovers) | | `--hairline-dark` | `rgba(255, 255, 255, 0.08)` | Borda hairline sobre superfície escura | | `--text-primary-dark` | `#FFFFFF` | Texto primário sobre escuro | | `--text-secondary-dark` | `rgba(255, 255, 255, 0.64)` | Texto secundário sobre escuro | | `--text-tertiary-dark` | `rgba(255, 255, 255, 0.40)` | Texto terciário/desabilitado sobre escuro | ### 2.6 Neutros de Superfície — Light (herdado do v1, tokenizado) | Token | Valor | Papel | |---|---|---| | `--surface-canvas-light` | `#FFFFFF` | Canvas primário | | `--surface-1-light` | `#FAFAFA` | Cards utilitários claros | | `--hairline-light` | `rgba(0, 0, 0, 0.08)` | Borda hairline sobre claro | | `--text-primary-light` | `#1E1E1E` | Texto primário sobre claro | | `--text-secondary-light` | `rgba(0, 0, 0, 0.80)` | Texto secundário (Ink 80% do v1) | | `--text-tertiary-light` | `rgba(0, 0, 0, 0.48)` | Fine print, legal, desabilitado (Ink 48% do v1) | ### 2.7 Trading & Ilustração (novo) Cores dedicadas a contextos de mercado/precificação (cotações, variações percentuais, glifos ilustrativos de moeda) — **distintas** da paleta de transação da Seção 2.4. A diferença de papel é estrita: - **`--tx-income` / `--tx-expense`** (Seção 2.4): lançamentos contábeis de um extrato/razão — podem aparecer como texto **ou** fundo de badge. - **`--price-up` / `--price-down`** (esta seção): cotação/variação de preço em tempo real (ex: câmbio, criptoativos, indicadores de mercado no `metadaxerp`) — **cor de texto apenas, nunca fundo**. | Token | Valor | Papel | |---|---|---| | `--accent-yellow` | `#F4B000` | Preenchimento de glifo ilustrativo (ex: ícone de Bitcoin em telas de mercado). **Uso apenas ilustrativo** — nunca cor de ação, badge de estado ou texto funcional. | | `--price-up-dark` | `#0ECB81` | Preço em alta — cor de texto, tema escuro | | `--price-up-light` | `#05B169` | Preço em alta — cor de texto, tema claro (mais escura para manter contraste AA sobre branco) | | `--price-down-dark` | `#F6465D` | Preço em baixa — cor de texto, tema escuro | | `--price-down-light` | `#CF202F` | Preço em baixa — cor de texto, tema claro | ```css .metadax-price--up { color: var(--price-up); } .metadax-price--down { color: var(--price-down); } /* Nunca: background: var(--price-up) em texto ou badge — a cor de preço é estritamente tipográfica */ ``` Como em toda cor de sinal do sistema (Seção 2.4), a variação percentual sempre acompanha um indicador não-cromático (`▲`/`▼` ou `+`/`-`) junto ao número — a cor reforça, nunca carrega sozinha o significado. --- ## 3. Temas — Dark (padrão) e Light Toda superfície de produto deve declarar-se via `data-theme="dark"` ou `data-theme="light"` no elemento raiz (`` ou ``), com `dark` como valor padrão quando o atributo não é definido. O site institucional (marketing) continua `light` por padrão, herdando o comportamento do v1. ```css :root { color-scheme: dark light; /* Institucional — não muda entre temas */ --metadax-blue: #0056B3; --metadax-blue-bright: #1E7FE0; --metadax-red: #FF4A3D; --metadax-red-strong: #E8362A; --metadax-red-soft: rgba(255, 74, 61, 0.14); --metadax-gradient-nova: linear-gradient(135deg, #0056B3 0%, #FF4A3D 100%); /* Semântica — valores dark por padrão */ --color-success: #22C55E; --color-warning: #F5B301; --color-caution: #FB8B24; --color-error: #E5342A; /* Info & foco — valor único, igual nos dois temas */ --color-info: #3B82F6; --focus-ring: #3B82F6; /* Transações */ --tx-income: #22C55E; --tx-expense: #E5342A; --tx-pending: #F5B301; --tx-transfer: #2E90FA; --tx-investment: #A855F7; --tx-neutral: #6C757D; /* Trading & ilustração */ --accent-yellow: #F4B000; --price-up: #0ECB81; --price-down: #F6465D; /* Superfície — dark por padrão */ --surface-canvas: #0A0A0A; --surface-1: #141414; --surface-2: #1E1E1E; --surface-3: #262626; --hairline: rgba(255, 255, 255, 0.08); --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.64); --text-tertiary: rgba(255, 255, 255, 0.40); --shadow-product: rgba(0, 0, 0, 0.45) 3px 5px 30px 0; } [data-theme="light"] { color-scheme: light; --color-success: #16A34A; --color-warning: #B87503; --color-caution: #C2600C; --color-error: #C4281F; /* --color-info e --focus-ring permanecem #3B82F6 nos dois temas — não sobrescrever */ --price-up: #05B169; --price-down: #CF202F; --surface-canvas: #FFFFFF; --surface-1: #FAFAFA; --surface-2: #1E1E1E; /* tiles escuros continuam existindo dentro de um layout claro */ --surface-3: #F0F0F0; --hairline: rgba(0, 0, 0, 0.08); --text-primary: #1E1E1E; --text-secondary: rgba(0, 0, 0, 0.80); --text-tertiary: rgba(0, 0, 0, 0.48); --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0; } /* Respeita preferência do sistema quando o produto não define tema explícito */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } } ``` **Regra de produto:** dashboards e ferramentas internas (`metadaxerp`, painéis administrativos) carregam `data-theme="dark"` por padrão, com toggle opcional para `light`. O site institucional (`metadax.com.br`) e páginas de marketing carregam `light` por padrão e não precisam oferecer dark mode a menos que explicitamente pedido. --- ## 4. Tipografia O v2 introduz duas famílias novas — **Geist**, da Vercel, e **JetBrains Mono** — reservadas para produto/dashboard. A regra do v1 (*Audiowide = logotipo, Inter = tudo o mais*) se mantém para o site institucional; ela é estendida da seguinte forma: > **Regra v2:** Audiowide = logotipo, sempre. Inter = site institucional, marketing, comunicação, e-mail. Geist Sans = interface de produto e dashboards (texto, labels, navegação, tabelas não-financeiras). Geist Mono = dados tabulares densos e identificadores (IDs, hashes, código genérico). **JetBrains Mono = informações financeiras e números em dashboards** — saldos, preços, variações percentuais e qualquer valor monetário do sistema. ### 4.1 Geist (Vercel) — Nova - **Geist Sans**: família criada pela Vercel para interfaces de produto — alta legibilidade em telas densas, ótima em tamanhos pequenos (12–14px), números tabulares nativos. - **Geist Mono**: variante monoespaçada da mesma família — usada para IDs, hashes, trechos de código inline e qualquer dado tabular denso que **não seja financeiro** (ver JetBrains Mono abaixo para valores monetários). - **Instalação:** pacote oficial via npm — `npm install geist` — ou fontes estáticas via [vercel.com/font](https://vercel.com/font). Importar em produtos Next.js/React via `next/font` ou `geist/font`; em HTML puro, hospedar os arquivos `.woff2` no CDN próprio (`cdn.metadax.com.br/fonts/geist/`) e declarar via `@font-face`. ```css @font-face { font-family: 'Geist Sans'; src: url('https://cdn.metadax.com.br/fonts/geist/GeistVF.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('https://cdn.metadax.com.br/fonts/geist/GeistMonoVF.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } :root { --font-institutional: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-product: 'Geist Sans', 'Inter', -apple-system, sans-serif; --font-mono: 'Geist Mono', 'Fira Code', Consolas, monospace; --font-financial: 'JetBrains Mono', 'Geist Mono', 'Fira Code', Consolas, monospace; --font-logo: 'Audiowide', sans-serif; /* uso exclusivo em logotipo */ } ``` ### 4.1b JetBrains Mono — Financeiro (novo) - **Papel exclusivo:** todo número que representa dinheiro — saldos, valores de transação, preços, variações percentuais, totais de fatura — usa **JetBrains Mono**, nunca Geist Mono. A escolha é deliberada: JetBrains Mono tem dígitos ainda mais distintos entre si (o `1`, `l` e `I` nunca se confundem), o que importa quando o número é literalmente dinheiro do usuário. - **Instalação:** hospedada no Google Fonts (`fonts.google.com/specimen/JetBrains+Mono`) ou auto-hospedada em `cdn.metadax.com.br/fonts/jetbrains-mono/`. Via Google Fonts: ```html ``` - **Uso obrigatório com `tabular-nums`:** ```css .metadax-financial-value { font-family: var(--font-financial); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } ``` - Já era o padrão do `.metadax-code-block` no `global.css` atual (`'JetBrains Mono', 'Fira Code', 'Consolas', monospace`) — o v2 formaliza esse uso e o estende para **todo** valor financeiro de produto, não apenas blocos de código. ### 4.2 Hierarquia — Institucional (Inter, herdada do v1) | Papel | Tamanho | Peso | Line Height | Tracking | |---|---|---|---|---| | Hero Headline | 56px | 600 | 1.07 | -0.28px | | H1 / Título de Tile | 40px | 600 | 1.10 | -0.28px | | H2 / Seção | 32px | 600 | 1.20 | -0.32px | | Lead / Subtítulo | 24px | 400 | 1.33 | 0.00px | | Body | 17px | 400 | 1.47 | -0.374px | | Caption | 14px | 400 | 1.43 | -0.224px | *(escala completa permanece idêntica à Seção 3 do Design System v1 — não repetida aqui na íntegra para evitar divergência de fonte única de verdade)* ### 4.3 Hierarquia — Produto (Geist, nova) Otimizada para densidade de dados, dashboards e telas com números (saldos, KPIs, tabelas). | Papel | Tamanho | Peso | Line Height | Tracking | Fonte | |---|---|---|---|---|---| | Dashboard Metric (destaque) | 32px | 600 | 1.15 | -0.02em | Geist Sans | | Card Title | 18px | 600 | 1.30 | -0.01em | Geist Sans | | Table Header | 12px | 600 | 1.30 | 0.02em (uppercase) | Geist Sans | | Table Cell (texto) | 14px | 400 | 1.45 | 0 | Geist Sans | | Table Cell (valor numérico, não-financeiro) | 14px | 500 | 1.45 | 0 | Geist Mono, `tabular-nums` | | Valor Financeiro (tabela/lista) | 14px | 600 | 1.45 | 0 | **JetBrains Mono**, `tabular-nums` | | Valor Financeiro (destaque) | 24px | 600 | 1.20 | 0 | **JetBrains Mono**, `tabular-nums` | | Preço / Variação (trading) | 14px | 600 | 1.30 | 0 | **JetBrains Mono**, `tabular-nums`, cor `--price-up`/`--price-down` | | Label de Input | 13px | 500 | 1.30 | 0 | Geist Sans | | Badge / Status Pill | 12px | 600 | 1.20 | 0.02em (uppercase) | Geist Sans | | Código / ID / Hash | 13px | 400 | 1.50 | 0 | Geist Mono | | Code Block (corpo) | 14px | 400 | 1.6 | 0 | JetBrains Mono (ver Seção 5.7) | **Princípio:** todo número que representa **dinheiro ou preço** usa JetBrains Mono com `tabular-nums`. Todo número que representa **contagem, ID ou dado tabular genérico não-monetário** usa Geist Mono com `tabular-nums`. Texto descritivo ao redor de qualquer número usa Geist Sans. --- ## 5. Estilização de Componentes (v2) Os componentes do v1 (botões, cards, inputs) permanecem válidos para o site institucional. O v2 adiciona variantes para tema escuro e para os novos tokens semânticos. ### 5.1 Botões — Geometria v2 (retangular, não mais pílula) **Mudança de geometria:** o v1 usava a pílula completa (`980px`) como formato universal de CTA. No v2, botões de **produto** (dashboards, `metadaxerp`, ferramentas internas) passam a usar **retângulo com cantos arredondados** — geometria que lê como "software" em vez de "site institucional", e que acomoda melhor ícones, contadores e estados compostos dentro do botão. ``` --radius-button-sm: 8px; /* botões utilitários compactos, ações de tabela/toolbar */ --radius-button-md: 10px; /* botão padrão — a maioria dos casos */ --radius-button-lg: 12px; /* CTA de destaque em telas de onboarding/upsell */ ``` > **O que continua pílula (`980px`):** o CTA institucional do site de marketing (`metadax.com.br`, herdado do v1 — não alterar, já está publicado e é parte da identidade pública da marca), além de badges/status pills e chips de configuração, que são conceitualmente *etiquetas*, não botões de ação. Fora esses dois casos, todo botão novo do sistema usa a escala de `--radius-button-*` acima. **Botão Primário — Produto (light)** - Background: `--metadax-blue` - Texto: `#FFFFFF`, Geist Sans 14px, peso 600 - Radius: `--radius-button-md` (`10px`) - Padding: `10px 18px` - Hover: `filter: brightness(1.08)` - Ativo: `transform: scale(0.97)` - Foco: `outline: 2px solid var(--focus-ring); outline-offset: 2px;` **Botão Primário — Produto (dark theme)** - Background: `--metadax-blue-bright` (não o `--metadax-blue` padrão, que perde contraste em fundo `#0A0A0A`) - Texto: `#FFFFFF` - Mesma geometria retangular (`--radius-button-md`) e estado ativo (`scale(0.97)`) **Botão Primário — Disabled (novo)** - Background: `--surface-2` (dark) / `#E9ECEF` (light) — nunca a cor azul apagada com `opacity`, que falha em contraste para leitura do label - Texto: `--text-tertiary` — `rgba(255,255,255,0.40)` dark / `rgba(0,0,0,0.48)` light - Borda: nenhuma - `cursor: not-allowed` - **Nunca** aplicar apenas `opacity: 0.5` ao botão ativo — o texto precisa permanecer legível o suficiente para o usuário entender *qual* ação está indisponível, mesmo que não possa clicá-la ```css .metadax-btn-primary:disabled, .metadax-btn-primary--disabled { background: var(--surface-2); color: var(--text-tertiary); border: none; cursor: not-allowed; box-shadow: none; transform: none; /* nenhuma micro-interação em estado disabled */ } ``` **Botão Secundário / Ghost — Produto** - Background: transparente - Texto: `--metadax-blue` (light) / `--metadax-blue-bright` (dark) - Borda: `1px solid var(--hairline)` - Radius: `--radius-button-md` - Hover: background `--surface-1` **CTA Vermelha — Novidade (uso raro)** - Background: `--metadax-red` - Texto: `--metadax-white`, Geist Sans 14px, peso 600 - Radius: `--radius-button-md` (não mais pílula) - Uso: convites de ação para features novas ("Experimente o Beta"), nunca para ações destrutivas (isso é `--color-error`, ver abaixo) **Botão Destrutivo** - Background: transparente - Texto: `--color-error` - Borda: `1px solid var(--color-error)` - Radius: `--radius-button-md` - Hover: background `--color-error`, texto branco - Uso: excluir, cancelar assinatura, remover permanentemente **Botão Ícone (novo — ações de toolbar/tabela)** - Dimensão: `36×36px` (desktop) / `44×44px` (touch, ver Seção 11.1) - Background: transparente - Radius: `--radius-button-sm` (`8px`) — nunca circular no contexto de produto (o círculo (`50%`) permanece exclusivo dos chips flutuantes sobre fotografia, herdados do v1) - Hover: background `--surface-1` ### 5.2 Badges / Status Pills (novo) Componente não existente no v1 — necessário para dashboards e listas de transação. ```css .metadax-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 980px; font-family: var(--font-product); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .metadax-badge--success { background: var(--color-success-bg, rgba(34,197,94,.14)); color: var(--color-success); } .metadax-badge--warning { background: var(--color-warning-bg, rgba(245,179,1,.14)); color: var(--color-warning); } .metadax-badge--caution { background: var(--color-caution-bg, rgba(251,139,36,.14)); color: var(--color-caution); } .metadax-badge--error { background: var(--color-error-bg, rgba(229,52,42,.14)); color: var(--color-error); } .metadax-badge--info { background: var(--color-info-bg, rgba(46,144,250,.14)); color: var(--color-info); } .metadax-badge--new { background: var(--metadax-red-soft); color: var(--metadax-red); } ``` ### 5.3 Card de Transação (novo — específico para produtos financeiros) ```html
↓

Fornecedor XPTO

10 jul 2026 · Cartão corporativo

- R$ 1.240,00
``` ```css .metadax-tx-value { font-family: var(--font-financial); /* JetBrains Mono — todo valor financeiro usa esta família */ font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; } .metadax-tx-value--income { color: var(--tx-income); } .metadax-tx-value--expense { color: var(--tx-expense); } .metadax-tx-value--pending { color: var(--tx-pending); } ``` ### 5.4 Card & Input — Dark Theme Cards utilitários em dark theme usam `--surface-1` como fundo (não preto puro), com `--hairline` como borda — mantendo a hierarquia visual de elevação sem sombra (a filosofia do v1 de "elevação por cor de superfície" se estende ao dark theme). ```css [data-theme="dark"] .metadax-card { background: var(--surface-1); border: 1px solid var(--hairline); color: var(--text-primary); } [data-theme="dark"] .metadax-card input, [data-theme="dark"] .metadax-card select { background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-primary); } [data-theme="dark"] .metadax-card input:focus { outline: 2px solid var(--metadax-blue-bright); border-color: var(--metadax-blue-bright); } ``` ### 5.5 AI Timeline (assinatura de produto — novo) Cinco pílulas pastel marcam os estágios de uma ação de IA dentro de um timeline de agente em produto — a assinatura visual distintiva da METADAX para superfícies com IA embutida (ex: automações do `metadaxerp`, agentes de extração de PDF, qualquer fluxo onde uma IA narra o que está fazendo em tempo real). > **Escopo estrito:** este é o **único** lugar do sistema onde cores pastel aparecem, e o **único** lugar onde mais de duas cores de "ação" coexistem lado a lado. Pastel aqui não é decoração — é rotulagem de estágio. **Nunca** usar estas cores como cores de ação do sistema (botões, links, CTAs) fora do timeline. | Estágio | Token | Pastel (dark) | Pastel (light) | Papel | |---|---|---|---|---| | Thinking | `--ai-stage-thinking` | `#C9B8FF` sobre `rgba(139,92,246,0.14)` | `#7C3AED` sobre `rgba(124,58,237,0.08)` | Raciocínio/análise em andamento | | Grep | `--ai-stage-grep` | `#8ED2FF` sobre `rgba(59,130,246,0.14)` | `#2563EB` sobre `rgba(37,99,235,0.08)` | Busca/varredura de arquivos ou dados | | Read | `--ai-stage-read` | `#7EE8C7` sobre `rgba(20,184,166,0.14)` | `#0D9488` sobre `rgba(13,148,136,0.08)` | Leitura/inspeção de um arquivo ou registro específico | | Edit | `--ai-stage-edit` | `#FFD08A` sobre `rgba(245,158,11,0.14)` | `#B45309` sobre `rgba(180,83,9,0.08)` | Modificação/gravação de dado ou arquivo | | Done | `--ai-stage-done` | `#8FE3A6` sobre `rgba(34,197,94,0.14)` | `#15803D` sobre `rgba(21,128,61,0.08)` | Conclusão do estágio/tarefa | ```html
  1. Thinking

    analisando estrutura do repositório...

  2. Grep

    buscou em 142 arquivos por assinaturas de handler

  3. Read

    abriu src/api/router.ts (98 linhas)

  4. Edit

    aplicou 3 alterações em runner.ts

  5. Done

    todas as verificações passaram · pronto para commit

``` ```css .metadax-ai-timeline { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; font-family: var(--font-product); } .metadax-ai-step { display: flex; align-items: center; gap: 10px; } .metadax-ai-step p { margin: 0; font-size: 13px; color: var(--text-secondary); } .metadax-ai-pill { flex-shrink: 0; min-width: 76px; text-align: center; padding: 3px 10px; border-radius: 980px; /* pílula — exceção deliberada, ver Seção 5.1 */ font-size: 11px; font-weight: 600; } .metadax-ai-step--thinking .metadax-ai-pill { color: var(--ai-stage-thinking-fg); background: var(--ai-stage-thinking-bg); } .metadax-ai-step--grep .metadax-ai-pill { color: var(--ai-stage-grep-fg); background: var(--ai-stage-grep-bg); } .metadax-ai-step--read .metadax-ai-pill { color: var(--ai-stage-read-fg); background: var(--ai-stage-read-bg); } .metadax-ai-step--edit .metadax-ai-pill { color: var(--ai-stage-edit-fg); background: var(--ai-stage-edit-bg); } .metadax-ai-step--done .metadax-ai-pill { color: var(--ai-stage-done-fg); background: var(--ai-stage-done-bg); } ``` **Regras de uso:** - Sempre nesta ordem quando os cinco estágios existem: Thinking → Grep/Search → Read → Edit → Done. Um fluxo pode pular estágios (ex: só Thinking → Done), mas nunca reordená-los. - O texto descritivo ao lado da pílula é sempre em minúsculas, tom de log técnico direto — não é copy de marketing, é telemetria legível. - Este componente pode ser usado no site institucional (ex: página de produto explicando um agente) desde que mantenha `data-theme` consistente com a superfície onde está inserido. ### 5.6 Code Block — Diretrizes de Cor O `.metadax-code-block` já existe no `global.css` atual usando JetBrains Mono — o v2 formaliza sua paleta de syntax highlighting, hoje inexistente (o bloco atual é monocromático). | Token | Valor (dark, padrão) | Papel | |---|---|---| | `--code-bg` | `#0D0D0D` | Fundo do bloco — mais escuro que `--surface-canvas` para isolar o código do restante da UI | | `--code-text` | `#E4E4E7` | Texto padrão / identificadores | | `--code-comment` | `rgba(228, 228, 231, 0.48)` | Comentários | | `--code-keyword` | `var(--metadax-blue-bright)` | Palavras-chave de linguagem (`function`, `return`, `const`) | | `--code-string` | `var(--price-up-dark)` | Strings — reaproveita o verde de trading, já calibrado para dark | | `--code-number` | `var(--accent-yellow)` | Números literais | | `--code-function` | `#C9B8FF` | Nomes de função/método (mesmo tom do estágio "Thinking" do AI Timeline — reforça a associação "isto é ação de código") | | `--code-tag` | `var(--metadax-red)` | Tags JSX/HTML, atributos de componente | | `--code-error-line` | `rgba(229, 52, 42, 0.14)` | Fundo de linha marcada como erro (diffs, linters) | | `--code-added-line` | `rgba(14, 203, 129, 0.10)` | Fundo de linha adicionada (diff) | | `--code-removed-line` | `rgba(246, 70, 93, 0.10)` | Fundo de linha removida (diff) | ```css .metadax-code-block { background: var(--code-bg); color: var(--code-text); font-family: var(--font-financial); /* JetBrains Mono — já era o padrão do global.css */ font-size: 14px; line-height: 1.6; border-radius: 12px; padding: 20px 24px; border: 1px solid var(--hairline); overflow-x: auto; } .metadax-code-block .tok-comment { color: var(--code-comment); font-style: italic; } .metadax-code-block .tok-keyword { color: var(--code-keyword); font-weight: 600; } .metadax-code-block .tok-string { color: var(--code-string); } .metadax-code-block .tok-number { color: var(--code-number); } .metadax-code-block .tok-function { color: var(--code-function); } .metadax-code-block .tok-tag { color: var(--code-tag); } .metadax-code-block .line--added { background: var(--code-added-line); } .metadax-code-block .line--removed { background: var(--code-removed-line); } .metadax-code-block .line--error { background: var(--code-error-line); } ``` - O selo de linguagem (`::before` com `attr(data-lang)`) do `global.css` atual permanece — apenas atualizar sua cor de fundo de `var(--metadax-primary)` para `var(--metadax-blue)`, sem outra alteração. - Em `data-theme="light"`, o code block **não** clareia — blocos de código permanecem escuros mesmo em páginas de tema claro (convenção universal de editores de código); apenas a borda ganha `--hairline-light` para não flutuar isolada sobre um canvas branco. ### 5.7 Inputs, Dropdowns, Selects & Outros Controles de Formulário (novo) O v1 especificava apenas o input de busca (pílula). O v2 completa o sistema de formulário para produto — todos os controles abaixo seguem `--radius-button-md` (`10px`), não mais a pílula, para se alinharem à nova geometria retangular de produto. **Text Input** ```css .metadax-input { width: 100%; height: 44px; /* alvo de toque AAA, ver Seção 11.1 */ padding: 0 14px; font-family: var(--font-product); font-size: 16px; /* nunca abaixo disso — evita zoom automático no iOS, ver Seção 11.3 */ color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .metadax-input::placeholder { color: var(--text-tertiary); } .metadax-input:hover { border-color: var(--text-tertiary); } .metadax-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .metadax-input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-bg); } .metadax-input:disabled { background: var(--surface-2); color: var(--text-tertiary); cursor: not-allowed; } ``` **Textarea** — herda tudo do Text Input, com `height: auto`, `min-height: 96px`, `padding: 12px 14px`, `resize: vertical`. **Select / Dropdown** ```css .metadax-select { /* herda toda a base de .metadax-input */ appearance: none; padding-right: 40px; /* espaço para o chevron */ background-image: var(--icon-chevron-down); /* SVG inline, cor --text-secondary */ background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .metadax-select:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(59,130,246,0.18); } ``` - Menu de opções aberto (`