Club de alto contraste

01

Color

Colores de las obras de su familia en el cuaderno:

02

Tipografía

Titulares

Antonio

Texto

Inter

Acento

Antonio

Medido en su página

titular Antonio a 46.7 vw, peso 700, interlineado 0.8, -4 % · texto 18.7 px / 1.4

En su familia

titular gigante (5), condensada en mayúsculas (4), espaciado negativo (2), grotesca apretada, grotesca en mayúsculas, máquina de escribir, sans fina

03

Espacio y superficie

Margen

clamp(16px, 1.7vw, 24px)

Rejilla

12 columnas · separación 16px

Aire entre secciones

clamp(80px, 10vw, 160px)

Cabecera

64px

Radio

0 px · botones en píldora · sin sombra

Medido en su página

margen 24 px · radios píldora

04

Movimiento

Duraciones

rápido 0.15 s · revelado 0.9 s · cambio de página 0.6 s · escalonado 0.07 s

Curvas

cubic-bezier(0.215, 0.61, 0.355, 1) · revelado cubic-bezier(0.19, 1, 0.22, 1)

Medido en su página

cubic-bezier(0.215, 0.61, 0.355, 1)

Gestos de su familia y su pieza en el kit

• cinta que corre en 4 obras → Marquee variant="minimal"
• texto que rueda en 2 obras → RollLink (fade)
• crecer con el scroll → ScrollExpand
• fila que gira a marquesina → FullscreenMenu linkHover="marquee"
• menú que cae → FullscreenMenu
• scroll suavizado → SmoothScroll
• titular que cruza → PinnedSection con el titular desplazado
• transición en escalera → PageTransition kind="stairs" · FullscreenMenu reveal="stairs"
• trazo que se dibuja → LineDraw
• vídeos que se suceden → VideoPlayer

05

Componentes del kit con la guía

Cualquier pieza del kit lee los tokens de la guía. Variante sugerida: variant="outline".

06

Familia y patrones

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

Patrones

cinta de cifras (2), cinta de texto (2), clase de prueba gratis (2), disciplinas en tarjetas de retrato (2), horario de clases (2), mapa de clubes (2), píldoras de contorno (2), planes con conmutador (2), preguntas frecuentes (2), bandas de foto, barra 3D, barra del proyecto en vista, bordes de sección curvos, carteles a duotono, círculo de llamada, damero de fotos y círculos, diplomas, enlaces con corchetes

Tono

enérgico (4), seguro (2), cercano, comercial, con humor, de barrio, descarado, documental

Paleta

acento único saturado (4), blanco y negro (3), fondo oscuro (3), degradado de marca, fondo claro

Piezas más usadas

ClassSchedule (4), MemberArea (4), MembershipFlow (4), PricingSection (4), ContactForm (3), FAQSection (3), FullscreenMenu (3), Marquee (3), EnrollmentFlow (2), LogoCloud (2), OpeningHours (2), RollLink (2), AppointmentList, BookingFlow

• Impulso, réplica de Essor Fitness · réplica · /inspiraciones/impulso
• Lobo Gym, réplica de Fenriz Gym · réplica · /inspiraciones/lobo
• Q47, réplica de K72 · réplica · /inspiraciones/q47
• Talla, réplica de Skulpt Fitness · réplica · /inspiraciones/talla
• Vive Club, réplica de FIT AND YOU · réplica · /inspiraciones/vive
• Forja reformada como club de alto contraste · demo · /sitios/forja

Composiciones de portada recomendadas: Marca de borde a borde, Vídeo a sangre, titular escalonado · relatos: Capítulos fijados, Índice primero. Ver una página entera con la guía ↗

07

Receta

Gimnasio, artes marciales, entrenador personal. Un club que vende energía y comunidad; la llamada es la clase de prueba gratis, no «reservar».

1. portada: lema en condensada gigante y foto o vídeo B/N: Hero
2. cintas blancas finas entre secciones: Marquee
3. disciplinas: tarjetas de retrato con el nombre encima o lista de nombres gigantes: ImageGalleryProjectList
4. titulares que cruzan la pantalla con la sección fijada: PinnedSection
5. cinta de cifras: MarqueeStatsSection
6. horario de clases con plazas y lista de espera: ClassSchedule
7. planes con mes/año: PricingSection
8. equipo: TeamSection
9. preguntas, contacto y mapa: FAQSectionContactFormOpeningHours
10. pie con lema: Footer

Llamada fija: Clase de prueba gratis, fija y con el texto que rueda (RollLink).

No olvidar: la web entera es larga (11–26 pantallas): tarifas, preguntas, muro de fotos, contacto; Antonio 700 a −6 %, no Anton; bandas de foto B/N a sangre entre secciones; scroll suavizado (SmoothScroll) como Essor.

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="club" as="main">6      <h1 className="ui-g-h1">…</h1>7      <p className="ui-g-body">…</p>8      {/* cualquier pieza del kit con variant="outline" */}9    </GuideFrame>10  );11}

1/* la guía «Club de alto contraste» como variables CSS (guideToStyle) */2.mi-web {3  --bg: #000000;4  --fg: #ffffff;5  --mut: #999999;6  --acc: #cef952;7  --acc2: #ffffff;8  --card: #141414;9  --ln: rgba(255,255,255,0.22);10  --r: 0px;11  --display: var(--font-antonio), var(--font-anton), "Arial Narrow", sans-serif;12  --font-accent: var(--font-antonio), var(--font-anton), "Arial Narrow", sans-serif;13  --glow: 1;14  --g-font-display: var(--font-antonio), var(--font-anton), "Arial Narrow", sans-serif;15  --g-font-body: 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(4.5rem, 14.4vw, 13rem);18  --g-fs-h1: clamp(3rem, 11vw, 10rem);19  --g-fs-h2: clamp(2.5rem, 6.8vw, 6rem);20  --g-fs-body: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);21  --g-fs-label: 0.8125rem;22  --g-fw-display: 700;23  --g-lh-display: 0.94;24  --g-ls-display: -0.06em;25  --g-tt-display: uppercase;26  --g-tt-label: uppercase;27  --g-ls-label: 0.05em;28  --g-lh-body: 1.4;29  --g-margin: clamp(16px, 1.7vw, 24px);30  --g-gutter: 16px;31  --g-cols: 12;32  --g-section: clamp(80px, 10vw, 160px);33  --g-header: 64px;34  --g-measure: 27em;35  --g-radius: 0px;36  --g-radius-btn: 999px;37  --g-shadow: none;38  --g-dur-fast: 0.15s;39  --g-dur-reveal: 0.9s;40  --g-dur-page: 0.6s;41  --g-stagger: 0.07s;42  --g-ease: cubic-bezier(0.215, 0.61, 0.355, 1);43  --g-ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);44}