Poltrona Decorativa Premium Berlim
Abracasa
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
#162e47
Secondary
hsl(210,12%,55%)
#7d8b99
#7d8b99
Placeholder
hsl(210,23%,65%)
#91a4b9
#91a4b9
Backgrounds & Surfaces
BG
hsl(210,10%,95%)
#f0f1f3
#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.
Pesquise...
Destaques · Sala de estar · Decoração
Poltrona Decorativa Premium Berlim
R$ 2.490
Abracasa · Marca do produto
O que você está procurando?
60 Amostras · Categoria count
Rack Chico 3 portas com frisos Olmo
Abracasa · brand sm
Espaçamento
Base unit 4px. Escala usada nos componentes.
| Token | Valor | Preview |
|---|---|---|
--cs-space-1 | 4px | |
--cs-space-2 | 8px | |
--cs-space-3 | 12px | |
--cs-space-4 | 16px | |
--cs-space-5 | 20px | |
--cs-space-6 | 24px |
| Token Radius | Valor | Preview |
|---|---|---|
--cs-radius-sm | 8px | |
--cs-radius-md | 10px | |
--cs-radius-xl | 16px | |
--cs-radius-2xl | 18px |
Tokens Semânticos
Variáveis CSS prontas para uso. Prefixo --cs-.
| Token | Valor | Uso |
|---|---|---|
--cs-primary | 210 47% 18% | Textos, botões, títulos |
--cs-secondary | 210 12% 55% | Marca produto, textos 2° |
--cs-placeholder | 210 23% 65% | Input placeholder, ícone |
--cs-bg | 210 10% 95% | Fundo da tela |
--cs-surface | 0 0% 100% | Cards, search bar |
--cs-overlay-category | rgba(0,0,0,.26) | Overlay category card |
--cs-overlay-hero | rgba(13,27,42,.50) | Gradiente hero |
--cs-shadow-sm | 0 2px 8px … | Hover leve |
--cs-shadow-lg | 0 8px 24px … | Phone frame |
--cs-transition-base | 200ms ease | Hover padrão |
--cs-transition-spring | 300ms spring | Micro-animações |
Hero Banner
Imagem de fundo + gradiente bottom-to-top + heading "Pesquise..." + search bar no rodapé. Figma node: 3:268 · 414×532px.
Search Bar
Figma node: 4:15024 · 374×53px · border-radius 8px · Open Sans Regular 12px · placeholder #91a4b9.
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
Figma nodes: 5:515–524 · 158×219px · radius 16px · overlay rgba(0,0,0,.26). 4 categorias: Sala, Cozinha, Banheiro, Decoração.
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
Abracasa
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 com frisos Olmo - 2,30m
Abracasa
Puff Circus Retangular Botonê Concreto Versalhes - 72cmx45cm
Abracasa
Sofá-Cama Belize - Cinza
Abracasa
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
Abracasa
Poltrona Decorativa Premium Berlim
Abracasa
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.
Pesquise...
Categorias
Destaques
Poltrona Decorativa Premium Berlim
Abracasa
Poltrona Decorativa Premium Berlim
Abracasa
Sala de estar
Rack Chico 3 portas com frisos Olmo - 2,30m
Abracasa
Puff Circus Retangular Botonê Concreto Versalhes
Abracasa
Sofá-Cama Belize - Cinza
Abracasa
Puff Circus Retangular Botonê Concreto Versalhes
Abracasa
Decoração
Poltrona Decorativa Premium Berlim
Abracasa
Poltrona Decorativa Premium Berlim
Abracasa
Poltrona Decorativa Premium Berlim
Abracasa