Assento.
Vitrine de produto em cinza-pedra claro, com a peça em render enorme no centro do hero, nome gigante dividido em volta dela, troca de acabamento ao vivo e um giro de 360° preso à rolagem. Grotesca em negrito, couro conhaque e uma seção inteira em verde musgo.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Familjen Grotesk
- Texto
- Familjen Grotesk
ParaArquitetos, designers de interiores e quem mobília a casa com calma e orçamento alto
Seções da página01/10nav
ParaArquitetos, designers de interiores e quem mobília a casa com calma e orçamento alto
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Familjen Grotesk nos títulos, Familjen Grotesk no texto.
TítulosFamiljen Grotesk
Aag!
Assento em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFamiljen Grotesk
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- um produto carro-chefe com renders ou fotos de estúdio em fundo neutro
- produto com variações de cor ou material
- marca com tons terrosos, couro, madeira ou verde escuro
- venda com visita, orçamento ou encomenda
- catálogo grande com filtro e carrinho
- loja de preço baixo/volume
- serviço sem produto físico
- marca sem fotos de produto boas
- público infantil
Tom
O que faz ser Assento
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Hero com a peça no meio do nome:
h1gigante (19.5vwno desktop,30vwno celular) partido em duas metades, "Len" à esquerda e "to" à direita, com a poltrona entre elas. No celular o nome fica inteiro em cima e a foto passa da largura da tela (128vw). A borda da foto some com uma máscara radial (a foto já tem o fundo da página, a máscara só garante a emenda). - 02
Seletor de couro (
Couro.tsx): radiogroup acessível (setas trocam). A foto nova abre num círculo a partir do assento por cima da anterior (1s,cubic-bezier(0.7,0,0.2,1), com leve assentamento de escala); um traço de 2px corre por cima da opção escolhida e a amostra ganha anel. - 03
Ficha técnica no pé do hero: 5 colunas com rótulo mono (medidas, madeira, couro, prazo, preço).
- 04
Saída do hero presa à rolagem: ao rolar, as duas metades do nome se afastam (±16vw) e a poltrona se aproxima (escala 1.22).
- 05
Manifesto que acende palavra por palavra (opacidade 0.16 → 1, cada palavra na sua fatia).
- 06
Giro de 360° (
Giro.tsx): seção de 420vh com palcosticky; a rolagem escolhe um de 36 quadros (10° cada) desenhado num canvas, com os quadros pré-carregados. Contador de graus em mono, índice das 4 notas (casca, encaixe, couro, base) e a nota do ângulo atual trocando com fade. Barra de progresso de 1px no pé. - 07
Coleção em trilho horizontal: do
mdpara cima a seção tem 360vh e a rolagem vertical anda o trilho de seis peças na horizontal (CSSview-timeline); no celular é um carrossel nativo comscroll-snap. - 08
Materiais em macro: três fotos quadradas em escada (0, 9vw, 18vw) que se levantam em 3D (
rotateX(38deg)→ 0) ao entrar, e a macro se afasta dentro da moldura (escala 1.28 → 1). - 09
Processo em musgo: título preso à esquerda, passos à direita com uma linha de 1px que enche conforme a rolagem.
- 10
Rodapé com o nome gigante (25.5vw), letras subindo uma a uma no fim da página.
- 11
Ímã (
Ima.tsx) nos dois botões de agendar: o botão anda 1/4 da distância até o cursor.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Vitrine de produto para uma loja de móveis autorais. A página inteira tem o fundo cinza-pedra
#E9E8E4, que é o mesmo fundo dos renders: a poltrona não tem moldura, parece estar solta na- página. Texto em tinta quase preta
#171614, uma cor de couro (#A4582C, conhaque) usada só em - detalhes (hover do botão, seleção de texto) e uma seção inteira em verde musgo
#2F4A3A. Uma - família, Familjen Grotesk, em 700 com entreletra bem fechada nos títulos (−0.045em a −0.065em) e
- 400/500 no texto; IBM Plex Mono só nos rótulos de ficha técnica (caixa alta, 0.68rem, +0.14em).
- Cantos retos em tudo, menos nos botões (pílula). Nada de sombra, brilho ou vidro na interface: a
- riqueza vem dos renders.
Regras
- Fundo
#E9E8E4sempre. Toda foto de produto precisa vir renderizada/fotografada nesse fundo exato. - Botão principal: pílula tinta; no hover o couro sobe por dentro (
::beforede baixo para cima). Um botão principal por dobra, sempre para agendar visita. - Conhaque nunca em texto pequeno (contraste 4.2:1 no fundo); é cor de hover e de seleção.
- Na seção musgo, texto secundário em
#B8C4B6e linhas a 20% do texto. - Rótulos mono só em ficha técnica, prazo e numeração. Nada de rótulo em cima de título.
- Movimento de rolagem dentro de
@supports (animation-timeline: view())eprefers-reduced-motion: no-preference. Sem suporte, a página fica completa e parada. Com movimento reduzido o giro mostra um quadro só e as 4 notas viram lista. - Imagens com
width/height; abaixo da dobra comloading="lazy".
Adaptar à marca do cliente
- Trocar o nome do produto no
h1e medir as duas metades: a soma das larguras deve deixar no meio um vão do tamanho da peça (~40% da tela no desktop). - Acabamentos: um objeto por variação em
hero.couros(nome, detalhe, cor da amostra, foto). Todas as fotos no mesmo enquadramento, 1600×1200, fundo#E9E8E4. - Giro: 36 quadros 1000×800 (
giro-00agiro-35), câmera fixa e peça girando 10° por quadro. As notas têm o intervalo de quadros (de/ate) em que aparecem: ajustar ao ângulo que mostra cada detalhe. Sem giro, trocar a seção por uma foto grande com as notas em lista. - Cor da marca entra no lugar do conhaque (hover do botão e seleção) e a seção cheia usa a cor mais escura da marca, com contraste AA para o texto claro.
- Coleção: fotos 900×1100 em fundos de cor; manter de 5 a 8 peças para o trilho render bem.
Leve o Assento
para o cliente.
Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.
/escolher-design usar o design Assento (assento)
Parecidos
Landings com tom ou nicho em comum com Assento.