Minuto.
A watchmaker's workshop in the dark: the rendered watch turns with the scroll, a giant display serif, aged brass and a live seconds ruler. Cinematic, precise and warm.
- Type
- Landing page
- Theme
- Dark
- Headings
- Gilda Display
- Body
- Albert Sans
ForPeople who inherited an old piece and collectors, 35-70; a craft service with quotes on request
Page sections01/11nav
From DESIGN.md, which is in Portuguese for now.
ForPeople who inherited an old piece and collectors, 35-70; a craft service with quotes on request
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Gilda Display for headings, Albert Sans for body text.
HeadingsGilda Display
Aag!
Minuto in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyAlbert Sans
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- brand with gold, brass, black or ivory
- high-value handcraft
- product with a photo or render of a beautiful object
- quote by photo or on request
- small shop of one-of-a-kind pieces
- light, colorful or children's brand
- volume retail and promotions
- tech/SaaS
- quick, cheap service
- client without product photos
Tone
What makes it Minuto
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Take Minuto
to your client.
In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.
Similar
Landings that share a tone or niche with Minuto.