Design system
Proposta E · Showroom
Um showroom à noite: fundo grafite, composição simétrica e o dourado como a luz do LED, usado com economia nos botões e nos ícones. Tudo é centrado e calmo. Seções escuras alternam com seções em off-white para a página respirar e as fotos ganharem destaque.
Tudo o que a página usa, num lugar só: telas, animação, cores, fontes, espaçamentos e componentes com os seus estados. É a base para transformar o layout em código.
Telas
Prévias reais e navegáveis. Role dentro de cada tela.
Desktop · 1440 px (reduzido a 50%)
Celular · 390 px
Storyboard da animação do topo
O topo tem uma cena 3D que acompanha a rolagem: o cômodo vazio se monta peça por peça, o LED acende e a foto do ambiente pronto aparece. Aqui, os 4 momentos da cena 3D desta proposta. Na página inicial, role o topo para ver a animação.
Cores
Paleta reduzida. O contraste com o fundo é calculado na própria página (meta WCAG AA: 4,5:1 para texto, 3:1 para ícones e bordas).
- Fundo das seções escuras
--grafite · - Fundo escuro alternado e cartões
--grafite-claro · - Texto no escuro e fundo das seções claras
--off-white · - Fundo claro alternado (depoimentos)
--areia · - Dourado nas seções claras (rótulos e ícones)
--dourado-texto · - Texto secundário
--pedra · - Botões, ícones, rótulos e chip ativo
--dourado · - Hover e contorno de foco
--dourado-claro · - Bordas de campos, chips e setas
--cinza · - Madeira clara — apoio, uso pontual
--madeira · - Marrom de assinatura — só decorativo no escuro
--marrom ·
Tipografia
Duas famílias, poucos tamanhos. Os tamanhos de título crescem com a tela (celular → desktop).
Móveis planejados de alto padrão
Cada espaço, sob medida
Visita e medição
Vamos até o seu endereço para conhecer o espaço e medir.
Integradas à sala, com ilha e LED embutido.
Ambientes
Espaçamentos e grade
Sempre múltiplos de 8. Seções com 96 px (celular) e 128 px (desktop) de respiro.
8 px16 px24 px32 px48 px64 px96 px128 pxDesktop · 12 colunas · margens de 80 px
Celular · 4 colunas · margens de 16 px
Componentes
Botões e link
Chip de filtro
Card de projeto
Imagem ilustrativaDormitórios
Casal, solteiro e infantil.
Imagem ilustrativaVídeoCard com vídeo
Ícone de play e etiqueta "Vídeo".
Imagem ilustrativaCard horizontal
Ocupa duas colunas na grade.
Campos do formulário
Informe um WhatsApp válido, com DDD.
Cards de depoimento, etapa e diferencial
[PREENCHER: depoimento]
- ETAPA 1
Visita e medição
Vamos até o seu endereço para conhecer o espaço e medir.
Garantia
[PREENCHER]
Botão flutuante do WhatsApp
Cabeçalho e menu do celular
Veja na seção Telas: cabeçalho desktop (página inicial), cabeçalho do celular e menu aberto.