F3.6 · Fundações

Elevation & Shadows

Hairlines antes de sombras. Quando a sombra é necessária, ela é tingida com a tinta institucional para preservar temperatura. Três níveis canônicos.

01

Os três níveis

NívelTokenValorUso
E1 — Card--e10 1px 2px rgba(26,26,29,0.06)Cards elevados, painéis sutis.
E2 — Popover--e20 4px 12px rgba(26,26,29,0.10)Tooltips, popovers, dropdowns.
E3 — Modal--e30 12px 28px rgba(26,26,29,0.16)Modais, sheets, drawers.
02

Hairline-first

A regra de ouro: tente borda fina antes de sombra. Sombra é o último recurso para criar separação visual.

/* Bom: hairline antes de sombra */
.card { border: 1px solid var(--border); }
.card.elevated { box-shadow: var(--e1); }

/* Ruim: sombra como decoração */
.card { box-shadow: 0 0 20px rgba(0,0,0,0.2); }

Faça

  • Use sombras tingidas com cor da tinta (rgba(26,26,29,...)).
  • Combine hairline + E1 para máximo destaque sem ostentação.
  • Aumente elevação só quando o componente sobe na hierarquia (modal > popover > card).

Não faça

  • Não use sombras pretas puras — quebra a temperatura da paleta.
  • Não invente E4 ou E5 — se precisa, repense a hierarquia.
  • Não use sombra direcional (apenas inferior); luz vem de cima.
03

Em superfícies escuras

Em data-palette="ink" a sombra fica imperceptível. Substitua por borda hairline da cor de acento ou by clareamento (overlay branco baixo).

  • Modal sobre fundo escuro: borda --accent-line + scrim escurecido a 50%.
  • Card elevado sobre tinta: background: var(--n-char) + sem sombra.