Casca do sistema

4 áreas

body.casca: uma grade de duas colunas e duas linhas. Os componentes de casca só funcionam como filhos diretos da casca (.casca > …), por isso a casca inteira aparece aqui numa prévia.

A casca inteira

exemplos/painel.html

A tela de referência do DS, no tamanho real (1440 × 900) e reduzida. Ela é interativa: role o painel para a barra superior sumir, abra um grupo da lateral, clique em Recolher.

Abrir em tela cheia

As 4 áreas

grid 288px × (96px + 1fr)

Marca e barra superior dividem a primeira linha; lateral e painel, a segunda. O painel é a única área que rola.

Área	Grade	Medidas e fundo
`.marca`	col 1 · lin 1	padding 12 32 0; logotipo 156px
`.topo-barra`	col 2 · lin 1	flex, gap 14, padding 0 32 0 8; sobre a Névoa
`.lateral`	col 1 · lin 2	flex coluna, gap 2, padding 4 24 24, `overflow-y: auto`
`.painel`	col 2 · lin 2	`--tela`, raio `--r-painel` 28 só no canto superior esquerdo, padding 36 32 48 40
`.painel-conteudo`	dentro do painel	coluna, gap 24, sem largura máxima (texto corrido até 76ch)
`body.casca`	—	fundo `--nevoa`, altura 100vh; colunas animam 200ms `--ease`

Luz e profundidade do painel

.painel::before / ::after

O painel não é chapado: tem a luz do topo e uma mancha Bruma desfocada no canto direito. Não precisa escrever nada; vem do layouts.css.

Camada	Valor	Escuro
`::before` luz	`--g-painel`, 420px de altura, z-index −1	luz Ardósia sobre Tinta
`::after` mancha	círculo 620px `--bruma`, blur 120, opacidade .7, 120px para fora à direita	`--ardosia`, opacidade .55
barra de rolagem	8px, polegar `--bruma-profunda`	Tela a 18%
rolagens internas	sem barra vertical; horizontal 6px `--linha-forte`	igual (tokens)

Estrutura HTML completa

body.casca

O esqueleto de qualquer tela de sistema. A ordem dos filhos não importa para a grade, mas marca, barra, lateral e painel precisam ser filhos diretos do body.casca. O comum.js completa o resto (pé da lateral, gaveta, menus, véu).

Código da casca

<!doctype html>
<html lang="pt-BR">
<head>
<script>try{if(localStorage.getItem('impulsamos:tema')==='escuro')document.documentElement.dataset.tema='escuro'}catch(e){}</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Métricas · Impulsamos | NOME</title>
<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">
</head>
<body class="casca">

  <!-- 1 · Marca: coluna 1, linha 1 (288 × 96) -->
  <div class="marca">
    <svg class="logo" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.95 74.97"><!-- caminhos de logotipo.svg --></svg>
    <span class="nome" data-marca="NOME">NOME</span>
  </div>

  <!-- 2 · Barra superior: coluna 2, linha 1 -->
  <header class="topo-barra">
    <div class="busca">
      <svg class="i"><use href="#i-busca"/></svg>
      <input type="search" placeholder="Buscar candidato, vaga ou processo" aria-label="Buscar">
    </div>
    <div class="vao"></div>
    <button class="translucido"><svg class="i"><use href="#i-link"/></svg>Copiar link com os filtros</button>
    <div class="sino-caixa">
      <button class="redondo sino" aria-label="Notificações" aria-haspopup="menu" aria-expanded="false"><svg class="i"><use href="#i-sino"/></svg><span class="ponto"></span></button>
      <div class="popover" role="menu" hidden>
        <div class="popover-topo"><strong>Notificações</strong><button type="button">Marcar todas como lidas</button></div>
        <a class="notif" href="#"><div><strong>Nova candidatura</strong><p>Marina Costa se candidatou a Growth Marketer.</p><time>há 10 min</time></div></a>
        <a class="notif lida" href="#"><div><strong>Entrevista confirmada</strong><p>Ana Ribeiro confirmou quinta às 14h30.</p><time>ontem</time></div></a>
      </div>
    </div>
    <a class="avatar tinta" href="perfil.html" title="ana.ribeiro@impulsamos.es" aria-label="Perfil">AR</a>
    <button class="redondo abrir-gaveta" aria-label="Abrir menu" aria-expanded="false"><svg class="i"><use href="#i-menu"/></svg></button>
  </header>

  <!-- 3 · Lateral: coluna 1, linha 2 -->
  <aside class="lateral">
    <nav class="nav" aria-label="Recrutamento">
      <div class="nav-rotulo"><svg class="i"><use href="#i-maleta"/></svg>Recrutamento</div>
      <a href="#"><span class="com-icone"><svg class="i"><use href="#i-painel"/></svg>Painel</span></a>
      <a href="#"><span class="com-icone"><svg class="i"><use href="#i-pastas"/></svg>Processos</span><span class="contagem">4</span></a>
      <a href="#" class="ativo" aria-current="page"><span class="com-icone"><svg class="i"><use href="#i-grafico"/></svg>Métricas</span></a>
    </nav>
    <nav class="nav" aria-label="Pessoas">
      <div class="nav-rotulo"><svg class="i"><use href="#i-pessoas"/></svg>Pessoas</div>
      <a href="#"><span class="com-icone"><svg class="i"><use href="#i-usuario"/></svg>Candidatos</span></a>
    </nav>
    <div class="vao"></div>
    <div class="conta">
      <button class="conta-botao" aria-haspopup="menu" aria-expanded="false">
        <span class="avatar">AR</span>
        <span class="conta-nome"><strong>Ana Ribeiro</strong><span>ana.ribeiro@impulsamos.es</span></span>
        <svg class="i"><use href="#i-abre"/></svg>
      </button>
      <div class="popover menu-conta" role="menu" hidden>
        <a href="perfil.html" role="menuitem"><svg class="i"><use href="#i-usuario"/></svg>Perfil</a>
        <a href="configuracoes.html#equipe" role="menuitem"><svg class="i"><use href="#i-pessoas"/></svg>Equipe</a>
        <a href="configuracoes.html" role="menuitem"><svg class="i"><use href="#i-ajuste"/></svg>Configurações</a>
        <a href="entrar.html" role="menuitem" class="separa perigo"><svg class="i"><use href="#i-sair"/></svg>Sair</a>
      </div>
    </div>
    <!-- o comum.js acrescenta aqui o .lateral-pe (Recolher + botão de tema) -->
  </aside>

  <!-- 4 · Painel: coluna 2, linha 2 (a "página": rola sozinho) -->
  <main class="painel">
    <div class="painel-conteudo">
      <div class="topo">
        <div class="titulo">
          <h1>Métricas</h1>
          <nav class="trilha" aria-label="Você está em"><a href="#">Painel</a><svg class="i"><use href="#i-proximo"/></svg><a href="#">Recrutamento</a><svg class="i"><use href="#i-proximo"/></svg><strong aria-current="page">Métricas</strong></nav>
        </div>
      </div>
      <!-- conteúdo da tela -->
    </div>
  </main>

  <!-- ícones: o bloco de icones.svg, uma vez, no fim do body -->
  <svg width="0" height="0" style="position:absolute" aria-hidden="true"><!-- <symbol id="i-…"> … --></svg>
  <script src="comum.js?v=202610301802"></script>
  <script src="marca.js?v=202610301802"></script>
</body>
</html>

Marca

Logotipo em cima, nome curto do sistema 16px abaixo. Passe o mouse: o nome embaralha as letras (marca.js). Área de proteção: x = altura do I, livre nos quatro lados. Mínimo: logotipo 105 px · 27 mm; símbolo 12 px · 4 mm (detalhe em Símbolo e logotipo).

Marca da casca

.marca

Logotipo 156px (proporção 7,56 : 1, nunca mude), nome em Sora 600 10,5px caixa alta. O .divisor do HTML antigo fica escondido.

DS

Marca recolhida

.lateral-recolhida .marca

Com a lateral recolhida a marca mostra só o símbolo (34px): o logotipo é recortado com clip-path, o nome some. Não se escreve: vem da classe no body.

DS

Medidas da marca

base.css · layouts.css · marca.js

Título da aba do navegador: Tela · Impulsamos | NOME.

Peça	Valor	Regra
`.marca`	grid `auto 1fr auto`, column-gap 12, row-gap 16	logotipo na linha 1, nome na linha 2
`.marca .logo`	156 × 20,6px (vitrine 176 × 23,3; recolhida 257 × 34 recortado em 86,8%)	`fill: currentColor`; SVG embutido, nunca imagem
`.marca .nome`	Sora 600 10,5px/1, +.14em, caixa alta, `--ardosia-media`	`data-marca="NOME"` liga o embaralhar
embaralhar	30ms por quadro, ⅓ de letra por quadro, glifos A–Z 0–9 <>/{}[]	não roda com `prefers-reduced-motion`
`.marca .divisor`	`display: none`	legado (23/10/2026)
link	`.marca > .logo-link` também ocupa a linha 1	o logotipo pode levar ao painel inicial

Lateral

Itens soltos sobre a Névoa. Cada grupo é um botão que abre e fecha as páginas com animação de altura; o grupo da página ativa já começa aberto. Com vários grupos abertos a lateral rola; nenhum item encolhe.

Lateral com grupos

.lateral > .nav

Escreva o .nav-rotulo como div com ícone e nome; o comum.js troca por um button, cria a .nav-paginas e a seta. Clique nos grupos.

Estados do grupo e do item

.nav-rotulo · .nav a

Fechado é translúcido e cinza; aberto fica tinta e, no hover, Ardósia. Item ativo = cartão branco com sombra. O hover está forçado aqui com .ds-forca-hover, classe que só existe nesta página.

Fechado

Fechado · hover

Aberto

Aberto · hover

Item · repouso

Processos4

Item · hover

Processos4

Item · ativo

Métricas

Pé da lateral

.lateral-pe

Recolher à esquerda e o botão de tema (lua no claro, sol no escuro) à direita. É criado pelo comum.js no fim de .casca > .lateral, abaixo da .conta: não escreva à mão. O botão de tema daqui funciona de verdade.

HTML gerado pelo comum.js

<!-- gerado pelo comum.js no fim de .casca > .lateral (não escreva à mão) -->
<div class="lateral-pe">
  <button type="button" class="recolher" title="Recolher a lateral" aria-expanded="true">
    <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>Recolher
  </button>
  <button type="button" class="tema" data-alternar-tema aria-pressed="false" aria-label="Modo escuro" title="Usar o modo escuro">
    <svg class="i tema-lua" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
    <svg class="i tema-sol" viewBox="0 0 24 24" aria-hidden="true">…</svg>
  </button>
</div>

Medidas da lateral

layouts.css

Raio de controle 12 em tudo. Páginas de um grupo são menores (13px, ícone 15px) e recuadas 12px, sem trilho nem traço.

Peça	Valor	Estados
`.nav-rotulo`	40px, padding 0 12, Inter 600 10,5px caixa alta +.05em, ícone 17, fundo branco 35% + `--borda-interna`	hover branco 70%; aberto: texto `--tinta`; aberto+hover: `--ardosia` e branco
`.seta`	13px, gira 90° quando aberto	280ms `--ease-suave`
`.nav-paginas`	grid `1fr` ↔ `0fr` + opacidade; miolo com padding-left 12	280ms `--ease-suave` (altura), 220ms `--ease` (opacidade)
`.nav a`	padding 7 12, 13px 500, `--tinta-66`, ícone 15	hover branco 55%; `.ativo`: `--branco` + `--sombra-ativo`, 600, `--tinta`
`.contagem`	20px, Bruma com número Ardósia, 11px 600	empurrada para a direita
`.nav-sub`	recuo 18, itens 13,5px 400, `.ponto-s` de situação	ativo: branco 70%, 500
`.lateral .vao`	flex 1 (mín. 16px)	empurra a conta e o pé para baixo
`.recolher` / `.tema`	13,5px 500 `--tinta-56`; tema 38 × 38	hover branco 45%; foco `--sombra-foco`

Lateral recolhida

76px, só ícones. Passe o mouse nos ícones: o nome aparece numa caixinha Tinta (.dica-lateral). A dica some ao sair do ícone e em qualquer clique, inclusive em "Abrir a lateral".

Recolhida

.lateral-recolhida

O Recolher põe a classe no body.casca e guarda a escolha em localStorage (impulsamos:lateral). Grupos mostram só o ícone; clicar num grupo abre a lateral e o grupo. Navegação sem rótulo mostra os ícones das páginas.

Passe o mouse ou foque um ícone para ver a dica com o nome.

O que muda ao recolher

layouts.css › LATERAL RECOLHIDA

Nada novo para escrever: tudo sai da classe .lateral-recolhida no body.

Peça	Recolhida
grade	`76px 1fr` (transição 200ms `--ease`)
marca	só o símbolo, 34px, centrado; `.nome` some
lateral	padding 4 14 24
grupos	só o ícone (`font-size: 0`), sem seta; `.nav-paginas`, `.contagem` e `.nav-sub` somem
conta	só o avatar; o menu abre ao lado (fixed, left 84, bottom 72, 220px)
pé	Recolher vira só ícone (“Abrir”); o tema desce para baixo dele
`.dica-lateral`	fixed, z-index 80, padding 6 10, raio 8, fundo `--tinta`, texto `--branco` 12px 500, `--sombra-pop`; escuro: Bruma com texto `--tinta-fixa`
véu do topo	começa em `left: 76px`

Conta

Cartão translúcido no pé da lateral. O bloco inteiro abre o menu. Só entra em sistema com login.

Conta com menu

.conta

Clique: o menu abre para cima. Fecha com clique fora ou Esc (o foco volta ao botão). Perfil e Configurações levam às telas padrão do DS.

Menu aberto

.popover.menu-conta

O mesmo menu, parado. Sair fica separado por linha (.separa) e em vermelho de perigo (.perigo).

Peça	Valor
`.conta-botao`	padding 12 14, raio `--r-interno` 16, branco 55% (hover e aberto 85%)
avatar · nome · e-mail	34px · 13px 600 · 11,5px `--tinta-46` com reticências
ícone	`i-abre` (chevrons ↕), 15px `--tinta-46`
menu	`bottom: calc(100% + 8px)`, largura da conta, padding 6; itens 9 12, 13px 500, raio 10

Gaveta

Abaixo de 1024px a lateral sai da grade e vira uma gaveta da esquerda (268px) sobre um véu escurecido.

A casca em 820px

.abrir-gaveta

A tela de referência do DS em largura de tablet. Clique no ≡ da barra para abrir a gaveta; o véu, Esc ou um clique num link fecham.

Código

<!-- na .topo-barra (só aparece abaixo de 1024px) -->
<button class="redondo abrir-gaveta" aria-label="Abrir menu" aria-expanded="false"><svg class="i"><use href="#i-menu"/></svg></button>

<!-- o comum.js cria o véu no fim da .casca e alterna .gaveta-aberta no body -->
<div class="veu-gaveta"></div>

O que muda abaixo de 1024px

@media (max-width: 1024px)

A marca fica à esquerda da barra superior; o painel ocupa a largura toda com os dois cantos de cima arredondados.

Peça	Abaixo de 1024px
grade	`auto 1fr` × `72px 1fr`
`.lateral`	fixed, z-index 70, 268px, padding 20 16 24, `--nevoa`, `--sombra-pop`, `translateX(-100%)` → `none` em 250ms `--ease-out`
`.veu-gaveta`	fixed, z-index 69, Tinta a 32% (escuro: 60%)
`.abrir-gaveta`	aparece (`display: grid`); acima de 1024px fica escondido
Recolher	some (não faz sentido na gaveta)
busca da barra	some
barra oculta	desligada: a barra fica sempre visível
abaixo de 640px	painel com padding 24 16 40; título 30px; a ação `.translucido` da barra some

Barra superior

Sobre a Névoa, sem fundo próprio: busca translúcida, uma ação, o sino com notificações e o avatar que leva ao Perfil.

Barra completa

.topo-barra

Clique no sino: o .popover de notificações abre embaixo dele (comum.js). Marcar todas como lidas apaga os pontos. Em tela estreita a busca (abaixo de 1024px) e a ação translúcida (abaixo de 640px) somem, como no sistema.

AR

Peças da barra

.busca · .redondo · .translucido · .avatar

Busca em foco acende o brilho da marca; o redondo com .ponto avisa não lida. O foco da busca e o hover do redondo estão forçados aqui (.ds-forca-*, só desta página).

AR

Medidas da barra

base.css · layouts.css

Tudo translúcido (--translucido, branco 60%) com --borda-interna; hover branco 85%. Secundários sem efeito: só troca de fundo e clique encolhe 0,97.

Peça	Valor	Comportamento
`.busca`	até 460px na barra; campo 44px, raio 12, padding 0 16 0 42, 13,5px; ícone 16 `--tinta-46`	foco: fundo `--branco` + brilho cônico Bruma girando 5s (blur 7)
`.translucido`	44px (`.compacto` 36), padding 0 18, 12,5px 500, ícone 16	some abaixo de 640px na barra
`.redondo`	44 × 44, círculo, ícone 18 `--tinta-66`	hover branco 85%
`.redondo .ponto`	7px, `--marcado` (Ardósia; escuro: Lima), anel 2px branco (escuro: Névoa), top 10 right 11	some ao marcar tudo como lido
`.sino-caixa .popover`	360px, abaixo do sino, alinhado à direita, vidro V3	clique abre; clique fora ou Esc fecha
`a.avatar.tinta`	32px, Ardósia, iniciais Sora 600 12px brancas	leva ao Perfil; e-mail no `title`

Barra oculta e véu

Dois comportamentos de rolagem do painel. Para ver ao vivo, role uma seção longa desta página (o véu aparece atrás do título) ou role o painel dentro da prévia em Casca (a barra superior some).

Barra oculta (estilo Dock)

.barra-oculta

Depois de rolar, o painel sobe por cima da barra superior. Levar o mouse à borda de cima da tela traz a barra de volta. Só em computador.

Regra	Valor
esconde	rolagem > 240px e ainda sobram > 240px para rolar (página curta não esconde)
volta	rolagem < 96px (histerese) ou mouse a ≤ 4px do topo; sai da barra, esconde de novo
barra	opacidade 0 em 250ms `--ease`, sobe 12px em 300ms `--ease-out`, sem clique
painel	`margin-top: -96px` em 300ms `--ease-out`
fresta	`.barra-oculta.casca::before`: 1px `--tela`, z-index 31, tapa a linha acima do véu
abaixo de 1024px	desligada

Véu do topo

.topo.rolou::before

Vidro V4: desfoque que some para baixo, sem linha. Aparece quando o painel rola mais de 8px (comum.js põe .rolou).

Propriedade	Valor
posição	`position: fixed`, top 96, left 288 (recolhida 76), altura 160, canto 28
fundo	`--veu` + `blur(14px)`
máscara	`linear-gradient(180deg, #000 55%, transparent)`
com barra oculta	`top: 1px` (nunca 0: o Chrome ignora a máscara)
abaixo de 1024px	top 72, left 0
escuro	`--veu` na cor do painel (#14202B)

Por que fixed

O véu é fixed, não absolute dentro do .topo sticky: o Chrome ignora a máscara de elemento sticky dentro de contêiner que rola e desenha uma linha reta. Não “simplifique” isso.

Topo e trilha

Cabeçalho das telas simples: título, trilha logo abaixo e ações à direita. Fica grudado no alto do painel ao rolar.

Topo de página

.topo

Toda tela de sistema tem trilha no lugar da .meta, sempre começando no painel geral. A .meta (método, data, status) pode ficar no DOM com hidden, para leitura por IA. Aqui o topo aparece no fluxo, sem o grude e o véu da página.

Designer Sênior

Trilha (breadcrumb)

.trilha

Caminho clicável Painel › Grupo › Página. Separador i-proximo 13px; página atual em strong com aria-current="page".

Linha de meta

.topo .meta

Informação de apoio em 12px --tinta-46, separada por .sep. Nas telas de sistema ela sai de vista (a trilha ocupa o lugar).

RecrutamentoAtualizado em 27 out 2026Aguardando

Medidas do topo

layouts.css

O topo estica até as bordas do painel (margens negativas) para o véu cobrir a largura toda.

Peça	Valor
`.topo`	sticky, top −36, z-index 30; margin −36 −32 0 −40; padding 36 32 14 40; flex com quebra, gap 12
`.topo .titulo`	flex 1, mín. 240px
`.topo h1`	Título 1: Sora 450 34px (30px abaixo de 640px)
`.topo .trilha`	margin-top 10; 12px `--tinta-56`; links hover `--tinta`; atual 600 `--tinta`; separador `--tinta-32`
`.topo .meta`	margin-top 8; 12px `--tinta-46`; gap 8; `[hidden]` some
ações	filhos diretos do `.topo` depois do `.titulo`: um `.botao` no máximo, o resto `.fantasma`

Abas e alternadores

Trocar a vista de um mesmo conteúdo, sem sair da tela. O DS dá o visual; quem troca o conteúdo é a tela.

Abas

.abas

Chips num grupo; a aba escolhida tem aria-selected="true" e fica tinta (escuro: Lima). Para 3 a 6 vistas.

Alternar

.alternar

Dois (ou poucos) botões num trilho Névoa; o ativo é um cartão branco com --sombra-ativo. Para o jeito de ver: Grade | Lista.

Medidas

base.css

Chip tem um tamanho só (32px). Ativo por cor, nunca por tamanho.

Peça	Valor	Escuro
`.abas`	inline-flex, gap 6; `.chip` 32px, padding 0 14, 12,5px 500, `--nevoa`; hover `--bruma-clara`	—
`.abas .chip[aria-selected=true]`	`--tinta` com texto branco	Lima com `--tinta-fixa`
`.alternar`	trilho `--nevoa`, padding 3, gap 2; botões 28px, padding 0 12, 12,5px 500 `--tinta-66`, ícone 14	tokens
`.alternar button.ativo`	`--branco` + `--sombra-ativo`, texto `--tinta`	cartão escuro

Tela de acesso

body.acesso: a tela de entrar. Fundo Névoa com luz e manchas, o símbolo grande no fundo, a marca no canto e um cartão de vidro com Entrar com Google.

Entrar

exemplos/acesso.html

A tela de acesso padrão do DS, em 1440 × 900 (a mesma da plataforma, frontend/conta/entrar.html). Só contas @impulsamos.es.

Abrir em tela cheia

Estrutura: só o cartão

.acesso-grade.so-cartao

O modelo em uso: cartão de 600px centrado, em vidro V1, com uma mancha atrás para o desfoque aparecer.

Código

<body class="acesso">
  <span class="mancha um" aria-hidden="true"></span>
  <span class="mancha dois" aria-hidden="true"></span>
  <span class="mancha tres" aria-hidden="true"></span>
  <span class="simbolo-fundo" aria-hidden="true"></span>

  <header class="acesso-topo">
    <div class="marca">
      <svg class="logo" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.95 74.97"><!-- caminhos de logotipo.svg --></svg>
    </div>
    <div class="marca acesso-sistema"><span class="nome" data-marca="MARCA">MARCA</span></div>
  </header>

  <main class="acesso-grade so-cartao">
    <section class="acesso-cartao cartao vidro" aria-label="Entrar">
      <h1>Entrar</h1>
      <button class="botao claro cheio sem-seta" type="button"><span><span class="g-disco"><svg viewBox="0 0 24 24" aria-hidden="true"><!-- G do Google, 4 cores --></svg></span>Entrar com Google</span></button>
      <div class="nota" hidden><svg class="i"><use href="#i-info"/></svg><span>Essa conta não é <strong>@impulsamos.es</strong>. Entre com o e-mail da empresa.</span></div>
      <div class="nota"><svg class="i"><use href="#i-escudo"/></svg><span>Login do time: só contas <strong>@impulsamos.es</strong>. Nada é guardado fora da conta Google.</span></div>
      <div class="rodape"><span>Precisa de acesso? Fale com quem administra.</span></div>
    </section>
  </main>

  <script src="comum.js?v=202610301802"></script>
  <script src="marca.js?v=202610301802"></script>
</body>

Estrutura: vitrine + cartão

.acesso-grade

O modelo completo do layouts.css: vitrine de vidro com título-marca-d'água, símbolo em LED num .bloco.escuro e pílulas, ao lado do cartão. Abaixo de 1024px a vitrine desce; abaixo de 640px as pílulas somem.

Código

<!-- modelo completo (layouts.css): vitrine de vidro à esquerda + cartão de entrar à direita -->
<main class="acesso-grade">
  <section class="acesso-vitrine cartao vidro">
    <div class="titulo-agua">MARCA</div>
    <p class="lede">Uma frase curta sobre o sistema.</p>
    <div class="acesso-simbolo bloco escuro">
      <canvas class="simbolo-led" data-simbolo-led></canvas>
      <span class="t-rotulo">Caminhos</span>
    </div>
    <div class="faixa-pilulas">
      <div class="pilula-numero"><svg class="i"><use href="#i-pastas"/></svg><span class="texto">…</span><span class="n">…</span></div>
    </div>
  </section>
  <section class="acesso-cartao cartao">…cartão de entrar…</section>
</main>
<script src="simbolo-led.js?v=202610301802"></script>

Medidas da tela de acesso

layouts.css › TELA DE ACESSO

A tela legada (.entrar + .vitrine Tinta + .google) continua no CSS só para a legada exemplos/entrar.html: não use em tela nova.

Peça	Valor	Escuro
`body.acesso`	grid `auto 1fr`, gap 24, padding 28 32 40; fundo `--g-painel` sobre `--nevoa`	tokens
`.mancha.um`	560px, left −180, top 30%, Bruma, opacidade .7	igual
`.mancha.dois`	620px, canto superior direito, `--bruma-profunda` .55	Ardósia
`.mancha.tres`	380px atrás do cartão, `--bruma-profunda`, blur 70, .9	Ardósia
`.simbolo-fundo`	símbolo 220vh, fixed, girado 14°, `--bruma-profunda` a 25%	Ardósia a 45%
`.acesso-topo`	marca à esquerda (156px); nome do sistema no canto direito	—
`.acesso-cartao.vidro`	`--vidro` + borda `--vidro-borda` + `--sombra-cartao`, blur 24, raio 28; so-cartao: padding 44 40	vidro escuro
`h1` · texto	Display 2 (40px; 32 no celular) · 13,5px `--tinta-66`	tokens
Entrar com Google	`.botao.claro.cheio.sem-seta` com `.g-disco` 24px (G de 14px)	continua branco
`.nota` no vidro	branco 55% + borda de vidro; numa linha só (quebra abaixo de 640px)	Tela a 5%

Regras

O que vale para qualquer sistema montado nesta casca.

Faça

Monte toda tela a partir de exemplos/painel.html, com marca, barra, lateral e painel como filhos diretos do body.casca.
Ponha trilha no .topo de toda tela, começando no painel geral.
Dê ícone a cada grupo da lateral: recolhida, é só o que aparece.
Inclua o .abrir-gaveta na barra superior: sem ele a lateral some abaixo de 1024px.
Use aria-current="page" no item ativo e na página atual da trilha.

Não faça

Pôr rodapé, assinatura ou texto no pé da lateral: ele é vazio por padrão.
Escrever à mão o pé da lateral, a seta dos grupos ou a .nav-paginas: o comum.js cria.
Colocar largura máxima no .painel-conteudo: só o texto corrido para em 76ch.
Usar a tela de entrar legada (.entrar, .vitrine Tinta, .google) em tela nova.
Ligar o tema escuro sozinho (prefers-color-scheme): é sempre escolha da pessoa.

Casca fora da casca

Os seletores do layouts.css e do comum.js dependem da casca: .casca > .lateral ganha o pé e o Recolher, .casca > .painel esconde a barra, .casca .abrir-gaveta abre a gaveta. Um pedaço de casca solto no conteúdo não funciona igual: por isso esta página mostra a casca em prévia.

Acessibilidade e teclado

comum.js

O que o DS já entrega e o que a tela precisa fazer.

Peça	Já vem	A tela faz
grupo da lateral	`button` com `aria-expanded` e `title`	`aria-label` no `nav`
conta e sino	`aria-expanded`; Esc fecha e devolve o foco	`aria-haspopup="menu"`, `role="menu"` e `menuitem`
Recolher e tema	`title`, `aria-expanded` / `aria-pressed`, foco `--sombra-foco`	—
gaveta	`aria-expanded`; Esc fecha	`aria-label="Abrir menu"`
redondos e avatar	—	`aria-label` (só ícone)
movimento	embaralhar e animações respeitam `prefers-reduced-motion`	—

Navegação e casca

Casca do sistema

Marca

Lateral

Lateral recolhida

Conta

Gaveta

Barra superior

Barra oculta e véu

Topo e trilha

Designer Sênior

Abas e alternadores

Tela de acesso

Regras