Design system Caqui

Tokens, componentes e telas do atendimento, em código, usando os mesmos arquivos do app. UI e UX por Renan Chaves e Douglas Martins. Ver a apresentação.

Nenhum item encontrado.

Seções

Fundamentos

Logo

O logo completo aparece na abertura do app e na barra do desktop. No celular, depois da abertura, ficam só as sementes do orb.

Logo oficial, logo/caqui-02.svg

Sementes, favicon.svg

Cores

Base

Fundo das telas.--color-paper#fff4e9
Faixa de pedido concluído e áreas de creme forte.--color-paper-2#fbe6d3
Superfície de cartões, barra de menu e campos.--color-card#fffbf6
Linhas e contorno de chips e seletores.--color-rule#9b7051

Texto e dinheiro

Texto principal, topo escuro e todo valor em dinheiro.--color-ink#2b0b09
Texto corrido sobre creme.--color-ink-2#3d1f1b
Texto de apoio e itens inativos da barra.--color-muted#5e4a43
Texto sobre accent.--color-accent-ink#2b0b09

Ação

Ação e faixa de pedido em andamento. Texto em cima é sempre ink.--color-accent#f6ac78
Tom claro de hover e item ativo da barra.--color-destaque#fde3cd
Disco do orb, marrom, com raios em color-accent.--color-orb#2b0b09
Anel de foco do teclado.--color-focus#2e79f0

Status

Em andamento--color-accent#f6ac78
Em análise--color-alerta-fundo#fcdcd6
Atrasado--color-status-atraso#f0883e
Concluído--color-paper-2#fbe6d3
Recusado--color-status-recusado#f4a99c

Apoio

Etapa atual do rastreio e atalho principal.--color-ciano#2edff0
Borda de caixinhas e atalhos.--color-ambar#e59f1c
Faixa de demonstração e sublinhado. Nunca como texto sobre creme.--color-azul#2e79f0
Golpe e microfone gravando.--color-alerta#f0462e
Marca e golpe.--color-vermelho#f0462e
Texto da faixa de demonstração.--color-demo-ink#120a05
Fundo de ficha atrasada no chat.--color-atraso-fundo#fce3cf
Véu atrás do chat.--color-veurgb(43 11 9 / 0.45)

Tipografia

R$ 1.250,00

Cai em 18/11/2026

Texto corrido em Proxima Nova, com Montserrat de reserva.

Texto de apoio e fonte da informação

Ícones

Em linha e de uma cor, aplicados por máscara com .icone-pacote.

inicio.svg
carteira.svg
extrato.svg
calculadora.svg
rendimento.svg
Perfil
Ver valores
Conversa
Segurança
Microfone
Enviar
Aplicar
Resgatar
Adicionar
Fechar
Voltar

Movimento

Passe o mouse, toque e use a tecla Tab nos botões acima para ver cada estado. Só opacity e transform são animados, e tudo para com prefers-reduced-motion.

Elemento	Ao passar o mouse	Ao tocar	Tempo
Aplicar e Resgatar	Fundo creme, texto marrom	Abre a orientação na caquIA	180ms
Pergunta sugerida	Fundo `--color-destaque`	Laranja suave, depois `.escolhido`	180ms
Atalho	Fundo `--color-destaque`, borda laranja	Envia a pergunta	120ms
Orb	Escala 1,06	Escala 0,96	180ms
Menu do desktop	Fundo `--color-ink-2`	Item atual em negrito, com o mesmo fundo	180ms
Orb em repouso	Pulso contínuo com `pulso`		2200ms
Mais opções	Texto marrom	Seta gira 180 graus	180ms
Entrada de conteúdo	Animação `entra`: sobe 16px e aparece		Até 420ms
Passagem para uma pessoa	A caquIA avisa, aparece "Chamando Jonas", o topo troca de nome e cor, e Jonas entra na conversa		Cerca de 2s
Resposta da caquIA	Sementes em looping na conversa até a resposta sair		Mínimo de 900ms
Ações importantes	Sementes em looping antes de concluir		1s

Componentes

Botões

Uma ação principal por bloco. A ação de segurança só aparece em golpe.

Ver código

<div class="ds-linha"><button class="primario" type="button">Enviar</button><button class="botao-forte" type="button">Bloquear acesso agora</button><button class="base-pessoa" type="button">Falar com uma pessoa</button></div><div class="ds-escuro"><div class="modelo-acoes"><button class="botao-contorno" type="button">Aplicar</button><button class="botao-contorno" type="button">Resgatar</button></div></div>

Perguntas sugeridas

Sempre uma embaixo da outra, em qualquer tela.

Ver código

<div class="chips"><button class="chip" type="button">Quando cai meu resgate?</button><button class="chip" type="button">O que é liquidez diária?</button></div>

Barra de menu

Fixa embaixo, com Início, Portfólio, Extrato e o orb.

Ver código

<nav class="menu-base" aria-label="Menu principal">
    <button type="button" data-ir="inicio" aria-current="page"><span class="icone-pacote" style="--icone: url(icones/inicio.svg)"></span><span>Início</span></button>
    <button type="button" data-ir="dinheiro"><span class="icone-pacote" style="--icone: url(icones/carteira.svg)"></span><span>Portfólio</span></button>
    <a href="extrato.html?cliente=C-0001&amp;agora=2026-11-18T10%3A00"><span class="icone-pacote" style="--icone: url(icones/extrato.svg)"></span><span>Extrato</span></a>
    <button class="orb" type="button" data-ir="caquia" aria-label="Abrir conversa com a caquIA" aria-expanded="false"><span class="orb-disco"><svg viewBox="-63 -67.2 406 406" width="40" height="40" aria-hidden="true"><circle cx="140" cy="135.8" r="203" fill="currentColor"></circle><g class="orb-raios"><path d="M218.02,187.97c-2.33-.17-47.28-28.98-47.78-39.3-.54-11.28,43.79,24.86,44.12,25.2,2.44,2.57,15.25,14.95,3.66,14.1Z"></path><path d="M186.63,219.97c-2.17-.86-36.49-41.76-33.88-51.76,2.85-10.93,34.38,36.79,34.59,37.21,1.56,3.18,10.1,18.82-.71,14.55Z"></path><path d="M62.34,187.97c2.33-.17,47.28-28.98,47.78-39.3.54-11.28-43.79,24.86-44.12,25.2-2.44,2.57-15.25,14.95-3.66,14.1Z"></path><path d="M93.73,219.97c2.17-.86,36.49-41.76,33.88-51.76-2.85-10.93-34.38,36.79-34.59,37.21-1.56,3.18-10.1,18.82.71,14.55Z"></path><path d="M218.02,83.69c-2.33.17-47.28,28.98-47.78,39.3-.54,11.28,43.79-24.86,44.12-25.2,2.44-2.57,15.25-14.95,3.66-14.1Z"></path><path d="M186.63,51.69c-2.17.86-36.49,41.76-33.88,51.76,2.85,10.93,34.38-36.79,34.59-37.21,1.56-3.18,10.1-18.82-.71-14.55Z"></path><path d="M62.34,83.69c2.33.17,47.28,28.98,47.78,39.3.54,11.28-43.79-24.86-44.12-25.2-2.44-2.57-15.25-14.95-3.66-14.1Z"></path><path d="M93.73,51.69c2.17.86,36.49,41.76,33.88,51.76-2.85,10.93-34.38-36.79-34.59-37.21-1.56-3.18-10.1-18.82.71-14.55Z"></path></g></svg></span><span>caquIA</span></button>
  </nav>

Orb

Fica dentro da barra, pulsa e abre a caquIA.

Ver código

<button class="orb" type="button" data-ir="caquia" aria-label="Abrir conversa com a caquIA" aria-expanded="false"><span class="orb-disco"><svg viewBox="-63 -67.2 406 406" width="40" height="40" aria-hidden="true"><circle cx="140" cy="135.8" r="203" fill="currentColor"></circle><g class="orb-raios"><path d="M218.02,187.97c-2.33-.17-47.28-28.98-47.78-39.3-.54-11.28,43.79,24.86,44.12,25.2,2.44,2.57,15.25,14.95,3.66,14.1Z"></path><path d="M186.63,219.97c-2.17-.86-36.49-41.76-33.88-51.76,2.85-10.93,34.38,36.79,34.59,37.21,1.56,3.18,10.1,18.82-.71,14.55Z"></path><path d="M62.34,187.97c2.33-.17,47.28-28.98,47.78-39.3.54-11.28-43.79,24.86-44.12,25.2-2.44,2.57-15.25,14.95-3.66,14.1Z"></path><path d="M93.73,219.97c2.17-.86,36.49-41.76,33.88-51.76-2.85-10.93-34.38,36.79-34.59,37.21-1.56,3.18-10.1,18.82.71,14.55Z"></path><path d="M218.02,83.69c-2.33.17-47.28,28.98-47.78,39.3-.54,11.28,43.79-24.86,44.12-25.2,2.44-2.57,15.25-14.95,3.66-14.1Z"></path><path d="M186.63,51.69c-2.17.86-36.49,41.76-33.88,51.76,2.85,10.93,34.38-36.79,34.59-37.21,1.56-3.18,10.1-18.82-.71-14.55Z"></path><path d="M62.34,83.69c2.33.17,47.28,28.98,47.78,39.3.54,11.28-43.79-24.86-44.12-25.2-2.44-2.57-15.25-14.95-3.66-14.1Z"></path><path d="M93.73,51.69c2.17.86,36.49,41.76,33.88,51.76-2.85,10.93-34.38-36.79-34.59-37.21-1.56-3.18-10.1-18.82.71-14.55Z"></path></g></svg></span><span>caquIA</span></button>

Topo da home

O perfil abre Configurações. No topo escuro, o dinheiro fica em creme.

Marta

Seu dinheiro na Caqui

R$ 62.271,15

Ver código

<div class="home-topo"><div class="home-dentro">
      <div class="home-linha"><a class="avatar" href="configuracoes.html?cliente=C-0001&amp;agora=2026-11-18T10%3A00" aria-label="Abrir configurações"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"></path><path d="M4.5 20c1.2-3.6 4-5.4 7.5-5.4s6.3 1.8 7.5 5.4"></path></svg></a><h1 class="home-ola">Marta</h1><button class="icone" data-valores="" aria-pressed="false" aria-label="Ocultar valores"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"></path><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path></svg></button></div>
      <p class="topo-rotulo">Seu dinheiro na Caqui</p>
      <p class="topo-total"><span class="valor">R$ 62.271,15</span></p>
      <div class="modelo-acoes"><button class="botao-contorno" data-guia="Aplicar">Aplicar</button><button class="botao-contorno" data-guia="Resgatar">Resgatar</button></div>
    </div></div>

Atalhos

Quatro por linha.

Extrato

Ver código

<div class="atalhos"><button class="atalho principal" data-fala="Onde está meu dinheiro?"><span class="atalho-icone"><span class="icone-pacote" style="--icone: url(icones/carteira.svg)"></span></span><span>Portfólio</span></button><button class="atalho" data-fala="Quanto vou receber se resgatar tudo hoje?"><span class="atalho-icone"><span class="icone-pacote" style="--icone: url(icones/calculadora.svg)"></span></span><span>Quanto vou receber</span></button><button class="atalho" data-fala="Meu CDB rendeu menos que a poupança?"><span class="atalho-icone"><span class="icone-pacote" style="--icone: url(icones/rendimento.svg)"></span></span><span>Comparar poupança</span></button><a class="atalho" href="extrato.html?cliente=C-0001&amp;agora=2026-11-18T10%3A00"><span class="atalho-icone"><span class="icone-pacote" style="--icone: url(icones/extrato.svg)"></span></span><span>Extrato</span></a></div>

Onde está meu dinheiro

Caixinhas, Lista ou Gráfico. A escolha fica salva.

Onde está meu dinheiro

Aplicação16/09/26
Hoje18/11/26
ResgateR$ 40.000,0018/11/26
Vencimento05/09/28

Aplicação05/10/2026
Hoje18/11/2026
Vencimento24/09/2028

CDB Caqui Liquidez Diária 110

R$ 40.791,24

110% do CDI

Aplicação16/09/26
Hoje18/11/26
ResgateR$ 40.000,0018/11/26
Vencimento05/09/28

LCI Caqui 92

R$ 20.229,91

92% do CDI

Aplicação05/10/2026
Hoje18/11/2026
Vencimento24/09/2028

CDB, 66,8%R$ 40.791,24
LCI, 33,2%R$ 20.229,91

Total investido, antes do impostoR$ 61.021,15

Disponível na contaR$ 1.250,00

Fonte: posições da sua conta em 18/11/2026

Ver código

<div class="carteira" data-vista="caixinhas"><div class="carteira-titulo"><h2 class="caixinhas-titulo">Onde está meu dinheiro</h2><select class="vista-seletor" aria-label="Forma de ver"><option value="caixinhas" selected="">Caixinhas</option><option value="lista">Lista</option><option value="grafico">Gráfico</option></select></div><div data-painel="caixinhas"><div class="quadros"><article class="quadro">
    <button class="quadro-topo" data-caixinha="" aria-expanded="false">
      <span class="quadro-nome">CDB Caqui Liquidez Diária 110</span>
      <span class="quadro-valor"><span class="valor">R$ 40.791,24</span></span>
      <span class="quadro-taxa">110% do CDI</span>
    </button>
    <div class="quadro-abre" inert=""><div class="quadro-linha">
      <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Aplicação</span><time>16/09/26</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Hoje</span><time>18/11/26</time></li><li class=""><span class="marco"></span><span class="passo">Resgate</span><span class="dinheiro">R$ 40.000,00</span><time>18/11/26</time></li><li class=""><span class="marco"></span><span class="passo">Vencimento</span><time>05/09/28</time></li></ol>
    </div></div>
  </article><article class="quadro">
    <button class="quadro-topo" data-caixinha="" aria-expanded="false">
      <span class="quadro-nome">LCI Caqui 92</span>
      <span class="quadro-valor"><span class="valor">R$ 20.229,91</span></span>
      <span class="quadro-taxa">92% do CDI</span>
    </button>
    <div class="quadro-abre" inert=""><div class="quadro-linha">
      <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Aplicação</span><time>05/10/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Hoje</span><time>18/11/2026</time></li><li class=""><span class="marco"></span><span class="passo">Vencimento</span><time>24/09/2028</time></li></ol>
    </div></div>
  </article></div></div>
      <div data-painel="lista"><article class="linha-dinheiro">
    <div class="linha-topo"><h3>CDB Caqui Liquidez Diária 110</h3><span class="valor">R$ 40.791,24</span></div>
    <p class="notas">110% do CDI</p>
    <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Aplicação</span><time>16/09/26</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Hoje</span><time>18/11/26</time></li><li class=""><span class="marco"></span><span class="passo">Resgate</span><span class="dinheiro">R$ 40.000,00</span><time>18/11/26</time></li><li class=""><span class="marco"></span><span class="passo">Vencimento</span><time>05/09/28</time></li></ol>
  </article><article class="linha-dinheiro">
    <div class="linha-topo"><h3>LCI Caqui 92</h3><span class="valor">R$ 20.229,91</span></div>
    <p class="notas">92% do CDI</p>
    <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Aplicação</span><time>05/10/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Hoje</span><time>18/11/2026</time></li><li class=""><span class="marco"></span><span class="passo">Vencimento</span><time>24/09/2028</time></li></ol>
  </article></div>
      <div data-painel="grafico"><div class="setores"><div class="pizza" role="img" aria-label="CDB 66,8%, LCI 33,2%" style="background: conic-gradient(var(--color-accent) 0% 66.8%, var(--color-ciano) 66.8% 100%)"></div><ul class="setores-legenda"><li><span class="setor-cor" style="background: var(--color-accent)"></span><span>CDB, 66,8%</span><span class="valor">R$ 40.791,24</span></li><li><span class="setor-cor" style="background: var(--color-ciano)"></span><span>LCI, 33,2%</span><span class="valor">R$ 20.229,91</span></li></ul></div></div><p class="carteira-total"><span>Total investido, antes do imposto</span><span class="valor">R$ 61.021,15</span></p><p class="carteira-total"><span>Disponível na conta</span><span class="valor">R$ 1.250,00</span></p><span class="notas">Fonte: posições da sua conta em 18/11/2026</span></div>

Faixa por status

A cor vem de data-situacao. Todas têm botão de fechar. O mesmo pedido aparece em todas, só para comparar as cores.

Resgate em andamento

Resgate CDB Caqui Liquidez Diária 110

Cai em 18/11/2026

Em processamentoR$ 40.000,00

Pedido17/11/2026
Dia-base, hoje18/11/2026depois das 16h
Dinheiro na conta, hoje18/11/2026

Resgate em análise

Resgate CDB Caqui Liquidez Diária 110

Cai em 18/11/2026

Em processamentoR$ 40.000,00

Pedido17/11/2026
Dia-base, hoje18/11/2026depois das 16h
Dinheiro na conta, hoje18/11/2026

Resgate atrasado

Resgate CDB Caqui Liquidez Diária 110

Cai em 18/11/2026

Em processamentoR$ 40.000,00

Pedido17/11/2026
Dia-base, hoje18/11/2026depois das 16h
Dinheiro na conta, hoje18/11/2026

Resgate concluído

Resgate CDB Caqui Liquidez Diária 110

Cai em 18/11/2026

Em processamentoR$ 40.000,00

Pedido17/11/2026
Dia-base, hoje18/11/2026depois das 16h
Dinheiro na conta, hoje18/11/2026

Resgate recusado

Resgate CDB Caqui Liquidez Diária 110

Cai em 18/11/2026

Em processamentoR$ 40.000,00

Pedido17/11/2026
Dia-base, hoje18/11/2026depois das 16h
Dinheiro na conta, hoje18/11/2026

Ver código

<div class="destaque" data-situacao="andamento"><div class="destaque-topo"><strong>Resgate em andamento</strong><button class="destaque-fechar" data-fechar-destaque="" aria-label="Fechar aviso"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg></button></div><article class="ficha">
    <h3>Resgate CDB Caqui Liquidez Diária 110</h3>
    <p class="quando">Cai em 18/11/2026</p>
    <div class="ficha-meta"><span>Em processamento</span><span class="dinheiro">R$ 40.000,00</span></div>
    <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Pedido</span><time>17/11/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dia-base, hoje</span><time>18/11/2026</time><span class="nota">depois das 16h</span></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dinheiro na conta, hoje</span><time>18/11/2026</time></li></ol>
    
  </article></div><div class="destaque" data-situacao="analise"><div class="destaque-topo"><strong>Resgate em análise</strong><button class="destaque-fechar" data-fechar-destaque="" aria-label="Fechar aviso"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg></button></div><article class="ficha">
    <h3>Resgate CDB Caqui Liquidez Diária 110</h3>
    <p class="quando">Cai em 18/11/2026</p>
    <div class="ficha-meta"><span>Em processamento</span><span class="dinheiro">R$ 40.000,00</span></div>
    <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Pedido</span><time>17/11/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dia-base, hoje</span><time>18/11/2026</time><span class="nota">depois das 16h</span></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dinheiro na conta, hoje</span><time>18/11/2026</time></li></ol>
    
  </article></div><div class="destaque" data-situacao="atrasado"><div class="destaque-topo"><strong>Resgate atrasado</strong><button class="destaque-fechar" data-fechar-destaque="" aria-label="Fechar aviso"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg></button></div><article class="ficha">
    <h3>Resgate CDB Caqui Liquidez Diária 110</h3>
    <p class="quando">Cai em 18/11/2026</p>
    <div class="ficha-meta"><span>Em processamento</span><span class="dinheiro">R$ 40.000,00</span></div>
    <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Pedido</span><time>17/11/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dia-base, hoje</span><time>18/11/2026</time><span class="nota">depois das 16h</span></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dinheiro na conta, hoje</span><time>18/11/2026</time></li></ol>
    
  </article></div><div class="destaque" data-situacao="concluido"><div class="destaque-topo"><strong>Resgate concluído</strong><button class="destaque-fechar" data-fechar-destaque="" aria-label="Fechar aviso"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg></button></div><article class="ficha">
    <h3>Resgate CDB Caqui Liquidez Diária 110</h3>
    <p class="quando">Cai em 18/11/2026</p>
    <div class="ficha-meta"><span>Em processamento</span><span class="dinheiro">R$ 40.000,00</span></div>
    <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Pedido</span><time>17/11/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dia-base, hoje</span><time>18/11/2026</time><span class="nota">depois das 16h</span></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dinheiro na conta, hoje</span><time>18/11/2026</time></li></ol>
    
  </article></div><div class="destaque" data-situacao="recusado"><div class="destaque-topo"><strong>Resgate recusado</strong><button class="destaque-fechar" data-fechar-destaque="" aria-label="Fechar aviso"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg></button></div><article class="ficha">
    <h3>Resgate CDB Caqui Liquidez Diária 110</h3>
    <p class="quando">Cai em 18/11/2026</p>
    <div class="ficha-meta"><span>Em processamento</span><span class="dinheiro">R$ 40.000,00</span></div>
    <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Pedido</span><time>17/11/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dia-base, hoje</span><time>18/11/2026</time><span class="nota">depois das 16h</span></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dinheiro na conta, hoje</span><time>18/11/2026</time></li></ol>
    
  </article></div>

Rastreio do pedido

A data final é a maior coisa do cartão.

Resgate CDB Caqui Liquidez Diária 110

Cai em 18/11/2026

Em processamentoR$ 40.000,00

Pedido17/11/2026
Dia-base, hoje18/11/2026depois das 16h
Dinheiro na conta18/11/2026

Ver código

<article class="ficha"><h3>Resgate CDB Caqui Liquidez Diária 110</h3><p class="quando">Cai em 18/11/2026</p><div class="ficha-meta"><span>Em processamento</span><span class="dinheiro">R$ 40.000,00</span></div>
  <ol class="rastreio"><li class="feita"><span class="marco"></span><span class="passo">Pedido</span><time>17/11/2026</time></li><li class="agora" aria-current="step"><span class="marco"></span><span class="passo">Dia-base, hoje</span><time>18/11/2026</time><span class="nota">depois das 16h</span></li><li><span class="marco"></span><span class="passo">Dinheiro na conta</span><time>18/11/2026</time></li></ol></article>

Aplicar e resgatar

Tela própria em operar.html. A opção travada mostra o motivo, e o resumo vem do motor, com fonte.

De onde resgatarCDB Caqui Liquidez Diária 110110% do CDIDisponívelR$ 791,24LCI Caqui 92Em carência até 03/01/2027SaldoR$ 20.229,91

Simulação

Cairia em 18/11/2026

Imposto estimadoR$ 2,18

Líquido estimadoR$ 497,82

caquIA

Altura total da tela: tela cheia no celular e painel à direita no desktop. Tem perguntas sugeridas, campo, microfone e saída para uma pessoa.

Carregamento da resposta

As sementes giram na conversa até a resposta sair, por pelo menos 0,9 segundo.

Conversa com uma pessoa

No mesmo chat, o topo troca de caquIA para o nome de quem atende, uma linha avisa a entrada e o que a pessoa escreve vai para o painel do atendente.

Jonas, da equipe Caqui, entrou na conversa

Uma pessoa já está vindo

Espera de cerca de 6 minutos, valor simulado.

Quem atende já vê o seu caso. Você não vai precisar repetir nada.

Protocolo CQ-20261118-A1B2.

Jonas já está vendo o seu caso

Meu resgate ainda não caiu.

Jonas

Já estou vendo o seu pedido.

Mais opções

Sanfona que alterna entre "Mais opções" e "Menos opções".

Mais opçõesMenos opções

Pessoas das 8h às 20h, todos os dias: disponível agora.

Ver código

<details class="mais">
        <summary><span class="mais-abrir">Mais opções</span><span class="mais-fechar">Menos opções</span><svg class="mais-seta" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg></summary>
        <nav class="saidas" aria-label="Saídas do atendimento">
          <button type="button" data-fala="Quero fazer uma reclamação" data-importante="">Reclamar</button>
          <button type="button" data-fala="Quero encerrar minha conta" data-importante="">Encerrar</button>
          <button type="button" data-fala="Acho que é golpe" data-importante="">Suspeita de golpe</button>
        </nav>
        <p class="horario">Pessoas das 8h às 20h, todos os dias: disponível agora.</p>
      </details>

Aviso de golpe

Tela inteira, sem logo, quando a caquIA detecta golpe.

Avisos na conversa

Interrompem o fluxo em golpe e marcam pedido atrasado.

Segurança da Caqui acionada, sem fila

Pedido atrasado

Previsto para 10/11/2026

Ver código

<div class="aviso"><strong>Segurança da Caqui acionada, sem fila</strong></div><article class="ficha atrasada"><h3>Pedido atrasado</h3><p class="quando">Previsto para 10/11/2026</p></article>

Telas

São as telas reais do app, então mudam junto com ele.

Home no desktop

Home no celular

Extrato

Configurações

Para devs

Guia para implementar o atendimento Caqui. UI e UX por Renan Chaves e Douglas Martins.

Rodar

O projeto é JavaScript com módulos ES, sem etapa de build no front-end.

npm install
npx wrangler dev --port 8799

Antes de dizer que terminou, rode os dois:

npm test
npm run perguntas

Onde está cada coisa

Caminho	O quê
`public/tokens.css`	Fonte única de cor, fonte, tamanho e raio
`public/estilo.css`	Todos os componentes
`public/app.js`, `public/ui.js`	Home e chat
`src/motor.mjs`	Regras do atendimento, sem modelo de linguagem
`src/worker.mjs`	Rotas da API
`dados/`	Dados sintéticos
`design-system/tokens.json`	Os mesmos tokens em JSON, para levar a outro stack
`DESIGN.md`	Regras de marca e lista de componentes
`SPEC.md`	Decisões e comportamento

Usar os tokens

No HTML, carregue a fonte de reserva e o CSS:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap">
<link rel="stylesheet" href="estilo.css">

No componente, use sempre a variável:

.meu-cartao {
  background: var(--color-card);
  color: var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
}

Nunca escreva cor, fonte ou raio direto no componente.

Levar para React

As classes funcionam em qualquer stack. Importe tokens.css e estilo.css uma vez na entrada e use className:

const ROTULOS = { andamento: 'em andamento', analise: 'em análise', atrasado: 'atrasado', concluido: 'concluído', recusado: 'recusado' };

export function FaixaPedido({ pedido, aoFechar }) {
  const tipo = pedido.titulo.split(' ')[0];
  return (
    <div className="destaque" data-situacao={pedido.situacao}>
      <div className="destaque-topo">
        <strong>{tipo} {ROTULOS[pedido.situacao]}</strong>
        <button className="destaque-fechar" aria-label="Fechar aviso" onClick={aoFechar}>×</button>
      </div>
    </div>
  );
}

Neste exemplo, o rótulo não trata "Aplicação atrasada". O código real faz essa concordância em public/app.js, na função rotuloSituacao.

Estados por atributo

Atributo	Onde	Valores
`data-situacao`	`.destaque`	`andamento`, `analise`, `atrasado`, `concluido`, `recusado`
`data-vista`	`.carteira`	`caixinhas`, `lista`, `grafico`
`aria-current="page"`	item de `.menu-base`	Tela atual
`aria-current="step"`	item de `.rastreio`	Etapa atual
`.oculto`	`#home`	Esconde os valores
`.humano`	`.chat`	Conversa passada para a equipe

Preferências em localStorage: vista, valores e demo. Em sessionStorage, demo-escolha guarda o cliente da demonstração. Todo acesso fica em try/catch.

API

Rota	Uso
`GET /api/demo`	Clientes e horários da demonstração
`GET /api/inicio?cliente=C-0001&agora=2026-11-18T10:00`	Dados da home
`GET /api/extrato?cliente=C-0001&agora=2026-11-18T10:00`	Extrato e nome da conta
`POST /api/mensagem`	Resposta do motor
`GET /api/artigo/KB-006`	Artigo da base
`GET /api/casos`	Fila do painel do atendente
`GET /api/casos/:protocolo`	Um caso
`GET /api/casos/:protocolo/conversa`	Mensagens entre cliente e equipe
`POST /api/casos/:protocolo/conversa`	Envia `{ de, texto }` para a conversa

POST /api/mensagem recebe { cliente, agora, estado, historico, texto } e devolve o novo estado. Quando devolve acao: "seguranca_imediata", o front abre o aviso de golpe.

GET /api/inicio devolve, entre outros, pedidos para os pedidos abertos e recentes para os concluídos ou recusados há até um dia. Cada cartão traz situacao, que define a cor da faixa.

Regras que não mudam

Modelo de linguagem nunca escreve prazo, taxa ou valor.
Toda resposta factual cita o artigo da base ou o dado da conta.
O id do cliente vem da sessão, nunca do texto da conversa.
Log só com protocolo, regra, motivo e ação. CPF sempre mascarado.
Todo valor em dinheiro usa --color-ink, ou creme sobre o topo escuro.
Só dados sintéticos e nenhum segredo no repositório.
Regra nova vira teste em test/motor.test.mjs.

Acessibilidade

Alvos de toque com pelo menos 44px.
Foco visível com --color-focus.
Animação sempre com alternativa para prefers-reduced-motion.
Mensagens de estado em texto, nunca só por cor.