# Design System T2: documentação completa

> O design system da T2 Educação: tokens e regras de uso em uma fonte única, consumida pelo site, pela hub e pela plataforma do aluno. Reúne as fundações (cor, tipografia, escalas, elevação, grid e ícones) e a marca, e entrega tudo também em formatos que agentes de IA conseguem ler.

Design System T2 é o design system da T2 Educação. 97 tokens semânticos em 3 temas (Light, Dark, Dark Blue), 26 paletas primitivas, 16 text styles (Geist e JetBrains Mono), escala de espaço de 4px, raios, 5 níveis de elevação, grid de 4/8/12 colunas, ícones Tabler e a marca T2 (cor de marca: Cyan).

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Este arquivo reúne todas as seções do site em Markdown, sem precisar executar JavaScript. Índice curto: https://design.t2.com.br/llms.txt. Tokens: https://design.t2.com.br/tokens.json e https://design.t2.com.br/tokens.css. Uma doc por seção: https://design.t2.com.br/docs/<seção>.md.

## Regras de ouro

- Use só tokens semânticos (nunca hex solto nem paleta primitiva em componente).
- O tema é contexto (data-theme="light|dark|dark-blue"), não variante.
- Texto >= 4,5:1 e bordas de controle/foco >= 3:1 em todos os temas.
- Espaçamento só com a escala space/* (base 4px).
- Cyan é a cor da marca; nenhuma cor nova fora das paletas.

## Resumo para agentes

1. Primitive → Theme → Componente. Componentes só consomem tokens do Theme. Primitivos ficam ocultos e não são usados em componentes.
2. Nenhuma cor nova. Para resolver contraste, troque o passo da paleta existente no token semântico; nunca crie hex novo nem aplique cor solta no componente.
3. Tema é contexto, não variante. Light, Dark e Dark Blue são modes da collection Theme, aplicados no frame. Não existem componentes /Dark.
4. Texto ≥ 4,5:1 e limites de controle/foco ≥ 3:1 em todos os temas. content/disabled é isento, mas disabled nunca é o único sinal.
5. Status têm pares completos: subtle (fundo), border, content (texto), fill (sólido) e on-fill (texto sobre o sólido). Fill não é cor de texto.
6. Seleção usa a família Cyan (selection/*). Foco usa o halo focus/halo (Cyan translúcido) e, em campos, a borda focus/ring (≥ 3:1). Foco tem prioridade sobre hover. Disabled não tem hover.
7. Overlays (dropdown, popover, combobox, date picker, tooltip, menus) usam overlay/surface + overlay/border + elevation/overlay e sempre aparecem um nível acima da superfície em que abriram.
8. Cyan é a cor da marca: brand/* (destaques, ilustrações) e action/accent/* (ações de destaque). Sky é apoio (gráficos). Informação usa status/info (Blue), separado da marca.

## Conteúdo

1. Sobre a T2: Quem somos, visão, propósito, manifesto, valores e tom de voz da T2 Educação.
2. Princípios: As quatro decisões editoriais que orientam toda escolha visual.
3. Marca: Logos oficiais, lockups, variações de cor, área de respiro, tamanho mínimo, usos incorretos e co-branding.
4. Tokens: Como os tokens são organizados, nomeados e distribuídos (JSON DTCG, CSS, Markdown).
5. Cores: Primitivos (26 paletas), tokens semânticos em 3 temas, gradientes, contraste e regras de uso.
6. Tipografia: Geist e JetBrains Mono, tokens de tamanho, altura de linha, peso e tracking, e os 16 text styles.
7. Espaçamento e tamanhos: Escala de espaço (base 4px), alturas de controle e tamanhos de ícone.
8. Raios, bordas e opacidade: Escala de raio, raios por função, largura de borda e opacidade de desabilitado.
9. Elevação e efeitos: Elevação (5 níveis), foco, materiais (glass, frosted, sheen) e blur.
10. Grid e layout: Breakpoints, colunas, gutters, margens, telas de referência, contêineres e modelos de página.
11. Ícones: Só Tabler Icons: regra de uso, tamanhos, cor, import no React, URLs estáticas dos SVGs, índice JSON e zip para download.
12. Como consumir: Tokens em CSS e JSON (DTCG), Tailwind v4 e v3 sobre as variáveis, fontes e leitura por agentes de IA.

---

# Sobre a T2

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Quem somos, no que acreditamos, como falamos. Toda decisão de marca e produto vem daqui — antes de pegar Figma, código ou copy, alinhe-se com esta seção.

## Quem somos

No mercado desde 2016, a T2 capacita pessoas para transformarem suas carreiras. Somos uma plataforma de educação online que ajuda profissionais a conquistarem certificações, crescerem no mercado financeiro e atingirem seus objetivos pessoais e profissionais.

## Visão

Impactar a vida de 10 milhões de alunos até 2034.

## Propósito

Promover à nossa comunidade de alunos, colaboradores e parceiros a liberdade através do conhecimento.

## Manifesto

Na T2, acreditamos no poder transformador do conhecimento. Para nós, ele não é apenas um acúmulo de informações, mas a força que move sonhos, quebra barreiras e liberta o potencial humano.

Acreditamos que cada pessoa, em sua jornada única, merece ter as ferramentas certas para conquistar o mundo — seja uma certificação, um novo emprego ou a realização de um grande sonho.

Nosso compromisso vai além das telas. Estamos aqui para oferecer mais do que cursos: oferecemos confiança, humanização e a certeza de que, por trás da tecnologia, existem pessoas que acreditam no infinito que o conhecimento pode alcançar.

Na T2, o aprendizado não tem limites, e cada passo rumo ao conhecimento é um passo rumo à liberdade.

## Como fazemos

Na T2, transformamos vidas ao unir tecnologia, conhecimento e humanização. Oferecemos conteúdos práticos e atualizados, criados por especialistas, e priorizamos a experiência do aluno em cada etapa. Com uma abordagem acolhedora e suporte próximo, ajudamos pessoas a conquistarem certificações, avançarem na carreira ou realizarem sonhos.

## Posicionamento

A T2 é uma força transformadora na capacitação profissional, preparando indivíduos para conquistar seus sonhos. Não somos apenas uma empresa de educação online — somos um parceiro comprometido com o sucesso pessoal e profissional de cada aluno. Unimos tecnologia, humanização e excelência para criar experiências que inspiram, conectam e empoderam.

## Valores

- **Crescimento responsável**: Unimos progresso, responsabilidade e impacto positivo, inspirando pessoas a alcançar o máximo de seu potencial sem abrir mão do compromisso com o mundo.
- **Honestidade**: Integridade é o que nos guia. Com transparência e verdade, construímos confiança em cada relação, garantindo que nossas ações sempre reflitam nossos valores.
- **Melhoria contínua**: Nunca paramos de aprender. Inovamos e evoluímos constantemente, porque o sucesso não é um destino, mas o resultado de um esforço contínuo por fazer sempre melhor.
- **Humanização**: Valorizamos a conexão humana em tudo o que fazemos. Buscamos ouvir, entender, acolher e motivar cada indivíduo — a educação é uma jornada de pessoas para pessoas.
- **Simplicidade**: A genialidade está na simplicidade. Com foco no essencial, entregamos excelência de forma clara, prática e objetiva, transformando o aprendizado em algo acessível e poderoso.

## Tom de voz

**Tom**
- Profissional e acessível, sem juridiquês ou jargões desnecessários.
- Direto e prático: fala com clareza sobre o que muda na vida do aluno.
- Humano e confiante: incentiva sem prometer resultado mágico.

**Foco**
- Carreira, aprovação, evolução, consistência, confiança.
- Mercado financeiro, certificações, prática, estratégia.
- Comunidade, proximidade, acompanhamento e progresso.

**Evitar**
- Tom agressivo, promessas irreais e comparações depreciativas.
- Excesso de buzzwords em inglês sem necessidade real.
- Mensagens com ambiguidade sobre prazos, resultados e condições.

---

# Princípios

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Quatro decisões editoriais orientam toda escolha visual. Quando dois caminhos competem, o que respeitar mais princípios ganha.

1. **Clareza**: Informação primeiro, decoração depois. Se um elemento não comunica, não existe.
2. **Acolhimento no rigor**: Tom técnico, mas humano. Linguagem direta, sem jargão de banca quando puder ser evitado.
3. **Progresso visível**: Cada elemento aponta para o próximo passo. O aluno nunca pergunta "e agora?".
4. **Aplicação prática**: Exemplo antes de definição. Caso real antes de teoria. Prova antes de revisão.

---

# Marca

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

A marca da T2 é a tradução visual dos princípios. Aplicada com consistência, passa confiança e clareza.

## Anatomia

O lockup principal tem quatro elementos: **símbolo** (bloco quadrado com o "T"; pode aparecer sozinho), **acento ciano** (único ponto de cor do lockup primário; nunca remover nem trocar de tom), **wordmark** ("T2" em bold, não pode ser substituído por outra fonte) e **registro ®** (obrigatório em comunicação externa).

## Lockups

| Lockup | Quando usar | Arquivo |
| --- | --- | --- |
| Compacta | Uso primário: símbolo + T2®. Produto, app, materiais didáticos e qualquer aplicação digital. | `compacta-padrao.png` |
| Horizontal | Símbolo + T2 educação®. Site institucional, capas de apresentações comerciais, cabeçalhos. | `horizontal-padrao.png` |
| Vertical | Símbolo sobre o wordmark. Formatos de largura limitada: carimbos, etiquetas, selos, certificados. | `vertical-padrao.png` |

## Variações de cor

Cada lockup tem tratamentos de cor para o fundo da aplicação: **padrão** (fundos claros; preto + acento ciano), **P&B** (fundos claros, monocromático), **negativa** (fundos escuros) e **stamp** (branco sólido, fundos escuros).

## Elemento gráfico (símbolo)

Só o símbolo, sem wordmark: favicons, avatares, watermarks. Três tratamentos: cor (fundos claros), preto e branco (fundos escuros).

## Arquivos

Todos os PNG são baixáveis em https://design.t2.com.br/brand/<arquivo>.

- `compacta-negativa.png`
- `compacta-padrao.png`
- `compacta-pb.png`
- `compacta-stamp.png`
- `elemento-branco.png`
- `elemento-cor.png`
- `elemento-preto.png`
- `horizontal-negativa.png`
- `horizontal-padrao.png`
- `horizontal-pb.png`
- `horizontal-stamp.png`
- `vertical-negativa.png`
- `vertical-padrao.png`
- `vertical-pb.png`
- `vertical-stamp.png`

## Área de respiro

Mínimo de 1X em todos os lados, onde X é a altura do símbolo. O ideal é 2X em aplicações de destaque. Em interfaces densas, 0,5X é aceitável se o logo continuar legível.

## Tamanho mínimo

- Digital: horizontal 32 px de altura; compacto 24 px. Abaixo disso, use apenas o símbolo.
- Impresso: horizontal 12 mm de altura; compacto 8 mm. Em offset, 300 dpi no mínimo.

## Usos incorretos

- Não esticar: mantenha a proporção.
- Não rotacionar.
- Não recolorir: só as cores autorizadas.
- Sem sombras, glow, gradientes ou efeitos decorativos.
- Contraste insuficiente: use a versão negativa em fundos escuros e saturados.
- Sobre fundo poluído: use uma faixa sólida atrás.

## Co-branding

A T2 vem primeiro na ordem de leitura, separada do parceiro por uma régua vertical de 1px (border/strong) com a altura do símbolo e 2X de espaço entre as marcas. Quando a T2 é apoio, use um rótulo conector ("apoio de", "em parceria com") em mono 11px.

## Aplicações físicas (referência de impressão)

Hex é cor de tela; impressão precisa de CMYK, e em serigrafia ou bordado da cor Pantone mais próxima, confirmada com o fornecedor. CMYK calculado por conversão direta do hex (ponto de partida).

| Cor | Hex | CMYK | Uso |
| --- | --- | --- | --- |
| `brand/primary` | `#00B8DB` | 100 · 16 · 0 · 14 | Cyan 500: destaques de marca, ilustrações e acentos |
| `action/accent/bg` | `#007595` | 100 · 21 · 0 · 42 | Cyan 700: ação de destaque e texto sobre fundo claro |
| `surface/canvas` | `#020617` | 91 · 74 · 0 · 91 | Slate 950: capas, rodapés e fundos escuros institucionais |
| `content/primary` | `#0A0A0A` | 0 · 0 · 0 · 96 | Neutral 950: texto principal |
| `chart/2` | `#00A6F4` | 100 · 32 · 0 · 4 | Sky 500: apoio em gráficos e peças |
| `status/success/fill` | `#008236` | 100 · 0 · 58 · 49 | Green: sucesso e aprovação |
| `status/warning/fill` | `#E17100` | 0 · 50 · 100 · 12 | Amber: atenção |
| `status/danger/fill` | `#E7000B` | 0 · 100 · 95 · 9 | Red: erro e urgência |

Serigrafia: prefira P&B ou stamp quando houver 1 ou 2 tintas; nunca aproxime o ciano com azul comum. Bordado: abaixo de ~40 mm use o símbolo sozinho e no máximo 2 cores de linha.

## Pendências

- O Figma (Foundation / Logos) lista 14 versões: Horizontal (padrão, P&B, negativa, stamp), Compacta (padrão, negativa, stamp), Vertical (padrão, P&B, negativa, stamp) e Símbolo (cor, branco, preto). Este site ainda publica também `compacta-pb.png`, que o Figma não lista.
- As cores de impressão acima são as da marca anterior; reconciliar com o Cyan do sistema.

---

# Tokens

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Toda decisão visual mensurável do sistema vive em `src/tokens.json` neste repositório (fonte única, extraída do Figma). Os demais arquivos são gerados por `npm run build:ai`, que roda automaticamente em `predev` e `prebuild`.

## Camadas

Primitives (paletas) → Theme (tokens semânticos por função) → componentes. Componentes só consomem tokens do Theme.

- **Primitives**: 26 paletas x 11 passos (`--midas-color-<matiz>-<passo>`). Ocultas: só servem de alias.
- **Theme**: 97 tokens semânticos nomeados por função, com valores para Light, Dark e Dark Blue.
- **Componentes**: consomem apenas tokens do Theme.

## Convenção de nomes

Figma `grupo/subgrupo/nome` vira CSS `--midas-grupo-subgrupo-nome` e DTCG `grupo.subgrupo.nome`.

| Tipo | Figma | Variável CSS | DTCG |
| --- | --- | --- | --- |
| Primitivo | `color/cyan/700` | `--midas-color-cyan-700` | `primitive.color.cyan.700` |
| Semântico | `action/accent/bg` | `--midas-action-accent-bg` | `color.action.accent.bg` |
| Espaço | `space/16` | `--midas-space-16` | `space.16` |
| Controle | `size/control/md` | `--midas-size-control-md` | `size.control.md` |
| Raio | `radius/role/control` | `--midas-radius-role-control` | `radius.role.control` |
| Elevação | `elevation/card` | `--midas-elevation-card` | `elevation.card` |
| Foco | `focus/ring` | `--midas-effect-focus-ring` | `focus.ring` |
| Texto | `heading/md` | `--midas-text-heading-md` | `typography.heading.md` |
| Gradiente | `gradient/cyan/linear` | `--midas-gradient-cyan` | `gradient.cyan.base` |
| Grid | `Grid/Desktop` | `--midas-grid-columns (muda por breakpoint)` | `grid.desktop.columns` |

Atenção: `focus/ring` existe como **token de cor** (`--midas-focus-ring`, a borda do campo em foco) e como **effect style** (`--midas-effect-focus-ring`, o halo). Por isso o halo recebe o prefixo `effect`.

## Arquivos gerados

| Arquivo | Conteúdo |
| --- | --- |
| `/tokens.json` | Todos os tokens em W3C Design Tokens (DTCG), com os 3 temas em $extensions.mode |
| `/tokens.css` | Variáveis CSS --midas-* dos 3 temas (:root/light, dark, dark-blue) |
| `/llms.txt` | Índice curto para agentes de IA |
| `/llms-full.txt` | Toda a documentação em um único Markdown |
| `/docs/<secao>.md` | Uma página Markdown por seção do site |

## Estrutura do tokens.json de origem (src/tokens.json)

```text
themes[]                     id, label, selector
primitives.palettes.<matiz>.<passo> = hex
semantic.groups[]            id, description
semantic.tokens[]            token, group, description, modes.{light,dark,dark-blue}.{hex, alias?, alpha?}
contrast.pairs[]             fg, bg, min, light/dark/dark-blue {ok, ratio}
gradients.items[]            token, hue, variant, angle, stops[], css
typography                   families, size, lineHeight, weight, tracking, styles[]
space, size, radius, border, opacity, blur, elevation, focus, materials, grid
```

---

# Cores

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Primitives (paletas) → Theme (tokens semânticos por função) → componentes. Componentes só consomem tokens do Theme. Cyan é a cor principal da marca (brand, accent, seleção, foco e link); Sky fica como apoio em gráficos. Componentes nunca usam primitivos diretamente, e nenhuma cor nova é criada fora destas paletas.

## Regras de uso

1. Primitive → Theme → Componente. Componentes só consomem tokens do Theme. Primitivos ficam ocultos e não são usados em componentes.
2. Nenhuma cor nova. Para resolver contraste, troque o passo da paleta existente no token semântico; nunca crie hex novo nem aplique cor solta no componente.
3. Tema é contexto, não variante. Light, Dark e Dark Blue são modes da collection Theme, aplicados no frame. Não existem componentes /Dark.
4. Texto ≥ 4,5:1 e limites de controle/foco ≥ 3:1 em todos os temas. content/disabled é isento, mas disabled nunca é o único sinal.
5. Status têm pares completos: subtle (fundo), border, content (texto), fill (sólido) e on-fill (texto sobre o sólido). Fill não é cor de texto.
6. Seleção usa a família Cyan (selection/*). Foco usa o halo focus/halo (Cyan translúcido) e, em campos, a borda focus/ring (≥ 3:1). Foco tem prioridade sobre hover. Disabled não tem hover.
7. Overlays (dropdown, popover, combobox, date picker, tooltip, menus) usam overlay/surface + overlay/border + elevation/overlay e sempre aparecem um nível acima da superfície em que abriram.
8. Cyan é a cor da marca: brand/* (destaques, ilustrações) e action/accent/* (ações de destaque). Sky é apoio (gráficos). Informação usa status/info (Blue), separado da marca.

## Temas

| Tema | Seletor CSS | Descrição |
| --- | --- | --- |
| Light (Claro) | `:root, [data-theme="light"]` | Padrão. Canvas slate/50, texto neutral/950. |
| Dark (Escuro) | `[data-theme="dark"], .dark` | Canvas neutral/950 (preto neutro), superfícies em neutral/900 e 800. |
| Dark Blue | `[data-theme="dark-blue"]` | Canvas slate/950 (azul-marinho), superfícies em slate/900 e 800. Conteúdo e ações como no Dark. |

Troque o tema com `data-theme="light" | "dark" | "dark-blue"` em qualquer elemento (normalmente `<html>`). O tema é contexto, não variante de componente.

## Receitas: qual token usar

| Elemento | Fundo e bordas | Texto e ícone | Observação |
| --- | --- | --- | --- |
| Página | `surface/canvas` | `content/primary` | Fundo da aplicação e texto principal. |
| Card / painel | `surface/default + border/subtle + elevation/card` | `content/primary` | Container sobre o canvas. Raio radius/role/container. |
| Texto de apoio | - | `content/secondary` | Descrições, metadados, placeholders. Contraste >= 4,5:1. |
| Link | - | `content/link` | Família Cyan. |
| Botão primário | `action/primary/bg (hover, pressed)` | `action/primary/content` | Ação principal neutra: escuro no Light, claro no Dark. |
| Botão de destaque | `action/accent/bg (hover, pressed)` | `action/accent/content` | Ação de destaque em Cyan. |
| Botão secundário | `action/secondary/bg + action/secondary/border + elevation/control` | `action/secondary/content` | Superfície elevada. Nunca #FFF puro. |
| Botão destrutivo | `action/destructive/bg (hover, pressed)` | `action/destructive/content` | Igual nos três temas. |
| Botão ghost / item de lista | `state/hover, state/pressed` | `content/primary` | Hover e pressed neutros globais. |
| Campo (input, select) | `field/bg (hover: field/bg-hover) + border/default` | `content/primary` | Borda de 1px com contraste >= 3:1. Foco: borda focus/ring + halo focus/halo. |
| Item selecionado | `selection/bg + selection/border` | `selection/content` | Chip, opção, linha, menu ativo. Ênfase: selection/fill + selection/on-fill. |
| Overlay (menu, popover, tooltip) | `overlay/surface + overlay/border + elevation/overlay` | `content/primary` | Sempre um nível acima da superfície de origem. Hover: overlay/hover. |
| Alerta / badge subtle | `status/<tipo>/subtle + status/<tipo>/border` | `status/<tipo>/content` | Tipos: success, warning, danger, info. |
| Badge sólido | `status/<tipo>/fill` | `status/<tipo>/on-fill` | Fill não é cor de texto. |
| Desabilitado | `disabled/bg + disabled/border (ou opacity 50%)` | `content/disabled` | Isento de contraste, nunca o único sinal. Sem hover. |
| Progress / Stepper | `progress/track + progress/fill` | `-` | Degradê: progress/gradient-start para progress/gradient-end. |
| Gráficos | - | `chart/1 a chart/5` | 1 Cyan, 2 Sky, 3 Violet, 4 Emerald, 5 Amber. |

## Tokens semânticos (97)

Cada célula traz o alias (primitivo) e o hex resolvido. Valores com transparência mostram o alpha entre parênteses. A coluna Variável CSS é a do `tokens.css`.

### surface

Superfícies da página e dos containers. Camadas, da mais baixa à mais alta.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `surface/canvas` | `--midas-surface-canvas` | `slate/50` `#F8FAFC` | `neutral/950` `#0A0A0A` | `slate/950` `#020617` | Fundo da página/aplicação. Camada mais baixa. |
| `surface/default` | `--midas-surface-default` | `slate/50` `#F8FAFC` | `neutral/900` `#171717` | `slate/900` `#0F172A` | Superfície padrão de containers (cards, painéis) sobre o canvas. |
| `surface/muted` | `--midas-surface-muted` | `neutral/100` `#F5F5F5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Superfície discreta para áreas secundárias, trilhos, fundos de seção e itens desabilitados não interativos. |

### overlay

Tudo que flutua acima da página (dropdown, popover, tooltip, menu). Sempre um nível acima da superfície de origem.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `overlay/border` | `--midas-overlay-border` | `neutral/300` `#D4D4D4` | `neutral/700` `#404040` | `slate/700` `#334155` | Borda de elementos sobrepostos (overlay/surface). |
| `overlay/hover` | `--midas-overlay-hover` | `neutral/100` `#F5F5F5` | `neutral/700` `#404040` | `slate/700` `#334155` | Hover de itens dentro de overlays (ex.: item de menu). |
| `overlay/surface` | `--midas-overlay-surface` | `neutral/50` `#FAFAFA` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Fundo de tudo que flutua acima da página: dropdown, popover, combobox, date picker, tooltip, menus. Sempre um nível acima de surface. |

### content

Texto e ícones: principal, secundário, desabilitado, inverso e link.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `content/disabled` | `--midas-content-disabled` | `neutral/400` `#A1A1A1` | `neutral/600` `#525252` | `slate/600` `#475569` | Texto e ícones de elementos desabilitados (isento de contraste WCAG, nunca como único sinal). |
| `content/inverse` | `--midas-content-inverse` | `neutral/50` `#FAFAFA` | `neutral/900` `#171717` | `neutral/900` `#171717` | Texto sobre superfícies de cor invertida (ex.: sobre action/primary/bg quando não usar action/primary/content). |
| `content/link` | `--midas-content-link` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Links de texto. Família Cyan. |
| `content/primary` | `--midas-content-primary` | `neutral/950` `#0A0A0A` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto e ícones principais. Uso padrão para conteúdo. |
| `content/secondary` | `--midas-content-secondary` | `neutral/600` `#525252` | `neutral/400` `#A1A1A1` | `slate/400` `#94A3B8` | Texto e ícones de apoio: descrições, metadados, placeholders. Contraste ≥ 4,5:1 em todas as superfícies. |

### border

Bordas: limite de controle (default), ênfase (strong) e divisor decorativo (subtle).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `border/default` | `--midas-border-default` | `neutral/500` `#737373` | `neutral/500` `#737373` | `slate/500` `#64748B` | Limite de controles interativos: inputs, selects, checkbox, radio, switch desligado. Contraste ≥ 3:1 (WCAG 1.4.11). |
| `border/strong` | `--midas-border-strong` | `neutral/600` `#525252` | `neutral/400` `#A1A1A1` | `slate/400` `#94A3B8` | Borda em hover de controles e ênfase. |
| `border/subtle` | `--midas-border-subtle` | `neutral/200` `#E5E5E5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Divisores e contornos decorativos (cards, separadores). Não usar como limite de controle. |

### field

Fundo dos campos de formulário (input, select, textarea, date picker).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `field/bg` | `--midas-field-bg` | `slate/50` `#F8FAFC` | `neutral/950` `#0A0A0A` | `slate/950` `#020617` | Fundo de campos (input, select, textarea, date picker). |
| `field/bg-hover` | `--midas-field-bg-hover` | `neutral/100` `#F5F5F5` | `neutral/900` `#171717` | `slate/900` `#0F172A` | Fundo de campos em hover. |

### action

Ações: primary (neutra), accent (Cyan), secondary (elevada) e destructive, com hover, pressed e degradês.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `action/accent/bg` | `--midas-action-accent-bg` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Fundo da ação de destaque (Cyan). Contraste com action/accent/content ≥ 5:1. |
| `action/accent/bg-hover` | `--midas-action-accent-bg-hover` | `cyan/800` `#005F78` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Hover da ação de destaque. |
| `action/accent/bg-pressed` | `--midas-action-accent-bg-pressed` | `cyan/900` `#104E64` | `cyan/200` `#A2F4FD` | `cyan/200` `#A2F4FD` | Pressed da ação de destaque e fim do degradê accent. |
| `action/accent/content` | `--midas-action-accent-content` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre action/accent/bg. |
| `action/accent/gradient-bottom` | `--midas-action-accent-gradient-bottom` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Base do degradê accent. |
| `action/accent/gradient-top` | `--midas-action-accent-gradient-top` | `cyan/700` `#007595` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Topo do degradê accent (transição curta, mesma cor). |
| `action/destructive/bg` | `--midas-action-destructive-bg` | `red/600` `#E7000B` | `red/600` `#E7000B` | `red/600` `#E7000B` | Fundo de ações destrutivas (excluir, remover). |
| `action/destructive/bg-hover` | `--midas-action-destructive-bg-hover` | `red/700` `#C10007` | `red/700` `#C10007` | `red/700` `#C10007` | Hover de ação destrutiva. |
| `action/destructive/bg-pressed` | `--midas-action-destructive-bg-pressed` | `red/800` `#9F0712` | `red/800` `#9F0712` | `red/800` `#9F0712` | Pressed de ação destrutiva. |
| `action/destructive/content` | `--midas-action-destructive-content` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre action/destructive/bg. |
| `action/primary/bg` | `--midas-action-primary-bg` | `neutral/900` `#171717` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Fundo da ação principal (botão primário). |
| `action/primary/bg-hover` | `--midas-action-primary-bg-hover` | `neutral/800` `#262626` | `neutral/200` `#E5E5E5` | `neutral/200` `#E5E5E5` | Hover da ação principal. |
| `action/primary/bg-pressed` | `--midas-action-primary-bg-pressed` | `neutral/700` `#404040` | `neutral/300` `#D4D4D4` | `neutral/300` `#D4D4D4` | Pressed da ação principal. |
| `action/primary/content` | `--midas-action-primary-content` | `neutral/50` `#FAFAFA` | `neutral/900` `#171717` | `neutral/900` `#171717` | Texto/ícone sobre action/primary/bg. |
| `action/primary/gradient-bottom` | `--midas-action-primary-gradient-bottom` | `neutral/900` `#171717` | `neutral/200` `#E5E5E5` | `neutral/200` `#E5E5E5` | Base do degradê neutro. |
| `action/primary/gradient-top` | `--midas-action-primary-gradient-top` | `neutral/700` `#404040` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Topo do degradê neutro (preto suave no claro, branco no escuro). |
| `action/secondary/bg` | `--midas-action-secondary-bg` | `neutral/50` `#FAFAFA` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Fundo da ação secundária: superfície clara e elevada (com action/secondary/border + elevation/control). Nunca #FFF puro. |
| `action/secondary/bg-hover` | `--midas-action-secondary-bg-hover` | `neutral/100` `#F5F5F5` | `neutral/700` `#404040` | `slate/700` `#334155` | Hover da ação secundária. |
| `action/secondary/bg-pressed` | `--midas-action-secondary-bg-pressed` | `neutral/200` `#E5E5E5` | `neutral/600` `#525252` | `slate/600` `#475569` | Pressed da ação secundária. |
| `action/secondary/border` | `--midas-action-secondary-border` | `neutral/200` `#E5E5E5` | `neutral/700` `#404040` | `slate/700` `#334155` | Borda da ação secundária (botão claro/elevado). |
| `action/secondary/content` | `--midas-action-secondary-content` | `neutral/900` `#171717` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre action/secondary/bg. |

### state

Estados neutros globais de hover e pressed (ghost, itens de lista, tabs, sidebar).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `state/hover` | `--midas-state-hover` | `neutral/100` `#F5F5F5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Hover neutro global: ghost buttons, itens de lista, tabs, sidebar. |
| `state/pressed` | `--midas-state-pressed` | `neutral/200` `#E5E5E5` | `neutral/700` `#404040` | `slate/700` `#334155` | Pressed/active neutro global. |

### selection

Itens selecionados, na família Cyan.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `selection/bg` | `--midas-selection-bg` | `cyan/50` `#ECFEFF` | `cyan/950` `#053345` | `cyan/950` `#053345` | Fundo de itens selecionados (opções, chips, linhas, menu ativo). Família Cyan. |
| `selection/border` | `--midas-selection-border` | `cyan/600` `#0092B8` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Borda de itens selecionados. Contraste ≥ 3:1. |
| `selection/content` | `--midas-selection-content` | `cyan/700` `#007595` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Texto/ícone de itens selecionados sobre selection/bg. |
| `selection/fill` | `--midas-selection-fill` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Preenchimento sólido de seleção (dia selecionado, chip selecionado com ênfase). |
| `selection/on-fill` | `--midas-selection-on-fill` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre selection/fill. |

### focus

Foco: anel Cyan e halos translúcidos.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `focus/halo` | `--midas-focus-halo` | `#06B6D447` | `#22D3EE4D` | `#22D3EE4D` | Halo de foco suave (3px, Cyan translúcido) usado pelo effect style focus/ring. |
| `focus/ring` | `--midas-focus-ring` | `cyan/600` `#0092B8` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Cor de foco (Cyan): borda de campos em foco e indicador. Contraste ≥ 3:1 nos 3 temas. |
| `focus/halo-neutral` | `--midas-focus-halo-neutral` | `#0A0A0A17` | `#F8FAFC38` | `#F8FAFC38` | Halo de foco neutro (4px): preto no Light, branco no Dark. Cor medida no effect style focus/ring-neutral. (Valor lido do effect style do Figma, não de uma variável.) |
| `focus/halo-danger` | `--midas-focus-halo-danger` | `#E7000B29` | `#E7000B29` | `#E7000B29` | Halo de foco de erro (4px). Cor medida no effect style focus/ring-danger. (Valor lido do effect style do Figma, não de uma variável.) |

### disabled

Controles desabilitados.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `disabled/bg` | `--midas-disabled-bg` | `neutral/100` `#F5F5F5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Fundo de controles desabilitados. |
| `disabled/border` | `--midas-disabled-border` | `neutral/200` `#E5E5E5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Borda de controles desabilitados. |

### status

Feedback: success, warning, danger e info. Cada status tem subtle, border, content, fill e on-fill.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `status/danger/border` | `--midas-status-danger-border` | `red/200` `#FFC9C9` | `red/800` `#9F0712` | `red/800` `#9F0712` | Borda de containers de erro/perigo. |
| `status/danger/content` | `--midas-status-danger-content` | `red/700` `#C10007` | `red/400` `#FF6467` | `red/400` `#FF6467` | Texto/ícone de erro/perigo sobre surfaces e sobre status/danger/subtle (≥ 4,5:1). |
| `status/danger/fill` | `--midas-status-danger-fill` | `red/600` `#E7000B` | `red/600` `#E7000B` | `red/600` `#E7000B` | Preenchimento sólido de erro/perigo (badge solid, indicador). Não é cor de texto. |
| `status/danger/on-fill` | `--midas-status-danger-on-fill` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre status/danger/fill. |
| `status/danger/subtle` | `--midas-status-danger-subtle` | `red/50` `#FEF2F2` | `red/950` `#460809` | `red/950` `#460809` | Fundo suave de mensagens de erro/perigo (alerts, badges subtle). |
| `status/info/border` | `--midas-status-info-border` | `blue/200` `#BEDBFF` | `blue/800` `#193CB8` | `blue/800` `#193CB8` | Borda de containers de informação. |
| `status/info/content` | `--midas-status-info-content` | `blue/700` `#1447E6` | `blue/400` `#51A2FF` | `blue/400` `#51A2FF` | Texto/ícone de informação sobre surfaces e sobre status/info/subtle (≥ 4,5:1). |
| `status/info/fill` | `--midas-status-info-fill` | `blue/600` `#155DFC` | `blue/400` `#51A2FF` | `blue/400` `#51A2FF` | Preenchimento sólido de informação (badge solid, indicador). Não é cor de texto. |
| `status/info/on-fill` | `--midas-status-info-on-fill` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre status/info/fill. |
| `status/info/subtle` | `--midas-status-info-subtle` | `blue/50` `#EFF6FF` | `blue/950` `#162456` | `blue/950` `#162456` | Fundo suave de mensagens de informação (alerts, badges subtle). |
| `status/success/border` | `--midas-status-success-border` | `green/200` `#B9F8CF` | `green/800` `#016630` | `green/800` `#016630` | Borda de containers de sucesso. |
| `status/success/content` | `--midas-status-success-content` | `green/700` `#008236` | `green/400` `#05DF72` | `green/400` `#05DF72` | Texto/ícone de sucesso sobre surfaces e sobre status/success/subtle (≥ 4,5:1). |
| `status/success/fill` | `--midas-status-success-fill` | `green/700` `#008236` | `green/400` `#05DF72` | `green/400` `#05DF72` | Preenchimento sólido de sucesso (badge solid, indicador). Não é cor de texto. |
| `status/success/on-fill` | `--midas-status-success-on-fill` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre status/success/fill. |
| `status/success/subtle` | `--midas-status-success-subtle` | `green/50` `#F0FDF4` | `green/950` `#032E15` | `green/950` `#032E15` | Fundo suave de mensagens de sucesso (alerts, badges subtle). |
| `status/warning/border` | `--midas-status-warning-border` | `amber/200` `#FEE685` | `amber/800` `#973C00` | `amber/800` `#973C00` | Borda de containers de atenção. |
| `status/warning/content` | `--midas-status-warning-content` | `amber/700` `#BB4D00` | `amber/400` `#FFB900` | `amber/400` `#FFB900` | Texto/ícone de atenção sobre surfaces e sobre status/warning/subtle (≥ 4,5:1). |
| `status/warning/fill` | `--midas-status-warning-fill` | `amber/600` `#E17100` | `amber/400` `#FFB900` | `amber/400` `#FFB900` | Preenchimento sólido de atenção (badge solid, indicador). Não é cor de texto. |
| `status/warning/on-fill` | `--midas-status-warning-on-fill` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre status/warning/fill. |
| `status/warning/subtle` | `--midas-status-warning-subtle` | `amber/50` `#FFFBEB` | `amber/950` `#461901` | `amber/950` `#461901` | Fundo suave de mensagens de atenção (alerts, badges subtle). |

### material

Superfícies translúcidas para uso sobre mídia: glass, scrim, tint, on-media, sheen.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `material/glass/bg` | `--midas-material-glass-bg` | `#FAFAFA59` | `#FAFAFA14` | `#F8FAFC14` | Vidro translúcido (neutral/slate 50 com transparência). Usar com material/glass, glass-strong ou liquid. Só sobre imagem, mídia ou gradiente. |
| `material/glass/border` | `--midas-material-glass-border` | `#FAFAFAE5` | `#FAFAFA47` | `#F8FAFC47` | Brilho/borda do vidro (highlight). |
| `material/on-media/bg` | `--midas-material-on-media-bg` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Botão sólido claro sobre mídia (ex.: CTA sobre foto). Fixo nos 3 temas. |
| `material/on-media/bg-content` | `--midas-material-on-media-bg-content` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre material/on-media/bg. |
| `material/on-media/content` | `--midas-material-on-media-content` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre material/scrim e mídia escura. Fixo nos 3 temas. |
| `material/scrim/bg` | `--midas-material-scrim-bg` | `#0A0A0A73` | `#0A0A0A73` | `#02061773` | Superfície escura translúcida sobre mídia (frosted). Igual nos 3 temas porque depende da imagem, não do tema. |
| `material/scrim/border` | `--midas-material-scrim-border` | `#FAFAFA29` | `#FAFAFA29` | `#F8FAFC29` | Borda sutil de superfícies frosted. |
| `material/sheen` | `--midas-material-sheen` | `#FAFAFA2E` | `#FAFAFA59` | `#FAFAFA59` | Brilho de 1px no topo de botões sólidos/degradê (acabamento flat). |
| `material/tint/bg` | `--midas-material-tint-bg` | `#00B8DB47` | `#00D3F238` | `#00D3F238` | Frosted colorido (Cyan translúcido) sobre mídia. Usar com material/frosted. |
| `material/tint/border` | `--midas-material-tint-border` | `#A2F4FD73` | `#53EAFD59` | `#53EAFD59` | Borda/brilho do frosted colorido. |
| `material/glass/surface` | `--midas-material-glass-surface` | `neutral/50` `#FAFAFACC` (80%) | `neutral/950` `#0A0A0AD6` (84%) | `slate/950` `#020617D6` (84%) | Vidro com texto (Card Glass). Contraste de texto ≥ 4,5:1 sobre qualquer imagem. |
| `material/scrim/strong` | `--midas-material-scrim-strong` | `neutral/950` `#0A0A0AB8` (72%) | `neutral/950` `#0A0A0AB8` (72%) | `slate/950` `#020617B8` (72%) | Scrim sob texto em mídia (Card Overlay, tags). |

### brand

Cor de marca (Cyan) para destaques, ilustrações e acentos. Ações usam action/accent.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `brand/content` | `--midas-brand-content` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Texto/ícone na cor de marca (Cyan) sobre superfícies neutras (≥ 4,5:1). |
| `brand/on-primary` | `--midas-brand-on-primary` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre brand/primary. |
| `brand/primary` | `--midas-brand-primary` | `cyan/500` `#00B8DB` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Cor de marca principal (Cyan) para destaques de marca, ilustrações e acentos. Ações usam action/accent. |

### chart

Séries de gráficos (5 cores).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `chart/1` | `--midas-chart-1` | `cyan/500` `#00B8DB` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Série 1 de gráficos (Cyan, cor de marca). |
| `chart/2` | `--midas-chart-2` | `sky/500` `#00A6F4` | `sky/400` `#00BCFF` | `sky/400` `#00BCFF` | Série 2 de gráficos (Sky, apoio). |
| `chart/3` | `--midas-chart-3` | `violet/500` `#8E51FF` | `violet/400` `#A684FF` | `violet/400` `#A684FF` | Série 3 de gráficos. |
| `chart/4` | `--midas-chart-4` | `emerald/500` `#00BC7D` | `emerald/400` `#00D492` | `emerald/400` `#00D492` | Série 4 de gráficos. |
| `chart/5` | `--midas-chart-5` | `amber/500` `#FE9A00` | `amber/400` `#FFB900` | `amber/400` `#FFB900` | Série 5 de gráficos. |

### progress

Barras de progresso e Stepper.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `progress/track` | `--midas-progress-track` | `neutral/200` `#E5E5E5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Trilho do Progress e do Stepper. |
| `progress/fill` | `--midas-progress-fill` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Preenchimento do progresso (≥ 3:1 contra o trilho). |
| `progress/gradient-start` | `--midas-progress-gradient-start` | `cyan/400` `#00D3F2` | `cyan/700` `#007595` | `cyan/700` `#007595` | Início do degradê do Progress (Gradient, Glow). (O Figma lista dois valores (Light e Dark); Dark Blue segue o Dark.) |
| `progress/gradient-end` | `--midas-progress-gradient-end` | `cyan/700` `#007595` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Fim do degradê do Progress (Gradient, Glow). (O Figma lista dois valores (Light e Dark); Dark Blue segue o Dark.) |
| `progress/glow` | `--midas-progress-glow` | `cyan/500` `#00B8DB73` (45%) | `cyan/400` `#00D3F299` (60%) | `cyan/400` `#00D3F299` (60%) | Brilho do Glow e da etapa atual do Stepper. (O Figma lista dois valores (Light e Dark); Dark Blue segue o Dark.) |
| `progress/shine` | `--midas-progress-shine` | `neutral/50` `#FAFAFA8C` (55%) | `neutral/50` `#FAFAFA99` (60%) | `neutral/50` `#FAFAFA99` (60%) | Faixa do Shimmer. (O Figma indica 55–60%; Light 55%, Dark e Dark Blue 60%.) |
| `progress/tip` | `--midas-progress-tip` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Ponta luminosa do Glow. |

## Primitivos (26 paletas x 11 passos)

Variáveis `--midas-color-<matiz>-<passo>`. Matizes usados nos temas: neutral, slate, cyan, sky, blue, red, amber, green, emerald, violet.

### Neutros

Nove famílias neutras. Neutral e Slate são as usadas nos temas.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `slate` | `#F8FAFC` | `#F1F5F9` | `#E2E8F0` | `#CBD5E1` | `#94A3B8` | `#64748B` | `#475569` | `#334155` | `#1E293B` | `#0F172A` | `#020617` |
| `gray` | `#F9FAFB` | `#F3F4F6` | `#E5E7EB` | `#D1D5DB` | `#9CA3AF` | `#6B7280` | `#4B5563` | `#374151` | `#111827` | `#030712` | `#030712` |
| `zinc` | `#FAFAFA` | `#F4F4F5` | `#E4E4E7` | `#D4D4D8` | `#A1A1AA` | `#71717A` | `#52525B` | `#3F3F46` | `#27272A` | `#18181B` | `#09090B` |
| `neutral` | `#FAFAFA` | `#F5F5F5` | `#E5E5E5` | `#D4D4D4` | `#A1A1A1` | `#737373` | `#525252` | `#404040` | `#262626` | `#171717` | `#0A0A0A` |
| `stone` | `#FAFAF9` | `#F5F5F4` | `#E7E5E4` | `#D6D3D1` | `#A6A09B` | `#79716B` | `#57534D` | `#44403B` | `#292524` | `#1C1917` | `#0C0A09` |
| `taupe` | `#FBFAF9` | `#F3F1F1` | `#E8E4E3` | `#D8D2D0` | `#ABA09C` | `#7C6D67` | `#5B4F4B` | `#473C39` | `#2B2422` | `#1D1816` | `#0C0A09` |
| `mauve` | `#FAFAFA` | `#F3F1F3` | `#E7E4E7` | `#D7D0D7` | `#A89EA9` | `#79697B` | `#594C5B` | `#463947` | `#2A212C` | `#1D161E` | `#0C090C` |
| `mist` | `#F9FBFB` | `#F1F3F3` | `#E3E7E8` | `#D0D6D8` | `#9CA8AB` | `#67787C` | `#4B585B` | `#394447` | `#22292B` | `#161B1D` | `#090B0C` |
| `olive` | `#FBFBF9` | `#F4F4F0` | `#E8E8E3` | `#D8D8D0` | `#ABAB9C` | `#7C7C67` | `#5B5B4B` | `#474739` | `#2B2B22` | `#1D1D16` | `#0C0C09` |

### Frios

Cyan é a marca. Sky apoia os gráficos. Blue é informação.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `cyan` | `#ECFEFF` | `#CEFAFE` | `#A2F4FD` | `#53EAFD` | `#00D3F2` | `#00B8DB` | `#0092B8` | `#007595` | `#005F78` | `#104E64` | `#053345` |
| `sky` | `#F0F9FF` | `#DFF2FE` | `#B8E6FE` | `#74D4FF` | `#00BCFF` | `#00A6F4` | `#0084D1` | `#0069A8` | `#00598A` | `#024A70` | `#052F4A` |
| `blue` | `#EFF6FF` | `#DBEAFE` | `#BEDBFF` | `#8EC5FF` | `#51A2FF` | `#2B7FFF` | `#155DFC` | `#1447E6` | `#193CB8` | `#1C398E` | `#162456` |
| `indigo` | `#EEF2FF` | `#E0E7FF` | `#C6D2FF` | `#A3B3FF` | `#7C86FF` | `#615FFF` | `#4F39F6` | `#432DD7` | `#372AAC` | `#312C85` | `#1E1A4D` |
| `violet` | `#F5F3FF` | `#EDE9FE` | `#DDD6FF` | `#C4B4FF` | `#A684FF` | `#8E51FF` | `#7F22FE` | `#7008E7` | `#5D0EC0` | `#4D179A` | `#2F0D68` |

### Quentes

Red é perigo; Amber é atenção.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `red` | `#FEF2F2` | `#FFE2E2` | `#FFC9C9` | `#FFA2A2` | `#FF6467` | `#FB2C36` | `#E7000B` | `#C10007` | `#9F0712` | `#82181A` | `#460809` |
| `orange` | `#FFF7ED` | `#FFEDD4` | `#FFD6A7` | `#FFB86A` | `#FF8904` | `#FF6900` | `#F54900` | `#CA3500` | `#9F2D00` | `#7E2A0C` | `#441306` |
| `amber` | `#FFFBEB` | `#FEF3C6` | `#FEE685` | `#FFD230` | `#FFB900` | `#FE9A00` | `#E17100` | `#BB4D00` | `#973C00` | `#7B3306` | `#461901` |
| `yellow` | `#FEFCE8` | `#FEF9C2` | `#FFF085` | `#FFDF20` | `#FDC700` | `#F0B100` | `#D08700` | `#A65F00` | `#894B00` | `#733E0A` | `#432004` |

### Verdes

Green é sucesso.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `lime` | `#F7FEE7` | `#ECFCCA` | `#D8F999` | `#BBF451` | `#9AE600` | `#7CCF00` | `#5EA500` | `#497D00` | `#3C6300` | `#35530E` | `#192E03` |
| `green` | `#F0FDF4` | `#DCFCE7` | `#B9F8CF` | `#7BF1A8` | `#05DF72` | `#00C950` | `#00A63E` | `#008236` | `#016630` | `#0D542B` | `#032E15` |
| `emerald` | `#ECFDF5` | `#D0FAE5` | `#A4F4CF` | `#5EE9B5` | `#00D492` | `#00BC7D` | `#009966` | `#007A55` | `#006045` | `#004F3B` | `#002C22` |
| `teal` | `#F0FDFA` | `#CBFBF1` | `#96F7E4` | `#46ECD5` | `#00D5BE` | `#00BBA7` | `#009689` | `#00786F` | `#005F5A` | `#0B4F4A` | `#022F2E` |

### Acentos

Complementam o catálogo de 26 famílias.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `purple` | `#FAF5FF` | `#F3E8FF` | `#E9D4FF` | `#DAB2FF` | `#C27AFF` | `#AD46FF` | `#9810FA` | `#8200DB` | `#6E11B0` | `#59168B` | `#3C0366` |
| `fuchsia` | `#FDF4FF` | `#FAE8FF` | `#F6CFFF` | `#F4A8FF` | `#ED6AFF` | `#E12AFB` | `#C800DE` | `#A800B7` | `#8A0194` | `#721378` | `#4B004F` |
| `pink` | `#FDF2F8` | `#FCE7F3` | `#FCCEE8` | `#FDA5D5` | `#FB64B6` | `#F6339A` | `#E60076` | `#C6005C` | `#A3004C` | `#861043` | `#510424` |
| `rose` | `#FFF1F2` | `#FFE4E6` | `#FFCCD3` | `#FFA1AD` | `#FF637E` | `#FF2056` | `#EC003F` | `#C70036` | `#A50036` | `#8B0836` | `#4D0218` |

## Gradientes (26 famílias, 47 estilos)

No Figma, edite o fill e os stops. No código, use background-image com os HEX e posições documentados. Verifique o contraste em toda a transição antes de sobrepor texto; gradientes não substituem os tokens semânticos de cores sólidas. Cada família tem o estilo base (passos 50 a 400) e, em várias, as variantes mid e deep (passos mais escuros). Todos lineares a 90° (horizontal).

| Token Figma | Variável CSS | Stops | CSS |
| --- | --- | --- | --- |
| `gradient/slate/linear` | `--midas-gradient-slate` | slate/50 #F8FAFC → slate/400 #94A3B8 | `linear-gradient(90deg, #F8FAFC 0%, #94A3B8 100%)` |
| `gradient/gray/linear` | `--midas-gradient-gray` | gray/50 #F9FAFB → gray/400 #9CA3AF | `linear-gradient(90deg, #F9FAFB 0%, #9CA3AF 100%)` |
| `gradient/zinc/linear` | `--midas-gradient-zinc` | zinc/50 #FAFAFA → zinc/400 #A1A1AA | `linear-gradient(90deg, #FAFAFA 0%, #A1A1AA 100%)` |
| `gradient/neutral/linear` | `--midas-gradient-neutral` | neutral/50 #FAFAFA → neutral/400 #A1A1A1 | `linear-gradient(90deg, #FAFAFA 0%, #A1A1A1 100%)` |
| `gradient/stone/linear` | `--midas-gradient-stone` | stone/50 #FAFAF9 → stone/400 #A6A09B | `linear-gradient(90deg, #FAFAF9 0%, #A6A09B 100%)` |
| `gradient/taupe/linear` | `--midas-gradient-taupe` | taupe/50 #FBFAF9 → taupe/400 #ABA09C | `linear-gradient(90deg, #FBFAF9 0%, #ABA09C 100%)` |
| `gradient/mauve/linear` | `--midas-gradient-mauve` | mauve/50 #FAFAFA → mauve/400 #A89EA9 | `linear-gradient(90deg, #FAFAFA 0%, #A89EA9 100%)` |
| `gradient/mist/linear` | `--midas-gradient-mist` | mist/50 #F9FBFB → mist/400 #9CA8AB | `linear-gradient(90deg, #F9FBFB 0%, #9CA8AB 100%)` |
| `gradient/olive/linear` | `--midas-gradient-olive` | olive/50 #FBFBF9 → olive/400 #ABAB9C | `linear-gradient(90deg, #FBFBF9 0%, #ABAB9C 100%)` |
| `gradient/slate/linear-mid` | `--midas-gradient-slate-mid` | slate/100 #F1F5F9 → slate/500 #64748B | `linear-gradient(90deg, #F1F5F9 0%, #64748B 100%)` |
| `gradient/slate/linear-deep` | `--midas-gradient-slate-deep` | slate/200 #E2E8F0 → slate/700 #334155 | `linear-gradient(90deg, #E2E8F0 0%, #334155 100%)` |
| `gradient/gray/linear-mid` | `--midas-gradient-gray-mid` | gray/100 #F3F4F6 → gray/500 #6B7280 | `linear-gradient(90deg, #F3F4F6 0%, #6B7280 100%)` |
| `gradient/stone/linear-mid` | `--midas-gradient-stone-mid` | stone/200 #E7E5E4 → stone/600 #57534D | `linear-gradient(90deg, #E7E5E4 0%, #57534D 100%)` |
| `gradient/zinc/linear-deep` | `--midas-gradient-zinc-deep` | zinc/300 #D4D4D8 → zinc/700 #3F3F46 | `linear-gradient(90deg, #D4D4D8 0%, #3F3F46 100%)` |
| `gradient/cyan/linear` | `--midas-gradient-cyan` | cyan/50 #ECFEFF → cyan/400 #00D3F2 | `linear-gradient(90deg, #ECFEFF 0%, #00D3F2 100%)` |
| `gradient/sky/linear` | `--midas-gradient-sky` | sky/50 #F0F9FF → sky/400 #00BCFF | `linear-gradient(90deg, #F0F9FF 0%, #00BCFF 100%)` |
| `gradient/blue/linear` | `--midas-gradient-blue` | blue/50 #EFF6FF → blue/400 #51A2FF | `linear-gradient(90deg, #EFF6FF 0%, #51A2FF 100%)` |
| `gradient/indigo/linear` | `--midas-gradient-indigo` | indigo/50 #EEF2FF → indigo/400 #7C86FF | `linear-gradient(90deg, #EEF2FF 0%, #7C86FF 100%)` |
| `gradient/violet/linear` | `--midas-gradient-violet` | violet/50 #F5F3FF → violet/400 #A684FF | `linear-gradient(90deg, #F5F3FF 0%, #A684FF 100%)` |
| `gradient/cyan/linear-mid` | `--midas-gradient-cyan-mid` | cyan/200 #A2F4FD → cyan/600 #0092B8 | `linear-gradient(90deg, #A2F4FD 0%, #0092B8 100%)` |
| `gradient/sky/linear-mid` | `--midas-gradient-sky-mid` | sky/100 #DFF2FE → sky/500 #00A6F4 | `linear-gradient(90deg, #DFF2FE 0%, #00A6F4 100%)` |
| `gradient/blue/linear-deep` | `--midas-gradient-blue-deep` | blue/200 #BEDBFF → blue/700 #1447E6 | `linear-gradient(90deg, #BEDBFF 0%, #1447E6 100%)` |
| `gradient/indigo/linear-mid` | `--midas-gradient-indigo-mid` | indigo/100 #E0E7FF → indigo/500 #615FFF | `linear-gradient(90deg, #E0E7FF 0%, #615FFF 100%)` |
| `gradient/violet/linear-deep` | `--midas-gradient-violet-deep` | violet/200 #DDD6FF → violet/600 #7F22FE | `linear-gradient(90deg, #DDD6FF 0%, #7F22FE 100%)` |
| `gradient/red/linear` | `--midas-gradient-red` | red/50 #FEF2F2 → red/400 #FF6467 | `linear-gradient(90deg, #FEF2F2 0%, #FF6467 100%)` |
| `gradient/orange/linear` | `--midas-gradient-orange` | orange/50 #FFF7ED → orange/400 #FF8904 | `linear-gradient(90deg, #FFF7ED 0%, #FF8904 100%)` |
| `gradient/amber/linear` | `--midas-gradient-amber` | amber/50 #FFFBEB → amber/400 #FFB900 | `linear-gradient(90deg, #FFFBEB 0%, #FFB900 100%)` |
| `gradient/yellow/linear` | `--midas-gradient-yellow` | yellow/50 #FEFCE8 → yellow/400 #FDC700 | `linear-gradient(90deg, #FEFCE8 0%, #FDC700 100%)` |
| `gradient/lime/linear` | `--midas-gradient-lime` | lime/50 #F7FEE7 → lime/400 #9AE600 | `linear-gradient(90deg, #F7FEE7 0%, #9AE600 100%)` |
| `gradient/green/linear` | `--midas-gradient-green` | green/50 #F0FDF4 → green/400 #05DF72 | `linear-gradient(90deg, #F0FDF4 0%, #05DF72 100%)` |
| `gradient/emerald/linear` | `--midas-gradient-emerald` | emerald/50 #ECFDF5 → emerald/400 #00D492 | `linear-gradient(90deg, #ECFDF5 0%, #00D492 100%)` |
| `gradient/teal/linear` | `--midas-gradient-teal` | teal/50 #F0FDFA → teal/400 #00D5BE | `linear-gradient(90deg, #F0FDFA 0%, #00D5BE 100%)` |
| `gradient/red/linear-mid` | `--midas-gradient-red-mid` | red/100 #FFE2E2 → red/500 #FB2C36 | `linear-gradient(90deg, #FFE2E2 0%, #FB2C36 100%)` |
| `gradient/orange/linear-deep` | `--midas-gradient-orange-deep` | orange/200 #FFD6A7 → orange/600 #F54900 | `linear-gradient(90deg, #FFD6A7 0%, #F54900 100%)` |
| `gradient/amber/linear-mid` | `--midas-gradient-amber-mid` | amber/100 #FEF3C6 → amber/500 #FE9A00 | `linear-gradient(90deg, #FEF3C6 0%, #FE9A00 100%)` |
| `gradient/yellow/linear-deep` | `--midas-gradient-yellow-deep` | yellow/200 #FFF085 → yellow/600 #D08700 | `linear-gradient(90deg, #FFF085 0%, #D08700 100%)` |
| `gradient/green/linear-mid` | `--midas-gradient-green-mid` | green/100 #DCFCE7 → green/500 #00C950 | `linear-gradient(90deg, #DCFCE7 0%, #00C950 100%)` |
| `gradient/emerald/linear-deep` | `--midas-gradient-emerald-deep` | emerald/200 #A4F4CF → emerald/600 #009966 | `linear-gradient(90deg, #A4F4CF 0%, #009966 100%)` |
| `gradient/teal/linear-mid` | `--midas-gradient-teal-mid` | teal/100 #CBFBF1 → teal/500 #00BBA7 | `linear-gradient(90deg, #CBFBF1 0%, #00BBA7 100%)` |
| `gradient/purple/linear` | `--midas-gradient-purple` | purple/50 #FAF5FF → purple/400 #C27AFF | `linear-gradient(90deg, #FAF5FF 0%, #C27AFF 100%)` |
| `gradient/fuchsia/linear` | `--midas-gradient-fuchsia` | fuchsia/50 #FDF4FF → fuchsia/400 #ED6AFF | `linear-gradient(90deg, #FDF4FF 0%, #ED6AFF 100%)` |
| `gradient/pink/linear` | `--midas-gradient-pink` | pink/50 #FDF2F8 → pink/400 #FB64B6 | `linear-gradient(90deg, #FDF2F8 0%, #FB64B6 100%)` |
| `gradient/rose/linear` | `--midas-gradient-rose` | rose/50 #FFF1F2 → rose/400 #FF637E | `linear-gradient(90deg, #FFF1F2 0%, #FF637E 100%)` |
| `gradient/purple/linear-mid` | `--midas-gradient-purple-mid` | purple/100 #F3E8FF → purple/500 #AD46FF | `linear-gradient(90deg, #F3E8FF 0%, #AD46FF 100%)` |
| `gradient/fuchsia/linear-deep` | `--midas-gradient-fuchsia-deep` | fuchsia/200 #F6CFFF → fuchsia/600 #C800DE | `linear-gradient(90deg, #F6CFFF 0%, #C800DE 100%)` |
| `gradient/pink/linear-mid` | `--midas-gradient-pink-mid` | pink/100 #FCE7F3 → pink/500 #F6339A | `linear-gradient(90deg, #FCE7F3 0%, #F6339A 100%)` |
| `gradient/rose/linear-deep` | `--midas-gradient-rose-deep` | rose/200 #FFCCD3 → rose/600 #EC003F | `linear-gradient(90deg, #FFCCD3 0%, #EC003F 100%)` |

### Direções

| Direção | CSS |
| --- | --- |
| Horizontal | `linear-gradient(90deg, #00D3F2 0%, #51A2FF 100%)` |
| Vertical | `linear-gradient(180deg, #F0F9FF 0%, #00BCFF 100%)` |
| Diagonal | `linear-gradient(135deg, #7C86FF 0%, #FF637E 100%)` |
| Radial | `radial-gradient(circle at 50% 50%, #F5F3FF 0%, #A684FF 100%)` |

No CSS, 90° aponta à direita, 180° para baixo e 135° na diagonal.

## Contraste (WCAG 2.2)

Mínimo de 4,5:1 para texto e 3:1 para limites de controle, foco e indicadores. 62 pares x 3 temas. No topo do degradê accent do Light (cyan/600) o texto fica em 3,47:1: por isso o degradê é curto e o texto se apoia na base cyan/700 (5,06:1). Para textos longos use o Accent sólido.

| Primeiro plano | Fundo | Mínimo | Light | Dark | Dark Blue |
| --- | --- | --- | --- | --- | --- |
| `content/primary` | `surface/canvas` | 4.5:1 | ok 18.92 | ok 18.97 | ok 19.33 |
| `content/primary` | `surface/default` | 4.5:1 | ok 18.92 | ok 17.18 | ok 17.10 |
| `content/primary` | `overlay/surface` | 4.5:1 | ok 18.97 | ok 14.50 | ok 14.02 |
| `content/primary` | `surface/muted` | 4.5:1 | ok 18.16 | ok 14.50 | ok 14.02 |
| `content/secondary` | `surface/canvas` | 4.5:1 | ok 7.47 | ok 7.66 | ok 7.87 |
| `content/secondary` | `surface/default` | 4.5:1 | ok 7.47 | ok 6.94 | ok 6.96 |
| `content/secondary` | `surface/muted` | 4.5:1 | ok 7.17 | ok 5.86 | ok 5.71 |
| `content/secondary` | `overlay/surface` | 4.5:1 | ok 7.49 | ok 5.86 | ok 5.71 |
| `content/link` | `surface/canvas` | 4.5:1 | ok 5.04 | ok 10.94 | ok 11.14 |
| `content/link` | `surface/default` | 4.5:1 | ok 5.04 | ok 9.90 | ok 9.86 |
| `border/default` | `surface/canvas` | 3:1 | ok 4.53 | ok 4.18 | ok 4.24 |
| `border/default` | `surface/default` | 3:1 | ok 4.53 | ok 3.78 | ok 3.75 |
| `border/default` | `field/bg-hover` | 3:1 | ok 4.35 | ok 3.78 | ok 3.75 |
| `border/strong` | `field/bg-hover` | 3:1 | ok 7.17 | ok 6.94 | ok 6.96 |
| `focus/ring` | `surface/canvas` | 3:1 | ok 3.46 | ok 10.94 | ok 11.14 |
| `focus/ring` | `surface/default` | 3:1 | ok 3.46 | ok 9.90 | ok 9.86 |
| `focus/ring` | `overlay/surface` | 3:1 | ok 3.47 | ok 8.36 | ok 8.08 |
| `action/primary/content` | `action/primary/bg` | 4.5:1 | ok 17.18 | ok 17.18 | ok 17.18 |
| `action/primary/content` | `action/primary/bg-hover` | 4.5:1 | ok 14.50 | ok 14.23 | ok 14.23 |
| `action/primary/content` | `action/primary/bg-pressed` | 4.5:1 | ok 9.93 | ok 12.09 | ok 12.09 |
| `action/accent/content` | `action/accent/bg` | 4.5:1 | ok 5.06 | ok 10.94 | ok 10.94 |
| `action/accent/content` | `action/accent/bg-hover` | 4.5:1 | ok 6.92 | ok 13.72 | ok 13.72 |
| `action/accent/content` | `action/accent/bg-pressed` | 4.5:1 | ok 8.76 | ok 15.93 | ok 15.93 |
| `action/secondary/content` | `action/secondary/bg` | 4.5:1 | ok 17.18 | ok 14.50 | ok 14.02 |
| `action/secondary/content` | `action/secondary/bg-pressed` | 4.5:1 | ok 14.23 | ok 7.49 | ok 7.26 |
| `action/destructive/content` | `action/destructive/bg` | 4.5:1 | ok 4.57 | ok 4.57 | ok 4.57 |
| `action/destructive/content` | `action/destructive/bg-pressed` | 4.5:1 | ok 8.01 | ok 8.01 | ok 8.01 |
| `content/primary` | `state/hover` | 4.5:1 | ok 18.16 | ok 14.50 | ok 14.02 |
| `content/primary` | `state/pressed` | 4.5:1 | ok 15.72 | ok 9.93 | ok 9.92 |
| `content/primary` | `overlay/hover` | 4.5:1 | ok 18.16 | ok 9.93 | ok 9.92 |
| `selection/content` | `selection/bg` | 4.5:1 | ok 5.07 | ok 9.30 | ok 9.30 |
| `selection/border` | `surface/canvas` | 3:1 | ok 3.46 | ok 10.94 | ok 11.14 |
| `selection/on-fill` | `selection/fill` | 4.5:1 | ok 5.06 | ok 10.94 | ok 10.94 |
| `status/success/content` | `status/success/subtle` | 4.5:1 | ok 4.72 | ok 8.40 | ok 8.40 |
| `status/success/content` | `surface/canvas` | 4.5:1 | ok 4.73 | ok 11.13 | ok 11.34 |
| `status/success/on-fill` | `status/success/fill` | 4.5:1 | ok 4.74 | ok 11.13 | ok 11.13 |
| `status/warning/content` | `status/warning/subtle` | 4.5:1 | ok 4.85 | ok 8.71 | ok 8.71 |
| `status/warning/content` | `surface/canvas` | 4.5:1 | ok 4.81 | ok 11.49 | ok 11.71 |
| `status/warning/on-fill` | `status/warning/fill` | 4.5:1 | ok 6.19 | ok 11.49 | ok 11.49 |
| `status/info/content` | `status/info/subtle` | 4.5:1 | ok 6.28 | ok 5.60 | ok 5.60 |
| `status/info/content` | `surface/canvas` | 4.5:1 | ok 6.53 | ok 7.51 | ok 7.65 |
| `status/info/on-fill` | `status/info/fill` | 4.5:1 | ok 5.03 | ok 7.51 | ok 7.51 |
| `status/danger/content` | `status/danger/subtle` | 4.5:1 | ok 5.87 | ok 5.60 | ok 5.60 |
| `status/danger/content` | `surface/canvas` | 4.5:1 | ok 6.14 | ok 6.85 | ok 6.98 |
| `status/danger/on-fill` | `status/danger/fill` | 4.5:1 | ok 4.57 | ok 4.57 | ok 4.57 |
| `brand/on-primary` | `brand/primary` | 4.5:1 | ok 8.37 | ok 10.94 | ok 10.94 |
| `brand/content` | `surface/canvas` | 4.5:1 | ok 5.04 | ok 10.94 | ok 11.14 |
| `status/success/fill` | `surface/canvas` | 3:1 | ok 4.73 | ok 11.13 | ok 11.34 |
| `status/danger/fill` | `surface/canvas` | 3:1 | ok 4.56 | ok 4.15 | ok 4.23 |
| `status/warning/fill` | `surface/canvas` | 3:1 | ok 3.06 | ok 11.49 | ok 11.71 |
| `status/info/fill` | `surface/canvas` | 3:1 | ok 5.01 | ok 7.51 | ok 7.65 |
| `border/default` | `overlay/surface` | 3:1 | ok 4.54 | ok 3.19 | ok 3.07 |
| `border/default` | `surface/muted` | 3:1 | ok 4.35 | ok 3.19 | ok 3.07 |
| `selection/border` | `surface/default` | 3:1 | ok 3.46 | ok 9.90 | ok 9.86 |
| `selection/border` | `overlay/surface` | 3:1 | ok 3.47 | ok 8.36 | ok 8.08 |
| `content/link` | `overlay/surface` | 4.5:1 | ok 5.06 | ok 8.36 | ok 8.08 |
| `selection/content` | `surface/canvas` | 4.5:1 | ok 5.04 | ok 13.72 | ok 13.98 |
| `status/danger/content` | `overlay/surface` | 4.5:1 | ok 6.15 | ok 5.24 | ok 5.06 |
| `content/secondary` | `state/hover` | 4.5:1 | ok 7.17 | ok 5.86 | ok 5.71 |
| `content/secondary` | `selection/bg` | 4.5:1 | ok 7.51 | ok 5.19 | ok 5.23 |
| `focus/ring` | `surface/muted` | 3:1 | ok 3.32 | ok 8.36 | ok 8.08 |
| `action/accent/content` | `action/accent/gradient-top` | 4.5:1 | ok 5.09 | ok 13.72 | ok 13.72 |

---

# Tipografia

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Escolha estilos pela função (display, heading, body, label, caption, mono), não pelo tamanho. Todos os text styles são ligados a tokens tipográficos: mudar um token atualiza todos os estilos.

## Famílias

| Token | Família | Uso | Não usar |
| --- | --- | --- | --- |
| `font/family/sans` | Geist | Principal. Toda a interface: títulos, texto corrido, labels, navegação. | - |
| `font/family/mono` | JetBrains Mono | Complementar e técnica: código, IDs, valores, datas, números tabulares, metadados e overlines. | Títulos, body, UI regular e textos corridos. Não converter textos Geist para mono. |

Carregamento (Google Fonts):

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

## Tokens tipográficos

| Tamanho | px | Altura de linha | px |
| --- | --- | --- | --- |
| `--midas-font-size-xs` | 12 | `--midas-font-line-height-xs` | 16 |
| `--midas-font-size-sm` | 14 | `--midas-font-line-height-sm` | 20 |
| `--midas-font-size-md` | 16 | `--midas-font-line-height-md` | 24 |
| `--midas-font-size-lg` | 18 | `--midas-font-line-height-lg` | 28 |
| `--midas-font-size-xl` | 20 | `--midas-font-line-height-xl` | 32 |
| `--midas-font-size-2xl` | 24 | `--midas-font-line-height-2xl` | 36 |
| `--midas-font-size-3xl` | 30 | `--midas-font-line-height-3xl` | 40 |
| `--midas-font-size-4xl` | 36 | `--midas-font-line-height-4xl` | 56 |
| `--midas-font-size-5xl` | 48 | `--midas-font-line-height-5xl` | 72 |
| `--midas-font-size-6xl` | 64 | - | - |

| Peso | Valor |
| --- | --- |
| `--midas-font-weight-regular` | 400 |
| `--midas-font-weight-medium` | 500 |
| `--midas-font-weight-semibold` | 600 |

| Tracking | Valor |
| --- | --- |
| `--midas-tracking-tight` | -1px |
| `--midas-tracking-normal` | 0px |
| `--midas-tracking-wide` | 1px |

## Text styles (16)

| Estilo | Especificação | Variável CSS | Uso | Exemplo |
| --- | --- | --- | --- | --- |
| `display/lg` | Geist SemiBold · 64/72 · -1px | `--midas-text-display-lg` | Hero e números de destaque em landing/onboarding. Máx. 1 por tela. | Aprender transforma |
| `display/md` | Geist SemiBold · 48/56 · -1px | `--midas-text-display-md` | Títulos de destaque em páginas de marketing ou vazias. | Aprender transforma |
| `heading/xl` | Geist SemiBold · 30/36 | `--midas-text-heading-xl` | Título de página. | Trilha de investimentos |
| `heading/lg` | Geist SemiBold · 24/32 | `--midas-text-heading-lg` | Título de seção principal. | Trilha de investimentos |
| `heading/md` | Geist SemiBold · 20/28 | `--midas-text-heading-md` | Título de card, dialog e subseção. | Trilha de investimentos |
| `heading/sm` | Geist SemiBold · 18/28 | `--midas-text-heading-sm` | Título de grupo e cabeçalho de lista. | Trilha de investimentos |
| `body/lg` | Geist Regular · 18/28 | `--midas-text-body-lg` | Texto corrido de leitura longa e introduções. | Avance no seu ritmo com conteúdos práticos. |
| `body/md` | Geist Regular · 16/24 | `--midas-text-body-md` | Texto corrido padrão. | Avance no seu ritmo com conteúdos práticos. |
| `body/sm` | Geist Regular · 14/20 | `--midas-text-body-sm` | Texto de apoio, descrições e células de tabela. | Avance no seu ritmo com conteúdos práticos. |
| `label/lg` | Geist Medium · 16/24 | `--midas-text-label-lg` | Labels de controles L/XL e navegação principal. | Avance no seu ritmo com conteúdos práticos. |
| `label/md` | Geist Medium · 14/20 | `--midas-text-label-md` | Labels padrão de botões, campos, tabs e menus. | Avance no seu ritmo com conteúdos práticos. |
| `label/sm` | Geist Medium · 12/16 | `--midas-text-label-sm` | Labels compactos: badges, chips XS/S, legendas de gráfico. | Avance no seu ritmo com conteúdos práticos. |
| `caption` | Geist Regular · 12/16 | `--midas-text-caption` | Texto auxiliar: helper text, timestamps em texto, notas. | Avance no seu ritmo com conteúdos práticos. |
| `mono/overline` | JetBrains Mono Medium · 12/16 · 1px · caixa alta | `--midas-text-mono-overline` | Eyebrow/overline técnico em caixa alta. JetBrains Mono. | Módulo 03 · Atualizado |
| `mono/sm` | JetBrains Mono Regular · 12/16 | `--midas-text-mono-sm` | Metadados compactos: IDs, datas, códigos curtos. JetBrains Mono. | ID 8F2A-91C · 07/10/2026 |
| `mono/md` | JetBrains Mono Regular · 14/20 | `--midas-text-mono-md` | Números, valores técnicos e trechos de código. JetBrains Mono. | R$ 1.249,90 · 87,5% |

A variável `--midas-text-*` é um atalho `font` (peso, tamanho/altura de linha, família). Tracking vem em `--midas-text-<estilo>-tracking` quando diferente de zero (display e mono/overline).

```css
.titulo {
  font: var(--midas-text-heading-lg);
}

.hero {
  font: var(--midas-text-display-lg);
  letter-spacing: var(--midas-text-display-lg-tracking);
}

.eyebrow {
  font: var(--midas-text-mono-overline);
  letter-spacing: var(--midas-text-mono-overline-tracking);
  text-transform: uppercase;
}
```

## Regras

- Máximo de 1 display por tela.
- Pesos usados: regular (400), medium (500) e semibold (600). Não use bold.
- JetBrains Mono só para código, IDs, valores, datas, números tabulares, metadados e overlines. Nunca em títulos, body ou texto corrido, e não converta texto Geist para mono.
- Texto corrido nunca passa de 8 colunas no desktop (cerca de 70 caracteres por linha).

---

# Espaçamento e tamanhos

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

space/*: padding e gap. Base 4px; 2, 6 e 10 são meios-passos para controles compactos. Todo espaçamento é múltiplo de 4 ou 8 (space/4 … space/80).

## Espaçamento

| Token | Valor | Variável CSS | Tailwind v4 (arbitrário) |
| --- | --- | --- | --- |
| `space/0` | 0px | `--midas-space-0` | `p-(--midas-space-0)` |
| `space/2` | 2px | `--midas-space-2` | `p-(--midas-space-2)` |
| `space/4` | 4px | `--midas-space-4` | `p-(--midas-space-4)` |
| `space/6` | 6px | `--midas-space-6` | `p-(--midas-space-6)` |
| `space/8` | 8px | `--midas-space-8` | `p-(--midas-space-8)` |
| `space/10` | 10px | `--midas-space-10` | `p-(--midas-space-10)` |
| `space/12` | 12px | `--midas-space-12` | `p-(--midas-space-12)` |
| `space/16` | 16px | `--midas-space-16` | `p-(--midas-space-16)` |
| `space/20` | 20px | `--midas-space-20` | `p-(--midas-space-20)` |
| `space/24` | 24px | `--midas-space-24` | `p-(--midas-space-24)` |
| `space/32` | 32px | `--midas-space-32` | `p-(--midas-space-32)` |
| `space/40` | 40px | `--midas-space-40` | `p-(--midas-space-40)` |
| `space/48` | 48px | `--midas-space-48` | `p-(--midas-space-48)` |
| `space/56` | 56px | `--midas-space-56` | `p-(--midas-space-56)` |
| `space/64` | 64px | `--midas-space-64` | `p-(--midas-space-64)` |
| `space/80` | 80px | `--midas-space-80` | `p-(--midas-space-80)` |

Não existem valores fora desta escala: se algo não cabe, a escala é revista aqui, não no componente. Nunca use 13px ou 19px.

## Altura de controles

size/control/* define a altura de todos os controles: componentes equivalentes no mesmo tamanho têm a mesma altura. size/icon/* segue o grid 24 do Tabler.

| Token | Valor | Variável CSS | Uso |
| --- | --- | --- | --- |
| `size/control/xs` | 24px | `--midas-size-control-xs` | Densidade máxima: tabelas, toolbars. Só desktop. |
| `size/control/sm` | 28px | `--midas-size-control-sm` | Compacto: filtros, chips, ações densas. |
| `size/control/md` | 32px | `--midas-size-control-md` | Padrão da interface. |
| `size/control/lg` | 40px | `--midas-size-control-lg` | Formulários e ações principais; mínimo em mobile. |
| `size/control/xl` | 48px | `--midas-size-control-xl` | Destaque, mobile e touch confortável. |
| `size/control/2xl` | 56px | `--midas-size-control-2xl` | CTA de landing/onboarding. |
| `size/control/3xl` | 64px | `--midas-size-control-3xl` | Hero e telas de aprendizagem. |
| `size/control/4xl` | 72px | `--midas-size-control-4xl` | Excepcional: totens, apresentações. |

## Ícones

| Token | Valor | Variável CSS |
| --- | --- | --- |
| `size/icon/xs` | 12px | `--midas-size-icon-xs` |
| `size/icon/sm` | 16px | `--midas-size-icon-sm` |
| `size/icon/md` | 20px | `--midas-size-icon-md` |
| `size/icon/lg` | 24px | `--midas-size-icon-lg` |
| `size/icon/xl` | 32px | `--midas-size-icon-xl` |

---

# Raios, bordas e opacidade

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Controles usam cantos discretos. A escala é `radius/*`; o uso é definido por `radius/role/*`: prefira o role.

## Escala

| Token | Valor | Variável CSS |
| --- | --- | --- |
| `radius/none` | 0px | `--midas-radius-none` |
| `radius/xs` | 4px | `--midas-radius-xs` |
| `radius/sm` | 6px | `--midas-radius-sm` |
| `radius/md` | 8px | `--midas-radius-md` |
| `radius/lg` | 10px | `--midas-radius-lg` |
| `radius/xl` | 12px | `--midas-radius-xl` |
| `radius/2xl` | 14px | `--midas-radius-2xl` |
| `radius/3xl` | 18px | `--midas-radius-3xl` |
| `radius/full` | 9999px (pílula/círculo) | `--midas-radius-full` |

## Raios por função

| Role | Aponta para | Variável CSS | Uso |
| --- | --- | --- | --- |
| `radius/role/control` | `radius/sm` | `--midas-radius-role-control` | Controles: button, input, select, toggle, chip (6px; XS/SM 4px, XL 8px). |
| `radius/role/container` | `radius/2xl` | `--midas-radius-role-container` | Containers: card, painel, alert, dialog. |
| `radius/role/overlay` | `radius/lg` | `--midas-radius-role-overlay` | Overlays: dropdown, popover, combobox, date picker, tooltip. |
| `radius/role/pill` | `radius/full` | `--midas-radius-role-pill` | Badges, tags, switches e avatares. |

## Borda

| Token | Valor | Variável CSS | Uso |
| --- | --- | --- | --- |
| `border-width/sm` | 1px | `--midas-border-width-sm` | Padrão do sistema: 1px em border/default (cinza claro), sempre com sombra suave elevation/control. Nunca usar strokes pretos ou grossos. |
| `border-width/md` | 1.5px | `--midas-border-width-md` | Uso raro (indicadores pequenos). Seleção e foco usam 1px + halo de 4px. |

## Opacidade

| Token | Valor | Variável CSS | Uso |
| --- | --- | --- | --- |
| `opacity/disabled` | 50% | `--midas-opacity-disabled` | Opacidade de elementos desabilitados quando não houver token de cor específico. |

---

# Elevação e efeitos

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Todo componente sobreposto aparece um nível acima da superfície em que foi aberto (overlay/surface + overlay/border + elevation/overlay). Os valores de sombra são iguais nos três temas.

## Elevação

| Nível | Token | Variável CSS | CSS | Uso |
| --- | --- | --- | --- | --- |
| 1 | `elevation/control` | `--midas-elevation-control` | `0 1px 2px 0 rgb(15 23 41 / 0.04), 0 2px 8px 0 rgb(15 23 41 / 0.05)` | Controles com leve relevo (inputs, botões outline). Combine com borda border/subtle. |
| 2 | `elevation/card` | `--midas-elevation-card` | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` | Cards e superfícies elevadas em repouso. |
| 3 | `elevation/raised` | `--midas-elevation-raised` | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` | Cards em hover/drag, elementos sticky. |
| 4 | `elevation/overlay` | `--midas-elevation-overlay` | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` | Dropdown, popover, combobox, date picker, tooltip, menus. Sempre com overlay/surface + overlay/border. |
| 5 | `elevation/modal` | `--midas-elevation-modal` | `0 25px 50px -12px rgb(0 0 0 / 0.25)` | Dialogs, sheets e drawers. |

```css
.dropdown {
  background: var(--midas-overlay-surface);
  border: 1px solid var(--midas-overlay-border);
  border-radius: var(--midas-radius-role-overlay);
  box-shadow: var(--midas-elevation-overlay);
}
```

## Foco

Focus ring do sistema = borda de 1px + halo suave de 4px ao redor. Os halos mudam sozinhos por tema.

| Variante | Borda | Halo (token de cor) | Variável do efeito | CSS |
| --- | --- | --- | --- | --- |
| Brand | `selection/border` | `focus/halo` | `--midas-effect-focus-ring` | `0 0 0 4px var(--midas-focus-halo)` |
| Neutral | `border/strong` | `focus/halo-neutral` | `--midas-effect-focus-ring-neutral` | `0 0 0 4px var(--midas-focus-halo-neutral)` |
| Erro | `status/danger/border` | `focus/halo-danger` | `--midas-effect-focus-ring-danger` | `0 0 0 4px var(--midas-focus-halo-danger)` |

Foco tem prioridade sobre hover. Disabled não tem hover. Em campos, a borda focus/ring tem contraste ≥ 3:1.

```css
.input:focus-visible {
  border-color: var(--midas-selection-border);
  box-shadow: var(--midas-effect-focus-ring);
  outline: none;
}
```

## Materiais, blur e glass

Superfícies translúcidas para uso sobre mídia. Mais blur = mais legibilidade e menos fundo. Só sobre imagem, vídeo ou gradiente.

| Material | Blur | Fundo | Brilho (borda superior) | Sombra | Uso |
| --- | --- | --- | --- | --- | --- |
| `material/glass` | 24px | `material/glass/bg` | `material/glass/border` | `0 1px 3px 0 rgb(0 0 0 / 0.12)` | Vidro padrão: blur 24 + brilho superior + sombra mínima. |
| `material/glass-strong` | 40px | `material/glass/bg` | `material/glass/border` | `0 2px 8px 0 rgb(0 0 0 / 0.16)` | Vidro intenso: blur 40 para fundos muito detalhados. |
| `material/liquid` | - | `material/glass/bg` | - | `0 1px 3px 0 rgb(0 0 0 / 0.12)` | Liquid glass: refração e distorção do fundo (efeito GLASS do Figma) + sombra mínima. Não tem equivalente exato em CSS: use glass como aproximação. |
| `material/frosted` | 28px | `material/scrim/bg` | `material/scrim/border` | - | Frosted padrão: blur 28 + brilho sutil. |
| `material/frosted-strong` | 48px | `material/scrim/bg` | `material/scrim/border` | - | Frosted intenso: blur 48, quase opaco, para leitura sobre vídeo/imagem movimentada. |
| `material/sheen` | - | - | `material/sheen` | `0 1px 2px 0 rgb(0 0 0 / 0.08)` | Acabamento flat moderno para botões degradê/sólidos: brilho de 1px no topo + sombra mínima. |
| `material/raised-button` | - | - | `material/sheen` | `elevation/card` | Botões sólidos com leve relevo (Secondary, On media, Gradient): brilho superior + elevation/card. |

| Blur | Valor |
| --- | --- |
| `blur/sm` | 8px |
| `blur/md` | 16px |
| `blur/lg` | 32px |

Receita do vidro padrão:

```css
.glass {
  background: var(--midas-material-glass-bg);
  backdrop-filter: blur(var(--midas-material-glass-blur));
  box-shadow: inset 0 1px 0 var(--midas-material-glass-border), var(--midas-material-glass-shadow);
}

.frosted {
  background: var(--midas-material-scrim-bg);
  backdrop-filter: blur(var(--midas-material-frosted-blur));
  box-shadow: inset 0 1px 0 var(--midas-material-scrim-border);
}
```

O efeito liquid glass do Figma (refração e distorção reais) não tem equivalente em CSS; use glass como aproximação. Texto sobre vidro usa `material/glass/surface` (contraste >= 4,5:1) e sobre mídia escura `material/on-media/content` com `material/scrim/strong`.

---

# Grid e layout

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

O grid é a régua invisível da página: divide a largura em colunas iguais para que tudo se alinhe em qualquer tamanho de tela. Os componentes ocupam "X colunas" em vez de larguras soltas em pixels.

| Peça | Valor (desktop) | O que é |
| --- | --- | --- |
| Colunas | 12 no desktop | Faixas onde o conteúdo vive. |
| Gutter | 24px entre colunas | Espaço fixo entre colunas. |
| Margem | 64px nas laterais | Respiro nas laterais da tela. |

## Breakpoints

| Breakpoint | Largura | Colunas | Gutter | Margem | Conteúdo máximo |
| --- | --- | --- | --- | --- | --- |
| Mobile | até 599px | 4 | 16px | 16px | Fluido (ocupa a tela) |
| Tablet | 600–1023px | 8 | 24px | 32px | Fluido |
| Laptop | 1024–1279px | 12 | 24px | 40px | Fluido |
| Desktop | 1280–1599px | 12 | 24px | 64px | 1312px |
| Wide | 1600px ou mais | 12 | 32px | 80px | 1440px, centralizado |

Variáveis em `tokens.css`: `--midas-grid-columns`, `--midas-grid-gutter`, `--midas-grid-margin` e `--midas-grid-max-width` mudam sozinhas por breakpoint (mobile-first, com `@media (min-width)` em 600, 1024, 1280 e 1600px).

```css
.page {
  display: grid;
  grid-template-columns: repeat(var(--midas-grid-columns), minmax(0, 1fr));
  column-gap: var(--midas-grid-gutter);
  padding-inline: var(--midas-grid-margin);
  max-width: var(--midas-grid-max-width);
  margin-inline: auto;
}

.card { grid-column: span 4; }
```

## Telas de referência

Desenhe em 1440×1024 e teste nas telas reais. Os tamanhos são em pontos (o que o navegador enxerga), não a resolução física. A barra do navegador come ~110px de altura no desktop.

| Tela | Tamanho | Breakpoint |
| --- | --- | --- |
| iPhone 16 / Android | 393×852 · 412×915 | Mobile |
| iPad Air 11" | 820×1180 em pé · 1180×820 deitado | Tablet / Laptop |
| Notebook Windows (Menor tela de desktop suportada.) | 1366×768 (≈ 656 de altura útil) · 1536×864 | Desktop |
| Desktop de referência (Referência principal de layout.) | 1440×1024 (≈ 912 útil) | Desktop |
| MacBook Air 13" / Pro 14" | 1470×956 · 1512×982 (≈ 845–870 útil) | Desktop |
| MacBook Air 15" / Pro 16" | 1710×1112 · 1728×1117 | Wide |
| Monitor Full HD / iMac 24" / 27" | 1920×1080 · 2240×1260 · 2560×1440 | Wide (conteúdo trava em 1440) |

## Contêineres

- **Contido**: O conteúdo respeita margem e largura máxima. Padrão para texto, listas e formulários.
- **Fluido**: Usa a largura toda menos a margem. Dashboards e tabelas.
- **Full-bleed**: O fundo vai de ponta a ponta, mas o texto continua alinhado ao grid. Hero, faixas de destaque, vídeo.
- **Full viewport**: Ocupa a tela inteira, 100% de largura e de altura (100dvh). Hero imersivo.

## Modelos de página

- **Dashboard**: Header 12, Hero 12, 4 cards de 3 col; conteúdo 8 + lateral 4.
- **Cards**: Título + filtros 12; cards de 4 col (3 por linha).
- **Article**: Mídia 8, título 8, texto 8 (offset 2).
- **Split**: Mídia 6 + formulário 6.
- **Bento**: Destaque 8 + 4, depois blocos de 4 e 6 col.
- **Sidebar no grid**: Sidebar 3 + conteúdo 9, para páginas de conteúdo.
- **Sidebar colada**: Sidebar de 264px fora do grid (rail de 72px no tablet); o grid de 12 colunas começa depois dela, com margem de 40px.
- **Full viewport**: Hero 100dvh, altura mínima de 560px, conteúdo ancorado embaixo.
- **Full-bleed band**: Faixa de ponta a ponta com conteúdo alinhado ao grid.

## Sidebar: colada ou no grid

Colada (padrão da plataforma): encosta na borda da tela, largura fixa de 264px (rail de 72px no tablet), fica FORA do grid. No mobile vira drawer e a navegação principal vai para a Bottom Navigation. No grid: ocupa 3 das 12 colunas e respeita a margem. Regra: navegação do produto → colada. Navegação dentro de uma página → no grid.

## Ritmo de 8px

4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px. Todo espaçamento é múltiplo de 4 ou 8 (tokens `space/4` a `space/80`).

## Decisões e regras

- Desenhe em 1440×1024 e confira em 1366×768 (notebook mais baixo) e 1920×1080 (monitor largo) antes de aprovar.
- Larguras de conteúdo vêm de colunas (card = 4 col, texto = 8 col), nunca de pixels soltos.
- Texto corrido nunca passa de 8 colunas no desktop (≈ 70 caracteres por linha).
- Em telas largas o conteúdo trava em 1440px e centraliza; só fundos, imagens e vídeos vão de ponta a ponta.
- Hero de tela inteira usa 100dvh (não 100vh), com altura mínima de 560px; o conteúdo fica ancorado embaixo e sempre cabe em 1366×768.
- Sidebar fixa (Navigation) fica fora do grid; o grid de 12 colunas começa depois dela.
- Espaçamentos só com tokens space/* (múltiplos de 4/8).

---

# Ícones

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

O sistema usa **só Tabler Icons** (MIT), a mesma biblioteca da página Icons do Figma: grade de 24px, traço de 2px, pontas e junções arredondadas, 5.184 ícones outline (Tabler 3.49.0). Nenhuma outra biblioteca de ícones é permitida.

## Navegador e download

A seção Ícones do site (https://design.t2.com.br/#icones) permite buscar por nome ou tag (em inglês), filtrar por categoria, alternar outline/filled, escolher tamanho (16, 20, 24, 32, 48), traço (1, 1,5, 2) e cor (modos do Figma no tema atual), e baixar SVG, PNG (1x, 2x, 4x, fundo transparente), copiar SVG, JSX ou nome.

## Arquivos estáticos (para baixar por URL)

| URL | O que é |
| --- | --- |
| `https://design.t2.com.br/icons/tabler/outline/<nome>.svg` | SVG outline original do Tabler (24x24, stroke currentColor, stroke-width 2). Ex.: /icons/tabler/outline/arrow-right.svg |
| `https://design.t2.com.br/icons/tabler/filled/<nome>.svg` | SVG preenchido (só existe para parte dos ícones; fill currentColor) |
| `https://design.t2.com.br/icons/tabler/index.json` | Índice: version, count, categories e icons[] com name, category, tags[] e styles[] (outline, filled) |
| `https://design.t2.com.br/icons/tabler/tabler-outline.zip` | Todos os SVG outline em um zip |
| `https://design.t2.com.br/icons/tabler/tabler-filled.zip` | Todos os SVG filled em um zip |

`<nome>` é o nome em kebab-case do Tabler (`arrow-right`, `circle-check`, `brand-whatsapp`). Para achar o nome certo, busque no `index.json` por name ou tags (os termos são em inglês: search, trash, user, arrow).

## Como usar

- **Baixar:** na seção Ícones do site, escolha o ícone e use "Baixar SVG" ou "Baixar PNG" (1x, 2x, 4x, fundo transparente). Serve para apresentações, Figma e materiais.
- **Copiar SVG:** copia o SVG inline, com `currentColor`, para colar em HTML.
- **Copiar JSX (React):** copia um componente React com o SVG inline, sem importar nada. Exemplo gerado para `arrow-right`:

```tsx
export function IconArrowRight({ size = 24, stroke = 2, ...props }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M5 12l14 0" />
      <path d="M13 18l6 -6" />
      <path d="M13 6l6 6" />
    </svg>
  );
}
```

- **Pacote do Tabler (opcional, de terceiros):** quem preferir importar em vez de colar pode instalar o pacote oficial `@tabler/icons-react` (os nomes são os mesmos, com prefixo `Icon`: `arrow-right` vira `IconArrowRight`, variantes preenchidas terminam em `Filled`).

```tsx
import { IconArrowRight } from "@tabler/icons-react";

<IconArrowRight size={20} stroke={2} />
```

## Tamanhos (size/icon)

| Token | Valor | CSS |
| --- | --- | --- |
| `size/icon/xs` | 12px | `var(--midas-size-icon-xs)` |
| `size/icon/sm` | 16px | `var(--midas-size-icon-sm)` |
| `size/icon/md` | 20px | `var(--midas-size-icon-md)` |
| `size/icon/lg` | 24px | `var(--midas-size-icon-lg)` |
| `size/icon/xl` | 32px | `var(--midas-size-icon-xl)` |

O seletor do site oferece também 48px (uso em ilustração e estados vazios, fora da escala de componentes).

## Cor

O ícone usa `currentColor` e herda a cor do texto do elemento pai. Use sempre tokens de texto, nunca hex solto nem paleta padrão do Tailwind.

| Modo do Figma | Token de conteúdo | Variável CSS |
| --- | --- | --- |
| Default | `content/primary` | `var(--midas-content-primary)` |
| Muted | `content/secondary` | `var(--midas-content-secondary)` |
| On primary | `action/primary/content` | `var(--midas-action-primary-content)` |
| On accent | `action/accent/content` | `var(--midas-action-accent-content)` |
| On secondary | `action/secondary/content` | `var(--midas-action-secondary-content)` |
| On destructive | `action/destructive/content` | `var(--midas-action-destructive-content)` |
| On media | `material/on-media/content` | `var(--midas-material-on-media-content)` |
| On media solid | `material/on-media/bg-content` | `var(--midas-material-on-media-bg-content)` |
| Selected | `selection/content` | `var(--midas-selection-content)` |

Em CSS puro: `color: var(--midas-content-secondary)` no elemento pai (o SVG baixado usa `stroke="currentColor"`).

## Regras

- Traço 2 é o padrão do sistema. Traço 1 e 1,5 só para casos editoriais; o arquivo baixado respeita a espessura escolhida.
- Ícones de direção (setas, chevrons) espelham em RTL: `rtl:rotate-180`.
- Ícone decorativo ao lado de texto não precisa de rótulo; botão só com ícone precisa de `aria-label`.
- SVG baixado: use como imagem (`<img>`) só quando a cor fixa for aceitável; para herdar cor, use o SVG inline ou o JSX copiado.
- Licença: Tabler Icons é MIT (copyright Paweł Kuna). Mantenha o aviso de licença ao redistribuir o conjunto.

---

# Como consumir

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

O sistema chega aos projetos por tokens: o arquivo tokens.css (variáveis CSS dos três temas), o tokens.json (W3C DTCG) e a documentação em Markdown para agentes de IA. Tailwind v4 e v3 consomem as mesmas variáveis. Ninguém define cor, fonte ou espaçamento no olho: tudo vem dos tokens.

## Tailwind v4

Projetos com Tailwind v4. Copie o tokens.css para o projeto e exponha as variáveis ao Tailwind com @theme inline; as classes passam a seguir o tema ativo.

**Baixar o tokens.css**

```bash
curl -o src/tokens.css https://design.t2.com.br/tokens.css
```

**app/globals.css**

```css
@import "tailwindcss";
@import "./tokens.css";

@theme inline {
  --font-sans: var(--midas-font-sans);
  --font-mono: var(--midas-font-mono);
  --color-canvas: var(--midas-surface-canvas);
  --color-surface: var(--midas-surface-default);
  --color-muted: var(--midas-surface-muted);
  --color-foreground: var(--midas-content-primary);
  --color-foreground-muted: var(--midas-content-secondary);
  --color-border-subtle: var(--midas-border-subtle);
  --color-accent: var(--midas-action-accent-bg);
  --color-on-accent: var(--midas-action-accent-content);
  --radius-control: var(--midas-radius-role-control);
  --radius-container: var(--midas-radius-role-container);
  --shadow-card: var(--midas-elevation-card);
}
```

**Usar e trocar de tema**

```html
<html lang="pt-BR" data-theme="dark-blue">
<body class="bg-canvas text-foreground font-sans">
  <button class="bg-accent text-on-accent rounded-control h-(--midas-size-control-lg) px-4">
    Continuar
  </button>
</body>
```

## Tailwind v3

Projetos com Tailwind v3 (hub). Importe o tokens.css no CSS global e aponte o theme.extend para as variáveis --midas-*.

**styles/globals.css (antes das diretivas @tailwind)**

```css
@import "./tokens.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
```

**tailwind.config.js**

```js
module.exports = {
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--midas-font-sans)"],
        mono: ["var(--midas-font-mono)"],
      },
      colors: {
        canvas: "var(--midas-surface-canvas)",
        surface: "var(--midas-surface-default)",
        muted: "var(--midas-surface-muted)",
        foreground: "var(--midas-content-primary)",
        "foreground-muted": "var(--midas-content-secondary)",
        "border-subtle": "var(--midas-border-subtle)",
        accent: "var(--midas-action-accent-bg)",
        "on-accent": "var(--midas-action-accent-content)",
      },
      borderRadius: {
        control: "var(--midas-radius-role-control)",
        container: "var(--midas-radius-role-container)",
      },
      boxShadow: {
        card: "var(--midas-elevation-card)",
      },
    },
  },
};
```

## CSS puro

Para HTML estático, mocks e materiais. O arquivo tokens.css traz os três temas; o tema é escolhido por data-theme em qualquer elemento.

**Importar**

```html
<link rel="stylesheet" href="https://design.t2.com.br/tokens.css">
<html lang="pt-BR" data-theme="dark-blue">
```

**Usar as variáveis**

```css
.card {
  background: var(--midas-surface-default);
  color: var(--midas-content-primary);
  border: 1px solid var(--midas-border-subtle);
  border-radius: var(--midas-radius-role-container);
  box-shadow: var(--midas-elevation-card);
  padding: var(--midas-space-24);
}

.card h2 {
  font: var(--midas-text-heading-md);
}

.cta {
  background: var(--midas-action-accent-bg);
  color: var(--midas-action-accent-content);
  height: var(--midas-size-control-lg);
  border-radius: var(--midas-radius-role-control);
  font: var(--midas-text-label-md);
}

.cta:focus-visible {
  border-color: var(--midas-selection-border);
  box-shadow: var(--midas-effect-focus-ring);
  outline: none;
}
```

**Tailwind v4 com tokens avulsos**

```css
<div class="bg-(--midas-surface-default) text-(--midas-content-primary) rounded-(--midas-radius-role-container)">...</div>
```

## Fontes

Geist (principal) e JetBrains Mono (técnica). Carregue as duas; a mono só para código, IDs, valores e overlines.

**Google Fonts**

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Variáveis**

```css
:root {
  --midas-font-sans: "Geist", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --midas-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
```

## JSON (DTCG) e Python

tokens.json segue o formato W3C Design Tokens ($type e $value), com os três temas em $extensions.mode. Serve para Style Dictionary, geradores de PDF e qualquer script.

**Trecho de tokens.json**

```json
{
  "color": {
    "surface": {
      "canvas": {
        "$type": "color",
        "$value": "{primitive.color.slate.50}",
        "$description": "Fundo da página/aplicação. Camada mais baixa.",
        "$extensions": {
          "mode": {
            "Light": "{primitive.color.slate.50}",
            "Dark": "{primitive.color.neutral.950}",
            "Dark Blue": "{primitive.color.slate.950}"
          }
        }
      }
    }
  }
}
```

**Python (gerador de PDF, scripts)**

```python
import json
from urllib.request import urlopen

tokens = json.load(urlopen("https://design.t2.com.br/tokens.json"))

canvas = tokens["color"]["surface"]["canvas"]["$extensions"]["com.t2.midas"]["resolved"]
dark_blue = canvas["Dark Blue"]
brand = tokens["color"]["brand"]["primary"]["$extensions"]["com.t2.midas"]["resolved"]["Light"]
```

## Para IA

Arquivos pensados para agentes de IA. Leia nesta ordem e prefira os tokens semânticos a qualquer cor ou medida solta.

**Onde ler**

```text
https://design.t2.com.br/llms.txt          índice curto, com links
https://design.t2.com.br/llms-full.txt     tudo em um arquivo Markdown
https://design.t2.com.br/docs/<secao>.md   uma página por seção (cores, tipografia, grid...)
https://design.t2.com.br/tokens.json       tokens em DTCG, com os 3 temas
https://design.t2.com.br/tokens.css        variáveis CSS --midas-* dos 3 temas
```

**Regras para o agente**

```text
1. Cores: só tokens semânticos (surface/*, content/*, action/*...). Nunca hex solto nem paleta primitiva em componente.
2. Tema é contexto: troque data-theme (light, dark, dark-blue); não crie variantes /dark.
3. Tamanhos: espaçamento só com space/*; altura de controle só com size/control/*.
4. Texto precisa de contraste >= 4,5:1; bordas de controle e foco >= 3:1.
5. Raio por função: control, container, overlay, pill. Elevação por nível: control, card, raised, overlay, modal.
6. Geist para a interface; JetBrains Mono só para código, IDs, valores e overlines.
```