Navalha.
Barbearia clássica de bairro em creme, vinho e azul-marinho: poste de barbeiro girando como divisor, tabela de preços como cartaz de parede, ticket de senha e relógio de parede. Tradicional, com humor sutil.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Abril Fatface
- Texto
- Work Sans
ParaHomens 18-65 de bairro, cliente fiel que quer horário marcado sem perder o ritual
Seções da página01/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.
ParaHomens 18-65 de bairro, cliente fiel que quer horário marcado sem perder o ritual
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Abril Fatface nos títulos, Work Sans no texto.
TítulosAbril Fatface
Aag!
Navalha em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoWork 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.
- negócio com tabela de preços fixa
- agendamento por horário no dia
- marca com cara de ofício e tradição
- vermelho, azul ou creme na identidade
- barbearia premium/lounge escura
- tech/SaaS
- público feminino de estética
- marca minimalista e fria
- marca neon ou gamer
Tom
O que faz ser Navalha
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Navalha vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Navalha.