A segunda camada. Sistemas web, não só LPs.

Modais, toasts, tabs, accordion, dropdowns, controles de formulário, skeletons e mais — tudo o que falta para construir os produtos e dashboards da Entrelaços. Cada um com demo ao vivo e snippet pronto. Use o botão Light no topo para ver tudo no tema claro.

Overlays Feedback Navegação Form controls Loading Dados

Overlays · modal, drawer

Camadas que pausam o fluxo. Sempre com scrim escuro + blur, fechável por Esc e clique fora.

HTML + JS · modal

<!-- gatilho -->
<button class="e-btn e-btn-primary" onclick="eModalOpen('m1')">Abrir</button>

<!-- modal -->
<div class="e-modal-scrim" id="m1">
  <div class="e-modal">
    <div class="e-modal-eyebrow">CONFIRMAÇÃO</div>
    <h3>Confirmar <em>inscrição</em>?</h3>
    <p>Você entrará no Cohort Inverno 2026.</p>
    <div class="e-modal-actions">
      <button class="e-btn e-btn-ghost" onclick="eModalClose(this)">Cancelar</button>
      <button class="e-btn e-btn-primary">Confirmar →</button>
    </div>
  </div>
</div>
<script src="components-adv.js"></script>

Feedback · toast, alert

Toasts surgem no canto inferior-direito e somem sozinhos. Alerts são inline, persistentes.

Janela de inscrição. As mentorias 1:1 abrem 4× por ano — turma fechada para garantir profundidade.

Pagamento confirmado. Você receberá o acesso por e-mail em instantes.

Últimas vagas. Restam 3 lugares neste ciclo.

JS · toast

eToast({ type: 'success', title: 'Salvo', text: 'Alterações aplicadas.' });
// type: success · warn · error · info
// também aceita string curta: eToast('Mensagem rápida')

Navegação · tabs, accordion, dropdown

Always-on. Pertencimento, supervisões coletivas e mentorias mensais. O ponto de entrada.

12 semanas para reconstruir sua prática do zero — posicionamento, precificação, comunicação ética.

Travessia individual com a Tati, para psicólogas que querem mudar de patamar com profundidade.

Não. A Comunidade atende desde recém-formadas até clínicas estruturadas.

Um encontro de 90 minutos + conteúdos no seu ritmo.

Sim, ao concluir cada cohort você recebe certificado com carga horária.

Dropdown / select

HTML · tabs

<div data-tabs>
  <div class="e-tabs">
    <button class="e-tab is-active">Um</button>
    <button class="e-tab">Dois</button>
  </div>
  <div class="e-tabpanel is-active">Conteúdo um</div>
  <div class="e-tabpanel">Conteúdo dois</div>
</div>

Form controls · switch, check, radio, segmented

Tudo o que o input quadrado não cobre. Foco roxo de 3px em todos, acessível por teclado.

Receber lembretes Modo silencioso

Aceito os termos Newsletter semanal

Mensal Anual

HTML · switch

<label class="e-switch">
  <input type="checkbox" checked>
  <span class="e-switch-track"><span class="e-switch-thumb"></span></span>
  <span class="e-switch-label">Receber lembretes</span>
</label>

Loading · skeleton, spinner, progress

Estados de espera com a marca: skeletons em roxo translúcido animado, nunca cinza genérico.

68% · CARREGANDO MÓDULO

Dados · stepper, avatar, tooltip, empty

Cadastro

2Diagnóstico

3Pagamento

Avatares + tooltip

Nenhuma mensagem ainda

Quando alguém da comunidade escrever, aparece aqui.

Tudo isso existe em light também. Clique no botão Light no topo da página para ver cada componente no tema claro — é o mesmo HTML, só troca a folha de tokens.