Lo esencial · Sin permanencia
Guías de estilo · hoja de estilo · lujo
Hueso cálido, una tinta oliva, serifa fina en mayúsculas y vídeo a sangre. Calma, tiempo y oficio.
Para: Hotel, clínica estética, inmobiliaria de lujo, bodega, joyería. Sale de: Tengile Malamala, Odyssée, Son Daven, White Desert.
Hotel
Lujo
Hueso cálido, una tinta oliva, serifa fina en mayúsculas y vídeo a sangre. Calma, tiempo y oficio.
01
| texto sobre fondo | 9.7 : 1 | AAA |
|---|---|---|
| secundario sobre fondo | 5.8 : 1 | AA |
| acento sobre fondo | 4.9 : 1 | AA |
| texto sobre tarjeta | 8.8 : 1 | AAA |
Colores de las obras de su familia en el cuaderno:
02
marca · 12 vw
Aa Lujo
titular · 8.3 vw · 300 · 0.9 · -0.02em · mayúsculas
El oficio se nota
sección · 4.4 vw
Lo que hacemos y cómo
texto · 1rem, 0.95rem + 0.25vw, 1.125rem / 1.4
Cada guía fija su par tipográfico, la escala en dos escalones y el aire entre líneas con valores medidos. Este párrafo usa la medida de la guía (24em).
Cormorant GaramondInterCormorant Garamond03
16px16pxclamp(96px, 12vw, 200px)40px04
cubic-bezier(0.4, 0, 0.2, 1) · revelado cubic-bezier(0.19, 1, 0.22, 1)—05
Cualquier pieza del kit lee los tokens de la guía. Variante sugerida: variant="editorial".
Lo esencial · Sin permanencia
Todo lo anterior · Sesión de prueba
“Me sentí en buenas manos desde el primer día.”
“Lo recomiendo sin dudar: cercanos y serios.”
06
2 obras del cuaderno del laboratorio son de esta familia. Lo que se repite entre ellas es la base de la guía:
http://localhost:3021/imagenes.htmlhttp://localhost:3021/marea/Composiciones de portada recomendadas: Vídeo a sangre, titular escalonado, Asimétrico editorial · relatos: Línea de tiempo, Servicio claro, Capítulos fijados. Ver una página entera con la guía ↗
07
Sin receta de sector todavía: usa las composiciones y relatos recomendados de la guía.
08
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).
Ninguna inspiración sigue esta guía todavía.
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.
| Página | Tipo | Afinidad | Titular medido | Paleta |
|---|---|---|---|---|
| Tierra Ancha (réplica de Tengile MalaMala Collection) | inspiración | 0.66 | Cormorant Garamond · 9.2 vw · 300 |
09
npm run refs:probe -- --guides <base> mide la guía en el navegador con las once reglas de las webs premiadas (docs/16 §2).
10
import GuideFrame from "@/components/ui/GuideFrame"; export default function Page() { return ( <GuideFrame guide="lujo" as="main"> <h1 className="ui-g-h1">…</h1> <p className="ui-g-body">…</p> {/* cualquier pieza del kit con variant="editorial" */} </GuideFrame> );}/* la guía «Lujo tranquilo» como variables CSS (guideToStyle) */.mi-web { --bg: #f5eee9; --fg: #373f1d; --mut: #5f5d4b; --acc: #5c6e21; --acc2: #373f1d; --card: #ece3dc; --ln: rgba(55,63,29,0.2); --r: 2px; --display: var(--font-cormorant-garamond), Georgia, serif; --font-accent: var(--font-cormorant-garamond), Georgia, serif; --glow: 0; --g-font-display: var(--font-cormorant-garamond), Georgia, serif; --g-font-body: var(--font-inter), ui-sans-serif, system-ui, sans-serif; --g-font-mono: var(--font-geist-mono), ui-monospace, Consolas, monospace; --g-fs-brand: clamp(3.5rem, 12vw, 13rem); --g-fs-h1: clamp(2.75rem, 8.3vw, 9.5rem); --g-fs-h2: clamp(2rem, 4.4vw, 4rem); --g-fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --g-fs-label: 0.8125rem; --g-fw-display: 300; --g-lh-display: 0.9; --g-ls-display: -0.02em; --g-tt-display: uppercase; --g-tt-label: uppercase; --g-ls-label: 0.03em; --g-lh-body: 1.4; --g-margin: 16px; --g-gutter: 16px; --g-cols: 12; --g-section: clamp(96px, 12vw, 200px); --g-header: 40px; --g-measure: 24em; --g-radius: 2px; --g-radius-btn: 2px; --g-shadow: none; --g-dur-fast: 0.3s; --g-dur-reveal: 1.2s; --g-dur-page: 1s; --g-stagger: 0.08s; --g-ease: cubic-bezier(0.4, 0, 0.2, 1); --g-ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);}