Estudio boutique

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Cormorant Garamond

Texto

Inter

Acento

Cormorant Garamond

Medido en su página

titular Cormorant Garamond a 4.9 vw, peso 400, interlineado 1, -1 % · texto 18 px / 1.4

En su familia

serif con cursiva (4), titular gigante (2), titular partido en cursiva

03

Espacio y superficie

Margen

clamp(20px, 2.2vw, 32px)

Rejilla

12 columnas · separación 20px

Aire entre secciones

clamp(96px, 10vw, 160px)

Cabecera

65px

Radio

0 px · botones en píldora · sin sombra

Medido en su página

margen 32 px · radios píldora

04

Movimiento

Duraciones

rápido 0.3 s · revelado 1.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

• foto fija en 2 obras → FeatureExplorer
• movimiento reducido respetado en 2 obras → —
• cinta que corre → Marquee variant="minimal"
• 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="editorial".

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

horario de clases (2), acordeón con foto fija, cinta de cifras, equipo con fotos, foto a sangre, foto fija, galería editorial, lista gigante de nombres, portada partida, relato por scroll, reserva propia, tarjetas de sesión

Tono

cálido (2), cercano (2), sereno (2), editorial, lujo discreto, natural

Paleta

fondo claro (3), tonos tierra (2), acento verde, fondo oscuro

Piezas más usadas

ClassSchedule (2), FAQSection (2), Accordion, AppointmentList, BookingFlow, Button, Chart, ContactForm, FeatureExplorer, FeatureGrid, FullscreenMenu, Hero, Marquee, MemberArea

• VeraVeda, recuperar margen en las imágenes · concepto · http://localhost:3021/imagenes.html
• VeraVeda, herbario para escucharte · concepto · http://localhost:3021/herbario/
• Núcleo, réplica de Core Atelier Pilates · réplica · /inspiraciones/nucleo
• Cadencia reformada como estudio boutique · demo · /sitios/cadencia

Composiciones de portada recomendadas: Asimétrico editorial, Vídeo a sangre, titular escalonado · relatos: Servicio claro, Capítulos fijados. Ver una página entera con la guía ↗

07

Receta

Pilates, yoga, estudio privado. Un estudio pequeño y cuidado, con reserva y cuenta de cliente.

1. portada con foto a sangre y titular en serifa con media frase en cursiva: Hero
2. acordeón de aparatos o clases que cambia la foto fija de al lado: FeatureExplorer
3. sesiones privadas en tres tarjetas: PricingSection
4. horario y reserva: ClassSchedule
5. pie: Footer

Llamada fija: Reservar clase (entrar con la cuenta), con subrayado que crece.

No olvidar: scroll suavizado (SmoothScroll); texto a 18 px con algo de tracking positivo.

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="boutique" 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 «Estudio boutique» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #f7e7de;4  --fg: #25140c;5  --mut: #7c5a48;6  --acc: #744c32;7  --acc2: #25140c;8  --card: #fbf1ec;9  --ln: rgba(37,20,12,0.22);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-inter), 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, 12vw, 11rem);18  --g-fs-h1: clamp(2.75rem, 5.6vw, 5rem);19  --g-fs-h2: clamp(2.5rem, 4.9vw, 4.375rem);20  --g-fs-body: 1.125rem;21  --g-fs-label: 0.8125rem;22  --g-fw-display: 400;23  --g-lh-display: 0.86;24  --g-ls-display: -0.01em;25  --g-tt-display: none;26  --g-tt-label: uppercase;27  --g-ls-label: 0.08em;28  --g-lh-body: 1.39;29  --g-margin: clamp(20px, 2.2vw, 32px);30  --g-gutter: 20px;31  --g-cols: 12;32  --g-section: clamp(96px, 10vw, 160px);33  --g-header: 65px;34  --g-measure: 25em;35  --g-radius: 0px;36  --g-radius-btn: 999px;37  --g-shadow: none;38  --g-dur-fast: 0.3s;39  --g-dur-reveal: 1.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}