Quatro telas prontas para copiar no começo de qualquer sistema.
Painel, perfil, configurações e acesso já vêm montados com os componentes do DS, no claro e no escuro. Para um sistema novo, copie a tela mais próxima e troque o conteúdo; o kit no fim da página traz os seis passos e o esqueleto mínimo da casca, pronto para colar.
Painel de métricas
A tela de referência do DS: casca Névoa, painel Tela com luz no topo, vidro, Ardósia e gráfico.
Use como primeira tela depois de entrar: o número principal em cima, métricas em pílulas e o detalhe em cartões. É a única tela com cabeçalho de métricas (.painel-cabeca) no lugar do .topo.
Anatomia
Marca.marca logotipo + .nome[data-marca]
Barra superior.topo-barra com .busca, .sino-caixa › .redondo.sino + .ponto e o .popover de notificações (o comum.js abre), .translucido, .avatar.tinta e .redondo.abrir-gaveta (abre a lateral abaixo de 1024px)
Lateral.lateral › .nav (.nav-rotulo, .contagem, .nav-sub com .ponto-s) e .conta com .menu-conta
Cabeçalho de métricas.painel-cabeca › .titulo-agua, .metrica-principal com .seletor-texto, .cartao-resumo.vidro e .cartao-resumo.destaque
Faixa de números.faixa-pilulas › 4 .pilula-numero
Lista + detalhe.grade-lista-detalhe: cartão de agenda (.bloco.nevoa, tarefas .item-lista.opcao, candidaturas com .avatar + .pilula)
Cartão de análise.filtros com .chip + .fechar e .grade-3: .bloco com .grafico-barras, .bloco com .barra-prog, .bloco.degrade + .mancha com .botao.destaque.cheio
Cada seção é um .cartao com “rótulo + chave à direita”. Só contas @impulsamos.es entram na equipe e baixam dados; apagar vai para a lixeira.
Anatomia
Topo.topo › h1 + .trilha (Painel › Configurações)
Abasnav.abas com a.chip[role=tab][aria-selected] que levam a #geral, #equipe, #avisos, #dados
Sistema.cartao-cabeca com .acoes › .botao.compacto; nome do sistema (até 12 letras), fuso select[data-combo], .opcao + .chave
Equipe.fantasma “Convidar”, .filtros com .chip + .busca, .rola-x › table com .autor, .pilula.destaque/.aberto, .col-esconde e .icone[aria-controls] que abre .popover.menu-linha (o comum.js abre)
Avisos.opcao + .chave ×3 e o remetente em select[data-combo]
Dados.botao.baixa.compacto “Baixar (CSV)”, .nota, .item-lista da lixeira e .fantasma.perigo “Excluir este sistema”
Janelasconvidar, remover e excluir (o botão só libera ao digitar EXCLUIR)
O exemplo oficial é exemplos/acesso.html (28/10/2026), cópia da versão viva aprovada: só o cartão, de vidro (.acesso-grade.so-cartao › .acesso-cartao.cartao.vidro), nunca branco. O modelo completo do layouts.css põe ao lado a .acesso-vitrine: cartão de vidro com título-marca-d’água, o símbolo em LED num .bloco.escuro (canvas[data-simbolo-led] + simbolo-led.js) e .faixa-pilulas.
Anatomia
Fundobody.acesso (--g-painel sobre Névoa) + .mancha.um/.dois/.tres e .simbolo-fundo
Topoheader.acesso-topo › .marca com o logotipo à esquerda e .marca.acesso-sistema › .nome[data-marca] à direita
Cartãomain.acesso-grade.so-cartao › section.acesso-cartao.cartao.vidro com h1 “Entrar”
Ação.botao.claro.cheio.sem-seta com .g-disco + G do Google e “Entrar com Google”
Avisos.nota#erro-login[hidden] (conta fora do domínio) e .nota com i-escudo
Rodapé.rodape “Precisa de acesso? Fale com quem administra.”
Design System/exemplos/entrar.html é a tela do sistema anterior (vitrine Tinta, .entrar) e está travada no Drive. Não parta dela: use exemplos/acesso.html. A plataforma usa a mesma tela em frontend/conta/entrar.html.
Kit para começar um sistema novo
Seis passos, na ordem. Ao fim, você tem a casca funcionando e só falta o conteúdo.
Copiar a pasta do DS
Copie os arquivos de Design System/ para o front do projeto, sem editar. Mudança que vale para todos os sistemas volta para a pasta do DS; estilo de uma tela só vai num <style> dela, sempre com tokens.
Código
seu-sistema/
├── tokens.css ← fundações: cores, tipografia, raios, sombras, vidro, degradês, espaços, movimento
├── base.css ← componentes prontos (classes)
├── layouts.css ← cascas de tela: sistema, acesso, grades, responsivo
├── comum.js ← comportamentos: tema, menus, combo, calendário, véu, lateral, gaveta, avisar()
├── marca.js ← nome do sistema embaralha ao passar o mouse
├── icones.svg ← ícones Lucide (traço 1.5) em <symbol>
├── logotipo.svg ← logotipo oficial (566,95 × 74,97)
├── simbolo.svg ← símbolo "Caminhos"
├── simbolo-led.js ← só se a tela de acesso tiver a vitrine com o símbolo em LED
└── index.html ← suas telas, montadas a partir de exemplos/
Carregar na ordem certa
tokens.css → base.css → layouts.css no <head>, com as fontes Sora e Inter. comum.js e marca.jsno fim do body, depois do sprite. Título da aba: Tela · Impulsamos | NOME.
Código
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tela · Impulsamos | NOME</title>
<script>try{if(localStorage.getItem('impulsamos:tema')==='escuro')document.documentElement.dataset.tema='escuro'}catch(e){}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@100..800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="tokens.css?v=202610301802">
<link rel="stylesheet" href="base.css?v=202610301802">
<link rel="stylesheet" href="layouts.css?v=202610301802">
<!-- estilo só desta tela: <style> aqui, sempre com var(--…) -->
</head>
<body class="casca">
…
<!-- fim do body: sprite de ícones, depois os scripts -->
<script src="comum.js?v=202610301802"></script>
<script src="marca.js?v=202610301802"></script>
</body>
Montar o esqueleto da casca
O HTML mínimo completo: marca, barra superior, lateral e painel, com trilha no topo, um cartão e os ícones que ele usa. Como nos exemplos (corrigidos em 28/10/2026): o sino dentro de .sino-caixa (abre as notificações) e o .abrir-gaveta (abre a lateral abaixo de 1024px).
Uma linha no <head>, antes dos CSS. O comum.js cria o botão lua/sol no pé da lateral e guarda a escolha. O escuro é escolha da pessoa, nunca automático pelo sistema operacional.
Código
<!-- 1. no <head>, antes dos CSS: aplica o tema salvo antes de pintar (sem piscar) -->
<script>try{if(localStorage.getItem('impulsamos:tema')==='escuro')document.documentElement.dataset.tema='escuro'}catch(e){}</script>
<!-- 2. nada mais: o comum.js cria o botão lua/sol no pé da lateral (.lateral-pe > .tema)
e guarda a escolha em localStorage "impulsamos:tema" (escuro | claro).
Opcional, em tela sem lateral: qualquer botão com data-alternar-tema faz o mesmo. -->
<button class="redondo" data-alternar-tema aria-label="Modo escuro"><svg class="i tema-lua"><use href="#i-lua"/></svg><svg class="i tema-sol"><use href="#i-sol"/></svg></button>
Usar o sprite de ícones
Cole os <symbol> de icones.svguma vez, no fim do body. Todo ícone é Lucide com traço 1.5, vindo do CSS: nunca copie o stroke-width="2" do site da Lucide.
Código
<!-- uma vez, no fim do <body>: o conteúdo de icones.svg (só os <symbol> que a tela usa já basta) -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="i-busca" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></symbol>
<!-- … -->
</svg>
<!-- uso: sempre class="i" (o traço 1.5 vem do CSS) -->
<svg class="i"><use href="#i-busca"/></svg>
Usar a marca
Logotipo SVG embutido (156px na casca, nunca imagem) e, 16px abaixo, o nome curto do sistema em caixa alta. Com marca.js, as letras embaralham ao passar o mouse; recolhida, a lateral mostra só o símbolo.
Este navegador não deixou a página ligar o escuro dentro das miniaturas (arquivo aberto direto do disco). Use o botão lua no pé da lateral: as telas leem a mesma escolha.
O que muda em cada tela
Os tokens mantêm o nome e trocam o valor pelo mesmo papel.
Onde
Claro
Escuro
Telas
Casca (atrás do painel)
--nevoa #EAF0F5
Tinta #101820
todas
Painel e blocos
--tela #F5F8FB
#14202B (Tinta + 20% Ardósia)
painel, perfil, configurações
Cartão, campo, menu
--branco #FFFFFF
#1A2C3A (Tinta + 48% Ardósia)
todas
Luz do topo e manchas
Bruma / Bruma Profunda
Ardósia sobre Tinta
painel, acesso
Texto
--tinta #101820
Tela #F5F8FB em alfa (46 → .5, 32 → .38)
todas
Links, nome do sistema
--ardosia-media #4B6478
Aço #8FA6B8
todas
Destaque Ardósia
.cartao.destaque, .bloco.escuro
Ardósia + luz Ardósia/Aço no canto e fio claro
painel
Ícone e barra de destaque
--acento = Ardósia
--acento = Bruma
painel (gráfico, pílulas de número), perfil
Gráfico
barra Bruma Profunda, alta Ardósia
barra Ardósia + Aço, alta Bruma
painel
.botao padrão
Tinta, hover Ardósia
Bruma com texto Tinta, hover branco, luz Lima
perfil, configurações
.botao.claro
branco
continua branco (Entrar com Google)
acesso
Controle marcado
--marcado = Ardósia
Lima com gota/check Tinta
painel (tarefas), perfil, configurações
Item ativo
.chip.ativo, aba: Tinta
Lima com texto Tinta; ícone ativo da lateral em Lima
configurações, lateral
Pílulas de estado
fundo claro + cor forte
fundo escuro + cor semântica clara
painel, perfil, configurações
Menus e janelas
vidro branco 78–86%
--vidro-denso #1A2C3A a 86%
todas
Foco pelo teclado
anel Bruma Profunda 4px
anel Lima a 50%, 3px
todas
Título-marca-d’água
Tinta a 30%
Tela a 30%
painel
Regras
O que vale para qualquer tela nova montada a partir destas.
Faça
Parta da tela mais próxima e troque só o conteúdo.
Ponha a trilha no .topo, começando no painel inicial.
Um .botao por grupo de ações; o resto é .fantasma.
Apagar vai para a lixeira, com confirmação numa .janela.
Estilo de uma tela só num <style> dela, com tokens.
Evite
Reescrever um componente que já existe no base.css.
Escuro automático pelo sistema operacional.
Dois blocos escuros encostados ou Ardósia como fundo de página.
Controle com o visual do navegador (select, data, alert).
Rodapé ou assinatura no pé da lateral.
Exemplos completos (28/10/2026): as telas de exemplos/ já têm o .abrir-gaveta, o sino dentro da .sino-caixa (abre as notificações), o menu ⋯ aberto pelo comum.js e o painel sem style="" de layout (só o dado de cada barra fica inline). Pode copiar direto.