Sabana tranquila

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Cormorant Garamond

Texto

Inter Tight

Acento

Inter Tight

Medido en su página

titular Cormorant Garamond a 3.1 vw, peso 300, interlineado 1, -2 % · texto —

En su familia

serifa finísima en mayúsculas, serifa ultrafina en mayúsculas

03

Espacio y superficie

Margen

clamp(16px, 3.4vw, 48px)

Rejilla

12 columnas · separación 24px

Aire entre secciones

clamp(90px, 12vw, 160px)

Cabecera

70px

Radio

0 px · sin sombra

Medido en su página

margen 48 px · radios píldora

04

Movimiento

Duraciones

rápido 0.4 s · revelado 1 s · cambio de página 0.8 s · escalonado 0.08 s

Curvas

cubic-bezier(0.22, 1, 0.36, 1) · revelado cubic-bezier(0.19, 1, 0.22, 1)

Medido en su página

cubic-bezier(0.22, 1, 0.36, 1)

Gestos de su familia y su pieza en el kit

• fotos que se solapan → —
• parallax a distintas velocidades → —

05

Componentes del kit con la guía

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

06

Familia y patrones

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

Patrones

cartas de alojamiento, cita grande, collage suelto, marca partida entre esquinas, palabras gigantes cortadas, texto vertical, titular desplazado, titular escalonado

Tono

sereno (2), cálido, editorial

Paleta

azul claro, blanco, coral, crema, negro, verde oliva

Piezas más usadas

ContactForm (2), FullscreenMenu (2), Reveal (2), Parallax, QuantityStepper

• Nada Corriente, a partir de Normal is Boring · réplica · /inspiraciones/corriente
• Tierra Ancha, a partir de Tengile MalaMala · réplica · /inspiraciones/tierra-ancha

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

07

Receta

Hotel de naturaleza, safari y turismo rural de lujo. Se venden pocas camas en un lugar extraordinario y el viaje se prepara a medida.

1. Foto a sangre con titular desplazado: Reveal
2. Párrafo grande en serifa: Reveal
3. Collage de fauna que flota: Parallax
4. Alojamientos: ImageGallery
5. Planificar la estancia: QuantityStepperDatePicker

Llamada fija: Planifica tu estancia, con presupuesto al momento.

No olvidar: precio por noche visible; quién te acompaña: guías con nombre; qué parte del dinero va a la conservación.

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="sabana" as="main">6      <h1 className="ui-g-h1">…</h1>7      <p className="ui-g-body">…</p>8      {/* cualquier pieza del kit con variant="minimal" */}9    </GuideFrame>10  );11}

1/* la guía «Sabana tranquila» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #f5eee9;4  --fg: #373f1d;5  --mut: #6b6a52;6  --acc: #8b5a2b;7  --acc2: #c8b48a;8  --card: #ece3d9;9  --ln: rgba(55,63,29,0.2);10  --r: 0px;11  --display: var(--font-cormorant-garamond), Georgia, serif;12  --font-accent: var(--font-inter-tight), var(--font-inter), ui-sans-serif, system-ui, sans-serif;13  --glow: 0;14  --g-font-display: var(--font-cormorant-garamond), Georgia, serif;15  --g-font-body: var(--font-inter-tight), 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.4rem, 14vw, 14rem);18  --g-fs-h1: clamp(3rem, 7.4vw, 7rem);19  --g-fs-h2: clamp(2rem, 3.1vw, 2.75rem);20  --g-fs-body: 0.9375rem;21  --g-fs-label: 0.6875rem;22  --g-fw-display: 300;23  --g-lh-display: 0.92;24  --g-ls-display: -0.02em;25  --g-tt-display: uppercase;26  --g-tt-label: uppercase;27  --g-ls-label: 0.12em;28  --g-lh-body: 1.45;29  --g-margin: clamp(16px, 3.4vw, 48px);30  --g-gutter: 24px;31  --g-cols: 12;32  --g-section: clamp(90px, 12vw, 160px);33  --g-header: 70px;34  --g-measure: 34em;35  --g-radius: 0px;36  --g-radius-btn: 0px;37  --g-shadow: none;38  --g-dur-fast: 0.4s;39  --g-dur-reveal: 1s;40  --g-dur-page: 0.8s;41  --g-stagger: 0.08s;42  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);43  --g-ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);44}