Tinta a mano

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Titan One

Texto

Patrick Hand

Acento

Patrick Hand

Medido en su página

titular Titan One a 6.7 vw, peso 400, interlineado 0.9, 0 % · texto —

En su familia

gorda de cómic, manuscrita

03

Espacio y superficie

Margen

18px

Rejilla

12 columnas · separación 12px

Aire entre secciones

clamp(70px, 8vw, 110px)

Cabecera

54px

Radio

12 px · botones en píldora · sombra dura

Medido en su página

margen 18 px · radios píldora, 12, 50

04

Movimiento

Duraciones

rápido 0.14 s · revelado 0.5 s · cambio de página 0.4 s · escalonado 0.05 s

Curvas

ease-out · revelado cubic-bezier(0.34, 1.56, 0.64, 1)

Medido en su página

ease-out

Gestos de su familia y su pieza en el kit

• andares → —
• salto según el enfado → —

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

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

Patrones

bocadillos, juego en lienzo, multitud dibujada, sombra de viñeta

Tono

gamberro, satírico

Paleta

papel, tinta, un rojo

Piezas más usadas

• No mires abajo, a partir de Don’t Look Up · réplica · /inspiraciones/no-mires-abajo

Composiciones de portada recomendadas: Producto centrado, Collage y manifiesto · relatos: Mundo explorable, Servicio claro. Ver una página entera con la guía ↗

07

Receta

Videojuego de navegador. La web es el juego: se entra y se juega sin instalar.

1. Pantalla de título jugable: ExplorableCanvas
2. Cómo se juega: Timeline
3. Partida: Progress
4. Clasificación: Table

Llamada fija: Jugar, sin registro.

No olvidar: las dos formas de acabar; pausa; móvil con el marcador siempre visible.

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) · excepción medida: Don't Look Up: los botones llevan sombra dura de viñeta, es parte del dibujo

10

Código

1import GuideFrame from "@/components/ui/GuideFrame";2 3export default function Page() {4  return (5    <GuideFrame guide="tinta" 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 «Tinta a mano» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #f4f3ef;4  --fg: #14140f;5  --mut: #55554d;6  --acc: #c0342a;7  --acc2: #14140f;8  --card: #ffffff;9  --ln: #14140f;10  --r: 12px;11  --display: var(--font-titan-one), "Arial Black", sans-serif;12  --font-accent: var(--font-patrick-hand), cursive;13  --glow: 0;14  --g-font-display: var(--font-titan-one), "Arial Black", sans-serif;15  --g-font-body: var(--font-patrick-hand), cursive;16  --g-font-mono: var(--font-patrick-hand), cursive;17  --g-fs-brand: clamp(4rem, 13vw, 11rem);18  --g-fs-h1: clamp(3rem, 7.6vw, 6rem);19  --g-fs-h2: clamp(1.75rem, 3.4vw, 3rem);20  --g-fs-body: 1.1875rem;21  --g-fs-label: 0.9375rem;22  --g-fw-display: 400;23  --g-lh-display: 0.92;24  --g-ls-display: 0em;25  --g-tt-display: uppercase;26  --g-tt-label: none;27  --g-ls-label: 0em;28  --g-lh-body: 1.3;29  --g-margin: 18px;30  --g-gutter: 12px;31  --g-cols: 12;32  --g-section: clamp(70px, 8vw, 110px);33  --g-header: 54px;34  --g-measure: 26em;35  --g-radius: 12px;36  --g-radius-btn: 999px;37  --g-shadow: 4px 4px 0 var(--fg);38  --g-dur-fast: 0.14s;39  --g-dur-reveal: 0.5s;40  --g-dur-page: 0.4s;41  --g-stagger: 0.05s;42  --g-ease: ease-out;43  --g-ease-reveal: cubic-bezier(0.34, 1.56, 0.64, 1);44}