Minuto.
Taller de relojería en la penumbra: el reloj renderizado gira con el scroll, serif de vitrina en cuerpo gigante, latón envejecido y una regla de segundos que avanza en vivo. Cinematográfico, preciso y cálido.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Gilda Display
- Texto
- Albert Sans
ParaQuienes heredaron una pieza antigua y coleccionistas, 35-70 años; servicio artesanal con presupuesto a consultar
Secciones de la página01/11nav
Del DESIGN.md, que por ahora está en portugués.
ParaQuienes heredaron una pieza antigua y coleccionistas, 35-70 años; servicio artesanal con presupuesto a consultar
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Gilda Display en los títulos, Albert Sans en el texto.
TítulosGilda Display
Aag!
Minuto en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoAlbert Sans
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.
- marca con dorado, latón, negro o marfil
- oficio manual de alto valor
- producto con foto o render de un objeto hermoso
- presupuesto por foto o a consultar
- tienda pequeña de piezas únicas
- marca clara, colorida o infantil
- retail de volumen y promociones
- tech/SaaS
- servicio rápido y barato
- cliente sin fotos de producto
Tono
Lo que lo hace Minuto
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 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Lleva Minuto
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 Minuto.
