# Componentes · Score Positivo

> empresa B2B · v0.2 · piloto com cliente real. Dados extraídos do Manual de Marca, Tom e Voz e Kickoff. Os itens marcados como pendentes aguardam confirmação do cliente

Botões, badge, card, alerta, campo e tabela, com estados e código para copiar.

> **Pendente (item 11):** Cores semânticas (sucesso, erro, alerta, info) e o Verde Score 700 (#3D7A01) para texto pequeno verde e botões com texto branco. [Ver em pendencias.md](pendencias.md#item-11)

## O essencial

1. Use cantos de 16px, botões em pílula, selos em pílula.
2. Separe com filetes de 1px em Cinza; nada de sombra.
3. Use a barra de score uma vez por peça.
4. Escreva o título em duas camadas: contexto leve, resultado forte.
5. Aplique só pares aprovados, via variáveis de tokens.css.

## Exemplos com a copy da marca

- **Botões:** Agilidade técnica Cada decisão sem dado preciso é uma aposta. Falar com Score Baixar o logo Ver os detalhes
- **Badge:** API e Web Pré-pago e pós-pago
- **Card:** API e Web Dado certo, decisão segura Atendimento consultivo de quem entende de crédito, e não de ticket.
- **Alerta:** Sucesso Mensagem enviada. A resposta chega por e-mail. Você não precisa fazer mais nada agora.
- **Campo de formulário:** E-mail Você recebe a resposta por e-mail. Falar com Score
- **Tabela simples:** Canal Usa? Fonte LinkedIn (página + executivos) sim Tom e Voz, Use Case Maps Instagram / Facebook sim Kickoff Google Ads (Search e Display) sim Kickoff E-mail marketing (RD Station) sim padrão de banner 757×300 já aprovado

## Barra de Score

Trilho Cinza com preenchimento em gradiente (#4E9901 → #71DF01) e ponto no fim. Representa evolução e score. Usar sob títulos-chave, como divisor de seção e como indicador de progresso. Máximo 1 por peça além do logotipo.

- **Fazemos:** Uma barra por peça: Parceiro, não fornecedor
  - **Nunca fazemos:** Duas barras na mesma peça: Parceiro, não fornecedor Segundo bloco da peça
  - **Motivo:** Máximo 1 por peça além do logotipo: a barra perde o valor de indicador se aparece duas vezes.

## Título em duas camadas

Linha de contexto em Poppins Regular + linha de resultado em Poppins Bold na cor Verde Score (sobre fundo claro) ou Verde Claro (sobre Azul Noite).

- **Fazemos:** Contexto leve, resultado forte: Do acesso ao resultado
  - **Nunca fazemos:** Duas linhas do mesmo peso e da mesma cor: Do acesso ao resultado
  - **Motivo:** Linha de contexto em Poppins Regular + linha de resultado em Poppins Bold na cor Verde Score (sobre fundo claro) ou Verde Claro (sobre Azul Noite).

## Bloco de destaque

Retângulo Verde Claro (#71DF01) atrás da palavra-chave do título, com texto PRETO em Bold (contraste 12,26:1), como nos criativos. Uma palavra ou expressão por peça. Nunca usar o bloco atrás de parágrafo inteiro.

- **Fazemos:** Uma palavra-chave em destaque: Liberdade contratual
  - **Nunca fazemos:** Destaque em excesso: várias palavras ou o parágrafo inteiro: Liberdade contratual
  - **Motivo:** Uma palavra ou expressão por peça.

## Selo

Pílula com 'Para empresas' ou 'Uso corporativo, contratação por CNPJ' em peças de mídia, para filtrar o público B2C.

- **Fazemos:** Selo em pílula, par aprovado: Para empresas Uso corporativo, contratação por CNPJ
  - **Nunca fazemos:** Par de cor proibido: Para empresas
  - **Motivo:** Verde Claro sobre Branco tem contraste 1,71:1; o selo só usa pares aprovados.

## Movimento

Movimento padrão do template: o brand.json deste cliente não define `tokens.motion`.

| Grupo | Token | Valor | Origem | Uso |
| --- | --- | --- | --- | --- |
| Duração | `--mov-dur-fast` | `120ms` | padrão do template | Microinterações: clique, foco, hover. |
| Duração | `--mov-dur-base` | `250ms` | padrão do template | Entradas e transições comuns. |
| Duração | `--mov-dur-slow` | `400ms` | padrão do template | Barras que se preenchem e contadores. |
| Curva | `--mov-ease-standard` | `cubic-bezier(.2,0,0,1)` | padrão do template | Movimento dentro da tela. |
| Curva | `--mov-ease-enter` | `cubic-bezier(0,0,.2,1)` | padrão do template | O que entra: começa rápido e assenta. |
| Curva | `--mov-ease-exit` | `cubic-bezier(.4,0,1,1)` | padrão do template | O que sai: começa devagar e acelera. |
| Cascata | `--mov-stagger` | `40ms` | padrão do template | Atraso entre irmãos de um mesmo grupo. |
| Distância | `--mov-dist` | `8px` | padrão do template | Deslocamento vertical de entrada. |

**Quando mover**
- Mova para orientar: o que entra, sai ou muda de estado ganha movimento; o que já está na tela fica parado.
- Mova em resposta ao toque: botões e cards clicáveis reduzem de escala ao clicar.
- Mova em cascata ao revelar grupos de itens, do primeiro ao último irmão.

**Quando não mover**
- Não mova texto corrido enquanto a pessoa lê.
- Não use movimento em repetição nem só para enfeitar.
- Não esconda conteúdo atrás de animação: sem JavaScript ou com movimento reduzido, tudo aparece parado.

**Movimento reduzido**
- Com `prefers-reduced-motion: reduce` não há transição, cascata nem contador: todo o conteúdo aparece parado.

```css
/* Movimento · Score Positivo (padrão do template) */
:root{
  --mov-dur-fast:120ms;
  --mov-dur-base:250ms;
  --mov-dur-slow:400ms;
  --mov-ease-standard:cubic-bezier(.2,0,0,1);
  --mov-ease-enter:cubic-bezier(0,0,.2,1);
  --mov-ease-exit:cubic-bezier(.4,0,1,1);
  --mov-stagger:40ms;
  --mov-dist:8px;
}

/* entrada: sobe 8px e aparece; irmãos entram com atraso de --mov-stagger */
.entra{opacity:0;transform:translateY(var(--mov-dist))}
.entra.visivel{opacity:1;transform:none;transition:opacity var(--mov-dur-base) var(--mov-ease-enter) calc(var(--i,0) * var(--mov-stagger)),transform var(--mov-dur-base) var(--mov-ease-enter) calc(var(--i,0) * var(--mov-stagger))}

/* resposta ao toque */
.botao{transition:transform var(--mov-dur-fast) var(--mov-ease-standard)}
.botao:active{transform:scale(.98)}

/* quem pede menos movimento recebe tudo parado */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .entra{opacity:1;transform:none}
}
```

## Especificação técnica

### Barra de Score (código)

```html
<!-- HTML -->
<div class="bfg-barra" role="img" aria-label="Barra de score" style="--p:80%"><span class="bfg-barra__fill"></span><span class="bfg-barra__ponto"></span></div>

/* CSS (requer tokens.css) */
.bfg-barra{--p:80%;position:relative;width:100%;height:.5rem;background:var(--cinza-100);border-radius:9999px}
.bfg-barra__fill{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:9999px;background:linear-gradient(90deg,#4E9901,#71DF01)}
.bfg-barra__ponto{position:absolute;left:var(--p);top:50%;width:1rem;height:1rem;border-radius:50%;background:#4E9901;transform:translate(-50%,-50%)}
```

### Título em duas camadas (código)

```html
<!-- HTML -->
<p class="bfg-t2"><span class="bfg-t2__ctx">Do acesso</span><span class="bfg-t2__res">ao resultado</span></p>

/* CSS (requer tokens.css) */
.bfg-t2{display:grid;gap:.1em;margin:0;font:700 clamp(1.75rem,3.4vw,2.75rem)/1.05 var(--font-display, var(--f-display))}
.bfg-t2__ctx{font-weight:300;color:var(--preto-900)}
.bfg-t2__res{font-weight:700;color:var(--verde-score-400)}
.bfg-t2--uma .bfg-t2__ctx,.bfg-t2--uma .bfg-t2__res{font-weight:300;color:var(--preto-900)}
```

### Bloco de destaque (código)

```html
<!-- HTML -->
<p class="bfg-dest">Liberdade <mark class="bfg-destaque">contratual</mark></p>

/* CSS (requer tokens.css) */
.bfg-dest{margin:0;font:700 clamp(1.75rem,3.4vw,2.75rem)/1.2 var(--font-display, var(--f-display));color:var(--preto-900)}
.bfg-dest--corpo,.bfg-dest--corpo .bfg-destaque{font-size:1.125rem;font-weight:400;line-height:1.6}
.bfg-destaque{background:var(--verde-claro-200);color:var(--preto-900);padding:0 .2em;border-radius:16px;font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone}
```

### Selo (código)

```html
<!-- HTML -->
<span class="bfg-selo">Para empresas</span> <span class="bfg-selo">Uso corporativo, contratação por CNPJ</span>

/* CSS (requer tokens.css) */
.bfg-selo{display:inline-block;font:500 .8125rem/1 var(--font-texto, var(--f-texto));padding:.5em .9em;background:var(--azul-noite-900);color:var(--branco-50);border:1px solid var(--azul-noite-900);border-radius:9999px}
```

### Outros elementos da marca

- Assistente virtual 24/7 (avatar 3D). Uso em peças de atendimento e plataforma. Regras de uso pendentes.

### Botões

Primário preenchido (cor de ação), secundário com contorno, neutro preenchido (escuro) e link. Três tamanhos (P, M, G), em múltiplos da grade de 8 px. Baixar e copiar levam ícone, com traço de 1,5 e pontas retas. Cantos de 16px, botões em pílula, selos em pílula, sem sombra. O rótulo usa a fonte de texto, nunca mono caixa-alta.

- **Primário:** Padrão, Hover, Pressionado, Desabilitado
- **Secundário (contorno):** Padrão, Hover, Pressionado, Desabilitado
- **Neutro:** Padrão, Hover, Pressionado, Desabilitado
- **Link:** Padrão, Hover, Pressionado, Desabilitado
- **Com ícone (ação):** Copiar, Baixar, Baixar (neutro)
- **Tamanhos:** P, M, G

```html
<button class="bfg-btn bfg-btn--primario bfg-btn--m">Falar com Score</button>
<button class="bfg-btn bfg-btn--secundario bfg-btn--m"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true" focusable="false"><path d="M12 3v12M7 11l5 5 5-5M4 20h16"/></svg>Baixar o logo</button>
<button class="bfg-btn bfg-btn--neutro bfg-btn--m">Ver detalhes</button>
<button class="bfg-btn bfg-btn--link bfg-btn--m">Ver todas as cores</button>
<button class="bfg-btn bfg-btn--primario bfg-btn--m" disabled>Falar com Score</button>
```

```css
:root{--radius-btn:9999px;--radius-selo:9999px}
.bfg-btn,.bfg-badge,.bfg-campo__entrada{appearance:none;-webkit-appearance:none;margin:0;box-sizing:border-box}
.bfg-btn{display:inline-flex;align-items:center;gap:var(--space-sm);font:500 var(--fs,15px)/1 var(--font-texto);padding:var(--py,12px) var(--px,20px);border:var(--linha-width) solid transparent;border-radius:var(--radius-btn);cursor:pointer;text-decoration:none;background:none}
.bfg-btn svg{flex:none}
.bfg-btn--p{--fs:13px;--py:8px;--px:16px}
.bfg-btn--m{--fs:15px;--py:12px;--px:20px}
.bfg-btn--g{--fs:17px;--py:16px;--px:24px}
.bfg-btn--primario{background:var(--verde-score-700);color:var(--branco-50);border-color:var(--verde-score-700)}
.bfg-btn--primario:hover,.bfg-btn--primario.is-hover{filter:brightness(0.92)}
.bfg-btn--primario:active,.bfg-btn--primario.is-active{filter:brightness(0.84)}
.bfg-btn--secundario{color:var(--azul-noite-900);border-color:var(--azul-noite-900)}
.bfg-btn--secundario:hover,.bfg-btn--secundario.is-hover{background:var(--cinza-100)}
.bfg-btn--secundario:active,.bfg-btn--secundario.is-active{background:var(--azul-noite-900);color:var(--branco-50)}
.bfg-btn--neutro{background:var(--azul-noite-900);color:var(--branco-50);border-color:var(--azul-noite-900)}
.bfg-btn--neutro:hover,.bfg-btn--neutro.is-hover{background:var(--azul-noite-800);border-color:var(--azul-noite-800)}
.bfg-btn--neutro:active,.bfg-btn--neutro.is-active{background:var(--azul-noite-700);border-color:var(--azul-noite-700)}
.bfg-btn--link{color:var(--azul-noite-900);padding-left:0;padding-right:0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:var(--linha-width)}
.bfg-btn--link:hover,.bfg-btn--link.is-hover{text-decoration-thickness:2px}
.bfg-btn--link:active,.bfg-btn--link.is-active{text-decoration-thickness:3px}
.bfg-btn:disabled,.bfg-btn.is-disabled{background:var(--cinza-100);color:var(--azul-noite-900);border:var(--linha-width) dashed var(--azul-noite-900);cursor:not-allowed;text-decoration:none}
.bfg-btn--link:disabled,.bfg-btn--link.is-disabled{background:none;border-color:transparent;text-decoration:line-through}
.bfg-btn:focus-visible{outline:2px solid var(--azul-noite-900);outline-offset:2px}
```

### Badge

Em pílula. Sem a cor de acento: o selo usa o escuro, o apoio ou só o contorno. Rótulo curto para categoria (serviço, canal, formato). Quando vira filtro, usa os estados do contorno.

- **Variantes:** escuro, apoio, contorno
- **Como filtro:** Padrão, Hover, Pressionado, Desabilitado

```html
<span class="bfg-badge bfg-badge--escuro">API e Web</span>
<span class="bfg-badge bfg-badge--apoio">Pré-pago e pós-pago</span>
```

```css
.bfg-badge{background:transparent;color:inherit;display:inline-block;font:400 12px/1 var(--font-dados);text-transform:uppercase;letter-spacing:.06em;padding:var(--space-xs) var(--space-sm);border:var(--linha-width) solid transparent;border-radius:var(--radius-selo)}
.bfg-badge--acento{background:var(--verde-score-700);color:var(--branco-50)}
.bfg-badge--escuro{background:var(--azul-noite-900);color:var(--branco-50)}
.bfg-badge--apoio{background:var(--cinza-100);color:var(--azul-noite-900)}
.bfg-badge--contorno{color:var(--azul-noite-900);border-color:var(--azul-noite-900)}
button.bfg-badge{cursor:pointer;font:500 13px/1 var(--font-texto);text-transform:none;letter-spacing:0}
button.bfg-badge:hover,button.bfg-badge.is-hover{background:var(--cinza-100)}
button.bfg-badge:active,button.bfg-badge.is-active{background:var(--azul-noite-900);color:var(--branco-50)}
button.bfg-badge:disabled,button.bfg-badge.is-disabled{border-style:dashed;text-decoration:line-through;cursor:not-allowed;background:none}
```

### Card

Filete de 1px, raio de 16px, sem sombra. No hover o card não sobe: só muda de fundo.

- **Estados:** Padrão, Hover, Pressionado, Desabilitado

```html
<a class="bfg-card" href="#"><span class="bfg-card__rotulo">API e Web</span><h3 class="bfg-card__titulo">Dado certo, decisão segura</h3><p class="bfg-card__texto">Atendimento consultivo de quem entende de crédito, e não de ticket.</p></a>
```

```css
.bfg-card{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);background:var(--branco-50);color:var(--azul-noite-900);border:var(--linha-width) solid var(--cinza-100);border-radius:var(--radius);text-decoration:none;cursor:pointer}
.bfg-card__rotulo{font:400 12px/1 var(--font-dados);text-transform:uppercase;letter-spacing:.06em}
.bfg-card__titulo{font:700 var(--space-xl)/1.1 var(--font-display);letter-spacing:-.02em;margin:0}
.bfg-card__texto{font:400 17px/1.5 var(--font-texto);margin:0}
.bfg-card__ponto{color:var(--azul-noite-900)}
.bfg-card:hover,.bfg-card.is-hover{background:var(--cinza-100)}
.bfg-card:active,.bfg-card.is-active{background:var(--azul-noite-900);color:var(--branco-50)}
.bfg-card:hover .bfg-card__ponto,.bfg-card.is-hover .bfg-card__ponto,.bfg-card:active .bfg-card__ponto,.bfg-card.is-active .bfg-card__ponto{color:currentColor}
.bfg-card[aria-disabled=true],.bfg-card.is-disabled{border-style:dashed;cursor:not-allowed}
.bfg-card[aria-disabled=true] .bfg-card__titulo,.bfg-card.is-disabled .bfg-card__titulo{text-decoration:line-through}
.bfg-card[aria-disabled=true] .bfg-card__ponto,.bfg-card.is-disabled .bfg-card__ponto{color:currentColor}
```

### Alerta

Quatro semânticas, só com contraste registrado de 4,5 ou mais sobre o fundo. A cor aparece no filete e no rótulo; o texto fica em azul-noite. O alerta varia por tipo, não por estado.

- **Semânticas:** sucesso, erro, alerta, info

```html
<div class="bfg-alerta bfg-alerta--sucesso" role="status"><span class="bfg-alerta__rotulo">Sucesso</span><p class="bfg-alerta__titulo">Mensagem enviada. <i>A resposta chega por e-mail.</i></p><p class="bfg-alerta__texto">Você não precisa fazer mais nada agora.</p></div>
<div class="bfg-alerta bfg-alerta--erro" role="alert"><span class="bfg-alerta__rotulo">Erro</span><p class="bfg-alerta__titulo">Não foi possível enviar. <i>Confira o e-mail.</i></p><p class="bfg-alerta__texto">Falta o @ no endereço informado.</p></div>
<div class="bfg-alerta bfg-alerta--alerta" role="status"><span class="bfg-alerta__rotulo">Alerta</span><p class="bfg-alerta__titulo">Falta um campo. <i>O nome do contato.</i></p><p class="bfg-alerta__texto">Sem ele, não dá para preparar a conversa.</p></div>
<div class="bfg-alerta bfg-alerta--info" role="status"><span class="bfg-alerta__rotulo">Informação</span><p class="bfg-alerta__titulo">O arquivo está pronto. <i>Baixe quando quiser.</i></p><p class="bfg-alerta__texto">Ele fica disponível nesta página.</p></div>
```

```css
.bfg-alerta{--cor:var(--info);display:grid;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--branco-50);color:var(--azul-noite-900);border:var(--linha-width) solid var(--cor);border-radius:var(--radius)}
.bfg-alerta__rotulo{font:400 12px/1 var(--font-dados);text-transform:uppercase;letter-spacing:.06em;color:var(--cor)}
.bfg-alerta__titulo{font:700 24px/1.15 var(--font-display);letter-spacing:-.02em;margin:0}
.bfg-alerta__texto{font:400 16px/1.5 var(--font-texto);margin:0}
.bfg-alerta--sucesso{--cor:var(--sucesso)}
.bfg-alerta--erro{--cor:var(--erro)}
.bfg-alerta--alerta{--cor:var(--alerta)}
.bfg-alerta--info{--cor:var(--info)}
```

### Campo de formulário

Rótulo em mono caixa-alta, caixa com filete de 1px e fundo transparente (texto sobre o fundo claro, par aprovado). O foco e o hover usam a cor do texto; o erro, a semântica de erro.

- **Estados:** Padrão, Hover, Foco (pressionado), Desabilitado
- **Validação:** Erro

```html
<div class="bfg-campo"><label class="bfg-campo__rotulo" for="c">E-mail</label><input class="bfg-campo__entrada" id="c" type="email" placeholder="seu@email.com.br" value="" /><p class="bfg-campo__ajuda">Você recebe a resposta por e-mail.</p></div>
```

```css
.bfg-campo{display:grid;gap:var(--space-sm);max-width:360px;color:var(--azul-noite-900)}
.bfg-campo__rotulo{font:400 12px/1 var(--font-dados);text-transform:uppercase;letter-spacing:.06em}
.bfg-campo__entrada{font:400 17px/1.4 var(--font-texto);color:var(--azul-noite-900);background:transparent;padding:var(--space-md);border:var(--linha-width) solid var(--azul-noite-900);border-radius:var(--radius);width:100%}
.bfg-campo__entrada::placeholder{color:var(--azul-noite-900);opacity:1}
.bfg-campo__entrada:hover,.bfg-campo.is-hover .bfg-campo__entrada{border-color:var(--azul-noite-900)}
.bfg-campo__entrada:focus,.bfg-campo.is-foco .bfg-campo__entrada{outline:2px solid var(--azul-noite-900);outline-offset:2px;border-color:var(--azul-noite-900)}
.bfg-campo__ajuda{font:400 14px/1.4 var(--font-texto);margin:0}
.bfg-campo.is-erro .bfg-campo__entrada,.bfg-campo__entrada[aria-invalid=true]{border-color:var(--erro);border-width:2px}
.bfg-campo.is-erro .bfg-campo__ajuda{color:var(--erro)}
.bfg-campo__entrada:disabled,.bfg-campo.is-disabled .bfg-campo__entrada{background:var(--cinza-100);border-style:dashed;cursor:not-allowed}
```

### Tabela simples

Só filetes horizontais de 1px, cabeçalho em mono caixa-alta. Linha em hover vira apoio claro, linha selecionada vira o fundo escuro. Os dados do exemplo são o mapa de pontos de contato do cliente.

- **Estados da linha (de cima para baixo):** Padrão · Hover · Pressionada · Desabilitada

```html
<table class="bfg-tabela"><thead><tr><th>Canal</th><th>Usa?</th><th>Fonte</th></tr></thead><tbody><tr class=""><td>LinkedIn (página + executivos)</td><td>sim</td><td>Tom e Voz, Use Case Maps</td></tr><tr class=""><td>Instagram / Facebook</td><td>sim</td><td>Kickoff</td></tr><tr class=""><td>Google Ads (Search e Display)</td><td>sim</td><td>Kickoff</td></tr><tr class=""><td>E-mail marketing (RD Station)</td><td>sim</td><td>padrão de banner 757×300 já aprovado</td></tr></tbody></table>
```

```css
.bfg-tabela{width:100%;border-collapse:collapse;color:var(--azul-noite-900);font:400 17px/1.4 var(--font-texto)}
.bfg-tabela th{font:400 12px/1 var(--font-dados);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:var(--space-md) var(--space-md) var(--space-md) 0;border-top:var(--linha-width) solid var(--cinza-100)}
.bfg-tabela td{padding:var(--space-md) var(--space-md) var(--space-md) 0;border-top:var(--linha-width) solid var(--cinza-100)}
.bfg-tabela tr:last-child td{border-bottom:var(--linha-width) solid var(--cinza-100)}
.bfg-tabela tbody tr:hover,.bfg-tabela tr.is-hover{background:var(--cinza-100)}
.bfg-tabela tbody tr[aria-selected=true],.bfg-tabela tr.is-active{background:var(--azul-noite-900);color:var(--branco-50)}
.bfg-tabela tr[aria-disabled=true],.bfg-tabela tr.is-disabled{text-decoration:line-through}
.bfg-tabela td:first-child,.bfg-tabela th:first-child{padding-left:var(--space-md)}
.bfg-tabela th,.bfg-tabela td{overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:640px){.bfg-tabela{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:inset -12px 0 8px -10px color-mix(in srgb,currentColor 30%,transparent)}.bfg-tabela th,.bfg-tabela td{white-space:nowrap}}
```

### Pares de texto e fundo usados

- branco sobre verde-score-700: 5,27:1 (pares_aprovados)
- branco sobre azul-noite: 16,83:1 (pares_aprovados)
- branco sobre azul-noite-800: 12,99:1 (pares_aprovados)
- branco sobre azul-noite-700: 9,30:1 (pares_aprovados)
- azul-noite sobre branco: 16,83:1 (pares_aprovados)
- azul-noite sobre superficie: 15,48:1 (pares_aprovados)
- azul-noite sobre cinza: 12,87:1 (pares_aprovados)
- sucesso sobre branco: 5,27:1 (pares_aprovados)
- erro sobre branco: 6,54:1 (pares_aprovados)
- alerta sobre branco: 5,54:1 (pares_aprovados)
- info sobre branco: 6,37:1 (pares_aprovados)

## Downloads

- [tokens.css](assets/07-para-ia/tokens.css)
- [tokens.json](assets/07-para-ia/tokens.json)
- [globals-shadcn.css](assets/07-para-ia/globals-shadcn.css)
- [componentes.css](componentes.css)

---
Outras páginas: [Início](index.md) · [Comece aqui](comece-aqui.md) · [Logo](logo.md) · [Cores](cores.md) · [Tipografia](tipografia.md) · [Voz](voz.md) · [Imagem](imagem.md) · [Rostos da marca](rostos.md) · [Componentes](componentes.md) · [Assets da marca](assets-marca.md) · [Para IA](para-ia.md) · [Downloads](downloads.md) · [Perguntas frequentes](faq.md) · [Versão e histórico](versao.md) · [Pendências](pendencias.md) · [llms.txt](llms.txt)