Minuto.
Atelier d'horlogerie dans la pénombre : la montre en rendu tourne avec le scroll, serif de vitrine en corps géant, laiton vieilli et une règle des secondes qui avance en direct. Cinématographique, précis et chaleureux.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Gilda Display
- Texte
- Albert Sans
PourHéritiers d'une pièce ancienne et collectionneurs, 35-70 ans ; service artisanal avec devis sur demande
Sections de la page01/11nav
Extrait du DESIGN.md, en portugais pour l'instant.
PourHéritiers d'une pièce ancienne et collectionneurs, 35-70 ans ; service artisanal avec devis sur demande
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Gilda Display pour les titres, Albert Sans pour le texte.
TitresGilda Display
Aag!
Minuto en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteAlbert Sans
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.
- marque avec or, laiton, noir ou ivoire
- métier manuel à forte valeur
- produit avec photo ou rendu d'un bel objet
- devis sur photo ou sur demande
- petite boutique de pièces uniques
- marque claire, colorée ou enfantine
- retail de volume et promotions
- tech/SaaS
- service rapide et bon marché
- client sans photos de produit
Ton
Ce qui fait Minuto
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 o relógio gigante fundido no preto, título em serifa enorme sobre ele e a régua de segundos (
Segundos.tsx): 60 marcas, marcador de latão que anda um tique por segundo com leve ricochete, hora de São Paulo ao lado. - 02
Giro com a rolagem (
Giro.tsx): seção de 420vh com palco preso; a rolagem troca os 36 quadros (10° cada) e acende a nota do ângulo (mostrador, coroa, caixa, vidro). Quadros pré-carregados quando a seção se aproxima. Movimento reduzido ou sem JS: quadro 0, seção curta, todas as notas visíveis. - 03
Faixa de tipos de relógio em serifa gigante, presa à rolagem, com losangos de latão.
- 04
Manifesto que acende palavra por palavra (só CSS).
- 05
Etapas em trilho horizontal: a rolagem vertical empurra cinco painéis de tela cheia (macros com leve aproximação), com barra de progresso de latão. A regulagem usa um traço de aparelho de marcha em SVG (pontos espalhados antes, duas linhas retas depois) no lugar de foto.
- 06
Peças à venda em grade editorial com coluna do meio deslocada; vendido aparece riscado.
- 07
Rodapé com a marca em 30vw, quase apagada, subindo ao entrar.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Relojoaria de restauro vista como vitrine de museu à noite. Fundo quase preto e quente (
#0d0c0b, o - mesmo do fundo dos renders, para que as imagens se fundam sem borda), texto marfim, latão envelhecido
- (
#c9a46a) como único acento de ação e o azul do aço azulado (#7d97c4) guardado para detalhes. - Gilda Display (só peso 400) em corpo muito grande, com entrelinha curta e tracking negativo; Albert Sans
- no texto corrido, pequeno e calmo. Cantos retos, linhas de 1 px, nada arredondado: a precisão do ofício.
Regras
- Fundo da página sempre igual ao fundo dos renders. Trocou um, troque o outro.
- Latão só em ação (botão, link ao passar o mouse, marcador, número de etapa, preço). Nada de brilho, vidro, degradê em texto ou fundo decorativo; luz e reflexo só dentro das imagens.
- Títulos sem rótulo em cima. Números de etapa (
01 / 05) ficam ao lado, não acima. - Animações de rolagem dentro de
@supports (animation-timeline: view())eprefers-reduced-motion: no-preference; sem suporte, a página fica completa e parada (etapas empilhadas). - Dentro do trilho de etapas não use
data-revela(o painel está preso; oview()não anda). - Foco visível em latão, 2 px. Contraste AA: texto secundário
#a39a8bsobre o fundo.
Adaptar à marca do cliente
- Troque o latão pela cor de metal da marca (ouro, prata, cobre) mantendo contraste com
#0d0c0b. - Fotos do cliente: fundo preto liso, luz lateral, objeto centralizado; para o giro, 36 fotos numa base giratória a cada 10° (ou 24 a cada 15°: o
Girousa o tamanho da lista). - Outro ofício (joias, câmeras, canetas): troque as notas do giro e as cinco etapas; a estrutura não muda.
- Sem peças à venda: remova a seção; o orçamento vira a chamada principal.
Emmenez Minuto
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 Minuto.