Tokens
A régua única que todos os produtos Sincronow obedecem: a fonte da verdade mora no vault, e esta página a renderiza ao vivo.
Superfícies e tinta
Chrome cinza neutro, sem tinta de marca: a página é o trilho, o card é o papel, e a tinta carrega a voz.
--color-luz-papel
#fafafa
Página e trilho: o cinza neutro onde o miolo branco assenta.
--color-crista-papel
#ffffff
Card e superfície de leitura: o branco domina.
--color-tinta-noite
#0d0d1a
A tinta: texto primário, preto-azulado sutil.
--color-chumbo-voz
#55555c
Tinta 2: texto secundário, 7.0:1 sobre o card.
--color-concreto-bruto
#e9e9ea
= var(--color-penumbra-papel)
Hairline: bordas e divisores de 1px.
--color-argila-suave
#f1f1f2
Wash: hover e callout, o cinza que recua.
Acento
O acento só tem poder se for raro: um violeta, três estados, e nenhum outro lugar.
--color-acento
#5a5ae6
O violeta da marca em estado de repouso: link, ação primária.
--color-acento-hover
#4444b8
O mesmo violeta sob o cursor: um degrau mais fundo.
--color-border-focus
#5a5ae6
= var(--color-violeta)
Anel de foco: acessibilidade com a cor da casa.
Gradiente de assinatura
Expressão de marca: site, capas, hero. Nunca no produto de trabalho diário.
--gradiente-assinatura · 5 paradas
- assinatura-1 · 0%#4338ca
- assinatura-2 · 34%#5a5ae6
- assinatura-3 · 58%#8b5cf6
- assinatura-4 · 86%#d9668c
- assinatura-5 · 100%#f0a05a
--gradiente-assinatura-compacto · 4 paradas · recorte deliberado para selo e chip
Paleta categórica
Seis slots em ordem fixa, validados contra daltonismo. O hue segue a entidade, nunca o rank: entidade nova ganha o próximo slot.
slot 1 · violeta
--chart-1 · #5a5ae6
slot 2 · âmbar
--chart-2 · #eda100
slot 3 · verde
--chart-3 · #008300
slot 4 · magenta
--chart-4 · #e87ba4
slot 5 · azul
--chart-5 · #2a78d6
slot 6 · aqua
--chart-6 · #1baf7a
Tipografia
Duas famílias, dois papéis: Inter fala, JetBrains Mono mede.
Inter · UI, corpo e títulos
Precisão Viva
Neutra e engineered: a mesma família carrega o display e o corpo, e o peso faz a hierarquia.
JetBrains Mono · micro-rótulos, dados, especificação
--color-tinta-noite: #0d0d1a;
fonte · janela · badge
A fronteira das duas escalas é deliberada: o chrome (sidebar, botões, navegação) segue a escala do framework; o documento, a peça que se lê, segue a escala da casa.
Geometria
Cantos de precisão, não de almofada; e a hairline de 1px como único divisor.
card · --radius-lg
- --radius-sm · 0.375rem · 6px
- --radius-md · 0.5rem · 8px
- --radius-lg · 0.625rem · 10px
hairline · 1px · --color-concreto-bruto · #e9e9ea