Assento.
Vitrina de producto en gris piedra claro, con la pieza en un render enorme en el centro del hero, nombre gigante dividido a su alrededor, cambio de acabado en vivo y un giro de 360° atado al scroll. Grotesca en negrita, cuero coñac y una sección entera en verde musgo.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Familjen Grotesk
- Texto
- Familjen Grotesk
ParaArquitectos, diseñadores de interiores y quienes amueblan su casa con calma y presupuesto alto
Secciones de la página01/10nav
Del DESIGN.md, que por ahora está en portugués.
ParaArquitectos, diseñadores de interiores y quienes amueblan su casa con calma y presupuesto alto
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Familjen Grotesk en los títulos, Familjen Grotesk en el texto.
TítulosFamiljen Grotesk
Aag!
Assento en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoFamiljen Grotesk
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- un producto estrella con renders o fotos de estudio sobre fondo neutro
- producto con variaciones de color o material
- marca con tonos tierra, cuero, madera o verde oscuro
- venta con visita, presupuesto o encargo
- catálogo grande con filtros y carrito
- tienda de precio bajo y volumen
- servicio sin producto físico
- marca sin buenas fotos de producto
- público infantil
Tono
Lo que lo hace Assento
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Lleva Assento
a tu cliente.
En Claude Code, Cursor o cualquier IA: lee el DESIGN.md de este diseño y aplica tokens, fuentes y textos en el proyecto del cliente.
Similares
Landings con tono o nicho en común con Assento.
