Salón editorial claro

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Cormorant Garamond

Texto

Manrope

Acento

Cormorant Garamond

Medido en su página

titular Cormorant Garamond a 7.6 vw, peso 300, interlineado 1.1, 0 % · texto 22.9 px / 1.6

En su familia

serif con cursiva (2), serif fina (2), grotesca en mayúsculas, minúsculas, una sola letra

03

Espacio y superficie

Margen

24px

Rejilla

12 columnas · separación 16px

Aire entre secciones

clamp(96px, 10vw, 160px)

Cabecera

138px

Radio

0 px · sin sombra

Medido en su página

margen 24 px · radios —

04

Movimiento

Duraciones

rápido 0.3 s · revelado 1 s · cambio de página 0.9 s · escalonado 0.08 s

Curvas

cubic-bezier(0.4, 0, 0.2, 1) · revelado cubic-bezier(0.19, 1, 0.22, 1)

Medido en su página

cubic-bezier(0.4, 0, 0.2, 1)

Gestos de su familia y su pieza en el kit

• desenfoque al bajar → —
• enlaces que suben escalonados → FullscreenMenu
• filetes que se dibujan → FullscreenMenu rules
• fotos que se disuelven → ShapeMosaic dissolve
• 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="editorial".

06

Familia y patrones

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

Patrones

carta de servicios (2), collage de fotos (2), equipo en filas (2), palabra de fondo (2), reserva por persona (2), academia, afinidad de guía, arco detrás del titular, barra inferior fija, carrusel de tratamientos, consulta gratis, equipo con fotos, logos de marcas, menú a pantalla completa, mosaico de formas, noticias en rejilla, pestaña de reseñas fija, reserva fija

Tono

cálido (4), editorial (4), artesanal, artístico, comercial, sobrio

Paleta

fondo claro (3), pastel cálido (3), fondo oscuro, grises con grano

Piezas más usadas

AppointmentList (4), BookingFlow (4), OpeningHours (4), TeamSection (4), ActionBar (3), FullscreenMenu (3), GuideFrame (2), ImageReveal (2), PricingSection (2), SectionHeader (2), TestimonialSection (2), Accordion, Carousel, CartDrawer

• Guías revisadas contra sus originales y la guía bloque nocturno · concepto · /guias
• Linde, consumidor limpio para el piloto de agentes · demo
• Matiz, réplica de Il Colorista · réplica · /inspiraciones/matiz
• Melena, réplica de Hair Me Up · réplica · /inspiraciones/melena
• Nura, réplica de ALICE Hair & Art · réplica · /inspiraciones/nura
• Hebra reformada con el estudio de peluquería · demo · /sitios/hebra

Composiciones de portada recomendadas: Asimétrico editorial, Collage y manifiesto · relatos: Servicio claro, Manifiesto tipográfico. Ver una página entera con la guía ↗

07

Receta

Peluquería y color, estética. Un salón que vende oficio y calma: el equipo y los trabajos son el producto.

1. cabecera con la navegación que se subraya: NavBar
2. portada: titular fino y mosaico o collage de trabajos: ShapeMosaicImageReveal
3. manifiesto corto: SectionHeader
4. carta de servicios en paquetes con lo que incluyen y el precio: MenuListPricingSection
5. equipo en filas: la fila entera lleva a reservar con esa persona: TeamSection
6. trabajos y antes y después: ImageGalleryBeforeAfter
7. reseñas con nota: TestimonialSection
8. horario y locales: OpeningHours
9. noticias o tienda: ArticlesSectionProductCard
10. pie: Footer

Llamada fija: Reservar (una píldora por local si hay varios), fija abajo con ActionBar.

No olvidar: texto grande y ligero (24 px en Il Colorista), no 14; consulta inicial gratis si luego reservas; las palabras de fondo de cada sección (SectionHeader backdrop).

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 · excepción medida: Il Colorista: Cormorant 200 a 1,11
• peso del titular 300–500 (o condensada/lúdica)
• tracking del titular 0 a −5 %
• texto 14–20 px · excepción medida: Il Colorista: Karla 200 a 24 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="salon" as="main">6      <h1 className="ui-g-h1">…</h1>7      <p className="ui-g-body">…</p>8      {/* cualquier pieza del kit con variant="editorial" */}9    </GuideFrame>10  );11}

1/* la guía «Salón editorial claro» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #ffffff;4  --fg: #1f1f1f;5  --mut: #5a5a5a;6  --acc: #f5a490;7  --acc2: #963e13;8  --card: #f9d3c5;9  --ln: rgba(31,31,31,0.14);10  --r: 0px;11  --display: var(--font-cormorant-garamond), Georgia, serif;12  --font-accent: var(--font-cormorant-garamond), Georgia, serif;13  --glow: 0;14  --g-font-display: var(--font-cormorant-garamond), Georgia, serif;15  --g-font-body: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;16  --g-font-mono: var(--font-geist-mono), ui-monospace, Consolas, monospace;17  --g-fs-brand: clamp(3.5rem, 8.7vw, 8rem);18  --g-fs-h1: clamp(2.5rem, 5vw, 4.5rem);19  --g-fs-h2: clamp(2.25rem, 7.6vw, 6.875rem);20  --g-fs-body: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);21  --g-fs-label: 0.8125rem;22  --g-fw-display: 300;23  --g-lh-display: 1.1;24  --g-ls-display: 0em;25  --g-tt-display: none;26  --g-tt-label: none;27  --g-ls-label: 0em;28  --g-lh-body: 1.58;29  --g-margin: 24px;30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(96px, 10vw, 160px);33  --g-header: 138px;34  --g-measure: 28em;35  --g-radius: 0px;36  --g-radius-btn: 0px;37  --g-shadow: none;38  --g-dur-fast: 0.3s;39  --g-dur-reveal: 1s;40  --g-dur-page: 0.9s;41  --g-stagger: 0.08s;42  --g-ease: cubic-bezier(0.4, 0, 0.2, 1);43  --g-ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);44}