Design System · v1
Tudo que define a identidade visual da Kerk, extraído direto do site oficial
(kerkpraia.com.br, tema Nuvemshop "Recife") e formalizado como sistema vivo:
cores, tipografia, espaçamento, componentes e motion. Ver também
../BRANDBOOK.md para a versão em texto corrido.
01 · Cores
A Kerk usa uma paleta enxuta e editorial: preto/branco como base + um único azul-ardósia de destaque. As fotos de produto é que carregam a cor. Clique num swatch pra copiar o hex.
Opacidades do azul-ardósia usadas em overlays/hovers: 05, 08, 10, 20, 30, 50 (ex.: --main-foreground-20).
02 · Tipografia
Prata (serif) para títulos — elegante, editorial, praiana. Karla (sans) para tudo que é funcional: corpo, botões, navegação, labels.
03 · Espaçamento & forma
04 · Botões
Todo botão tem hover com leve elevação + preenchimento animado, e um estado de pressão (scale down). Passe o mouse pra sentir.
Botão flutuante do card — some/aparece no hover e vira check verde ao clicar (micro-interação de confirmação).
05 · Componentes
06 · Tema
A mesma paleta, invertida — não é um tema genérico de framework, os tokens
seguem a mesma lógica de nomes (--main-foreground,
--accent-color...), só trocam de valor. O toggle
fica no header de toda página, memoriza a escolha em localStorage
e, na primeira visita, segue o prefers-color-scheme do sistema —
sem flash: o tema é aplicado antes do primeiro paint.
Regra prática: nunca usar hex fixo em componente novo — sempre var (--main-background,
--surface, --main-foreground-XX) pra herdar os dois temas automaticamente.
07 · Motion
Transições curtas (160–280ms) para feedback de interface, mais longas (480ms) para
entradas de conteúdo. ease-out é o padrão — começa rápido, desacelera
suave, sensação de "assentar".
linear — mecânico, evitar em UI
ease-out — padrão da Kerk
ease-in-out — transições de estado
spring — menu, botão quick-add
08 · Regras
reveal, não tudo de uma vez.