Espaços, raios e superfícies · Impulsamos

Espaçamentos

12

Escala base 4: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. Gaps, respiros e margens saem desta régua; clique no token para copiar.

Token	Valor	Onde aparece no DS
`--e-1`	4px	Gap da paginação; folga mínima entre peças coladas.
`--e-2`	8px	Ícone + texto no `.botao`, no `.chip` e na `.trilha`; ações de um cartão.
`--e-3`	12px	Gap da `.cartao-cabeca`, do `.item-lista` e da `.faixa-pilulas`.
`--e-4`	16px	Gap dos `.indicadores`; respiro lateral do painel no celular.
`--e-5`	20px	Gap das grades `.grade-2`/`.grade-3`; respiro do `.bloco`.
`--e-6`	24px	Gap entre seções do `.painel-conteudo`; respiro do `.cartao` (24 × 26).
`--e-8`	32px	Respiro direito do painel e da barra superior; respiro lateral da marca.
`--e-10`	40px	Respiro esquerdo do painel; vitrine da tela de entrar.
`--e-12`	48px	Respiro de baixo do painel.
`--e-16`	64px	Sem uso fixo nos componentes hoje.
`--e-20`	80px	Sem uso fixo nos componentes hoje.
`--e-24`	96px	Altura da barra superior (primeira linha da casca).

Atenção

O base.css e o layouts.css escrevem os valores em px direto (nenhum usa var(--e-*)), e alguns ficam fora da régua: cartão 24 × 26, gap 14 da barra superior, respiro 36 do topo do painel. Em tela nova, use os tokens; os valores fora da régua só existem dentro dos componentes prontos.

Raios por camada

6 + círculo

Quanto mais por fora, mais redondo: painel 28 › cartão 24 › bloco 20 › interno 16 › controle 12. Botões, chips e pílulas são sempre pílula 999. Círculo (50%) só em avatar, disco, bolinha e pino.

Painel · 28--r-painel

Canto do .painel sobre a Névoa (só o de cima à esquerda; abaixo de 1024, os dois de cima).

Cartão · 24--r-cartao

.cartao, .janela, .atencao, .cartao-resumo. No celular o cartão desce para 20.

Bloco · 20--r-bloco

.bloco, .bloco.escuro, .atencao-vidro: dentro de um cartão.

Interno · 16--r-interno

.bloco.nevoa, .popover, .calendario, .aviso, .cuidado, .zona, conta da lateral.

Controle · 12--r

Campos, .combo-botao, itens da lateral, .nota, .icone, busca.

Pílula · 999--r-pilula

.botao, .fantasma, .chip, .pilula, barras de gráfico e de progresso.

Círculo · 50%border-radius: 50%

Só .avatar, .disco, .redondo, .ponto-s, dias do calendário.

Camadas aninhadas

.cartao › .bloco › .bloco.nevoa › .campo › .botao

Cada camada usa o raio dela, nunca o do pai. É isso que deixa os cantos concêntricos sem conta nenhuma.

Cartão · 24

Campo · 12

AR

Faça

Use só os seis tokens de raio e o círculo.
Escolha o raio pela camada (onde o elemento está), não pelo tamanho dele.
Botão, chip, pílula e barra de gráfico: sempre 999.

Evite

Raio inventado (8, 10, 14, 18…) em peça nova.
Círculo em cartão, botão de texto ou imagem que não é avatar.
Bloco interno mais redondo que o cartão que o contém.

Sombras

4

Sombras curtas e frias. Não invente outras: a profundidade forte vem do vidro e da luz, não da sombra.

As quatro sombras + a borda interna

--sombra-*

O anel de foco é a sombra que aparece pelo teclado em botões e controles (campos de texto usam o brilho no lugar).

cartão

pop

foco

ativo

borda-interna

Token	Valor (claro)	Valor (escuro)	Uso
`--sombra-cartao`	`0 1px 2px rgba(16,24,32,.04), 0 10px 28px -18px rgba(16,24,32,.14)`	`0 0 0 1px rgba(245,248,251,.05), 0 1px 2px rgba(8,12,16,.4), 0 16px 32px -18px rgba(8,12,16,.8)`	`.cartao`, aba ativa, `.vidro-denso`.
`--sombra-pop`	`0 24px 60px -24px rgba(37,65,87,.35), 0 2px 6px rgba(16,24,32,.06)`	`0 0 0 1px rgba(245,248,251,.07), 0 24px 60px -20px rgba(8,12,16,.85)`	Tudo que flutua: `.popover`, `.calendario`, `.janela`, aviso flutuante, gaveta.
`--sombra-foco`	`0 0 0 4px rgba(180,199,214,.55)`	`0 0 0 3px rgba(227,233,53,.5)` (Lima)	`:focus-visible` de botões, caixas, radios, chave, combo aberto.
`--sombra-ativo`	`0 1px 2px rgba(16,24,32,.06)`	`0 1px 2px rgba(8,12,16,.5), inset 0 0 0 1px rgba(245,248,251,.06)`	Item ativo da lateral, botão ativo do `.alternar`.
`--borda-interna`	`inset 0 0 0 1px rgba(16,24,32,.06)`	`inset 0 0 0 1px rgba(245,248,251,.08)`	Contorno embutido de pílulas e controles translúcidos (ver Linhas).

Vidros

4

Branco translúcido + desfoque: o que está atrás aparece borrado. Vidro precisa de algo atrás (Névoa, degradê, mancha, foto). Um ou dois vidros por tela, nunca sobre branco chapado.

V1 · Vidro

.cartao.vidro

Fundo --vidro (branco 50%), borda --vidro-borda (75%), blur 24. Sobre a Névoa ou um degradê: cartão de resumo, tela de acesso, faixa de atenção.

V1 · vidro

Cartão de resumo sobre a luz do topo do painel.

V3 · Vidro denso

.cartao.vidro-denso

Fundo --vidro-denso (branco 70%), blur 20 + --sombra-cartao. Para o que flutua sobre a interface; menus, calendário e janela usam a mesma família.

V3 · vidro denso

Lê melhor que o V1 quando o fundo tem muito detalhe.

V2 · Vidro sobre foto

--vidro-foto

Branco 40%, blur 30 + saturate 1.4, borda branca 60%. Não tem classe pronta no base.css: escreva com o token (código abaixo).

V2 · sobre foto

Legenda ou chamada por cima de uma fotografia.

Código (CSS)

/* V2 · vidro sobre foto (tokens.css: --vidro-foto) */
.vidro-foto {
  background: var(--vidro-foto);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  backdrop-filter: blur(30px) saturate(1.4);
  border-radius: var(--r-cartao);
}

V4 · Véu

--veu

Degradê da cor do painel (90% → 0) + blur 14 + máscara que some para baixo. É o véu do .topo quando o painel rola: role esta página para ver o de verdade.

Título da página

Código (CSS do layouts.css)

/* o comum.js põe .rolou no .topo depois de 8px de rolagem */
.topo::before {
  content: ""; position: fixed; z-index: -1;
  top: 96px; left: 288px; right: 0; height: 160px;
  border-top-left-radius: var(--r-painel);
  background: var(--veu);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent);
  mask: linear-gradient(180deg, #000 55%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), left .2s var(--ease);
}
.topo.rolou::before { opacity: 1; }

Vidro	Fundo	Borda	Desfoque	Quando usar
V1 `.cartao.vidro`	`--vidro` branco 50%	`0 0 0 1px var(--vidro-borda)` (75%)	`blur(24px)`	Sobre Névoa, degradê ou manchas: cartão de resumo, `.atencao-vidro`, tela de acesso, `.dupla`.
V2 (sem classe)	`--vidro-foto` branco 40%	`rgba(255,255,255,.6)`	`blur(30px) saturate(1.4)`	Sobre fotografia.
V3 `.cartao.vidro-denso`	`--vidro-denso` branco 70%	`0 0 0 1px rgba(16,24,32,.06)` + `--sombra-cartao`	`blur(20px)`	Sobre Tela ou Névoa, flutuando sobre interface.
V4 véu	`--veu` Tela 90% → 0	—	`blur(14px)` + máscara	Cabeçalho fixo sobre conteúdo que rola (`.topo`).
Menus	branco 78% (`.popover`, `.calendario`) · 86% (`.janela`)	`inset 0 0 0 1px rgba(255,255,255,.7)` + `--sombra-pop`	`blur(20px) saturate(1.2)` · janela `blur(24px)`	Família do V3, com valores próprios no `base.css`.
Translúcido	`--translucido` branco 60%	`--borda-interna`	sem desfoque	Controles da barra superior e da lateral (`.translucido`, `.redondo`, busca).

Modo escuro

Os vidros trocam de cor pelos tokens: --vidro vira o cartão escuro a 55% (rgba(26,44,58,.55)), --vidro-denso a 86%, --vidro-foto Tinta a 40%, --vidro-borda Tela a 10% e o --veu usa a cor do painel escuro. Menus, calendário e janela passam a usar --vidro-denso.

Bordas internas, linhas e divisores

4

Linhas de 1px, sempre tinta (ou branco) em alfa baixo: separam sem pesar. Nada de contorno grosso.

Os quatro fios

--linha · --linha-forte · --borda-interna · --vidro-borda

Divisor e borda de cartão em 7%; borda de campo e de fantasma em 14%; controles translúcidos com borda embutida.

--linha

--linha-forte

--borda-interna

--vidro-borda

Divisores

.linha-sep · .sep

.linha-sep: linha horizontal de 1px em --linha. .sep: traço vertical de 12px em --linha-forte, entre itens de uma linha.

Design SystemAtualizado em 27 out 2026

Conteúdo depois do divisor.

Bordas de controle

.fantasma · .translucido · .campo

Fantasma e campo levam borda --linha-forte; o translúcido leva a borda interna, que não ocupa espaço.

Token	Claro	Escuro	Uso
`--linha`	`rgba(16,24,32,.07)`	`rgba(245,248,251,.08)`	Divisores, linhas de tabela e lista (`.item-lista`, `.sanfona`), borda de cartão.
`--linha-forte`	`rgba(16,24,32,.14)`	`rgba(245,248,251,.16)`	Borda de campo, `.fantasma`, `.combo-botao`, `.tecla`; `.sep`.
`--borda-interna`	`inset 0 0 0 1px rgba(16,24,32,.06)`	`inset 0 0 0 1px rgba(245,248,251,.08)`	`.translucido`, `.redondo`, busca, `.pilula-numero`, `.nav-rotulo`.
`--vidro-borda`	`rgba(255,255,255,.75)`	`rgba(245,248,251,.1)`	Fio claro dos vidros V1.
`--hover`	`rgba(16,24,32,.04)`	`rgba(245,248,251,.05)`	Fundo ao passar o mouse (não é linha, mas é da mesma família).

Grade da casca

body.casca é uma grade de duas colunas (lateral | resto) e duas linhas (barra superior | painel). Troque o estado abaixo para ver as medidas mudarem.

Lateral aberta Recolhida Abaixo de 1024px

Marca288

Barra superior96

Lateralrespiro 4 · 24 · 24

36324840

.painel-conteudocoluna, gap 24, sem largura máxima

Gaveta · 268

Peça	Medida	Abaixo de 1024	Abaixo de 640
Coluna da lateral	288px · recolhida 76px (transição .2s `--ease`)	Sai da grade e vira gaveta de 268px (fixa, Névoa, `--sombra-pop`)	igual
Linha da barra superior	96px	72px	igual
`.marca`	respiro `12 32 0`, logotipo 156 × 20,6, nome 16px abaixo	à esquerda da barra, respiro `0 12 0 20`	igual
`.topo-barra`	respiro `0 32 0 8`, gap 14, busca até 460px	respiro `0 20 0 8`, gap 10, busca some	ação `.translucido` some
`.lateral`	respiro `4 24 24` · recolhida `4 14 24`	gaveta: respiro `20 16 24`	igual
`.painel`	respiro 36 32 48 40 (cima, direita, baixo, esquerda), canto 28 em cima à esquerda, rolagem própria	ocupa as duas colunas, canto 28 nos dois de cima	respiro 24 16 40 16
`.painel-conteudo`	coluna com gap 24, sem largura máxima; texto corrido até 76ch	igual	igual
Luz do topo	`--g-painel` em 420px de altura + mancha Bruma 620px (blur 120)	igual	igual
Véu do `.topo`	fixo em `top: 96px; left: 288px` (recolhida 76), 160px de altura	`top: 72px; left: 0`	igual

Esqueleto da casca

body.casca

A ordem dos filhos não importa: cada um tem a sua célula da grade. Na plataforma, o plataforma.js desenha marca, barra e lateral; a página só escreve o main.painel.

Código

<body class="casca">
  <div class="marca">…logotipo + <span class="nome" data-marca="NOME">NOME</span></div>
  <header class="topo-barra">.busca + .redondo(s) + .avatar + .redondo.abrir-gaveta</header>
  <aside class="lateral"><nav class="nav">…</nav></aside>
  <main class="painel">
    <div class="painel-conteudo">
      <div class="topo"><div class="titulo"><h1>Título</h1><nav class="trilha">…</nav></div></div>
      …conteúdo…
    </div>
  </main>
</body>

Quebras de tela

6

Quebras por largura máxima (max-width): a tela grande é o padrão e cada quebra só tira ou empilha. As três que mais mudam a casca: 1024, 860 e 640.

640768860102412801440

01920

Faixas do trilho: até 640 celular · 641 a 1024 lateral em gaveta · acima de 1024 casca completa. Em Ardósia, quebras do DS; em Ardósia Média, as da plataforma (860) e a convenção do celular (768).

Quebra	De onde	O que muda
≤ 1440	`layouts.css`	`.grade-lista-detalhe` empilha (lista em cima, detalhe embaixo).
≤ 1280	`layouts.css` · `plataforma.css`	`.indicadores` em 2 colunas; `.faixa-pilulas` quebra em 2; no `.painel-cabeca` o título ocupa a linha e os cartões de resumo ficam lado a lado; `.grade-3` vira 2. Plataforma: `.bento .s3` ocupa meia linha.
≤ 1024 · gaveta	`layouts.css` · `plataforma.css`	A lateral sai e vira gaveta da esquerda (268px, véu escurecido, abre pelo `.abrir-gaveta` com `i-menu`; Esc, véu ou link fecham). Barra superior 72px, marca à esquerda dela, busca some, Recolher some. Painel ocupa tudo com os dois cantos de cima em 28. A barra não se esconde mais ao rolar. `.col-esconde` some; `.grade-2` vira 1 coluna; tela de entrar vira só o cartão. Plataforma: `.cabeca` em 1 coluna, `.bento` em linha inteira.
≤ 860 · plataforma	`plataforma.css` (não é do DS)	O `.explorador` vira coluna (abas em grade em cima, conteúdo embaixo); a `.dupla` vira 1 coluna; o botão Conteúdo da Página sai da barra superior.
< 768 · celular	`LEIA-PRIMEIRO` (convenção)	Fronteira celular × computador quando o sistema separa os dois. Não há regra no CSS.
≤ 640	`layouts.css` · `plataforma.css`	Painel com respiro 24 16 40 16; título do `.topo` 30px; busca na largura toda; `.indicadores`, `.grade-3` e `.painel-cabeca` em 1 coluna; `.cartao` com respiro 18 e raio 20; título-marca-d'água 32px; a ação `.translucido` da barra some. Plataforma: `.compara` em 1 coluna, abas do explorador 2 × 2, `.alternar` vira grade.

Divergência

O LEIA-PRIMEIRO lista as quebras 1440, 1280, 1024 e 640 e cita 768 como celular; a 860 existe só no plataforma.css. O comentário do layouts.css fala em 1280, 1024, 768 e 640, mas não há regra em 768 no código.