Design system

Biblioteca completa do CRM, com todos os estados, nos temas claro e escuro.

Templates de telaTemplate de login
Tema claro

Cores · superfícies e texto

--bg-page
--surface-card
--surface-sunken
--surface-muted
--surface-hover
--surface-selected
--border-1
--border-2
--fg-1
--fg-2
--fg-3
--text-link

Cores · marca

--primary
--primary-hover
--primary-bright
--primary-soft
--primary-soft-hover
--primary-soft-fg

Cores · feedback e notificação

--success
--success-soft
--warning
--warning-soft
--danger
--danger-soft
--notify

Cores · status do lead

Aa
--status-new-bg--status-new-fg
Aa
--status-qualifying-bg--status-qualifying-fg
Aa
--status-scheduled-bg--status-scheduled-fg
Aa
--status-confirmed-bg--status-confirmed-fg
Aa
--status-done-bg--status-done-fg
Aa
--status-noshow-bg--status-noshow-fg
Aa
--status-cancelled-bg--status-cancelled-fg

Cores · gráficos

--chart-1
--chart-2
--chart-3
--chart-4
--chart-5

Cores · avatares

Aa
--avatar-1-bg
Aa
--avatar-2-bg
Aa
--avatar-3-bg
Aa
--avatar-4-bg
Aa
--avatar-5-bg
Aa
--avatar-6-bg

Gradientes e padrão

--gradient-ai
--gradient-progress
--gradient-warn-progress
--gradient-ok-progress
--gradient-display
--pattern-hatch

Tipografia

Receita--type-display
Agenda da semana--type-h1
Funil de vendas--type-h2
Missões de hoje--type-h3
Ritmo 8% acima da semana passada.--type-body
Atualizado há 3 minutos--type-small
Legenda e metadados--type-caption
R$ 184,6k--type-metric
ID 0x4a2f · 09:30--type-mono

Espaçamento

--space-0
--space-1
--space-1-5
--space-2
--space-2-5
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16

Raios

--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-2xl
--radius-3xl
--radius-control
--radius-card
--radius-pill

Sombras

--shadow-xs
--shadow-card
--shadow-pop
--shadow-modal
--shadow-primary
--shadow-knob

Button

padrãohoverpressionadofocodesabilitadoprimary
bright
secondary
soft
ghost
danger
success
destructive
sm
md
lg
ícone final
destrutivo com ícone
carregando
carregando primário
largura total

IconButton

padrãohoverpressionadofocodesabilitadodefault
white
ghost
primary
ai
tamanho 32
tamanho 40
tamanho 44
com badge
seta, branco 32

Input

sm
md
lg
com ícone
vazio
preenchido
foco
erro
Informe um e-mail válido.
desabilitado

Textarea

vazio
preenchido
foco
erro
Campo obrigatório.
desabilitado

Label

simples
com dica
com campo

Select

sm, selecionado
md, selecionado
vazio
foco
erro
desabilitado

Switch

desligado
ligado
foco
desabilitado, desligado
desabilitado, ligado

Checkbox

desmarcado
marcado
indeterminado
foco
desabilitado, desmarcado
desabilitado, marcado

Icon

layout-dashboard
inbox
users
calendar-days
smartphone
sparkles
search
bell
plus
kanban-square
user-round
phone
calendar-clock
clock
external-link
filter
chevron-down
send
circle-check
arrow-up-right
size 14
size 16 (padrão)
size 24

Badge

Retornoneutral
Novoprimary
IAsoft, com ícone
Confirmadosuccess
Humanowarning, com ícone
Errodanger
Tagoutline
7notify

TrendBadge

+12%positivo
-4%negativo

StatusPill

Novo contatostatus="novo_contato" md
Qualificandostatus="qualificando" md
Agendadostatus="agendado" md
Confirmadostatus="confirmado" md
Finalizadostatus="finalizado" md
No-showstatus="no_show" md
Canceladostatus="cancelado" md
Novo contatostatus="novo_contato" sm
Qualificandostatus="qualificando" sm
Agendadostatus="agendado" sm
Confirmadostatus="confirmado" sm
Finalizadostatus="finalizado" sm
No-showstatus="no_show" sm
Canceladostatus="cancelado" sm

Card

Lembretes

Padrão, com ação

Conteúdo do card.

Agendamentos

Com botão de ação

Botão ↗ redondo cinza no canto superior direito.

Hover forçado

Botão ↗ no estado hover

Conteúdo do card.

Ação customizada

Novo

A prop action substitui o botão ↗.

Card tinted, sem sombra, padding 14.

Sem ação, sem subtítulo

Cabeçalho só com título.

Avatar

MLsize 24
RCsize 36 (padrão)
JPsize 44
ASiniciais, sem src
Bruno Limasrc inválido, cai nas iniciais
CDring
ARBMCFDRENFL
paleta 1 a 6

AvatarStack

ABCD+2padrão (max 4, com +N)
ALBMsem overflow
ABC+1size 30, max 3

Table

NomeTelefoneStatus
Mariana Lopes+55 (11) 98765-4321Agendado
Rafael Costa+55 (21) 99812-0045Finalizado
Julia Prado+55 (31) 97401-2233No-show
padrão
NomeTelefoneStatus
Mariana Lopes+55 (11) 98765-4321Agendado
Rafael Costa+55 (21) 99812-0045Finalizado
Julia Prado+55 (31) 97401-2233No-show
dense, com onRowClick e selectedRow
NomeTelefoneStatus
Mariana Lopes+55 (11) 98765-4321Agendado
Rafael Costa+55 (21) 99812-0045Finalizado
Julia Prado+55 (31) 97401-2233No-show
hover forçado (linhas com surface-muted)
NomeTelefoneStatus
Nenhum registro
vazio (default)
NomeTelefoneStatus
Nenhum lead nesse filtro
vazio com empty personalizado
NomeTelefoneStatus
carregando (loading)

Separator

horizontal
HojeSemana
vertical

Skeleton

padrão (100% x 14)
width 60%, height 24
width 120, height 28
radius 16

ProgressBar

42
Finalizados
132
Em andamento
primary, 42 de 132
60%
Atenção
warning
85%
Confirmados
success
0
Sem avanço
0%
100%
Concluído
100%
sem rótulos, height 12

ScrollArea

  • Contato 1
  • Contato 2
  • Contato 3
  • Contato 4
  • Contato 5
  • Contato 6
  • Contato 7
  • Contato 8
  • Contato 9
  • Contato 10
  • Contato 11
  • Contato 12
height 160

Dialog

Dialog · título, descrição, conteúdo e footer

Dialog sem footer

Dialog · só título e conteúdo

Sheet

Sheet · lateral direita e esquerda

Popover

Popover · alinhado no início e no fim

DropdownMenu

DropdownMenu · ícones, separador e item danger

Tooltip

Tooltip · topo e base

Toast

Agente ativado
A IA volta a responder os leads.
Falha ao enviar
Tente novamente.
Nova conversa
Um lead aguarda atendimento humano.
Lead salvo
Toast · estático, sem portal

StatCard

tons primary, success e warning; com e sem trend (positivo e negativo); com e sem hint

Novos contatos
120+12%
Comparecimento
87%+3%
52 de 60 no período
No-show
9%-2%
Abaixo da meta de 10%

ConnectionBadge

connected (ping), connecting (âmbar pulsando), disconnected

WhatsApp conectadoConectando…WhatsApp desconectado

AgentToggle

ligado (interativo), desligado, pending (desabilitado com spinner)

Agente ativo
Respondendo no WhatsApp
Agente pausado
As mensagens só chegam no Inbox.
Agente pausado
As mensagens só chegam no Inbox.

LeadCard

dono IA e Humano; com e sem agendamento; com e sem tags; dragging; hover forçado

ML
Mariana Lopes
+55 (11) 98765-4321
12/06 às 14h · AvaliaçãoAgendado
Último contato: 1 junIARetornoConvênio
RC
Rafael Costa
+55 (11) 91234-5678
Sem agendamentoQualificando
Humano
JP
Juliana Prado
+55 (21) 99876-5432
13/06 às 09h · RetornoConfirmado
IA
CM
Caio Mendes
+55 (11) 97777-1234
Sem agendamentoNovo contato
IARetorno

KanbanColumn

com cards, vazia (Nenhum lead) e isOver (arrastando por cima)

Agendado2
ML
Mariana Lopes
+55 (11) 98765-4321
12/06 às 14h · AvaliaçãoAgendado
IA
CM
Caio Mendes
+55 (11) 97777-1234
Sem agendamentoAgendado
Humano
Qualificando0

Nenhum lead

Confirmado1
JP
Juliana Prado
+55 (21) 99876-5432
Sem agendamentoConfirmado
IA

ReminderCard

com item destacado, progresso, avatares e lista vazia

Lembretes
Hoje

Nenhum lembrete

ScheduleEvent

card com location e status; card sem location e sem status; chip confirmado e chip sem status

ML
Mariana Lopes
Avaliação inicial
12/06 às 14hUnidade Centro · Sala 2
confirmado
RC
Rafael Costa
Retorno
13/06 às 10h
Rafael CostaRetorno10:00 às 10:30Presencial
Juliana PradoAvaliação14:00 às 15:00

ChatBubble

inbound, outbound e outbound fromAI

Oi! Queria marcar uma avaliação.
09:12
IA
Claro! Tenho quinta às 14h ou 16h.
09:12
Confirmo para quinta às 14h, pode ser?
09:14

LineChart

passe o mouse ou use as setas com o foco; índice ativo com tooltip

0%25%50%75%100%JanFevMarAbrMaiJunJulAgo
72 agendamentos
Tema escuro

Cores · superfícies e texto

--bg-page
--surface-card
--surface-sunken
--surface-muted
--surface-hover
--surface-selected
--border-1
--border-2
--fg-1
--fg-2
--fg-3
--text-link

Cores · marca

--primary
--primary-hover
--primary-bright
--primary-soft
--primary-soft-hover
--primary-soft-fg

Cores · feedback e notificação

--success
--success-soft
--warning
--warning-soft
--danger
--danger-soft
--notify

Cores · status do lead

Aa
--status-new-bg--status-new-fg
Aa
--status-qualifying-bg--status-qualifying-fg
Aa
--status-scheduled-bg--status-scheduled-fg
Aa
--status-confirmed-bg--status-confirmed-fg
Aa
--status-done-bg--status-done-fg
Aa
--status-noshow-bg--status-noshow-fg
Aa
--status-cancelled-bg--status-cancelled-fg

Cores · gráficos

--chart-1
--chart-2
--chart-3
--chart-4
--chart-5

Cores · avatares

Aa
--avatar-1-bg
Aa
--avatar-2-bg
Aa
--avatar-3-bg
Aa
--avatar-4-bg
Aa
--avatar-5-bg
Aa
--avatar-6-bg

Gradientes e padrão

--gradient-ai
--gradient-progress
--gradient-warn-progress
--gradient-ok-progress
--gradient-display
--pattern-hatch

Tipografia

Receita--type-display
Agenda da semana--type-h1
Funil de vendas--type-h2
Missões de hoje--type-h3
Ritmo 8% acima da semana passada.--type-body
Atualizado há 3 minutos--type-small
Legenda e metadados--type-caption
R$ 184,6k--type-metric
ID 0x4a2f · 09:30--type-mono

Espaçamento

--space-0
--space-1
--space-1-5
--space-2
--space-2-5
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16

Raios

--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-2xl
--radius-3xl
--radius-control
--radius-card
--radius-pill

Sombras

--shadow-xs
--shadow-card
--shadow-pop
--shadow-modal
--shadow-primary
--shadow-knob

Button

padrãohoverpressionadofocodesabilitadoprimary
bright
secondary
soft
ghost
danger
success
destructive
sm
md
lg
ícone final
destrutivo com ícone
carregando
carregando primário
largura total

IconButton

padrãohoverpressionadofocodesabilitadodefault
white
ghost
primary
ai
tamanho 32
tamanho 40
tamanho 44
com badge
seta, branco 32

Input

sm
md
lg
com ícone
vazio
preenchido
foco
erro
Informe um e-mail válido.
desabilitado

Textarea

vazio
preenchido
foco
erro
Campo obrigatório.
desabilitado

Label

simples
com dica
com campo

Select

sm, selecionado
md, selecionado
vazio
foco
erro
desabilitado

Switch

desligado
ligado
foco
desabilitado, desligado
desabilitado, ligado

Checkbox

desmarcado
marcado
indeterminado
foco
desabilitado, desmarcado
desabilitado, marcado

Icon

layout-dashboard
inbox
users
calendar-days
smartphone
sparkles
search
bell
plus
kanban-square
user-round
phone
calendar-clock
clock
external-link
filter
chevron-down
send
circle-check
arrow-up-right
size 14
size 16 (padrão)
size 24

Badge

Retornoneutral
Novoprimary
IAsoft, com ícone
Confirmadosuccess
Humanowarning, com ícone
Errodanger
Tagoutline
7notify

TrendBadge

+12%positivo
-4%negativo

StatusPill

Novo contatostatus="novo_contato" md
Qualificandostatus="qualificando" md
Agendadostatus="agendado" md
Confirmadostatus="confirmado" md
Finalizadostatus="finalizado" md
No-showstatus="no_show" md
Canceladostatus="cancelado" md
Novo contatostatus="novo_contato" sm
Qualificandostatus="qualificando" sm
Agendadostatus="agendado" sm
Confirmadostatus="confirmado" sm
Finalizadostatus="finalizado" sm
No-showstatus="no_show" sm
Canceladostatus="cancelado" sm

Card

Lembretes

Padrão, com ação

Conteúdo do card.

Agendamentos

Com botão de ação

Botão ↗ redondo cinza no canto superior direito.

Hover forçado

Botão ↗ no estado hover

Conteúdo do card.

Ação customizada

Novo

A prop action substitui o botão ↗.

Card tinted, sem sombra, padding 14.

Sem ação, sem subtítulo

Cabeçalho só com título.

Avatar

MLsize 24
RCsize 36 (padrão)
JPsize 44
ASiniciais, sem src
Bruno Limasrc inválido, cai nas iniciais
CDring
ARBMCFDRENFL
paleta 1 a 6

AvatarStack

ABCD+2padrão (max 4, com +N)
ALBMsem overflow
ABC+1size 30, max 3

Table

NomeTelefoneStatus
Mariana Lopes+55 (11) 98765-4321Agendado
Rafael Costa+55 (21) 99812-0045Finalizado
Julia Prado+55 (31) 97401-2233No-show
padrão
NomeTelefoneStatus
Mariana Lopes+55 (11) 98765-4321Agendado
Rafael Costa+55 (21) 99812-0045Finalizado
Julia Prado+55 (31) 97401-2233No-show
dense, com onRowClick e selectedRow
NomeTelefoneStatus
Mariana Lopes+55 (11) 98765-4321Agendado
Rafael Costa+55 (21) 99812-0045Finalizado
Julia Prado+55 (31) 97401-2233No-show
hover forçado (linhas com surface-muted)
NomeTelefoneStatus
Nenhum registro
vazio (default)
NomeTelefoneStatus
Nenhum lead nesse filtro
vazio com empty personalizado
NomeTelefoneStatus
carregando (loading)

Separator

horizontal
HojeSemana
vertical

Skeleton

padrão (100% x 14)
width 60%, height 24
width 120, height 28
radius 16

ProgressBar

42
Finalizados
132
Em andamento
primary, 42 de 132
60%
Atenção
warning
85%
Confirmados
success
0
Sem avanço
0%
100%
Concluído
100%
sem rótulos, height 12

ScrollArea

  • Contato 1
  • Contato 2
  • Contato 3
  • Contato 4
  • Contato 5
  • Contato 6
  • Contato 7
  • Contato 8
  • Contato 9
  • Contato 10
  • Contato 11
  • Contato 12
height 160

Dialog

Dialog · título, descrição, conteúdo e footer

Dialog sem footer

Dialog · só título e conteúdo

Sheet

Sheet · lateral direita e esquerda

Popover

Popover · alinhado no início e no fim

DropdownMenu

DropdownMenu · ícones, separador e item danger

Tooltip

Tooltip · topo e base

Toast

Agente ativado
A IA volta a responder os leads.
Falha ao enviar
Tente novamente.
Nova conversa
Um lead aguarda atendimento humano.
Lead salvo
Toast · estático, sem portal

TopNav

TopNav: item ativo, notificações, sem notificações, right customizado

Caribe Group
Caribe Group
Caribe Group
Unidade Centro

Tabs: pill

Tabs variant=pill: aba ativa, com ícone, com contador, hover

Tabs: underline

Tabs variant=underline: sub-abas de seção, com contador

Calendar

Calendar: dia selecionado, dias com evento, sem seleção, mês de 31 e de 28 dias

Maio 2025
Seg
Ter
Qua
Qui
Sex
Sáb
Dom
Fevereiro 2025
Seg
Ter
Qua
Qui
Sex
Sáb
Dom
Fevereiro 2026
Seg
Ter
Qua
Qui
Sex
Sáb
Dom

Pagination

Pagination: primeira, meio (interativa), última página; pontas com botão desabilitado

1/5
3/5
5/5

StatCard

tons primary, success e warning; com e sem trend (positivo e negativo); com e sem hint

Novos contatos
120+12%
Comparecimento
87%+3%
52 de 60 no período
No-show
9%-2%
Abaixo da meta de 10%

ConnectionBadge

connected (ping), connecting (âmbar pulsando), disconnected

WhatsApp conectadoConectando…WhatsApp desconectado

AgentToggle

ligado (interativo), desligado, pending (desabilitado com spinner)

Agente ativo
Respondendo no WhatsApp
Agente pausado
As mensagens só chegam no Inbox.
Agente pausado
As mensagens só chegam no Inbox.

LeadCard

dono IA e Humano; com e sem agendamento; com e sem tags; dragging; hover forçado

ML
Mariana Lopes
+55 (11) 98765-4321
12/06 às 14h · AvaliaçãoAgendado
Último contato: 1 junIARetornoConvênio
RC
Rafael Costa
+55 (11) 91234-5678
Sem agendamentoQualificando
Humano
JP
Juliana Prado
+55 (21) 99876-5432
13/06 às 09h · RetornoConfirmado
IA
CM
Caio Mendes
+55 (11) 97777-1234
Sem agendamentoNovo contato
IARetorno

KanbanColumn

com cards, vazia (Nenhum lead) e isOver (arrastando por cima)

Agendado2
ML
Mariana Lopes
+55 (11) 98765-4321
12/06 às 14h · AvaliaçãoAgendado
IA
CM
Caio Mendes
+55 (11) 97777-1234
Sem agendamentoAgendado
Humano
Qualificando0

Nenhum lead

Confirmado1
JP
Juliana Prado
+55 (21) 99876-5432
Sem agendamentoConfirmado
IA

ReminderCard

com item destacado, progresso, avatares e lista vazia

Lembretes
Hoje

Nenhum lembrete

ScheduleEvent

card com location e status; card sem location e sem status; chip confirmado e chip sem status

ML
Mariana Lopes
Avaliação inicial
12/06 às 14hUnidade Centro · Sala 2
confirmado
RC
Rafael Costa
Retorno
13/06 às 10h
Rafael CostaRetorno10:00 às 10:30Presencial
Juliana PradoAvaliação14:00 às 15:00

ChatBubble

inbound, outbound e outbound fromAI

Oi! Queria marcar uma avaliação.
09:12
IA
Claro! Tenho quinta às 14h ou 16h.
09:12
Confirmo para quinta às 14h, pode ser?
09:14

LineChart

passe o mouse ou use as setas com o foco; índice ativo com tooltip

0%25%50%75%100%JanFevMarAbrMaiJunJulAgo
72 agendamentos