Bloque nocturno

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Archivo

Texto

Inter Tight

Acento

Archivo

Medido en su página

titular Archivo a 12 vw, peso 900, interlineado 0.8, -2 % · texto 16 px / 1.4

En su familia

condensada de 900 en mayúsculas, grotesca de 900 en mayúsculas

03

Espacio y superficie

Margen

clamp(14px, 1.6vw, 24px)

Rejilla

12 columnas · separación clamp(14px, 1.6vw, 24px)

Aire entre secciones

clamp(90px, 10vw, 150px)

Cabecera

64px

Radio

2 px · sin sombra

Medido en su página

margen 23 px · radios 2

04

Movimiento

Duraciones

rápido 0.15 s · revelado 0.7 s · cambio de página 0.6 s · escalonado 0.06 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

• cintas en bucle → —
• mitades que se recortan → —
• nombre con glitch → —

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

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

Patrones

afinidad de guía, cintas cruzadas, fotos entre las palabras del titular, frase fantasma, mitades por proyecto, muro de proyectos fijado al scroll, navegación en las cuatro esquinas, paréntesis gigantes, pegatina girada

Tono

contundente, creativo, de oficio, directo

Paleta

negro, negro carbón, pasteles por proyecto, violeta eléctrico

Piezas más usadas

BriefFlow (2), FullscreenMenu (2), Reveal (2), ContactForm, GuideFrame

• Guías revisadas contra sus originales y la guía bloque nocturno · concepto · /guias
• Bolo, a partir de Truck'N Roll · réplica · /inspiraciones/bolo
• Grano, a partir de Glitch&Grit · réplica · /inspiraciones/grano

Composiciones de portada recomendadas: Vídeo a sangre, titular escalonado, Marca de borde a borde · relatos: Producto en escena, Capítulos fijados. Ver una página entera con la guía ↗

07

Receta

Logística y producción de giras, festivales y rodajes. Un servicio de oficio, de noche y en carretera, que se vende por fiabilidad y por la gente que lo hace.

1. Titular a pantalla completa con fotos entre las líneas: Reveal
2. Valores numerados: Reveal
3. Cifras de la red: StatsSection
4. Planificar la gira: QuantityStepperBriefFlow
5. Empleo: ContactForm

Llamada fija: Planifica tu logística, con presupuesto orientativo.

No olvidar: despacho 24 h; la flota con sus medidas; ofertas de empleo con candidatura.

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) · excepción medida: Truck'N Roll: National 2 Condensed 900 a 200 px; Glitch&Grit: Elza 900 a 160 px. El peso extremo es lo que define la familia
• 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="bloque" 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 «Bloque nocturno» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #131313;4  --fg: #f3f2ee;5  --mut: #c4c1ba;6  --acc: #7a64ff;7  --acc2: #9be59a;8  --card: #3d2bb8;9  --ln: rgba(243,242,238,0.2);10  --r: 2px;11  --display: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;12  --font-accent: var(--font-archivo), ui-sans-serif, system-ui, sans-serif;13  --glow: 1;14  --g-font-display: var(--font-archivo), ui-sans-serif, system-ui, sans-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(5rem, 22vw, 22rem);18  --g-fs-h1: clamp(3.4rem, 12vw, 13rem);19  --g-fs-h2: clamp(2.4rem, 6vw, 6rem);20  --g-fs-body: 1rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 900;23  --g-lh-display: 0.84;24  --g-ls-display: -0.02em;25  --g-tt-display: uppercase;26  --g-tt-label: none;27  --g-ls-label: 0em;28  --g-lh-body: 1.4;29  --g-margin: clamp(14px, 1.6vw, 24px);30  --g-gutter: clamp(14px, 1.6vw, 24px);31  --g-cols: 12;32  --g-section: clamp(90px, 10vw, 150px);33  --g-header: 64px;34  --g-measure: 30em;35  --g-radius: 2px;36  --g-radius-btn: 2px;37  --g-shadow: none;38  --g-dur-fast: 0.15s;39  --g-dur-reveal: 0.7s;40  --g-dur-page: 0.6s;41  --g-stagger: 0.06s;42  --g-ease: cubic-bezier(0.4, 0, 0.2, 1);43  --g-ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);44}