Design system
Proposta C · Galeria
Uma galeria de arte: fundo off-white, fotos grandes de ponta a ponta e quase nada em volta. O marrom aparece só nas ações e o dourado só em filetes finos. O alto padrão vem do silêncio visual: os móveis falam sozinhos.
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 principal
--off-white · - Fundo alternado das seções
--areia · - Texto principal
--grafite · - Texto secundário
--grafite-suave · - Botões e chip ativo
--marrom · - Hover dos botões
--marrom-escuro · - Dourado para texto (rótulos, números)
--dourado-texto · - Filetes e detalhes — nunca em texto sobre o claro
--dourado · - Bordas de campos, chips e setas
--cinza ·
Tipografia
Duas famílias, poucos tamanhos. Os tamanhos de título crescem com a tela (celular → desktop).
Móveis planejados de alto padrão
Projetos 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]
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.