E-9 · Styleguide — escolha A ou B

Design System VendasParaguai — duas direções para aprovação

DIREÇÃO A · Racucco Evoluída evolui a paleta atual da marca (terracota · verde · creme, tipografia Inter). Textos em PT.

DIREÇÃO B · VendasParaguai Internacional proposta nova para a plataforma internacional: azul-guaraní (confiança cross-border) sobre neutros frios, tipografia Archivo. Textos em ES (idioma padrão da plataforma).

Base: tokens extraídos das capturas E-8/E-8B (escala de espaçamento 4px, raios 4–8px, página neutra com cor de marca só em header/CTA) + regras do blueprint §4 e §6 (preço duplo US$/R$, câmbio carimbado, disponibilidade sempre texto+cor, toque mínimo 44px, números tabulares, contraste AA).

📱 Validado em 375 / 768 / 1440 px — abra no celular e gire a tela; cada componente aparece nas duas direções, com todos os estados (default · hover · focus · disabled · loading · erro). Dados fictícios ou do catálogo próprio; nenhum asset de terceiro.

1 · Paleta & tipografia

Camada semântica de cada direção: 1 primária de marca + verde disponível + âmbar atenção + vermelho só-erro (blueprint §6). Números tabulares para preço.

Direção A · Racucco Evoluída Inter · PT
brand#c8451a
brand-strong#a53712
brand-soft#fbe9e2
bg#f4f1ea
ink#141414
ok#2e6b30
warn#8a5a00
err#b3261e
Inter Bold — títulos
Inter Regular — corpo de texto, 15px, altura 1.5.
U$ 1,158.00 · R$ 6.033,18 · 12x R$ 502,77
Direção B · Internacional Archivo · ES
brand#0b5bd3
brand-strong#0946a3
brand-soft#e7effc
bg#f7f8fa
ink#101623
ok#0e7a3c
warn#8a5a00
err#c62828
Archivo Bold — títulos
Archivo Regular — cuerpo de texto, 15px, altura 1.5.
U$ 1,158.00 · R$ 6.033,18 · 12x R$ 502,77

3 · Card de produto completo

A unidade do site (§3.2): preço duplo US$ âncora/R$, selo de mercado, badge Novo/Usado (C2C, adendo v1.1), slot "Vendido por", código visível, disponibilidade em texto+cor. Estados: default · hover · baixa disponibilidade (única tela onde WhatsApp é protagonista, §4.4) · loading.

Direção A
Novo
Padrão do mercado R$ 6.590 — 12% abaixo
U$ 1,158.00
R$ 6.033,18 · câmbio 15/08
até 12x no cartão · 3% off no PIX
Smartphone 256 GB 5G — global, 127V
★ 4,8 (132)Cód. 64310
Vendido por RACUCCO
Disponível
Usado
U$ 640.00
R$ 3.475,20 · câmbio 15/08
até 12x no cartão
Notebook 16 GB / SSD 512 — seminovo (estado: hover)
★ 4,6 (41)Cód. 71822
Vendido por M. Benítez
Disponível
Novo
Smartwatch GPS 46 mm — sem preço e sem botão de compra (regra §4.4)
Cód. 58204
Vendido por RACUCCO
Baixa disponibilidade — chame o vendedor
Direção B
Nuevo
Precio de mercado R$ 6.590 — 12% menos
U$ 1,158.00
R$ 6.033,18 · cambio 15/08
hasta 12x con tarjeta · 3% off con PIX
Smartphone 256 GB 5G — global, 127V
★ 4,8 (132)Cód. 64310
Vendido por RACUCCO
Disponible
Usado
U$ 640.00
R$ 3.475,20 · cambio 15/08
hasta 12x con tarjeta
Notebook 16 GB / SSD 512 — seminuevo (estado: hover)
★ 4,6 (41)Cód. 71822
Vendido por M. Benítez
Disponible
Nuevo
Smartwatch GPS 46 mm — sin precio y sin botón de compra (regla §4.4)
Cód. 58204
Vendido por RACUCCO
Baja disponibilidad — hable con el vendedor

4 · Botão

Primário / secundário / ghost / destrutivo · estados default, hover, focus, disabled, loading. Altura mínima 44px (toque).

Direção A
Primário
Secundário · Ghost · Destrutivo
Direção B
Primario
Secundario · Ghost · Destructivo

5 · Campo de formulário

Estados default, focus, erro (mensagem útil, nunca só cor), disabled e loading (validando CEP/CPF). Rótulo sempre visível.

Direção A
Usado para nota fiscal e rastreio.
CPF inválido — confira os dígitos.
Buscando endereço…
Direção B
Se usa para factura y rastreo.
CPF inválido — revise los dígitos.
Buscando dirección…

6 · Trust bar (4 ícones)

Presente na home, PDP e checkout (§4.6) — o diferencial contra as lojas de CDE. Ícones próprios (SVG inline).

Direção A
Entrega em todo o Brasil
Nota fiscal em todas as compras
Rastreio em tempo real
Parcele em até 12x
Direção B
Entrega en todo Brasil
Factura en todas las compras
Rastreo en tiempo real
Hasta 12 cuotas

7 · Badge de disponibilidade — sempre texto + cor

Nunca só cor (daltonismo ~8% dos homens, §4.10). Verde = disponível · âmbar = atenção · vermelho = indisponível/erro.

Direção A
Disponível Baixa disponibilidade — chame o vendedor Indisponível no momento
Direção B
Disponible Baja disponibilidad — hable con el vendedor No disponible por ahora

E-9 · staging de aprovação — não é produção. Tokens: tokens.css (3 camadas). Dados fictícios; nenhum asset de terceiro. 15/08/2026.