Producto nocturno

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Inter

Texto

Inter

Acento

Newsreader

Medido en su página

titular Inter a 5 vw, peso 510, interlineado 1, -2.2 % · texto 15 px / 1.6

En su familia

grotesca contenida, mono técnico, serif en cursiva

03

Espacio y superficie

Margen

max(24px, calc((100vw - 1200px) / 2))

Rejilla

12 columnas · separación 24px

Aire entre secciones

128px

Cabecera

72px

Radio

8 px · botones en píldora · sin sombra

Medido en su página

margen 120 px · radios píldora, 8, 50

04

Movimiento

Duraciones

rápido 0.16 s · revelado 0.7 s · cambio de página 0.5 s · escalonado 0.05 s

Curvas

cubic-bezier(0.4, 0, 0.2, 1) · revelado cubic-bezier(0.165, 0.84, 0.44, 1)

Medido en su página

cubic-bezier(0.4, 0, 0.2, 1)

Gestos de su familia y su pieza en el kit

• cámara con profundidad y paralaje de puntero → —
• corte de luz entre capítulos → —
• malla de fragmentos instanciados que se abre con scroll → —
• movimiento reducido respetado → —
• núcleo 3D → —
• partículas en volumen → —

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

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

Patrones

archivo filtrable, cambio de cámara, escena Three.js procedural, ficha modal, lectura en capas, partículas en profundidad, relato por scroll

Tono

cinemático, exploratorio, humano

Paleta

azul glaciar oscuro, hielo claro, naranja de expedición

Piezas más usadas

Button

• POLARIS, archivo ficticio de expedición inspirado en Igloo Inc. · demo · /demo/polaris-archivo

Composiciones de portada recomendadas: Producto centrado · relatos: Producto en escena, Servicio claro. 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="nocturno" 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 «Producto nocturno» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #08090a;4  --fg: #f7f8f8;5  --mut: #8a8f98;6  --acc: #7170ff;7  --acc2: #e2e4e7;8  --card: rgba(255,255,255,0.035);9  --ln: rgba(255,255,255,0.09);10  --r: 10px;11  --display: var(--font-inter), ui-sans-serif, system-ui, sans-serif;12  --font-accent: var(--font-newsreader), Georgia, serif;13  --glow: 1;14  --g-font-display: var(--font-inter), ui-sans-serif, system-ui, sans-serif;15  --g-font-body: 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(3rem, 8vw, 7rem);18  --g-fs-h1: clamp(2.25rem, 5vw, 4.5rem);19  --g-fs-h2: clamp(2rem, 3.3vw, 3rem);20  --g-fs-body: 0.9375rem;21  --g-fs-label: 0.8125rem;22  --g-fw-display: 510;23  --g-lh-display: 1;24  --g-ls-display: -0.022em;25  --g-tt-display: none;26  --g-tt-label: none;27  --g-ls-label: 0em;28  --g-lh-body: 1.6;29  --g-margin: max(24px, calc((100vw - 1200px) / 2));30  --g-gutter: 24px;31  --g-cols: 12;32  --g-section: 128px;33  --g-header: 72px;34  --g-measure: 32em;35  --g-radius: 8px;36  --g-radius-btn: 999px;37  --g-shadow: none;38  --g-dur-fast: 0.16s;39  --g-dur-reveal: 0.7s;40  --g-dur-page: 0.5s;41  --g-stagger: 0.05s;42  --g-ease: cubic-bezier(0.4, 0, 0.2, 1);43  --g-ease-reveal: cubic-bezier(0.165, 0.84, 0.44, 1);44}