Pular para o conteúdo

Beat · Design System

Design System do Beat

O losango em gradiente é o símbolo; o wordmark é sólido, com Sales em peso leve e Meet em peso forte. Este guia documenta o logo, a cor, a tipografia e os componentes do produto.

Cor

Paleta

O roxo 500 é a cor da marca. Sobre fundo escuro ele não alcança 4.5:1 — por isso texto e links em dark usam o 300.

Escala do roxo

  • 50

    #F4EDFF

  • 100

    #E7DBFF

  • 200

    #CFB6FF

  • 300

    #B48EFF

  • 400

    #9A5CFE

  • 500 · marca

    #8126FD

  • 600

    #6E15E0

  • 700

    #5A10B8

  • 800

    #470D91

  • 900

    #350A6B

Gradiente da assinatura

#8723F9 → #D301C7 · 135°

Exclusivo do símbolo e de superfícies de destaque. Nunca sob texto corrido — o contraste varia ao longo do eixo.

Superfícies e texto do produto

bg-canvas

#F7F7F7

Fundo da aplicação, atrás dos cards.

bg-canvas-sunken

#F0F0F3

Faixa rebaixada dentro do card: cabeçalho de tabela, trilho.

bg-white

#FFFFFF

Cards, tabelas e modais.

bg-brand-25

#FAF7FD

Wash roxo de hover e de linha selecionada.

text-fg

#212121

Títulos e corpo de texto.

text-fg-soft

#3C3C44

Texto forte de apoio: item de menu, rótulo de aba.

text-fg-muted

#60646C

Rótulos, descrição e texto secundário.

text-fg-subtle

#9A9AA4

Metadado, ícone apagado, placeholder.

text-fg-faint

#C0C0C8

O passo mais fraco: ícone de estado vazio, trilho de progresso.

border-line

#ECECF0

Borda padrão de card, input e tabela.

border-line-strong

#D8D8DE

Borda que precisa se destacar: input em repouso, divisor forte.

border-line-soft

#F0F0F3

Divisória entre linhas de uma lista (`divide-line-soft`).

Contraste verificado

Razão de contraste entre pares de cor, medida pelo padrão WCAG 2.1
Par Razão Nível Uso
branco / ink-900 19.73:1 AAA Títulos no tema escuro.
brand-300 / ink-900 7.75:1 AAA Texto e links no tema escuro.
brand-500 / ink-900 3.41:1 AA Large Só áreas grandes — não use em texto corrido.
text-fg / bg-canvas 15.03:1 AAA Corpo de texto do produto.
text-fg-soft / bg-canvas 10.20:1 AAA Item de menu e rótulo de aba.
text-fg-muted / bg-white 5.94:1 AA Rótulos e apoio.
text-fg-subtle / bg-canvas 2.60:1 Reprovado Metadado e placeholder — não use sozinho.
text-fg-faint / bg-canvas 1.69:1 Reprovado Só decorativo: ícone vazio, trilho.
branco / brand-500 5.79:1 AA Texto do botão primário.
brand-700 / brand-50 8.36:1 AAA Badge e botão de texto.

Tipografia

Lato

Uma família só, quatro pesos. O contraste entre 300 e 900 carrega a hierarquia — não recorra a outra fonte.

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 áéíóú çãõ

300

Light

Texto de apoio em áreas amplas.

400

Regular

Corpo de texto, padrão.

700

Bold

Rótulos, botões e ênfase.

900

Black

Títulos de seção.

Escala

display

Melhore suas reuniões

48px / 1.1
h1

Dashboard indicadores

32px / 1.2
h2

Análise da ligação

24px / 1.3
h3

Biblioteca de competências

20px / 1.4
body

Selecione uma empresa e clique em Filtrar.

16px / 1.6
small

Total de empresas cadastradas: 210

14px / 1.6
caption

MÉDIA TRIMESTRAL

12px / 1.5

Componentes

Biblioteca

O produto roda em tema claro. Os exemplos abaixo aparecem no fundo real da aplicação (#f7f7f7).

Estes componentes são reutilizáveis e vivem em templates/components/. Antes de construir um componente de frontend, reuse daqui — params no README.md da pasta. Uso: {% include "components/button.html" with label="Salvar" variant="primary" %}

Botões components/button.html

Altura mínima de 44 px em toque. Uma única ação primária por tela — o gradiente fica reservado a chamadas de conversão.

Badges components/badge.html

Ativa Suspensa Erro Beta Encerrada

Tooltip de informação components/info_tooltip.html

Explica um número sem empurrar o layout. Fica ao lado do valor que justifica, nunca do rótulo. Abre no hover, no foco de teclado e no clique; fecha no Escape.

5,0 O vendedor chamou a lead pelo nome em dois momentos: 'Boa tarde, Júcia' (seg 87) e 'tá, Juci?' (seg 131). 3,0 A dor foi explorada, mas o orçamento não foi obtido — a lead recusou informar a meta. 0,0 Não há evidência do comportamento no transcript.

Campo somente-leitura components/read_field.html

Perfil do vendedor
Hunter
Playbook de vendas
Playbook Consultoria DNA
Estágio da venda
Diagnóstico
Conta / cliente
Prista Fórmulas
Origem
Upload manual
Analisada em
24/07/2026 16:41

Exibição de dado que o usuário não edita (linha expandida da call). O markup é <dl>/<dt>/<dd>, nunca <input readonly>: um campo que parece editável e não é frustra o usuário e engana o leitor de tela. Sem valor, o texto de empty aparece em cinza.

Duração em minutos components/duration_input.html

O usuário raciocina em minutos, o banco guarda segundos — a conversão é do backend, e o campo mostra o resultado em segundos enquanto se digita para não haver dúvida sobre o que foi salvo.

Metadados de item components/meta_item.html

Prista Fórmulas + DNA de Vendas | Google Meet
Participante: Danilo Franca Data: 24/07/2026 Duração: 01:10:39 Nota: 4,3 / 5

Linha de lista densa, calibrada contra a referência v1 (medida em pixels): título text-sm bold em brand-600, metadados text-xs, avatar 32px, linha de ~78px. O que separa rótulo de valor é o contraste (bold escuro × regular claro), não o tamanho — aumentar a fonte só incha a linha.

Toggle components/toggle.html

Ativa Inativa Desabilitado

Ação imediata (ex.: ativar/inativar numa tabela, via attrs com hx-post). Em formulários, use checkbox.html.

Select e abas components/select.html · tabs.html · sub_tabs.html · subtabs_inline.html

  • Whisper local
  • AssemblyAI
Dashboard Biblioteca Lançamentos

Painel ativo:

Dropdown custom (nunca o nativo do SO). Em filtro de tabela use submit_on_change=True. A pílula sub_tabs é para sub-seções por querystring (?tab=) dentro de uma aba da empresa; subtabs_inline troca o painel no cliente (evento subtab + replaceState) quando o dado das abas já veio na página.

Período components/date_range.html

Único jeito de filtrar por data no produto: um campo dd/mm/aaaa ~ dd/mm/aaaa, calendário de dois meses e atalhos (Hoje, Ontem, 7/30 dias) no pé. Submete dois hidden em ISO — o contrato da view não muda. Aceita digitação e nunca usa o date picker nativo do SO (que muda de aparência a cada navegador).

Campos

Nome fantasia, como aparece no contrato.

Informe um e-mail completo, como nome@empresa.com.

Label sempre visível — nunca só placeholder. O erro fica abaixo do campo, com ícone, e diz como corrigir.

Cards de indicador

Média de Ligações

295

Total de Ligações

1.474

Média de Competências

4,7

Dias sem Acesso

2

Estado vazio components/empty_state.html

Nenhuma empresa

Ajuste a busca ou cadastre a primeira empresa.

Nova empresa

Todo estado vazio diz o que aconteceu e oferece a próxima ação. Nunca deixe a área simplesmente em branco.