Começar

Tokens

Cor, tipo, raio, espaço e movimento. Tudo que o sistema usa mora em ds/tokens.css.

Cores

Os números de contraste são medidos no navegador, agora, com o tema e o acento da página. Troque no topo ou no rodapé e eles se refazem.

Superfícies

As três camadas e o que fica em volta delas.

--bgpágina

--cardcasca do card

--panelmiolo do card

--tileazulejo dentro do miolo

--sunkentrilho, célula vazia

--lineborda de 1px do card

--line-2borda de controle

Texto

Medido agora, no tema que está na tela.

--fgtexto principal · sobre --panel

--fg-2rótulo e descrição · sobre --panel

--fg-3eixo, meta, placeholder · sobre --panel

--accent-textacento usado como texto · sobre --panel

Acento e ação

O acento troca com data-accent. A ação primária é tinta e não troca.

--accentacento atual

--on-accenttexto sobre o acento · sobre --accent

--accent-softfundo suave do acento

--primarybotão primário

--on-primarytexto do primário · sobre --primary

Estado

Cada tom tem o par suave pro fundo do selo.

--okconcluído · sobre --ok-soft

--warnatenção · sobre --warn-soft

--errerro · sobre --err-soft

--infoinformação · sobre --info-soft

Série dos gráficos

A ordem importa: a primeira é sempre o acento.

--c1série 1, o acento

--c2série 2

--c3série 3

--c4série 4

--c5série 5

--c6série 6

Tipografia

Escala de 1,25 sobre 16px. --font é a Jakarta, --mono a JetBrains Mono e --brand-font a Sora, só no logotipo. Tem ainda --t-5xl (76,3px), reservado ao título da landing.

--t-xsPainel de vendas, 12,8px

--t-smPainel de vendas, 14px, só densidade de painel

--t-mdPainel de vendas, 16px, corpo

--t-lgPainel de vendas, 20px

--t-xlPainel de vendas, 25px

--t-2xlPainel de vendas, 31,25px

--t-3xlPainel de vendas, 39px

--t-4xlPainel de vendas, 48,8px

Raio

Concêntrico: o raio de fora é o de dentro mais o recuo. Casca 28 é miolo 16 mais 12, e as curvas ficam paralelas.

--r-card28px, casca

--r-panel16px, miolo

--r-tile14px, azulejo

--r-ctl12px, controle

--r-pillpílula

Espaço

Grade de 4 pontos.

--s14px

--s28px

--s312px

--s416px

--s520px

--s624px

--s832px

--s1040px

--s1248px

--s1664px

--s2496px

Movimento

Quatro durações e três curvas. --ease é a saída suave do sistema, --ease-io entra e sai, e --spring passa um pouco do ponto, só em toggle e check. Com movimento reduzido, as durações vão a zero.

--d1

--d2

--d3

--d4

--ease-io

--spring

120, 220, 420 e 800ms. As quatro primeiras linhas usam --ease; as duas últimas, --d4 com a curva do nome.

Sombra

Quase nenhuma. --sh-ctl é o contorno de 1px dos controles e --sh-pop fica pro que flutua, como lista aberta e janela de busca. A profundidade do card vem da camada de superfície.