Design system
Proposta D · Noturna
O desenho do Figma: títulos enormes e finos em Cormorant Garamond contra rótulos pequenos, em caixa alta e espaçados. Seções claras em papel off-white alternam com faixas escuras; o dourado é a luz do LED, nos botões e no topo.
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 claras
--papel · - Cartões (depoimentos)
--superficie · - Texto no claro e fundo das seções escuras
--tinta · - Texto secundário no claro
--suave · - Dourado no claro (rótulos e ícones)
--dourado-texto · - Botões e dourado no escuro
--dourado · - Texto secundário no escuro
--suave-escuro · - Bordas de campos e setas
--cinza · - Marrom de assinatura (foco no claro)
--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.
Ambientes feitos para permanecer.
Visita e medição
Vamos até o seu endereço para conhecer o espaço e medir.
Ilha, madeira 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.