Saltar al contenido
TRAMA

Guías de estilo · hoja de estilo · lujo

Lujo tranquilo

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.

Usar la guíaVer ejemplos

01

Color

--bg#f5eee9
--fg#373f1d
--mut#5f5d4b
--acc#5c6e21
--acc2#373f1d
--card#ece3dc
Contraste (WCAG)
texto sobre fondo9.7 : 1AAA
secundario sobre fondo5.8 : 1AA
acento sobre fondo4.9 : 1AA
texto sobre tarjeta8.8 : 1AAA

Colores de las obras de su familia en el cuaderno:

02

Tipografía

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).

Titulares
Cormorant Garamond
Texto
Inter
Acento
Cormorant Garamond
Medido en su página
titular Cormorant Garamond a 8.3 vw, peso 300, interlineado 0.9, -2 % · texto 18 px / 1.4
En su familia
serif con cursiva (2), titular gigante (2)

03

Espacio y superficie

Margen
16px
Rejilla
12 columnas · separación 16px
Aire entre secciones
clamp(96px, 12vw, 200px)
Cabecera
40px
Radio
2 px · sin sombra
Medido en su página
margen 16 px · radios 2

tarjeta

Fondo --card, línea --ln, radio de la guía.

BotónSecundario

04

Movimiento

Duraciones
rápido 0.3 s · revelado 1.2 s · cambio de página 1 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

  • movimiento reducido respetado en 2 obras → —
Pasa el ratón:Texto que rueda

05

Componentes del kit con la guía

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

NuevoÚltimas plazas

Planes

BÁSICO
39 €/ mes

Lo esencial · Sin permanencia

COMPLETO
59 €/ mes

Todo lo anterior · Sesión de prueba

“Me sentí en buenas manos desde el primer día.”
Lucía MarClienta
“Lo recomiendo sin dudar: cercanos y serios.”
Jon IbarraCliente

Preguntas

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
galería editorial (2), relato por scroll
Tono
sereno (2), cercano, personal
Paleta
fondo claro (2), acento azul
Piezas más usadas
Accordion, Button, FAQSection, FeatureGrid, Hero, PricingCard
  • VeraVeda, recuperar margen en las imágenes · concepto · http://localhost:3021/imagenes.html
  • VeraVeda, volver a ti desde el Atlántico · concepto · http://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

Receta

Sin receta de sector todavía: usa las composiciones y relatos recomendados de la guía.

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).

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áginaTipoAfinidadTitular medidoPaleta
Tierra Ancha (réplica de Tengile MalaMala Collection)inspiración0.66Cormorant Garamond · 9.2 vw · 300

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

tsx
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>  );}
css
/* 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);}