A forma mais clara de qualificar quem aplica.
Tela branca, cartão cinza, ação em quase-preto. Cal Sans nos títulos, Inter em todo o resto — e o produto de verdade dentro dos cartões, nunca uma ilustração dele.
Os dois registros
Um sistema, duas densidades.
O funil público fala alto e devagar; o painel fala baixo e rápido. A família, a tinta, o raio e a ação são os mesmos.
Editorial — o funil
Uma peça só, chapada, na cor de marca do mentor — como a página de reserva do Cal.com. 48px, alvo de toque inteiro.
Produto — o painel
O primário é o único escuro da tela. Botão e campo do mesmo tamanho dividem a linha de base.
Tipografia
Cal Sans escreve a manchete. Inter escreve o resto.
A fronteira é estrita, e o aperto negativo faz parte da voz: Cal Sans sem ele lê fora da marca. Peso 600 em tudo — nunca 700.
display-xl
64 · 1,05 · −2px
Cal Sans
Qualificar antes de vender
display-lg
48 · 1,1 · −1,5px
Cal Sans
Qualificar antes de vender
display-md
36 · 1,15 · −1px
Cal Sans
Qualificar antes de vender
display-sm
28 · 1,2 · −0,5px
Cal Sans
Qualificar antes de vender
title-lg
22 · 1,3
Inter 600
Qualificar antes de vender
title-md
18 · 1,4
Inter 600
Qualificar antes de vender
body
16 · 1,5
Inter 400
Qualificar antes de vender
body-sm
14 · 1,5
Inter 400
Qualificar antes de vender
caption
13 · 1,4
Inter 500
Qualificar antes de vender
Cor
Quase monocromático, de propósito.
A ação é quase-preta; a cor aparece pouco — no link, no selo, no item que está tocando. Os pastéis só vivem nos avatares.
Primário
a ação — #111111
Destaque
o brand-accent, escolhido
Sucesso
confirmação
Erro
validação
Forma e profundidade
Raio por hierarquia. Sombra macia.
O raio diz o nível da peça, não o tamanho dela. A profundidade é um fio de 1px e uma queda curta — o contraste de cor faz o resto.
2px
traço
4px
detalhe de selo
6px
item de menu
8px
botão, campo, aba
12px
cartão
16px
diálogo, peça principal
cápsula
selo, grupo de abas, avatar
Cartão cinza
sem fio: a cor é a forma
Cartão branco
fio + apoio de 1px
Painel
menu, popover — 4px de queda
Diálogo
a peça mais alta da pilha
Controles
Os controles, vivos.
Campo branco com fio; o foco passa o fio para a tinta. A aba ativa é uma cápsula branca dentro da cinza. Tudo alcançável pelo teclado.
A aba ativa é a cápsula branca dentro da cápsula cinza — setas, Home e End andam entre elas.
A aba ativa é a cápsula branca dentro da cápsula cinza — setas, Home e End andam entre elas.
A aba ativa é a cápsula branca dentro da cápsula cinza — setas, Home e End andam entre elas.
O <select> nativo foi abandonado por um motivo concreto: o menu dele é desenhado pelo sistema operacional, e nenhuma linha de CSS alcança aquilo. O preço de trocar — setas, Home/End, digitar para pular, Esc, foco de volta no gatilho — vive puro em navigation.ts, com teste.
Movimento
Só transform e opacidade.
Cada palavra sobe dez pixels, em escada de setenta milissegundos
Captação e vendas no seu ritmo.
O painel inteiro fala esta língua — do quadro de negócios à análise da call.