Estudio en papel

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Inter Tight

Texto

Inter

Acento

Geist Mono

Medido en su página

titular Inter Tight a 3.2 vw, peso 500, interlineado 1, -3.5 % · texto 16 px / 1.6

En su familia

grotesca de 500 centrada, grotesca de 500 contenida

03

Espacio y superficie

Margen

clamp(20px, 2.8vw, 40px)

Rejilla

12 columnas · separación 20px

Aire entre secciones

clamp(96px, 11vw, 168px)

Cabecera

64px

Radio

6 px · botones en píldora · sin sombra

Medido en su página

margen 40 px · radios píldora, 6

04

Movimiento

Duraciones

rápido 0.3 s · revelado 1 s · cambio de página 0.7 s · escalonado 0.06 s

Curvas

cubic-bezier(0.22, 1, 0.36, 1) · revelado cubic-bezier(0.22, 1, 0.36, 1)

Medido en su página

cubic-bezier(0.22, 1, 0.36, 1)

Gestos de su familia y su pieza en el kit

• aparición suave → —
• carrusel → —
• giro del visor → —

05

Componentes del kit con la guía

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

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

arcos de usos, carrusel, ecosistema en tarjetas, ficha sobre foto, figuras de formas geométricas, pestañas por público, tarjetas muy redondeadas, visor por ángulos con puntos de detalle

Tono

amable, aventurero, cercano, técnico

Paleta

amarillo, crema cálido y cuatro colores de formas, gris cálido, negro

Piezas más usadas

CheckoutFlow (2), FullscreenMenu (2), Reveal (2), GuideFrame

• Majo, a partir de Fauna Robotics · réplica · /inspiraciones/majo
• Trocha, a partir de Radian · réplica · /inspiraciones/trocha
• Las guías de estilo sacadas del repo · concepto · /guias

Composiciones de portada recomendadas: Asimétrico editorial, Objeto en un marco · relatos: Capítulos fijados, Índice primero. Ver una página entera con la guía ↗

07

Receta

Robótica o hardware de consumo amable. Un producto técnico que tiene que parecer cercano y seguro, para varios públicos.

1. Titular centrado y foto grande: Reveal
2. Para quién, en pestañas: Tabs
3. Rasgos con figuras: FeatureGrid
4. Ficha técnica: Table
5. Configurar y reservar con señal: OptionPickerCheckoutFlow

Llamada fija: Reservar, con la señal que se descuenta.

No olvidar: la seguridad, explicada sin miedo; fecha de entrega; SDK o documentación para desarrollo.

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

1/* la guía «Estudio en papel» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #f2efe9;4  --fg: #121110;5  --mut: #625d54;6  --acc: #b9501d;7  --acc2: #121110;8  --card: #e8e4dc;9  --ln: rgba(18,17,16,0.14);10  --r: 6px;11  --display: var(--font-inter-tight), var(--font-inter), ui-sans-serif, system-ui, sans-serif;12  --font-accent: var(--font-geist-mono), ui-monospace, Consolas, monospace;13  --glow: 0;14  --g-font-display: var(--font-inter-tight), 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(4rem, 15vw, 14rem);18  --g-fs-h1: clamp(2.25rem, 5vw, 4.75rem);19  --g-fs-h2: clamp(2rem, 3.2vw, 3rem);20  --g-fs-body: 1rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 500;23  --g-lh-display: 1.02;24  --g-ls-display: -0.035em;25  --g-tt-display: none;26  --g-tt-label: uppercase;27  --g-ls-label: 0.06em;28  --g-lh-body: 1.55;29  --g-margin: clamp(20px, 2.8vw, 40px);30  --g-gutter: 20px;31  --g-cols: 12;32  --g-section: clamp(96px, 11vw, 168px);33  --g-header: 64px;34  --g-measure: 30em;35  --g-radius: 6px;36  --g-radius-btn: 999px;37  --g-shadow: none;38  --g-dur-fast: 0.3s;39  --g-dur-reveal: 1s;40  --g-dur-page: 0.7s;41  --g-stagger: 0.06s;42  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);43  --g-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);44}