Navalha.
A classic neighborhood barbershop in cream, burgundy and navy: a spinning barber pole as divider, price list as a wall poster, a queue ticket and a wall clock. Traditional, with subtle humor.
- Type
- Landing page
- Theme
- Light
- Headings
- Abril Fatface
- Body
- Work Sans
ForNeighborhood men 18-65, loyal clients who want a booked time without losing the ritual
Page sections01/10nav
Barbearia clássica de bairro: creme, vinho e azul-marinho, letreiro pintado à mão e o poste de barbeiro girando. Cuidado de barbeiro antigo com agenda de hoje. Masculino sem clichê de "macho": nada de dourado com preto, caveira ou bigode de logo.
From DESIGN.md, which is in Portuguese for now.
ForNeighborhood men 18-65, loyal clients who want a booked time without losing the ritual
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Abril Fatface for headings, Work Sans for body text.
HeadingsAbril Fatface
Aag!
Navalha in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyWork 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.
- business with a fixed price list
- same-day time-slot booking
- brand with a craft and tradition feel
- red, blue or cream in the identity
- premium/dark lounge barbershop
- tech/SaaS
- women's beauty audience
- minimalist, cold brand
- neon or gamer brand
Tone
What makes it Navalha
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 01
Poste de barbeiro: listras vinho/creme/azul a 45° que andam. Em pé no hero (
Poste), e deitado como divisor de seção (Faixa), inclusive topo e rodapé da página. - 02
Letreiro pintado: palavra em destaque com sombra chapada azul (
navalha-letreiro); no fundo azul a sombra vira vinho (navalha-letreiro-claro). - 03
Agenda de hoje no hero: serviços e horários livres como chips (radio +
has-[:checked], sem JS), ocupados riscados. Ticket de senha "sua vez" vinho preso no canto, com picote. - 04
Tabela como cartaz de parede: papel creme com borda dupla, prego no topo, levemente torto (endireita no hover), preço com linha pontilhada, sobre parede azul de riscas.
- 05
A cadeira em SVG com piso xadrez em perspectiva; peças numeradas; no hover ela sobe (pedal hidráulico).
- 06
Relógio de parede de 24 h no rodapé: arcos marcam o expediente (vinho seg-sex, azul sábado).
- 07
Passos do agendamento como tickets de senha com canhoto escuro e número grande.
- 08
Rótulo de seção em mono numerado ("Nº 2 · A cadeira") com um pedacinho de poste.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
Identidade
- Fundo creme
#f3ead8(papel de cartaz). Cartões emsurface#fbf5e8com fibra leve (navalha-papel). - Texto azul-marinho quase preto
#1b1f2e; secundário#55566a. - Primária vinho
#7a1f2b: botões, destaque do título, ticket de senha, chamada final. - Destaque azul
#1f3a68: a parede da tabela, sombra do letreiro, arco de sábado no relógio. - Fontes: Abril Fatface (só peso 400) em títulos e preços grandes; Work Sans no texto; JetBrains Mono em rótulos, horários e preços (cara de etiqueta/senha).
- Cantos quase retos (
4px/10px), bordas de 2px e sombra chapada deslocada (6px 6px 0), sem blur.
Regras
- Poste e faixa giram devagar; tudo para em
prefers-reduced-motion(poste, faixa corrida, ponteiro, cadeira). - Entrada do hero com
data-sobe; títulos, cartaz, tickets e cartões comdata-revela. - Máximo de 2 botões por tela. Texto de botão fala a ação ("Reservar horário").
- Humor sutil e em uma frase só (rodapé do cartaz, dúvidas). Não virar piada em todo bloco.
- Nada de dourado, preto chapado de fundo, caveira, tatuagem ou "brutalidade".
Adaptar à marca do cliente
- Cor própria vermelha ou vinho: troque
--d-primary. Azul da marca: troque--d-accent. O poste usa as duas automaticamente (--navalha-listras). - Mantenha o creme e o marinho: são eles que fazem o ar de cartaz antigo.
- Marca escura/lounge premium ou dourada? Esse design não é o certo.
- Logo do cliente entra no lugar do mini poste + nome no topo; a faixa do poste continua.
Two files.
One prompt.
Navalha becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Navalha.
