01 / Fundamentos
Os tokens.
Tudo no Priceshow é construído a partir destes valores. Mude um token, e site, app e TV se ajustam juntos.
Cor
--*Tokens semânticos
Use estes na UI — eles trocam automaticamente entre dark e light.
Paleta para gráficos
Use tokens semânticos, não hex
Nunca codifique #fbbf24 direto. Use var(--primary) — assim o tema light/dark continua funcionando e mudanças futuras não exigem busca-e-substitui.
Tipografia
Geist · Geist MonoGeist
Família principal. Sans neo-grotesque, ótima legibilidade em densidades altas, números bem desenhados.
Aa Bb Cc 1234
400 Regular
500 Medium
600 Semibold
700 Bold
Geist Mono
Para preços, IDs, códigos. tabular-nums ativo por padrão — colunas alinham.
R$ 7,49
400 Regular
500 Medium
Escala
| Token | Tamanho | Uso típico | Amostra |
|---|---|---|---|
| --text-xs | 12px | Helper, labels de tabela | A linha de helper |
| --text-sm | 14px | Body app, label form | Texto base do painel |
| --text-base | 16px | Body site, parágrafo | Texto base do site |
| --text-lg | 18px | Lede, card title | Subtítulo de seção |
| --text-xl | 20px | H3 painel | Título de card |
| --text-2xl | 24px | H2 painel | Título de página |
| --text-3xl | 30px | H2 site | Section heading |
| --text-4xl | 36px | Hero secundário | Display |
| --text-5xl | 48px | H1 site | Hero |
| --text-6xl | 60px | Hero grande | Big |
| --text-7xl | 72px | TV — preço hero | 7,49 |
Espaçamento
base 4px| Token | Valor | Visual |
|---|---|---|
| --space-1 | 4px | |
| --space-2 | 8px | |
| --space-3 | 12px | |
| --space-4 | 16px | |
| --space-6 | 24px | |
| --space-8 | 32px | |
| --space-12 | 48px | |
| --space-16 | 64px | |
| --space-24 | 96px |
Raio & sombra
Raio
--radius-sm · 4px
--radius · 8px
--radius-lg · 12px
--radius-2xl · 24px
--radius-full
Sombra
--shadow-sm
--shadow
--shadow-md
--shadow-lg
Sombras são discretas — usadas para popovers, dropdowns e dialogs. No painel, prefira borda; no site, sombra leve em cards de feature.
Motion
| Token | Valor | Uso |
|---|---|---|
| --duration-fast | 120ms | Hover, foco, pequenos retornos |
| --duration | 180ms | Padrão — quase tudo |
| --duration-slow | 280ms | Dialog/sheet abrindo, navegação |
| --ease-out | cubic-bezier(.16, 1, .3, 1) | Padrão de entrada/saída |
| --ease-in-out | cubic-bezier(.65, 0, .35, 1) | Movimento simétrico |