Minuto.
Oficina de relojoaria no escuro: o relógio renderizado gira com a rolagem, serifa de vitrine em corpo gigante, latão envelhecido e uma régua de segundos que anda ao vivo. Cinematográfico, preciso e caloroso.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Gilda Display
- Texto
- Albert Sans
ParaQuem herdou uma peça antiga e colecionadores, 35-70, serviço de ofício com orçamento sob consulta
Seções da página01/11nav
ParaQuem herdou uma peça antiga e colecionadores, 35-70, serviço de ofício com orçamento sob consulta
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Gilda Display nos títulos, Albert Sans no texto.
TítulosGilda Display
Aag!
Minuto em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoAlbert Sans
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- marca com dourado, latão, preto ou marfim
- ofício manual de alto valor
- produto com foto ou render de objeto bonito
- orçamento por foto ou sob consulta
- loja pequena de peças únicas
- marca clara, colorida ou infantil
- varejo de volume e promoção
- tech/SaaS
- serviço rápido e barato
- cliente sem foto de produto
Tom
O que faz ser Minuto
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Leve o Minuto
para o cliente.
Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.
/escolher-design usar o design Minuto (minuto)
Parecidos
Landings com tom ou nicho em comum com Minuto.