Design System · v0.1

SOVREN & CO

Fonte única de verdade da identidade digital. Cada valor abaixo é lido de assets/tokens.css em tempo de render.

Cor

Neutros com viés quente — papel e tinta, nunca cinza digital. O verde-garrafa é institucional; o cognac é acento; o champanhe é exclusivamente ornamental.

Canvas --c-canvas
Surface --c-surface
Sunken --c-surface-sunken
Tinta --c-text
Tinta suave --c-text-muted
Verde-garrafa --c-surface-brand
Cognac --palette-cognac-700
Champanhe --palette-gold-500
Sucesso --palette-success
Erro --palette-danger
Regra de contraste. Champanhe (#B9A26B) tem 2.33:1 sobre o canvas — reprova em WCAG AA para texto e para elementos de interface. Permitido apenas como filete, borda, ornamento ou fundo de badge com tinta escura por cima. Para texto dourado, usar --palette-gold-700 (4.6:1).

Tipografia

Serif de alto contraste no display, grotesca neutra na interface. A escala é fluida entre 375px e 1440px — sem saltos por breakpoint.

Mocassim

.t-display-1 · 40 → 88px · Cormorant 300

Alfaiataria silenciosa

.t-display-2 · 32 → 64px

Coleção de inverno

.t-h1 · 28 → 48px

Couro curtido à mão

.t-h2 · 24 → 36px

Detalhes que não se anunciam

.t-h3 · 20 → 26px

Peças pensadas para durar mais que a estação em que foram compradas.

.t-lead · 17 → 18px · Inter

Texto de corpo padrão, com medida limitada a 66 caracteres para leitura confortável em qualquer largura de tela.

.t-body · 16px · line-height 1.6

Edição limitada

.t-overline · 11 → 12px · tracking 0.18em

R$ 1.890,00 R$ 2.290,00

.t-price · numerais tabulares

Espaçamento

Base 4px. Passos curtos para densidade de UI, saltos largos para o silêncio entre seções.

--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
24px
--sp-6
32px
--sp-7
40px
--sp-8
48px
--sp-9
64px
--sp-10
96px
--sp-11
128px
--sp-12
160px

Botões

Quatro variantes, e não mais. Cada nível extra de hierarquia divide a atenção e derruba o clique na ação principal.

Campos

Underline no lugar de caixa: menos peso visual, menos cara de formulário burocrático — que é atrito direto no checkout.

Informe um e-mail válido.

Um cupom por pedido.

Badges e ornamentos

Novo Edição limitada Feito à mão −30% Últimas peças

Card de produto

Retrato 4:5, segunda imagem no hover (só onde há cursor real) e área de clique cobrindo o card inteiro — com um único link no DOM, para não duplicar entradas no leitor de tela.

Superfícies

Surface

Texto secundário

Sunken

Texto secundário

Brand

Texto secundário

Inverse

Texto secundário

Deep · embalagem

Champanhe como texto: 7.59:1 ✅

A superfície-embalagem. --c-surface-deep (#12110F) é a única onde o champanhe vira texto legível — 7.59:1, aprova AA. É o hot stamping da caixa traduzido para tela. Sobre o canvas claro, o mesmo champanhe cai para 2.33:1 e volta a ser apenas ornamento.

Paleta de produto

As cores que as peças realmente têm. Não são cores de interface — alimentam os swatches do card e do seletor de variante. Centralizar aqui evita que o mesmo "cru" apareça diferente na coleção e na PDP, divergência que gera devolução por expectativa quebrada.

Cru --swatch-cru
Off-white --swatch-off-white
Areia --swatch-areia
Camurça --swatch-camurca
Conhaque --swatch-conhaque
Marinho --swatch-marinho
Oliva --swatch-oliva
Preto --swatch-preto