Pular para o conteúdo
Versão .md Baixar tudo

Componentes

Copia esta página em Markdown, para colar no ChatGPT, no Claude ou no Gemini.

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

1pendência nesta página

O essencial

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

Botões

Ação principal em cor de ação, secundária em contorno.

Fazemos
exemplo
Rótulo na fonte de texto
Nunca fazemos
exemplo
Rótulo em mono caixa-alta
O rótulo do botão é texto da família de texto; mono caixa-alta é só para rótulos e metadados.
exemplo

Agilidade técnica

Cada decisão sem dado preciso é uma aposta.

Card

Filete de 1px e fundo que muda no hover.

Fazemos
exemplo
Filete, canto de 16px, sem sombra
Nunca fazemos
exemplo
Com sombra
O card da marca tem canto de 16px, filete de 1px e nenhuma sombra; no hover ele muda de fundo, não sobe.

Badge

exemplo
API e WebPré-pago e pós-pago

Alerta

exemplo
Sucesso

Mensagem enviada. A resposta chega por e-mail.

Você não precisa fazer mais nada agora.

Campo de formulário

exemplo

Você recebe a resposta por e-mail.

Tabela simples

exemplo
CanalUsa?Fonte
LinkedIn (página + executivos)simTom e Voz, Use Case Maps
Instagram / FacebooksimKickoff
Google Ads (Search e Display)simKickoff
E-mail marketing (RD Station)simpadrã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
exemplo
Uma barra por peça

Parceiro, não fornecedor

Nunca fazemos
exemplo
Duas barras na mesma peça

Parceiro, não fornecedor

Segundo bloco da peça

Máximo 1 por peça além do logotipo: a barra perde o valor de indicador se aparece duas vezes.
exemplo
Sob o título-chave

Parceiro, não fornecedor

Divisor de seção
Indicador de progresso

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
exemplo
Contexto leve, resultado forte

Do acessoao resultado

Nunca fazemos
exemplo
Duas linhas do mesmo peso e da mesma cor

Do acessoao resultado

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
exemplo
Uma palavra-chave em destaque

Liberdade contratual

Nunca fazemos
exemplo
Destaque em excesso: várias palavras ou o parágrafo inteiro

Liberdade contratual

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
exemplo
Selo em pílula, par aprovado
Para empresas Uso corporativo, contratação por CNPJ
Nunca fazemos
exemplo
Par de cor proibido
Para empresas
Verde Claro sobre Branco tem contraste 1,71:1; o selo só usa pares aprovados.

Movimento

Duração, curva e regras de movimento. Este cliente ainda não definiu tokens.motion: valem os padrões do template.

Valores: padrão do template
--mov-dur-fast Duração · padrão do template
120ms
--mov-dur-base Duração · padrão do template
250ms
--mov-dur-slow Duração · padrão do template
400ms
--mov-ease-standard Curva · padrão do template
cubic-bezier(.2,0,0,1)
--mov-ease-enter Curva · padrão do template
cubic-bezier(0,0,.2,1)
--mov-ease-exit Curva · padrão do template
cubic-bezier(.4,0,1,1)
--mov-stagger Cascata · padrão do template
40ms Atraso entre irmãos de um mesmo grupo.
--mov-dist Distância · padrão do template
8px 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.
  • Com prefers-reduced-motion: reduce não há transição, cascata nem contador: todo o conteúdo aparece parado.
/* 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écnicaCódigos, contrastes e medidas

Barra de Score: código

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.

<!-- 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

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).

<!-- 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

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.

<!-- 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

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

<!-- 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, sem componente

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

Botões: estados e código

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 (requer tokens.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: estados e código

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
API e Web
apoio
Pré-pago e pós-pago
contorno
API e Web
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 (requer tokens.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: estados e código

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

Estados
Padrão
API e Web

Dado certo, decisão segura

Atendimento consultivo de quem entende de crédito, e não de ticket.

Hover
API e Web

Dado certo, decisão segura

Atendimento consultivo de quem entende de crédito, e não de ticket.

Pressionado
API e Web

Dado certo, decisão segura

Atendimento consultivo de quem entende de crédito, e não de ticket.

Desabilitado
API e Web

Dado certo, decisão segura

Atendimento consultivo de quem entende de crédito, e não de ticket.

<!-- 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 (requer tokens.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: estados e código

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
Sucesso

Mensagem enviada. A resposta chega por e-mail.

Você não precisa fazer mais nada agora.

erro
alerta
Alerta

Falta um campo. O nome do contato.

Sem ele, não dá para preparar a conversa.

info
Informação

O arquivo está pronto. Baixe quando quiser.

Ele fica disponível nesta página.

<!-- 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 (requer tokens.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: estados e código

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

Você recebe a resposta por e-mail.

Hover

Você recebe a resposta por e-mail.

Foco (pressionado)

Você recebe a resposta por e-mail.

Desabilitado

Você recebe a resposta por e-mail.

Validação
Erro

Confira o e-mail: falta o ponto e o domínio.

<!-- 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 (requer tokens.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: estados e código

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
CanalUsa?Fonte
LinkedIn (página + executivos)simTom e Voz, Use Case Maps
Instagram / FacebooksimKickoff
Google Ads (Search e Display)simKickoff
E-mail marketing (RD Station)simpadrão de banner 757×300 já aprovado
<!-- 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 (requer tokens.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: 11

TextoFundoContrasteOrigem
brancoverde-score-7005,27:1pares_aprovados
brancoazul-noite16,83:1pares_aprovados
brancoazul-noite-80012,99:1pares_aprovados
brancoazul-noite-7009,30:1pares_aprovados
azul-noitebranco16,83:1pares_aprovados
azul-noitesuperficie15,48:1pares_aprovados
azul-noitecinza12,87:1pares_aprovados
sucessobranco5,27:1pares_aprovados
errobranco6,54:1pares_aprovados
alertabranco5,54:1pares_aprovados
infobranco6,37:1pares_aprovados

Downloads

Variáveis de cor (escalas e semânticas), espaçamento, tipografia e raio, prontas para CSS, Figma e ferramentas de IA.

tokens.csstokens.jsonglobals-shadcn.css componentes.css

Setas para escolher · Enter para abrir · Esc para fechar

Converse com a marca

Perguntar à IA

Perguntas prontas

    Ver o prompt completo 
     
     
     
     
     
    Levar para a IA
     
       
      
    Ao abrir uma IA, o prompt também é copiado. Se o campo vier vazio, cole com Ctrl+V. Sem internet, os botões só copiam. Limite: 1500 caracteres.