Navalha.
Barbier classique de quartier en crème, bordeaux et bleu marine : enseigne de barbier tournante en séparateur, tarifs affichés comme sur un mur, ticket de file d'attente et horloge murale. Traditionnel, avec un humour discret.
- Type
- Landing page
- Thème
- Clair
- Titres
- Abril Fatface
- Texte
- Work Sans
PourHommes du quartier de 18 à 65 ans, clients fidèles qui veulent un rendez-vous sans perdre le rituel
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourHommes du quartier de 18 à 65 ans, clients fidèles qui veulent un rendez-vous sans perdre le rituel
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Abril Fatface pour les titres, Work Sans pour le texte.
TitresAbril Fatface
Aag!
Navalha en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteWork Sans
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- activité avec une grille de tarifs fixe
- rendez-vous par créneau dans la journée
- marque avec une allure de métier et de tradition
- rouge, bleu ou crème dans l'identité
- barbier premium/lounge sombre
- tech/SaaS
- public féminin de l'esthétique
- marque minimaliste et froide
- marque néon ou gamer
Ton
Ce qui fait Navalha
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Navalha devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Navalha.