CasaShopping DS

CasaShopping · Figma CASASHOPPING-ESTUDO

Design System

Tokens, componentes e padrões visuais extraídos diretamente do Figma. Aplicação mobile-first, fonte Open Sans, paleta navy #162e47.

Cores

Paleta extraída do Figma. Sistema baseado em variáveis CSS HSL para máxima flexibilidade.

Brand
Primary
hsl(210,47%,18%)
#162e47
Secondary
hsl(210,12%,55%)
#7d8b99
Placeholder
hsl(210,23%,65%)
#91a4b9
Backgrounds & Surfaces
BG
hsl(210,10%,95%)
#f0f1f3
Surface
#ffffff
Surface Alt
#fafafa
Overlays
Category
rgba(0,0,0,.26)
Hero
gradient ↓ #0d1b2a 50%

Tipografia

Open Sans em 3 pesos. Escala de 9px a 32px com line-height 1.197 (Figma) para headings e normal para body.

32px / 700
lh 1.197
Pesquise...
20px / 700
lh 1.197
Destaques · Sala de estar · Decoração
16px / 600
lh 1.197
Poltrona Decorativa Premium Berlim
16px / 700
lh 1.197
R$ 2.490
14px / 400
lh 1.197
Abracasa · Marca do produto
12px / 400
lh normal
O que você está procurando?
12px / 700
lh 1.197
60 Amostras · Categoria count
11px / 600
lh 1.197
Rack Chico 3 portas com frisos Olmo
9px / 400
lh 1.197
Abracasa · brand sm

Espaçamento

Base unit 4px. Escala usada nos componentes.

TokenValorPreview
--cs-space-14px
--cs-space-28px
--cs-space-312px
--cs-space-416px
--cs-space-520px
--cs-space-624px
Token RadiusValorPreview
--cs-radius-sm8px
--cs-radius-md10px
--cs-radius-xl16px
--cs-radius-2xl18px

Tokens Semânticos

Variáveis CSS prontas para uso. Prefixo --cs-.

TokenValorUso
--cs-primary210 47% 18%Textos, botões, títulos
--cs-secondary210 12% 55%Marca produto, textos 2°
--cs-placeholder210 23% 65%Input placeholder, ícone
--cs-bg210 10% 95%Fundo da tela
--cs-surface0 0% 100%Cards, search bar
--cs-overlay-categoryrgba(0,0,0,.26)Overlay category card
--cs-overlay-herorgba(13,27,42,.50)Gradiente hero
--cs-shadow-sm0 2px 8px …Hover leve
--cs-shadow-lg0 8px 24px …Phone frame
--cs-transition-base200ms easeHover padrão
--cs-transition-spring300ms springMicro-animações
top-nav.css

Top Nav

Logo CASA SHOPPING + hamburger. Posicionado absolutamente sobre o Hero. Figma nodes: 3:283 (logo) · 3:285–288 (hamburger).

hero.css

Hero Banner

Imagem de fundo + gradiente bottom-to-top + heading "Pesquise..." + search bar no rodapé. Figma node: 3:268 · 414×532px.

Hero background

Pesquise...

section-title.css

Section Title

Figma nodes: 4:15026, 4:15169, 4:15206 · Open Sans Bold 20px · #162e47 · line-height 1.197.

Destaques

Sala de estar

Decoração

category-card.css

Category Card

Figma nodes: 5:515–524 · 158×219px · radius 16px · overlay rgba(0,0,0,.26). 4 categorias: Sala, Cozinha, Banheiro, Decoração.

Sala Sala 60 Amostras
Cozinha Cozinha 29 Amostras
Banheiro Banheiro 95 Amostras
Decoração Decoração 121 Amostras
product-card.css — --lg

Product Card LG

Seção Destaques · Figma nodes: 4:15083, 4:15138 · 231×306px · imagem 231×215px · radius 18px · favorito 24×24px.

Poltrona Decorativa Premium Berlim R$ 2.490

Poltrona Decorativa Premium Berlim

Abracasa

Poltrona Decorativa Premium Berlim R$ 1.890

Poltrona Decorativa Premium Berlim

Abracasa

product-card.css — --sm

Product Card SM

Seção Sala de estar · Figma nodes: 5:541, 5:577, 5:599, 5:555 · 124×123px imagem · radius-sm 8px · favorito 20×20px.

Rack Chico 3 portas R$ 890

Rack Chico 3 portas com frisos Olmo - 2,30m

Abracasa

Puff Circus R$ 340

Puff Circus Retangular Botonê Concreto Versalhes - 72cmx45cm

Abracasa

Sofá-Cama Belize R$ 560

Sofá-Cama Belize - Cinza

Abracasa

product-card.css — --deco

Product Card Deco

Seção Decoração · Figma nodes: 4:15358, 4:15367, 4:15376 · padding 9px · imagem 133×124px · radius 10px.

Poltrona Decorativa Premium Berlim R$ 1.290

Poltrona Decorativa Premium Berlim

Abracasa

Poltrona Decorativa Premium Berlim R$ 980

Poltrona Decorativa Premium Berlim

Abracasa

Poltrona Decorativa Premium Berlim R$ 750

Poltrona Decorativa Premium Berlim

Abracasa

Composição — Phone Frame

Tela completa reproduzindo o Figma: Hero → Categorias (Sala, Cozinha, Banheiro, Decoração) → Destaques → Sala de estar → Decoração. Assets reais do Figma.

Hero

Pesquise...

Categorias

Sala Sala 60 Amostras
Cozinha Cozinha 29 Amostras
Banheiro Banheiro 95 Amostras
Decoração Decoração 121 Amostras

Destaques

Poltrona Decorativa $$$

Poltrona Decorativa Premium Berlim

Abracasa

Poltrona Decorativa $$$

Poltrona Decorativa Premium Berlim

Abracasa

Sala de estar

Rack Chico $$$

Rack Chico 3 portas com frisos Olmo - 2,30m

Abracasa

Puff Circus $$$

Puff Circus Retangular Botonê Concreto Versalhes

Abracasa

Sofá-Cama $$$

Sofá-Cama Belize - Cinza

Abracasa

Puff $$$

Puff Circus Retangular Botonê Concreto Versalhes

Abracasa

Decoração

Poltrona Decorativa $$$

Poltrona Decorativa Premium Berlim

Abracasa

Poltrona Decorativa $$$

Poltrona Decorativa Premium Berlim

Abracasa

Poltrona Decorativa $$$

Poltrona Decorativa Premium Berlim

Abracasa