Trattoria de barrio

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Fraunces

Texto

Manrope

Acento

Fraunces

Medido en su página

titular Fraunces a 4.9 vw, peso 400, interlineado 1, -3 % · texto 15 px / 1.5

En su familia

sans redonda en mayúsculas, serifa blanda con cursiva

03

Espacio y superficie

Margen

clamp(16px, 4vw, 56px)

Rejilla

12 columnas · separación 24px

Aire entre secciones

clamp(70px, 9vw, 120px)

Cabecera

84px

Radio

0 px · sin sombra

Medido en su página

margen 56 px · radios —

04

Movimiento

Duraciones

rápido 0.25 s · revelado 0.6 s · cambio de página 0.5 s · escalonado 0.06 s

Curvas

cubic-bezier(0.34, 1.56, 0.64, 1) · revelado cubic-bezier(0.22, 1, 0.36, 1)

Medido en su página

cubic-bezier(0.34, 1.56, 0.64, 1)

Gestos de su familia y su pieza en el kit

• color de fondo que cambia con el carrusel → —

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

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

Patrones

afinidad de guía, bloques de color, platos en círculo, programación, título en arco

Tono

alegre, cercano

Paleta

crema, rojo, turquesa, verde botella

Piezas más usadas

BriefFlow, CheckoutFlow, ContactForm, EventLineup, FullscreenMenu, GuideFrame, QuantityStepper, Reveal

• Guías revisadas contra sus originales y la guía bloque nocturno · concepto · /guias
• Bocado, a partir de Délice · réplica · /inspiraciones/bocado

Composiciones de portada recomendadas: Collage y manifiesto, Vídeo a sangre, titular escalonado · relatos: Servicio claro, Producto en escena. Ver una página entera con la guía ↗

07

Receta

Restaurante, pizzería o bar de barrio. La gente vuelve por la comida, el precio y el ambiente; hay que reservar o pedir en dos toques.

1. Portada de color con los cuatro botones: Button
2. Platos del día en carrusel: Tabs
3. Programación de noches: EventLineup
4. Salones privados: BriefFlow
5. Pedido a domicilio: QuantityStepperCheckoutFlow

Llamada fija: Reservar mesa y pedir online, siempre a la vista.

No olvidar: horario por servicio: comedor, barra, reparto; días cerrados en la reserva; tarjeta regalo.

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="trattoria" 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 «Trattoria de barrio» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #b8202a;4  --fg: #f8efdc;5  --mut: #f3d2c0;6  --acc: #f8efdc;7  --acc2: #7cc3bd;8  --card: #9e1b24;9  --ln: rgba(248,239,220,0.3);10  --r: 0px;11  --display: var(--font-fraunces), Georgia, serif;12  --font-accent: var(--font-fraunces), Georgia, serif;13  --glow: 1;14  --g-font-display: var(--font-fraunces), Georgia, serif;15  --g-font-body: var(--font-manrope), 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, 18vw, 18rem);18  --g-fs-h1: clamp(3rem, 7.4vw, 7.4rem);19  --g-fs-h2: clamp(2.4rem, 5vw, 4.4rem);20  --g-fs-body: 0.9375rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 400;23  --g-lh-display: 0.92;24  --g-ls-display: -0.03em;25  --g-tt-display: none;26  --g-tt-label: uppercase;27  --g-ls-label: 0.06em;28  --g-lh-body: 1.5;29  --g-margin: clamp(16px, 4vw, 56px);30  --g-gutter: 24px;31  --g-cols: 12;32  --g-section: clamp(70px, 9vw, 120px);33  --g-header: 84px;34  --g-measure: 30em;35  --g-radius: 0px;36  --g-radius-btn: 0px;37  --g-shadow: none;38  --g-dur-fast: 0.25s;39  --g-dur-reveal: 0.6s;40  --g-dur-page: 0.5s;41  --g-stagger: 0.06s;42  --g-ease: cubic-bezier(0.34, 1.56, 0.64, 1);43  --g-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);44}