Barbería de carácter

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Antonio

Texto

Archivo

Acento

Playfair Display

Medido en su página

titular Antonio a 8.6 vw, peso 400, interlineado 0.9, -1 % · texto 16 px / 1.4

En su familia

titular gigante (3), gótica condensada (2), serif con cursiva (2), grotesca ancha, máquina de escribir

03

Espacio y superficie

Margen

clamp(16px, 3vw, 44px)

Rejilla

12 columnas · separación 16px

Aire entre secciones

clamp(80px, 9vw, 140px)

Cabecera

64px

Radio

0 px · botones en píldora · sin sombra

Medido en su página

margen 43 px · radios píldora

04

Movimiento

Duraciones

rápido 0.25 s · revelado 0.9 s · cambio de página 0.8 s · escalonado 0.06 s

Curvas

cubic-bezier(0.165, 0.84, 0.44, 1) · revelado cubic-bezier(0.19, 1, 0.22, 1)

Medido en su página

cubic-bezier(0.165, 0.84, 0.44, 1)

Gestos de su familia y su pieza en el kit

• cinta que corre en 2 obras → Marquee variant="minimal"
• crecer con el scroll → ScrollExpand
• palabras que asoman → Reveal kind="slide"
• scroll suavizado → SmoothScroll
• subrayado que crece → NavBar linkHover="underline"

05

Componentes del kit con la guía

Cualquier pieza del kit lee los tokens de la guía. Variante sugerida: variant="outline".

06

Familia y patrones

4 obras del cuaderno del laboratorio son de esta familia. Lo que se repite entre ellas es la base de la guía:

Patrones

botones en óvalo (2), cinta de texto (2), menú lateral (2), reseñas (2), titular con palabra en cursiva (2), antes y después, app con QR, blog, clips verticales, comparación, el dueño como marca, equipo con fotos, final en negro, locales en tarjetas, noticias en rejilla, palabra gigante de sección, pie con foto, portada partida

Tono

clásico (2), urbano (2), especialista, familiar, lujo discreto, seguro

Paleta

fondo claro (3), apagada (2), acento metálico, acento único saturado, fondo oscuro

Piezas más usadas

ActionBar (4), OpeningHours (4), AppointmentList (3), BookingFlow (3), ContactForm (2), FullscreenMenu (2), Marquee (2), PricingSection (2), Accordion, BeforeAfter, CartDrawer, CheckoutFlow, DatePicker, DeviceMockup

• Cita Barbers, réplica de Rendezvous · réplica · /inspiraciones/cita
• Patrón, réplica de Don Barber & Groom · réplica · /inspiraciones/patron
• Raíz, réplica de Marco Ambrosi · réplica · /inspiraciones/raiz
• Esparta reformada como barbería de carácter · demo · /sitios/esparta

Composiciones de portada recomendadas: Vídeo a sangre, titular escalonado, Marca de borde a borde · relatos: Servicio claro, Antes / después. Ver una página entera con la guía ↗

07

Receta

Barbería, oficio con carácter. Un local con personalidad de barrio o de cadena: letrero, cinta que corre y el equipo como familia.

1. portada partida: servicios en condensada gigante sobre la foto del local: Hero
2. cinta de texto que corre: Marquee
3. palabras gigantes que suben al entrar: «Locales», «Clientes»: Reveal
4. locales en tarjetas de retrato con su horario: OpeningHours
5. el equipo en óvalos B/N con reserva por barbero: TeamSection
6. carta en la pared, sin suscripciones: PricingSection
7. reseñas: TestimonialSection
8. la app con su QR: DeviceMockupQRCode
9. final en negro: preguntas en dos columnas y reserva: FAQSectionCTASection

Llamada fija: Reservar o descargar la app, arriba a la derecha (se rellena al pasar).

No olvidar: el final en negro con preguntas y reserva: es donde cierran la venta; la gótica condensada es ligera (400), no Anton; botones en óvalo de contorno.

08

Inspiraciones y páginas del repo

Inspiraciones: webs premiadas estudiadas en el laboratorio y rehechas con Trama siguiendo esta guía, con su marca, sus textos y sus imágenes (docs/55).

Páginas del repo cuya guía más afín es esta, medidas con refs:probe --repo: afinidad de 0 a 1 al comparar fondo, acento, letra y escala del titular, texto y superficies.

09

Reglas medidas

npm run refs:probe -- --guides <base> mide la guía en el navegador con las once reglas de las webs premiadas (docs/16 §2).

• familias ≤ 3
• titular 3–8 vw, marca 12–18 vw o de borde a borde ≤ 50 vw
• interlineado del titular 0,8–1
• peso del titular 300–500 (o condensada/lúdica)
• tracking del titular 0 a −5 %
• texto 14–20 px
• interlineado del texto 1,3–1,6
• margen lateral 10–80 px o contenido centrado (escritorio)
• margen lateral 8–29 px (móvil)
• titular móvil 8–16 vw (marca hasta 50)
• sombras ≤ 2 (salvo lúdico o sombra dura)

10

Código

1import GuideFrame from "@/components/ui/GuideFrame";2 3export default function Page() {4  return (5    <GuideFrame guide="barberia" as="main">6      <h1 className="ui-g-h1">…</h1>7      <p className="ui-g-body">…</p>8      {/* cualquier pieza del kit con variant="outline" */}9    </GuideFrame>10  );11}

1/* la guía «Barbería de carácter» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #eceae0;4  --fg: #111111;5  --mut: #5c5c5c;6  --acc: #ff622b;7  --acc2: #7e929c;8  --card: #f6f4ee;9  --ln: rgba(17,17,17,0.18);10  --r: 0px;11  --display: var(--font-antonio), var(--font-anton), "Arial Narrow", sans-serif;12  --font-accent: var(--font-playfair-display), Georgia, serif;13  --glow: 0;14  --g-font-display: var(--font-antonio), var(--font-anton), "Arial Narrow", sans-serif;15  --g-font-body: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;16  --g-font-mono: var(--font-geist-mono), ui-monospace, Consolas, monospace;17  --g-fs-brand: clamp(4.5rem, 23.6vw, 21rem);18  --g-fs-h1: clamp(3rem, 8.6vw, 8rem);19  --g-fs-h2: clamp(2.25rem, 6.6vw, 6rem);20  --g-fs-body: 1rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 400;23  --g-lh-display: 0.9;24  --g-ls-display: -0.01em;25  --g-tt-display: uppercase;26  --g-tt-label: uppercase;27  --g-ls-label: 0.02em;28  --g-lh-body: 1.4;29  --g-margin: clamp(16px, 3vw, 44px);30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(80px, 9vw, 140px);33  --g-header: 64px;34  --g-measure: 26em;35  --g-radius: 0px;36  --g-radius-btn: 999px;37  --g-shadow: none;38  --g-dur-fast: 0.25s;39  --g-dur-reveal: 0.9s;40  --g-dur-page: 0.8s;41  --g-stagger: 0.06s;42  --g-ease: cubic-bezier(0.165, 0.84, 0.44, 1);43  --g-ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);44}