Lúdico

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Bricolage Grotesque

Texto

Instrument Sans

Acento

Silkscreen

Medido en su página

titular Bricolage Grotesque a 3.6 vw, peso 800, interlineado 1, -3 % · texto —

En su familia

titular gigante (7), serif con cursiva (5), etiquetas pixel (2), serif editorial

03

Espacio y superficie

Margen

20px

Rejilla

12 columnas · separación 16px

Aire entre secciones

clamp(80px, 10vw, 140px)

Cabecera

64px

Radio

16 px · botones en píldora · sombra dura

Medido en su página

margen 20 px · radios píldora, 16

04

Movimiento

Duraciones

rápido 0.25 s · revelado 0.7 s · cambio de página 0.6 s · escalonado 0.05 s

Curvas

cubic-bezier(0.165, 0.84, 0.44, 1) · revelado cubic-bezier(0.34, 1.56, 0.64, 1)

Medido en su página

cubic-bezier(0.165, 0.84, 0.44, 1)

Gestos de su familia y su pieza en el kit

• movimiento reducido respetado en 7 obras → —
• marquesina lenta en 2 obras → —
• transición de página en 2 obras → —
• scroll suavizado → SmoothScroll

05

Componentes del kit con la guía

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

06

Familia y patrones

7 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 (5), filtro por categoría (4), relato por scroll (4), collage de fotos (3), entrada con QR (2), portal geométrico (2), programa filtrable (2), billete troquelado, cartel tipográfico, cartelera por fechas, cinta de texto, collage asimétrico, preguntas frecuentes, sombra dura desplazada

Tono

familiar (5), cinemático (4), festivo (4), nocturno (2), con humor, editorial, lúdico

Paleta

acento rojo (5), fondo claro (5), fondo oscuro (3), acento amarillo (2), acento azul (2), pastel cálido (2), papel cálido

Piezas más usadas

Alert (2), Button (2), EventLineup (2), FAQSection (2), Footer (2), GuideFrame (2), Hero (2), Marquee (2), PageTransition (2), QRCode (2), QuantityStepper (2), TextField (2)

• El circo de Halloween de los Astorga · concepto · http://localhost:3018
• Astorga, telón de entrada y álbum para móvil · concepto · https://drasw.tailf76b18.ts.net/circo-astorga/
• Astorga, fondos de circo tenebroso con imagegen · concepto · https://drasw.tailf76b18.ts.net/circo-astorga/
• Astorga, el circo después de anochecer · concepto · https://drasw.tailf76b18.ts.net/circo-astorga/
• Astorga, una historia que recorre el interior · concepto · https://circo-astorga.vercel.app/
• UMBRAL, festival ficticio compuesto con las skills de Trama · demo · http://127.0.0.1:3435
• Tres estéticas para UMBRAL · demo · http://127.0.0.1:3436

Composiciones de portada recomendadas: Collage y manifiesto, Producto centrado · relatos: Mundo explorable, Webfilm con elecciones. 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.

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

1/* la guía «Lúdico» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #f4d4d4;4  --fg: #2b1d1d;5  --mut: #6b4a4a;6  --acc: #2f5be0;7  --acc2: #ffcf4a;8  --card: #fff7f0;9  --ln: rgba(43,29,29,0.55);10  --r: 3px;11  --display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui, sans-serif;12  --font-accent: var(--font-silkscreen), ui-monospace, Consolas, monospace;13  --glow: 0;14  --g-font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui, sans-serif;15  --g-font-body: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;16  --g-font-mono: var(--font-silkscreen), ui-monospace, Consolas, monospace;17  --g-fs-brand: clamp(4rem, 13vw, 12rem);18  --g-fs-h1: clamp(2.5rem, 7vw, 7rem);19  --g-fs-h2: clamp(2rem, 3.6vw, 3.25rem);20  --g-fs-body: 1.0625rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 800;23  --g-lh-display: 0.92;24  --g-ls-display: -0.03em;25  --g-tt-display: none;26  --g-tt-label: uppercase;27  --g-ls-label: 0em;28  --g-lh-body: 1.45;29  --g-margin: 20px;30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(80px, 10vw, 140px);33  --g-header: 64px;34  --g-measure: 28em;35  --g-radius: 16px;36  --g-radius-btn: 999px;37  --g-shadow: 4px 4px 0 var(--fg);38  --g-dur-fast: 0.25s;39  --g-dur-reveal: 0.7s;40  --g-dur-page: 0.6s;41  --g-stagger: 0.05s;42  --g-ease: cubic-bezier(0.165, 0.84, 0.44, 1);43  --g-ease-reveal: cubic-bezier(0.34, 1.56, 0.64, 1);44}