v1.0 Aurora Design System

Interfaces que encantam
em cada pixel

Tokens, componentes e padrões da Encantra. Arrojado e acolhedor, acessível e expressivo — pensado para que atender seja um prazer, dos dois lados da tela.

Explorar tokens Componentes

Princípios

Quatro ideias guiam cada decisão de design da Encantra — inspiradas no conceito de customer delight de Philip Kotler.

01

Acolher antes de impressionar

Clareza e calma primeiro. O encantamento vem de tirar fricção, não de adicionar enfeites.

02

Ousadia com propósito

O gradiente Aurora marca momentos de valor: IA, conquistas, chamadas principais. Nunca decoração gratuita.

03

Contexto é rei

Informação do cliente sempre ao alcance: saúde, histórico, plano. Menos cliques, mais empatia.

04

Acessível por padrão

Contraste AA, foco visível, movimento reduzido respeitado e tema escuro nativo.

05

IA transparente

Tudo o que a Lumi faz é identificado pela borda viva e cita suas fontes.

06

Ritmo consistente

Grade de 4 px, raios generosos e uma única escala tipográfica em toda a plataforma.

Marca

O símbolo é uma centelha de quatro pontas — o instante do encantamento — sobre o gradiente Aurora, acompanhada de uma pequena estrela âmbar: o cliente que virou fã.

Símbolo EncantraSímbolo

Mín. 24 px · área de respiro = ¼ da largura

Encantra

Logotipo horizontal · Sora ExtraBold

Encantra

Versão sobre fundo escuro

Faça: use o símbolo sobre fundos neutros ou o escuro "Noite Aurora" (#120D24).
Evite: distorcer, recolorir, aplicar sombras ou colocar sobre fotos com muito ruído.

Cores

Paletas primitivas com subtom violeta nos neutros ("ink"), e tokens semânticos que mudam automaticamente no tema escuro. Clique em uma amostra para copiar a variável.

Violeta Encanto

violet-50--violet-50
violet-100--violet-100
violet-200--violet-200
violet-300--violet-300
violet-400--violet-400
violet-500--violet-500
violet-600--violet-600
violet-700--violet-700
violet-800--violet-800
violet-900--violet-900

Coral Delight

coral-50--coral-50
coral-100--coral-100
coral-300--coral-300
coral-500--coral-500
coral-600--coral-600
coral-700--coral-700

Âmbar Aurora

amber-50--amber-50
amber-100--amber-100
amber-500--amber-500
amber-600--amber-600
amber-700--amber-700

Menta Sucesso

mint-50--mint-50
mint-100--mint-100
mint-500--mint-500
mint-600--mint-600
mint-700--mint-700

Céu Informação

sky-50--sky-50
sky-100--sky-100
sky-500--sky-500
sky-600--sky-600
sky-700--sky-700

Rubi Alerta

red-50--red-50
red-100--red-100
red-500--red-500
red-600--red-600
red-700--red-700

Ink (neutros)

ink-0--ink-0
ink-25--ink-25
ink-50--ink-50
ink-100--ink-100
ink-200--ink-200
ink-300--ink-300
ink-400--ink-400
ink-500--ink-500
ink-600--ink-600
ink-700--ink-700
ink-800--ink-800
ink-900--ink-900
ink-950--ink-950

Tokens semânticos use estes no dia a dia

bg--bg
bg-elevated--bg-elevated
bg-subtle--bg-subtle
bg-muted--bg-muted
border--border
border-strong--border-strong
text--text
text-muted--text-muted
text-subtle--text-subtle
primary--primary
primary-hover--primary-hover
primary-soft--primary-soft
accent--accent

Gradientes

O Aurora é a assinatura da marca: violeta → magenta → coral. Reserve-o para IA, ações principais e celebrações.

--grad-aurora
--grad-sunrise
--grad-ocean
--grad-mint
--grad-glow

Tipografia

Sora para títulos (geométrica, confiante) · Inter para interface e leitura · JetBrains Mono para código.

--text-5xl · Sora 800
Encante.
h1 · --text-3xl

Do primeiro contato ao fã

h2 · --text-2xl

Saúde da conta

h3 · --text-xl

Jornada de onboarding

h4 · --text-lg

Tickets em aberto

body · --text-base

A Lumi sugeriu uma resposta com base em 3 artigos da sua base de conhecimento.

small · --text-sm

Atualizado há 5 minutos por Pedro Albuquerque

eyebrow
Destaque
monoPOST /api/v1/tickets
.lumi-text
Texto com gradiente Aurora

Espaço, raio e sombra

Grade de 4 px. Raios generosos transmitem acolhimento; sombras com tom violeta dão profundidade sem peso.

Espaçamento

--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
20px
--sp-6
24px
--sp-8
32px
--sp-10
40px
--sp-12
48px
--sp-16
64px

Raios

--r-xs
--r-sm
--r-md
--r-lg
--r-xl
--r-2xl
--r-full

Elevação

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-glow

Movimento

Transições curtas (120–320 ms) com curva --ease; molas (--ease-spring) para elementos que "chegam", como modais e toasts. Tudo é desligado com prefers-reduced-motion.

Ícones

Biblioteca Lucide, traço 2 px, 18 px por padrão. Em PHP: <?= icon('sparkles') ?>. Clique para copiar.

Botões

Um único botão Aurora por tela, para a ação mais valiosa. Primário para confirmações, suave e fantasma para ações secundárias.

Variantes
<button class="btn btn--aurora"><i data-lucide="sparkles" class="ico"></i> Aurora</button>
<button class="btn btn--primary">Primário</button>
<button class="btn">Padrão</button>
<button class="btn btn--soft">Suave</button>
<button class="btn btn--ghost">Fantasma</button>
<button class="btn btn--success">Sucesso</button>
<button class="btn btn--danger">Perigo</button>
Tamanhos, ícone, bloco e estados
<button class="btn btn--primary btn--lg">Grande</button>
<button class="btn btn--primary">Médio</button>
<button class="btn btn--primary btn--sm">Pequeno</button>
<button class="btn btn--icon" aria-label="Configurações"><i data-lucide="settings" class="ico"></i></button>
<button class="btn btn--primary is-loading">Salvando</button>
<button class="btn" disabled>Desabilitado</button>
<div class="btn-group"><button class="btn">Dia</button><button class="btn">Semana</button><button class="btn">Mês</button></div>

Formulários

Rótulos sempre visíveis, ajuda abaixo do campo e foco com anel violeta.

Campos
Informe um e-mail válido.
Markdown suportado.
<div class="form-grid" style="width:100%">
  <div class="field"><label>Nome da empresa</label><input class="input" placeholder="Aurora Tech"></div>
  <div class="field"><label>Busca</label><div class="input-group"><i data-lucide="search" class="ico"></i><input class="input" placeholder="Buscar clientes…"></div></div>
  <div class="field"><label>Prioridade</label><select class="select"><option>Normal</option><option>Alta</option><option>Urgente</option></select></div>
  <div class="field"><label>E-mail</label><input class="input" type="email" value="ana@" aria-invalid="true" style="border-color:var(--red-500)"><span class="error">Informe um e-mail válido.</span></div>
  <div class="field span-2"><label>Mensagem</label><textarea class="textarea" placeholder="Escreva sua resposta…"></textarea><span class="help">Markdown suportado.</span></div>
</div>
Seleção
<label class="checkbox"><input type="checkbox" checked> Notificar por e-mail</label>
<label class="radio"><input type="radio" name="r" checked> Mensal</label>
<label class="radio"><input type="radio" name="r"> Anual</label>
<label class="switch"><input type="checkbox" checked> Resposta automática da Lumi</label>
<label class="switch"><input type="checkbox"> Modo foco</label>

Cards

Variações

Padrão

novo
Cabeçalho, corpo e rodapé.

Interativo

Eleva ao passar o mouse.

Aurora

Para destaques e conquistas.

<div class="grid grid-3" style="width:100%">
  <div class="card"><div class="card__header"><h3>Padrão</h3><span class="badge">novo</span></div><div class="card__body text-sm text-muted">Cabeçalho, corpo e rodapé.</div><div class="card__footer text-right"><button class="btn btn--sm">Ação</button></div></div>
  <div class="card card--hover"><div class="card__body"><h4>Interativo</h4><p class="text-sm text-muted mb-0">Eleva ao passar o mouse.</p></div></div>
  <div class="card card--aurora"><div class="card__body"><h4 style="color:#fff">Aurora</h4><p class="text-muted mb-0">Para destaques e conquistas.</p></div></div>
</div>

KPIs

Stat com ícone, variação e sparkline
Tickets abertos128 12% vs. semana
CSAT4,8 0,3 pts
MRR em riscoR$ 9,3k3 contas
<div class="grid grid-3" style="width:100%">
  <div class="card"><div class="stat"><span class="stat__label">Tickets abertos</span><span class="stat__value">128</span><span class="stat__delta down"><i data-lucide="arrow-down-right" class="ico"></i> 12% vs. semana</span><span class="stat__icon"><i data-lucide="inbox" class="ico"></i></span><svg class="stat__spark" data-spark="12,18,14,22,19,25,21,28"></svg></div></div>
  <div class="card"><div class="stat"><span class="stat__label">CSAT</span><span class="stat__value">4,8</span><span class="stat__delta up"><i data-lucide="arrow-up-right" class="ico"></i> 0,3 pts</span><span class="stat__icon mint"><i data-lucide="star" class="ico"></i></span></div></div>
  <div class="card"><div class="stat"><span class="stat__label">MRR em risco</span><span class="stat__value">R$ 9,3k</span><span class="stat__delta down">3 contas</span><span class="stat__icon coral"><i data-lucide="alert-triangle" class="ico"></i></span></div></div>
</div>

Badges e tags

Cores semânticas
Em andamento Resolvido Pendente Urgente Novo SLA estourado Neutro Contorno Escuro IA # faturamento # onboarding
<span class="badge badge--violet"><span class="dot"></span>Em andamento</span>
<span class="badge badge--mint"><span class="dot"></span>Resolvido</span>
<span class="badge badge--amber">Pendente</span>
<span class="badge badge--coral">Urgente</span>
<span class="badge badge--sky">Novo</span>
<span class="badge badge--red">SLA estourado</span>
<span class="badge">Neutro</span>
<span class="badge badge--outline">Contorno</span>
<span class="badge badge--dark">Escuro</span>
<span class="badge badge--aurora">IA</span>
<span class="tag"># faturamento</span>
<span class="tag"># onboarding</span>

Avatares

Iniciais com matiz determinística (helper avatar_hue()), presença e pilhas.

Tamanhos, presença e grupo
MD RL JS PA AT MDRLJS+4
<span class="avatar avatar--xs" style="--hue:262">MD</span>
<span class="avatar avatar--sm" style="--hue:340">RL</span>
<span class="avatar" style="--hue:160">JS<span class="avatar__status online"></span></span>
<span class="avatar avatar--lg" style="--hue:30">PA<span class="avatar__status away"></span></span>
<span class="avatar avatar--xl avatar--square" style="--hue:210">AT</span>
<span class="avatar-stack"><span class="avatar" style="--hue:262">MD</span><span class="avatar" style="--hue:340">RL</span><span class="avatar" style="--hue:160">JS</span><span class="avatar" style="--hue:0;background:var(--ink-500)">+4</span></span>

Tabelas e listas

Tabela de dados
ContaSaúdeMRRRenovação
Banco Horizonte
Enterprise · Pedro A.
88R$ 18.900em 200 dias
Construtora Alicerce
Business · Pedro A.
43R$ 4.200em 21 dias
Transportes Rota Sul
Business · Pedro A.
28R$ 5.150em 35 dias
 
<div class="card" style="width:100%"><div class="table-wrap"><table class="table">
  <thead><tr><th>Conta</th><th>Saúde</th><th>MRR</th><th>Renovação</th></tr></thead>
  <tbody>
    <tr class="is-clickable"><td><div class="cell-main">Banco Horizonte</div><div class="cell-sub">Enterprise · Pedro A.</div></td><td><span class="health health--healthy">88</span></td><td>R$ 18.900</td><td>em 200 dias</td></tr>
    <tr class="is-clickable"><td><div class="cell-main">Construtora Alicerce</div><div class="cell-sub">Business · Pedro A.</div></td><td><span class="health health--at_risk">43</span></td><td>R$ 4.200</td><td>em 21 dias</td></tr>
    <tr class="is-clickable"><td><div class="cell-main">Transportes Rota Sul</div><div class="cell-sub">Business · Pedro A.</div></td><td><span class="health health--critical">28</span></td><td>R$ 5.150</td><td>em 35 dias</td></tr>
  </tbody>
</table></div></div>
Lista e lista de definição
AR
Ana Ribeiro
Não consigo emitir a nota fiscal
Urgente CM
Carlos Menezes
Integração com ERP
Normal
Plano
Enterprise
CSM
Pedro Albuquerque
Cliente desde
12/03/2025
<div class="grid grid-2" style="width:100%">
  <div class="card"><div class="list">
    <a class="list__item" href="#"><span class="avatar avatar--sm" style="--hue:340">AR</span><div class="list__main"><div class="list__title">Ana Ribeiro</div><div class="list__sub">Não consigo emitir a nota fiscal</div></div><span class="badge badge--coral">Urgente</span></a>
    <a class="list__item" href="#"><span class="avatar avatar--sm" style="--hue:200">CM</span><div class="list__main"><div class="list__title">Carlos Menezes</div><div class="list__sub">Integração com ERP</div></div><span class="badge">Normal</span></a>
  </div></div>
  <div class="card"><div class="card__body"><dl class="dl"><dt>Plano</dt><dd>Enterprise</dd><dt>CSM</dt><dd>Pedro Albuquerque</dd><dt>Cliente desde</dt><dd>12/03/2025</dd></dl></div></div>
</div>

Menus, modais e toasts

Dropdown, modal, toast e tooltip
Atribuir Mesclar
Passe o mouse 
<div class="dropdown"><button class="btn" data-dropdown>Ações <i data-lucide="chevron-down" class="ico"></i></button>
  <div class="dropdown__menu dropdown__menu--left"><a class="dropdown__item" href="#"><i data-lucide="user-plus" class="ico"></i> Atribuir</a><a class="dropdown__item" href="#"><i data-lucide="merge" class="ico"></i> Mesclar</a><div class="dropdown__divider"></div><button class="dropdown__item dropdown__item--danger"><i data-lucide="trash-2" class="ico"></i> Excluir</button></div>
</div>
<button class="btn btn--primary" data-modal-open="ds-modal">Abrir modal</button>
<button class="btn" onclick="Encantra.toast('Resposta enviada ao cliente')">Toast sucesso</button>
<button class="btn" onclick="Encantra.toast('A Lumi encontrou 3 artigos relevantes','info')">Toast info</button>
<button class="btn" onclick="Encantra.toast('SLA prestes a estourar','warning')">Toast aviso</button>
<span class="btn btn--ghost" data-tip="Dica: use ⌘K para buscar">Passe o mouse</span>
<div class="modal-backdrop" id="ds-modal"><div class="modal"><div class="modal__header"><h3>Mesclar tickets</h3><button class="btn btn--ghost btn--icon btn--sm" data-modal-close><i data-lucide="x" class="ico"></i></button></div><div class="modal__body text-muted">As mensagens do ticket #4820 serão movidas para o #4821.</div><div class="modal__footer"><button class="btn" data-modal-close>Cancelar</button><button class="btn btn--primary" data-modal-close>Mesclar</button></div></div></div>
Paleta de comandos (⌘K)
Contas
Banco Horizontebancohorizonte.com.br
Tickets
#4821 Não consigo emitir a nota fiscal
<div class="cmdk__box" style="animation:none;margin:0 auto">
  <input class="cmdk__input" placeholder="O que você procura?" value="banco">
  <div class="cmdk__list"><div class="cmdk__group">Contas</div><a class="cmdk__item is-active" href="#"><i data-lucide="building-2" class="ico"></i><span class="flex-1">Banco Horizonte</span><span class="text-xs text-subtle">bancohorizonte.com.br</span></a><div class="cmdk__group">Tickets</div><a class="cmdk__item" href="#"><i data-lucide="inbox" class="ico"></i><span class="flex-1">#4821 Não consigo emitir a nota fiscal</span></a></div>
</div>

Alertas e estados

Alertas
A Lumi está aprendendo com 42 novos artigos.
Conector sincronizado com sucesso.
3 tickets vão estourar o SLA na próxima hora.
Falha ao enviar e-mail: verifique o SMTP.
<div style="width:100%">
  <div class="alert alert--info"><i data-lucide="info" class="ico"></i><div>A Lumi está aprendendo com 42 novos artigos.</div></div>
  <div class="alert alert--success"><i data-lucide="check-circle-2" class="ico"></i><div>Conector sincronizado com sucesso.</div></div>
  <div class="alert alert--warning"><i data-lucide="alert-triangle" class="ico"></i><div>3 tickets vão estourar o SLA na próxima hora.</div></div>
  <div class="alert alert--error"><i data-lucide="alert-octagon" class="ico"></i><div>Falha ao enviar e-mail: verifique o SMTP.</div></div>
</div>
Estado vazio e skeleton

Caixa de entrada zerada!

Nenhum ticket aguardando. Que tal revisar a base de conhecimento?

<div class="grid grid-2" style="width:100%">
  <div class="card"><div class="empty"><div class="empty__art"><i data-lucide="party-popper" class="ico"></i></div><h3>Caixa de entrada zerada!</h3><p>Nenhum ticket aguardando. Que tal revisar a base de conhecimento?</p><button class="btn btn--primary">Ver artigos</button></div></div>
  <div class="card"><div class="card__body stack-sm"><div class="skeleton" style="width:60%"></div><div class="skeleton"></div><div class="skeleton" style="width:80%"></div><div class="skeleton" style="width:40%;height:32px;margin-top:8px"></div></div></div>
</div>

Lumi (IA)

Tudo que é gerado por IA usa a borda viva do gradiente Aurora e o orbe pulsante — o usuário sempre sabe o que veio da Lumi.

Painel da Lumi
Resposta sugerida
Confiança 94% · 2 fontes

Oi, Ana! Isso acontece quando o certificado digital vence. Envie o novo arquivo em Configurações › Fiscal.

<div class="lumi" style="width:100%;max-width:560px"><div class="lumi__inner">
  <div class="lumi__head"><span class="lumi__orb"><i data-lucide="sparkles" class="ico"></i></span><div><div class="lumi__title">Resposta sugerida</div><div class="lumi__sub">Confiança 94% · 2 fontes</div></div></div>
  <p class="text-sm">Oi, Ana! Isso acontece quando o certificado digital vence. Envie o novo arquivo em <strong>Configurações › Fiscal</strong>.</p>
  <div class="row"><button class="btn btn--aurora btn--sm">Usar resposta</button><button class="btn btn--sm">Ajustar tom</button><span class="typing"><span></span><span></span><span></span></span></div>
</div></div>

Progresso e saúde

Gauge, indicadores de saúde e barras
88saudável
43em risco
61
SaudávelNeutraEm riscoCrítica 
<div class="gauge" style="--value:88;--color:var(--mint-500)"><div class="gauge__value">88<small>saudável</small></div></div>
<div class="gauge" style="--value:43;--color:var(--coral-500)"><div class="gauge__value">43<small>em risco</small></div></div>
<div class="gauge gauge--sm" style="--value:61;--color:var(--amber-500)"><div class="gauge__value">61</div></div>
<div class="stack-sm" style="min-width:240px">
  <span class="health health--healthy">Saudável</span><span class="health health--neutral">Neutra</span><span class="health health--at_risk">Em risco</span><span class="health health--critical">Crítica</span>
</div>
<div style="width:260px" class="stack-sm"><div class="progress"><div class="progress__bar" style="width:72%"></div></div><div class="progress progress--mint progress--sm"><div class="progress__bar" style="width:45%"></div></div></div>

Timeline e jornada

Linha do tempo, stepper e caminho 5A
Ticket #4821 aberto
Ana Ribeiro · há 2 min
NPS 9 recebido
Carlos Menezes · ontem
"Atendimento impecável!"
Saúde caiu para 61
Sistema · há 3 dias
Kickoff
Setup
Treino
Go-live
320Assimilação
210Atração
140Arguição
96Ação
41Apologia
<div class="grid grid-2" style="width:100%">
  <div class="timeline">
    <div class="timeline__item"><span class="timeline__dot violet"><i data-lucide="inbox" class="ico"></i></span><div class="timeline__title">Ticket #4821 aberto</div><div class="timeline__meta">Ana Ribeiro · há 2 min</div></div>
    <div class="timeline__item"><span class="timeline__dot mint"><i data-lucide="smile-plus" class="ico"></i></span><div class="timeline__title">NPS 9 recebido</div><div class="timeline__meta">Carlos Menezes · ontem</div><div class="timeline__body">"Atendimento impecável!"</div></div>
    <div class="timeline__item"><span class="timeline__dot coral"><i data-lucide="alert-triangle" class="ico"></i></span><div class="timeline__title">Saúde caiu para 61</div><div class="timeline__meta">Sistema · há 3 dias</div></div>
  </div>
  <div class="stack">
    <div class="stepper"><div class="step is-done">Kickoff</div><div class="step is-done">Setup</div><div class="step is-current">Treino</div><div class="step">Go-live</div></div>
    <div class="path5a"><div class="path5a__stage"><strong>320</strong><span>Assimilação</span></div><div class="path5a__stage"><strong>210</strong><span>Atração</span></div><div class="path5a__stage"><strong>140</strong><span>Arguição</span></div><div class="path5a__stage"><strong>96</strong><span>Ação</span></div><div class="path5a__stage"><strong>41</strong><span>Apologia</span></div></div>
  </div>
</div>

Kanban

Arrastar e soltar com data-kanban e data-move-url; o runtime envia {id, column} por POST.

Quadro
A fazer 2
Ligar para Rota Sul
Risco de churn · hoje
Enviar QBR
Banco Horizonte
Em andamento 1
Treinamento Vida Plena
PAamanhã
Concluído 1
Kickoff EducaMais
<div class="kanban" style="width:100%">
  <div class="kanban__col"><div class="kanban__head">A fazer <span class="badge">2</span></div><div class="kanban__cards"><div class="kanban__card" draggable="true"><strong class="text-sm">Ligar para Rota Sul</strong><div class="text-xs text-muted mt-2">Risco de churn · hoje</div></div><div class="kanban__card" draggable="true"><strong class="text-sm">Enviar QBR</strong><div class="text-xs text-muted mt-2">Banco Horizonte</div></div></div></div>
  <div class="kanban__col"><div class="kanban__head">Em andamento <span class="badge badge--violet">1</span></div><div class="kanban__cards"><div class="kanban__card" draggable="true"><strong class="text-sm">Treinamento Vida Plena</strong><div class="row mt-2"><span class="avatar avatar--xs" style="--hue:30">PA</span><span class="badge badge--amber">amanhã</span></div></div></div></div>
  <div class="kanban__col"><div class="kanban__head">Concluído <span class="badge badge--mint">1</span></div><div class="kanban__cards"><div class="kanban__card" draggable="true"><strong class="text-sm">Kickoff EducaMais</strong></div></div></div>
</div>

Conversas

Thread do ticket e composer
AR
Ana Ribeirocliente
Não consigo emitir a nota fiscal desde ontem.
JS
Júlia Santosnota interna
Certificado A1 vencido — já vi isso na semana passada.
LumiIA
Sugestão pronta com base em 2 artigos.
RL
Rafael Limaagente
Oi, Ana! Envie o novo certificado em Configurações › Fiscal. 💜
Olá! Como posso ajudar?
Quero mudar meu plano.
<div style="width:100%" class="stack">
  <div class="thread">
    <div class="msg"><span class="avatar" style="--hue:340">AR</span><div class="msg__bubble"><div class="msg__head"><strong>Ana Ribeiro</strong><span class="badge">cliente</span><time>10:42</time></div><div class="msg__body">Não consigo emitir a nota fiscal desde ontem.</div></div></div>
    <div class="msg msg--note"><span class="avatar" style="--hue:160">JS</span><div class="msg__bubble"><div class="msg__head"><strong>Júlia Santos</strong><span class="badge badge--amber">nota interna</span><time>10:44</time></div><div class="msg__body">Certificado A1 vencido — já vi isso na semana passada.</div></div></div>
    <div class="msg msg--ai"><span class="lumi__orb" style="width:32px;height:32px"><i data-lucide="sparkles" class="ico"></i></span><div class="msg__bubble"><div class="msg__head"><strong>Lumi</strong><span class="badge badge--aurora">IA</span><time>10:45</time></div><div class="msg__body">Sugestão pronta com base em 2 artigos.</div></div></div>
    <div class="msg msg--agent"><span class="avatar" style="--hue:262">RL</span><div class="msg__bubble"><div class="msg__head"><strong>Rafael Lima</strong><span class="badge badge--violet">agente</span><time>10:46</time></div><div class="msg__body">Oi, Ana! Envie o novo certificado em Configurações › Fiscal. 💜</div></div></div>
  </div>
  <div class="composer"><div class="composer__tabs"><button class="is-active">Responder</button><button data-mode="note">Nota interna</button></div><textarea placeholder="Escreva sua resposta…"></textarea><div class="composer__bar"><button class="btn btn--ghost btn--sm"><i data-lucide="paperclip" class="ico"></i></button><button class="btn btn--soft btn--sm"><i data-lucide="sparkles" class="ico"></i> Lumi</button><span class="flex-1"></span><button class="btn btn--primary btn--sm">Enviar</button></div></div>
  <div class="stack-sm" style="max-width:420px;display:flex"><div class="chat-bubble chat-bubble--in">Olá! Como posso ajudar?</div><div class="chat-bubble chat-bubble--out">Quero mudar meu plano.</div></div>
</div>

Conteúdo

Texto rico (.prose) — artigos e documentação

Como emitir sua primeira nota fiscal

Antes de começar, confirme que o certificado digital A1 está válido.

  1. Acesse Configurações › Fiscal.
  2. Envie o arquivo .pfx e a senha.
  3. Clique em Emitir.
Dica: ative o lembrete de vencimento do certificado.
<div class="prose">
  <h2>Como emitir sua primeira nota fiscal</h2>
  <p>Antes de começar, confirme que o <strong>certificado digital A1</strong> está válido.</p>
  <ol><li>Acesse <em>Configurações › Fiscal</em>.</li><li>Envie o arquivo <code>.pfx</code> e a senha.</li><li>Clique em <strong>Emitir</strong>.</li></ol>
  <blockquote>Dica: ative o lembrete de vencimento do certificado.</blockquote>
</div>

Usando o Aurora no seu código

Inclua assets/css/encantra.css e assets/js/encantra.js. Todos os componentes funcionam com HTML puro; o runtime adiciona dropdowns, modais, abas, toasts, ⌘K, kanban e sparklines.

Ver arquitetura