Assento.
Vitrine produit en gris pierre clair, avec la pièce en énorme rendu au centre du hero, un nom géant coupé autour d'elle, changement de finition en direct et un tour à 360° lié au défilement. Grotesque en gras, cuir cognac et une section entière en vert mousse.
- Type
- Landing page
- Thème
- Clair
- Titres
- Familjen Grotesk
- Texte
- Familjen Grotesk
PourArchitectes, décorateurs d'intérieur et ceux qui meublent leur maison sans se presser et avec un budget élevé
Sections de la page01/10nav
Extrait du DESIGN.md, en portugais pour l'instant.
PourArchitectes, décorateurs d'intérieur et ceux qui meublent leur maison sans se presser et avec un budget élevé
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Familjen Grotesk pour les titres, Familjen Grotesk pour le texte.
TitresFamiljen Grotesk
Aag!
Assento en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteFamiljen Grotesk
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- un produit phare avec rendus ou photos de studio sur fond neutre
- produit avec variantes de couleur ou de matière
- marque aux tons terreux, cuir, bois ou vert foncé
- vente avec visite, devis ou commande sur mesure
- grand catalogue avec filtres et panier
- boutique à petits prix et gros volumes
- service sans produit physique
- marque sans bonnes photos de produit
- public enfant
Ton
Ce qui fait Assento
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Emmenez Assento
chez votre client.
Dans Claude Code, Cursor ou n'importe quelle IA : elle lit le DESIGN.md de ce design et applique tokens, polices et textes au projet du client.
Similaires
Des landings qui partagent un ton ou un secteur avec Assento.