Escuela amarilla

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Space Grotesk

Texto

Space Grotesk

Acento

Space Grotesk

Medido en su página

titular Space Grotesk a 32.3 vw, peso 500, interlineado 0.8, -4 % · texto 18 px / 1.3

En su familia

brocha, espaciado abierto, grotesca en mayúsculas, letra de contorno, una sola letra

03

Espacio y superficie

Margen

clamp(16px, 2.5vw, 36px)

Rejilla

12 columnas · separación 16px

Aire entre secciones

clamp(96px, 10vw, 140px)

Cabecera

96px

Radio

8 px · sombra dura

Medido en su página

margen 36 px · radios 8

04

Movimiento

Duraciones

rápido 0.15 s · revelado 0.8 s · cambio de página 0.7 s · escalonado 0.05 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

linear · cubic-bezier(0.22, 1, 0.36, 1) · cubic-bezier(0.165, 0.84, 0.44, 1)

Gestos de su familia y su pieza en el kit

• trazo que se dibuja → LineDraw

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

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

Patrones

testimonios (2), boletín, cifras, lanzamos pronto, letra gigante de líneas, lista de cursos a todo el ancho, muro de logos, muro de profesores, neobrutalismo, palabras tachadas, pizarra con personajes, primera clase gratis, programas por convocatoria, recuadros con borde, sellos de valoración, sombra dura desplazada, talleres, tarjetas solapadas

Tono

enérgico (2), comercial, editorial, institucional, lúdico

Paleta

amarillo y negro (2), fondo claro

Piezas más usadas

BriefFlow (2), EnrollmentFlow (2), FullscreenMenu (2), CohortList, ContactForm, LineDraw, TeamSection

• Ahora, réplica de Future London Academy · réplica · /inspiraciones/ahora
• Oficio, réplica de Honhar · réplica · /inspiraciones/oficio

Composiciones de portada recomendadas: Marca de borde a borde, Collage y manifiesto · relatos: Índice primero, Servicio claro. Ver una página entera con la guía ↗

07

Receta

Academia, escuela, formación profesional. Programas por convocatoria con prueba social; tres páginas: portada, catálogo con filtros y ficha de programa.

1. portada con la promesa y la próxima convocatoria: Hero
2. sellos de valoración y cifras en recuadros: LogoCloudStatsSection
3. programas por convocatoria con estado y fechas: CohortList
4. método en tres o cuatro principios: FeatureGrid
5. profesorado en muro: TeamSection
6. testimonios en vídeo o retrato B/N: TestimonialSection
7. masterclass gratis antes de cada curso: CTASection
8. logos de empresas y boletín: LogoCloudContactForm
9. ficha de programa: temario y solicitud por pasos: AccordionStepper

Llamada fija: Inscríbete / solicita plaza en la próxima convocatoria.

No olvidar: el final: presencia en eventos, «sé mentor», el lema y el pie con mapa; la letra va siempre apretada (−2 a −8 %); sombra dura desplazada en los botones.

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.

Ninguna página del repo tiene esta guía como la más afín todavía.

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="escuela" 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 «Escuela amarilla» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #ffffff;4  --fg: #1a1a1a;5  --mut: #6f6f6f;6  --acc: #ffe32b;7  --acc2: #1a1a1a;8  --card: #ffe32b;9  --ln: #1a1a1a;10  --r: 8px;11  --display: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;12  --font-accent: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;13  --glow: 0;14  --g-font-display: var(--font-space-grotesk), 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(4rem, 15vw, 14rem);18  --g-fs-h1: clamp(2.5rem, 6.7vw, 6rem);19  --g-fs-h2: clamp(2rem, 4.6vw, 4.125rem);20  --g-fs-body: 1.125rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 500;23  --g-lh-display: 0.97;24  --g-ls-display: -0.05em;25  --g-tt-display: uppercase;26  --g-tt-label: uppercase;27  --g-ls-label: 0.02em;28  --g-lh-body: 1.34;29  --g-margin: clamp(16px, 2.5vw, 36px);30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(96px, 10vw, 140px);33  --g-header: 96px;34  --g-measure: 28em;35  --g-radius: 8px;36  --g-radius-btn: 8px;37  --g-shadow: 4px 4px 0 var(--fg);38  --g-dur-fast: 0.15s;39  --g-dur-reveal: 0.8s;40  --g-dur-page: 0.7s;41  --g-stagger: 0.05s;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}