Superfície, forma, cor, tipografia, densidade e movimento da camada de aplicação.
O site da ICN é cartaz: Anton, papel quente, raio zero, sem sombra. O painel não herda nada disso. Aqui a hierarquia vem de cartão branco flutuando sobre cinza frio, o texto é pequeno e pesado, e o vermelho entra em dose pequena.
Tela, trilho e barra superior são a mesma cor. Quem cria hierarquia é o branco.
| --app-bg | #F1F1F3 · tela, trilho e topo |
| --app-surface | #FFFFFF · cartão, menu, modal, pílula flutuante |
| --app-border | #E5E7EB · divisória de lista, campo, tooltip |
| --app-zebra | #F9F7F5 · alternância de tabela densa |
| --app-black | #000000 · só o botão do sino |
O trilho não tem borda nem sombra: some no fundo. Controle branco que boia leva sombra rasa mais anel de 1px, nunca borda desenhada.
Nada é quadrado. A escala de raio é a assinatura da linguagem.
| 12 campo | input, select, tile pequeno |
| 16 cartão | bloco do painel, botão utilitário |
| 20 tile | quadrado do ícone do KPI, trilho do segmentado |
| 24 item | item de menu suspenso, tooltip |
| 28 flutuante | menu suspenso, modal |
| full | botão, chip, badge, avatar, item do trilho, barra |
| 0 | só no canto esquerdo de linha com filete |
Sombra do cartão é 0 1px 3px rgba(0,0,0,.06), quase nada. O que flutua de verdade usa 0 20px 25px -5px rgba(0,0,0,.1).
Marca em dose pequena. Status é semântica e sempre tem rótulo.
| #1F2937 | tinta, título, número |
| #6B7280 | secundário, subtítulo, rótulo de campo |
| #9CA3AF | rótulo estrutural, placeholder, chevron |
| #94A3B8 | tique de eixo de gráfico |
Regra dura: vermelho nunca lava o fundo de um container. Fica na pílula do item ativo, no botão primário, na marca do topo, no disco do seletor, no contador do sino e no preenchimento da barra. Identidade em bloco entra por filete de 3px. Destrutivo usa #E11D48, não a marca.
Inter, a mesma do MRM. Uma família só, texto pequeno e pesado.
Pesos 400, 500, 600 e 700. Tracking negativo só a partir de 16px; abaixo disso, zero. Nada passa de 40px, e 40 só no medidor.
Alvo de 44px onde a mão toca. Página nunca rola na horizontal.
| trilho | 279px, sem borda; conteúdo empurrado igual |
| topo | 88px no desktop, 72px no celular |
| respiro | 32px lateral, 12px no celular, base 48px |
| entre blocos | 20px |
| grade de KPI | 4 colunas gap 12px · 2 no celular |
| grade analítica | 7fr e 5fr, ou 1fr e 1fr, gap 16px |
| cartão | 16px interno, 22 a 24px nos blocos maiores |
| controles | 44 toque · 40 ação · 36 aba · 32 chip |
| ícones | 24 título · 18 menu · 16 cartão · 14 chip |
| breakpoints | 375 · 640 · 1024 · 1280 |
Toda grade leva min-width 0 nos filhos e todo texto longo trunca. O que é largo demais rola dentro do próprio cartão.
Curto, de entrada, uma vez só. Nada fica em loop.
| easing | cubic-bezier(.16, 1, .3, 1) em tudo |
| entrada | fade mais 8 a 12px de subida |
| escalonamento | 40ms por item, declarado à mão |
| linha e área | desenha o traço em 1.2s |
| barra | cresce da esquerda em 900ms |
| tique do medidor | acende em 500ms, 12ms de atraso por tique |
| menu suspenso | opacidade, escala .96 e y -6 em 160ms |
| micro | hover e chip entre 150 e 300ms |
| reduced motion | tudo entra já no estado final |
Só transform e opacity. Sem bounce, sem loop, e nada segura o clique enquanto anima.