Cartel suizo

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Inter Tight

Texto

Inter Tight

Acento

Inter Tight

Medido en su página

titular Inter Tight a 42.6 vw, peso 700, interlineado 0.9, -4 % · texto 14 px / 1.3

En su familia

grotesca 700, grotesca de 700 a toda la anchura, interlineado cerrado

03

Espacio y superficie

Margen

12px

Rejilla

12 columnas · separación 8px

Aire entre secciones

clamp(60px, 7vw, 100px)

Cabecera

44px

Radio

0 px · botones en píldora · sin sombra

Medido en su página

margen 12 px · radios píldora

04

Movimiento

Duraciones

rápido 0.3 s · revelado 0.55 s · cambio de página 0.55 s · escalonado 0.05 s

Curvas

cubic-bezier(0.625, 0.05, 0, 1) · revelado cubic-bezier(0.87, 0, 0.13, 1)

Medido en su página

cubic-bezier(0.625, 0.05, 0, 1)

Gestos de su familia y su pieza en el kit

• sello que gira → —
• vinilo ligado a la reproducción → —

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

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

Patrones

años gigantes, carta de pesos en franjas, cintas de acentos, foto dentro del nombre, glifos gigantes, guía de viaje, postales y billetes, reproductor fijo, vinilo que gira

Tono

alegre, austero, editorial, potente

Paleta

blanco, bloques planos, crema y diez colores de peso, negro, rojo anaranjado

Piezas más usadas

CheckoutFlow (2), FullscreenMenu (2), CartDrawer, ContactForm, EventLineup, QuantityStepper, Reveal

• Turia Grotesk, a partir de PP Neue Montreal · réplica · /inspiraciones/turia
• Pulso Lento, a partir de Paul Kalkbrenner · réplica · /inspiraciones/pulso-lento

Composiciones de portada recomendadas: Marca de borde a borde, Rótulo con ventana · relatos: Línea de tiempo, Capítulos fijados. Ver una página entera con la guía ↗

07

Receta

Música y artistas. Un artista con discografía, gira y tienda.

1. Nombre a pantalla completa: FitText
2. Último disco: AudioPlayer
3. Trayectoria: Timeline
4. Gira: EventLineup
5. Tienda: CartDrawerCheckoutFlow

Llamada fija: Entradas, en cada fecha.

No olvidar: el reproductor persiste entre páginas; fechas agotadas; vinilo y CD como variantes.

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: Paul Kalkbrenner: ABC Diatype 700 a 150 px
• 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="cartel" 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 «Cartel suizo» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #ffffff;4  --fg: #000000;5  --mut: #555555;6  --acc: #c43e0d;7  --acc2: #a7ff9c;8  --card: #c5c5c5;9  --ln: #000000;10  --r: 0px;11  --display: var(--font-inter-tight), var(--font-inter), ui-sans-serif, system-ui, sans-serif;12  --font-accent: var(--font-inter-tight), var(--font-inter), ui-sans-serif, system-ui, sans-serif;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-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(4rem, 16vw, 16rem);18  --g-fs-h1: clamp(3rem, 7.8vw, 7.5rem);19  --g-fs-h2: clamp(2.25rem, 6.4vw, 6.5rem);20  --g-fs-body: 0.875rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 700;23  --g-lh-display: 0.84;24  --g-ls-display: -0.05em;25  --g-tt-display: none;26  --g-tt-label: uppercase;27  --g-ls-label: 0em;28  --g-lh-body: 1.3;29  --g-margin: 12px;30  --g-gutter: 8px;31  --g-cols: 12;32  --g-section: clamp(60px, 7vw, 100px);33  --g-header: 44px;34  --g-measure: 26em;35  --g-radius: 0px;36  --g-radius-btn: 999px;37  --g-shadow: none;38  --g-dur-fast: 0.3s;39  --g-dur-reveal: 0.55s;40  --g-dur-page: 0.55s;41  --g-stagger: 0.05s;42  --g-ease: cubic-bezier(0.625, 0.05, 0, 1);43  --g-ease-reveal: cubic-bezier(0.87, 0, 0.13, 1);44}