Navalha.
Barbería clásica de barrio en crema, vino y azul marino: poste de barbero giratorio como divisor, lista de precios como cartel de pared, ticket de turno y reloj de pared. Tradicional, con humor sutil.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Abril Fatface
- Texto
- Work Sans
ParaHombres de barrio de 18 a 65 años, clientes fieles que quieren turno marcado sin perder el ritual
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaHombres de barrio de 18 a 65 años, clientes fieles que quieren turno marcado sin perder el ritual
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Abril Fatface en los títulos, Work Sans en el texto.
TítulosAbril Fatface
Aag!
Navalha en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoWork 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.
- negocio con lista de precios fija
- turnos por horario en el día
- marca con aire de oficio y tradición
- rojo, azul o crema en la identidad
- barbería premium o lounge oscuro
- tech/SaaS
- público femenino de estética
- marca minimalista y fría
- marca neón o gamer
Tono
Lo que lo hace Navalha
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Navalha se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Navalha.
