Academia de autor

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Onest

Texto

Onest

Acento

Onest

Medido en su página

titular Onest a 3.1 vw, peso 400, interlineado 1, 0 % · texto 16 px / 1.3

En su familia

serif con cursiva (3), titular gigante (2), minúsculas, sans geométrica, títulos entre paréntesis

03

Espacio y superficie

Margen

clamp(20px, 8vw - 10px, 120px)

Rejilla

12 columnas · separación 16px

Aire entre secciones

clamp(80px, 9vw, 120px)

Cabecera

24px

Radio

0 px · sombra dura

Medido en su página

margen 105 px · radios —

04

Movimiento

Duraciones

rápido 0.2 s · revelado 1 s · cambio de página 0.8 s · escalonado 0.06 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

cubic-bezier(0.165, 0.84, 0.44, 1)

Gestos de su familia y su pieza en el kit

• movimiento reducido respetado en 4 obras → —
• scroll suavizado → SmoothScroll
• 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

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

Patrones

galería editorial (3), preguntas frecuentes (2), relato por scroll (2), acordeón, autor como marca fija, billete troquelado, cifras, formulario de contacto, ilustración de línea, primera clase gratis, principios con foto, programas por convocatoria, retrato recortado, sombra dura desplazada, testimonios, vlogs

Tono

cercano (5), personal (3), directo, lúdico, sereno

Paleta

fondo claro (3), acento verde (2), fondo oscuro (2), acento rosa, dos acentos

Piezas más usadas

Accordion (2), Button (2), FAQSection (2), Carousel, ChatWidget, CohortList, ContactForm, EnrollmentFlow, FeatureGrid, FullscreenMenu, Hero, LineDraw, Modal, PricingCard

• VeraVeda, recuperar margen en las imágenes · concepto · http://localhost:3021/imagenes.html
• VeraVeda, restaurar las imágenes pendientes sin tocar las conversaciones · concepto · http://localhost:3021/imagenes.html
• VeraVeda Origen, fidelidad y lectura completa · réplica · http://localhost:3021/origen/
• VeraVeda, elegir por dónde empezar · concepto · http://localhost:3021/pulso/
• Remada, réplica de Surfing Academy · réplica · /inspiraciones/remada

Composiciones de portada recomendadas: Collage y manifiesto, Asimétrico editorial · relatos: Línea de tiempo, Servicio claro. Ver una página entera con la guía ↗

07

Receta

Academia de autor, coaching, viajes guiados. La marca es una persona y su comunidad: su retrato fijo, su voz y sus convocatorias.

1. portada en minúsculas con un dibujo de línea: LineDraw
2. viajes o cursos por convocatoria: CohortList
3. sobre mí y los principios del método: FeatureGrid
4. cifras de la comunidad: StatsSection
5. primera clase regalada: CTASection
6. opiniones: TestimonialSection
7. vlogs y fotos de grupo: ArticlesSectionImageGallery
8. preguntas y contacto: FAQSectionContactForm

Llamada fija: Escríbeme (chat flotante) y la primera clase gratis.

No olvidar: la segunda mitad personal: vlogs, comunidad, preguntas, contacto; el retrato fijo no debe tapar el contenido en móvil; SmoothScroll.

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) · excepción medida: Surfing Academy: 120 px
• 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="autor" 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 «Academia de autor» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #ededed;4  --fg: #17191a;5  --mut: #555555;6  --acc: #ff4f28;7  --acc2: #39be91;8  --card: #ffffff;9  --ln: rgba(23,25,26,0.6);10  --r: 0px;11  --display: var(--font-onest), ui-sans-serif, system-ui, sans-serif;12  --font-accent: var(--font-onest), ui-sans-serif, system-ui, sans-serif;13  --glow: 0;14  --g-font-display: var(--font-onest), ui-sans-serif, system-ui, sans-serif;15  --g-font-body: var(--font-onest), 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, 20vw, 18rem);18  --g-fs-h1: clamp(2.5rem, 6.9vw, 6.25rem);19  --g-fs-h2: clamp(2rem, 3.1vw, 2.8125rem);20  --g-fs-body: 1rem;21  --g-fs-label: 0.75rem;22  --g-fw-display: 400;23  --g-lh-display: 1;24  --g-ls-display: 0em;25  --g-tt-display: none;26  --g-tt-label: none;27  --g-ls-label: 0em;28  --g-lh-body: 1.3;29  --g-margin: clamp(20px, 8vw - 10px, 120px);30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(80px, 9vw, 120px);33  --g-header: 24px;34  --g-measure: 30em;35  --g-radius: 0px;36  --g-radius-btn: 0px;37  --g-shadow: 4px 4px 0 var(--fg);38  --g-dur-fast: 0.2s;39  --g-dur-reveal: 1s;40  --g-dur-page: 0.8s;41  --g-stagger: 0.06s;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}