Producto de marca

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Archivo

Texto

Space Grotesk

Acento

Archivo

Medido en su página

titular Archivo a 13 vw, peso 800, interlineado 0.9, -3 % · texto 24 px / 1.2

En su familia

grotesca ancha, grotesca en mayúsculas, titular gigante

03

Espacio y superficie

Margen

clamp(16px, 2.5vw, 36px)

Rejilla

12 columnas · separación 16px

Aire entre secciones

clamp(80px, 9vw, 140px)

Cabecera

56px

Radio

28 px · botones en píldora · sin sombra

Medido en su página

margen 36 px · radios píldora, 28, 50

04

Movimiento

Duraciones

rápido 0.25 s · revelado 0.9 s · cambio de página 0.8 s · escalonado 0.06 s

Curvas

cubic-bezier(0.165, 0.84, 0.44, 1) · revelado cubic-bezier(0.19, 1, 0.22, 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

• cinta que corre → Marquee variant="minimal"
• producto fijo → ObjectStage o position: fixed

05

Componentes del kit con la guía

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

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

cinta de compra fija, lo que no, marcos de etiqueta, origen y familia, palabras gigantes con ilustración, producto fijo, sello circular

Tono

con humor, descarado, familiar

Paleta

dos tintas, fondo oscuro

Piezas más usadas

CartDrawer, CheckoutFlow, FullscreenMenu, Marquee, OptionPicker, QuantityStepper

• Abuela Rosa, réplica de Peppa Sauce · réplica · /inspiraciones/abuela-rosa

Composiciones de portada recomendadas: Producto centrado, Marca de borde a borde · relatos: Producto en escena, Un objeto que guía. Ver una página entera con la guía ↗

07

Receta

Producto de consumo de marca. Un solo producto vendido con origen, maridajes y tono; la compra va fuera.

1. el producto fijo en el centro mientras pasa la página: ObjectStage
2. cinta de compra fija: Marquee
3. tarjetas con marco de etiqueta: historia, sello y picor: SectionHeader
4. origen en un marco ancho con cinta: Marquee
5. maridajes y lo que no, en palabras gigantes con ilustración: FitText
6. compra: CTASection

Llamada fija: Comprar, en la cinta fija de arriba.

No olvidar: dos tintas y nada más: el color lo pone el producto; texto de cartel a 36 px (2,5 vw) en las tarjetas; las dos letras son estrechas.

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)
• tracking del titular 0 a −5 %
• texto 14–20 px
• interlineado del texto 1,3–1,6 · excepción medida: Peppa Sauce: texto de cartel a 1,2 (36 px)
• 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="marca" as="main">6      <h1 className="ui-g-h1">…</h1>7      <p className="ui-g-body">…</p>8      {/* cualquier pieza del kit con variant="outline" */}9    </GuideFrame>10  );11}

1/* la guía «Producto de marca» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #141329;4  --fg: #feeee2;5  --mut: #8f93b8;6  --acc: #feeee2;7  --acc2: #e8612c;8  --card: #141329;9  --ln: rgba(254,238,226,0.9);10  --r: 28px;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-space-grotesk), 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, 17vw, 16rem);18  --g-fs-h1: clamp(3rem, 13vw, 12rem);19  --g-fs-h2: clamp(1.75rem, 3.5vw, 3.125rem);20  --g-fs-body: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);21  --g-fs-label: 0.875rem;22  --g-fw-display: 800;23  --g-lh-display: 0.85;24  --g-ls-display: -0.03em;25  --g-tt-display: uppercase;26  --g-tt-label: uppercase;27  --g-ls-label: 0.04em;28  --g-lh-body: 1.2;29  --g-margin: clamp(16px, 2.5vw, 36px);30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(80px, 9vw, 140px);33  --g-header: 56px;34  --g-measure: 24em;35  --g-radius: 28px;36  --g-radius-btn: 999px;37  --g-shadow: none;38  --g-dur-fast: 0.25s;39  --g-dur-reveal: 0.9s;40  --g-dur-page: 0.8s;41  --g-stagger: 0.06s;42  --g-ease: cubic-bezier(0.165, 0.84, 0.44, 1);43  --g-ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);44}