Assento.
Product showcase in light stone gray, with a huge render of the piece at the center of the hero, a giant name split around it, live finish switching and a 360° spin tied to scroll. Bold grotesque, cognac leather and one full section in moss green.
- Type
- Landing page
- Theme
- Light
- Headings
- Familjen Grotesk
- Body
- Familjen Grotesk
ForArchitects, interior designers and anyone furnishing a home with care and a generous budget
Page sections01/10nav
From DESIGN.md, which is in Portuguese for now.
ForArchitects, interior designers and anyone furnishing a home with care and a generous budget
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Familjen Grotesk for headings, Familjen Grotesk for body text.
HeadingsFamiljen Grotesk
Aag!
Assento in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyFamiljen Grotesk
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- one flagship product with renders or studio photos on a neutral background
- product with color or material variations
- brand in earthy tones, leather, wood or dark green
- sales through visits, quotes or custom orders
- large catalog with filters and a cart
- low-price, high-volume store
- service with no physical product
- brand without good product photos
- children's audience
Tone
What makes it Assento
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Take Assento
to your client.
In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.
Similar
Landings that share a tone or niche with Assento.
