--- version: "1.0" name: "Aristide Benoist" description: "Sistema visual del portfolio de Aristide Benoist: una sala de cine casi negra (#141414) donde la interfaz se reduce a micro-etiquetas de 11px en hueso verdoso (#BAC4B8) y un logotipo condensado monumental (TIMMONS NY 2.0, la titling de Matt Willey). No hay botones, no hay cards, no hay radios ni sombras: el contenido es una tira de película WebGL, slices verticales de proyectos que se arrastran con inercia, se estiran con la velocidad y se expanden a pantalla completa al entrar. Cada proyecto trae su propio color de acento (rosa #FF71CB, dorado #CC9933, verde #53BB89…) sobre el mismo escenario oscuro. El motion no usa librerías: es un motor WebGL propio en un único bundle." colors: primary: "#BAC4B8" ink: "#BAC4B8" background: "#141414" surface: "#141414" surface-panel: "#1E1E1E" surface-inverse: "#BAC4B8" text-primary: "#BAC4B8" text-on-inverse: "#000000" accent-gold: "#CC9933" black: "#000000" project-pink: "#FF71CB" project-rose: "#D99299" project-plum: "#321D44" project-umber: "#734130" project-navy: "#1E1F28" project-sky: "#D2DCF2" project-green: "#53BB89" project-sand: "#E0C8A4" project-bone: "#D4C3A5" project-red: "#F04333" project-blush: "#FEA8B1" project-cream: "#FFF1CE" typography: display-logo: fontFamily: "TIMMONS NY 2.0" fontSize: "50px" fontWeight: 400 lineHeight: "0.88" letterSpacing: "-1px" textTransform: "uppercase" display-title: fontFamily: "TIMMONS NY 2.0" fontSize: "clamp(80px, 14vw, 220px)" fontWeight: 400 lineHeight: "0.85" letterSpacing: "-0.02em" textTransform: "uppercase" index-number: fontFamily: "TIMMONS NY 2.0" fontSize: "50px" fontWeight: 400 lineHeight: "0.88" letterSpacing: "-0.5px" body: fontFamily: "JWStudio Sans" fontSize: "11px" fontWeight: 700 lineHeight: "0.91" letterSpacing: "normal" textTransform: "uppercase" link: fontFamily: "JWStudio Sans" fontSize: "12px" fontWeight: 700 lineHeight: "34px" letterSpacing: "-0.24px" textTransform: "uppercase" rounded: none: "0px" spacing: frame: "clamp(40px, 3.5vw, 56px)" strip-height: "31vh" strip-gap: "clamp(8px, 1vw, 16px)" micro: "8px" components: logo: fontFamily: "TIMMONS NY 2.0" fontSize: "50px" textColor: "{colors.text-primary}" letterSpacing: "-1px" film-slice: backgroundColor: "grayscale + multiply sobre {colors.background}" rounded: "{rounded.none}" idle: "brightness ~0.35" hover: "brightness 1 + expansión" tick-nav: color: "{colors.text-primary}" tickWidth: "1px" tickHeight: "12px" activeTickHeight: "18px" gap: "8px" meta-label: fontFamily: "JWStudio Sans" fontSize: "11px" textTransform: "uppercase" textColor: "{colors.text-primary}" about-panel: backgroundColor: "{colors.surface-inverse}" textColor: "{colors.text-on-inverse}" rounded: "{rounded.none}" --- # DESIGN.md - Aristide Benoist > Sistema de diseño extraído de `https://aristidebenoist.com` (home, julio 2026) siguiendo el skill `url-inspiration-styleguide`. > Colores, tipografía y easings medidos sobre el sitio en vivo. El sitio no declara variables CSS (`:root` vacío): sus tokens viven en dos `@font-face` ofuscados ("TNY" y "jws"), un puñado de reglas DOM y un motor WebGL propio servido en un único bundle (`/static/js/d.js`). Los nombres tipográficos reales se recuperaron de las tablas `name` de los woff2: **TIMMONS NY 2.0** (Matt Willey) y **JWStudio Sans Bold** (Jon Way Studio, 2017). Lo que el sitio no expone va marcado como *(derivado para completar el sistema)*. --- ## 1. Tema Visual y Atmósfera Aristide Benoist es un desarrollador independiente parisino especializado en motion e interacción, y su portfolio se comporta como lo que anuncia: **no hay página, hay un instrumento**. El DOM contiene apenas un logotipo, cuatro links y dos líneas de metadata; todo lo demás (los proyectos, el layout, la física) vive en un canvas WebGL. La estética resultante es una sala de proyección: un fondo casi negro `#141414`, una tira de película en el centro y luz solo donde el visitante la provoca. El color del sistema cabe en dos hex. El lienzo es `#141414`, un negro elevado dos pasos (nunca `#000000` como fondo). La tinta es **`#BAC4B8`**: no es blanco ni gris, es un **hueso verdoso**, un tono de pantalla apagada que baja la temperatura de todo el sitio y da 10.2:1 de contraste sin el zumbido del blanco puro sobre negro. Logotipo, metadata, links y ticks de navegación: todo es ese único color. El tercer color es prestado: **cada proyecto trae su acento propio** (rosa `#FF71CB`, dorado `#CC9933`, verde `#53BB89`, rojo `#F04333`, crema `#FFF1CE`…), que aparece al expandir su slice y se va con él. La paleta del sitio es un contenedor neutro para doce paletas de un solo uso. La tipografía es un contraste extremo de dos voces. Los titulares usan **TIMMONS NY 2.0**, la ultra-condensada de Matt Willey (director de arte del New York Times Magazine): mayúsculas altísimas, interletra negativa, line-height por debajo de 0.9; el logotipo "ARISTIDE" a 50px con tracking -1px es un cartel, no un texto. Todo lo demás usa **JWStudio Sans Bold a 11px en mayúsculas con line-height 10px**: micro-etiquetas más apretadas que su propio cuerpo, leyendas de museo. No existe el tamaño intermedio: o monumental o microscópico, y esa ausencia de "16px normal" es la firma tipográfica del sitio. No hay radios (todo canto vivo), no hay sombras, no hay bordes: la única línea del sistema es el subrayado de 1px de los links y los ticks del navegador de proyectos. La profundidad la pone el motor: las slices de la tira de película viven atenuadas (~35% de brillo) y **la luz es el estado hover**. Arrastrar la tira la despliega por todo el ancho con inercia y skew de velocidad; soltar la deja reagruparse; entrar en un proyecto expande su slice a pantalla completa. Fue esa física (hecha a mano, sin GSAP ni Three.js) la que puso este sitio en los premios. **Palabras clave de personalidad**: cinemático, negro elevado, monumental/microscópico, físico, monocromo con acentos prestados, canto vivo **Densidad del layout**: extrema en los bordes (metadata en las cuatro esquinas), vacía en el centro hasta que el visitante interactúa **Modo preferido**: oscuro absoluto (no existe modo claro; el panel about invierte a hueso sobre negro como único momento claro) **Nivel de ornamentación**: nulo en el DOM; toda la expresividad está en el motor WebGL **Audiencia visual objetivo**: estudios y marcas de lujo/moda que compran interacción de autor (Gucci, campañas editoriales, direcciones de arte) --- ## 2. Paleta de Colores y Roles Semánticos Dos colores de sistema, un dorado de acento y una bolsa de acentos por proyecto. ### Colores de sistema | Nombre | Hex | Rol | Texto sobre él | |--------|-----|-----|----------------| | Negro elevado | `#141414` | Lienzo único del sitio (medido en `html`) | `#BAC4B8` (10.2:1 AAA) | | Hueso verdoso | `#BAC4B8` | LA tinta: logo, metadata, links, ticks; y superficie del panel about | `#000000` (11.7:1 AAA) | | Panel | `#1E1E1E` | Superficie secundaria (listados, backdrop de slices) | `#BAC4B8` (9.3:1 AAA) | | Negro puro | `#000000` | Solo texto sobre el panel hueso; nunca fondo de sección | — | | Dorado | `#CC9933` | Acento editorial puntual (etiquetas destacadas, "NEW") | `#141414` (7.2:1) | ### Contraste verificado | Combinación | Ratio | Nivel | |-------------|-------|-------| | `#BAC4B8` sobre `#141414` | 10.2:1 | AAA | | `#BAC4B8` sobre `#1E1E1E` | 9.3:1 | AAA | | `#000000` sobre `#BAC4B8` | 11.7:1 | AAA | | `#CC9933` sobre `#141414` | 7.2:1 | AA (y AAA en display) | | `#FF71CB` sobre `#141414` | 7.4:1 | AA | | `#53BB89` sobre `#141414` | 7.8:1 | AA | | `#F04333` sobre `#141414` | 4.9:1 | AA solo texto grande | | `#D2DCF2` sobre `#141414` | 13.5:1 | AAA | > **Nota sobre las micro-etiquetas**: el contraste AAA importa aquí más que en ningún otro sistema de la galería, porque el cuerpo de texto real es de 11px. El hueso `#BAC4B8` fue elegido para pasar AAA a ese tamaño; cualquier acento que sustituya a la tinta en texto pequeño debe superar 7:1. ### Acentos por proyecto (medidos en el DOM de la home) Cada case study define su pareja fondo/acento. No son la paleta del sitio: son inquilinos. | Proyecto (rol) | Acento | Nota | |----------------|--------|------| | Rosa flúor | `#FF71CB` | Sobre `#141414`: 7.4:1 | | Rosa viejo | `#D99299` | Editorial de moda | | Ciruela | `#321D44` | Fondo de case study, no texto | | Tierra | `#734130` | Fondo de case study | | Azul noche | `#1E1F28` | Fondo de case study | | Cielo | `#D2DCF2` | Texto/fondo claro | | Verde | `#53BB89` | 7.8:1 sobre el lienzo | | Arena | `#E0C8A4` / `#D4C3A5` | Editorial cálido | | Rojo | `#F04333` | Solo display | | Rubor | `#FEA8B1` | Fondo claro de proyecto | | Crema | `#FFF1CE` | Fondo claro de proyecto | > **Regla de los acentos prestados**: un acento de proyecto vive únicamente mientras su proyecto está expandido o en hover. Nunca dos acentos a la vez en pantalla, y nunca un acento como color de UI global. Cuando la tira se repliega, el sitio vuelve a ser bicolor. ### Roles semánticos - **Tinta única**: todo el chrome (logo, nav, metadata, links) es `#BAC4B8`. No hay jerarquía por color en la UI: la hay por tamaño y posición. - **La luz es estado**: las imágenes viven al ~35% de brillo; el 100% significa "estás encima". La atenuación es el equivalente funcional del gris de texto secundario. - **Inversión como página**: el about no es otra vista oscura, es el negativo exacto (hueso `#BAC4B8` de fondo, texto negro). Un solo momento claro en todo el dominio. - **(derivado)** Estados de sistema: éxito/error no existen en el sitio (no hay formularios); si se necesitan, tomar `#53BB89` y `#F04333` de la bolsa de proyectos. --- ## 3. Reglas de Tipografía ```css /* Dos familias reales, self-hosted con nombres ofuscados: "TNY" = TIMMONS NY 2.0 Regular (Matt Willey) -> /static/font/t.woff2 "jws" = JWStudio Sans Bold (Jon Way Studio) -> /static/font/jw.woff2 -> sustitutos Google: Anton (display) + Archivo (micro-etiquetas) */ --font-display: 'Anton', 'TIMMONS NY 2.0', 'Arial Narrow', Impact, sans-serif; --font-body: 'Archivo', 'JWStudio Sans', Helvetica, Arial, sans-serif; /* Mono: no detectada en el sitio. Solo para bloques de código en documentación. (derivado para completar el sistema) */ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; ``` **Google Fonts (sustitutos):** ```html ``` ### Nota sobre sustitución tipográfica **Original: TIMMONS NY 2.0 -> HTML: Anton (Google substitute).** **Original: JWStudio Sans Bold -> HTML: Archivo 600/700 (Google substitute).** TIMMONS NY es la titling que Matt Willey dibujó para el New York Times Magazine: ultra-condensada, de asta gruesa uniforme, pensada para componer titulares apilados con line-height por debajo de 0.9. JWStudio Sans es una grotesca neutra de Jon Way Studio usada solo en Bold y solo en mayúsculas pequeñas. Ninguna está en Google Fonts. Candidatas comparadas antes de decidir: | Candidata | Por qué encaja | Por qué se descarta | |---|---|---| | **Anton** | Condensada de cartel con el mismo peso de asta y la misma vocación de titular apilado; a 50px con tracking negativo reproduce el bloque del logotipo "ARISTIDE" mejor que ninguna otra de Google. | **Elegida (display).** | | Oswald | Condensada versátil con más pesos. | Asta demasiado ligera: el logotipo pierde la contundencia de cartel; Oswald es esbelta donde Timmons es maciza. | | Bebas Neue | Titling de caja alta muy popular. | Más estrecha de contraforma y más "plantilla de agencia"; sus terminales redondeadas suavizan lo que Timmons endurece. | | **Archivo** | Grotesca de x alta y ancho ligeramente condensado; en 600/700 a 11px uppercase produce la misma mancha densa que JWStudio Sans Bold. | **Elegida (micro-etiquetas).** | | Inter | Métricas impecables a tamaños pequeños. | Aperturas muy abiertas y ojo grande: a 11px uppercase se ve UI de dashboard, no leyenda de museo. | | Roboto Condensed | Densidad correcta. | Esqueleto más blando y curvas más amables; pierde la sequedad del original. | > El sitio usa JWStudio Sans **solo en Bold** (700 es el único peso servido). En el HTML el mapa es: etiquetas 11-12px -> Archivo 600/700; el peso 400 de Archivo existe solo para textos largos de documentación, que el sitio original no tiene. ### Escala tipográfica > Medido en vivo: logo 50px / lh 44px / ls -1px; números de índice 50px / ls -0.5px; metadata 11px / lh 10px; links 12px / lh 34px / ls -0.24px. Los títulos de proyecto se dibujan en el canvas WebGL con la misma titling, a escala de viewport *(tamaño derivado de observación: ~14vw)*. | Token | Size | LH | Weight | Tracking | Caja | Uso | |-------|------|----|--------|----------|------|-----| | `--f-title` | clamp(80px, 14vw, 220px) | 0.85 | 400 | -0.02em | UPPER | Título de proyecto (en canvas) | | `--f-logo` | 50px | 44px (0.88) | 400 | -1px | UPPER | Logotipo "ARISTIDE" y números de índice | | `--f-link` | 12px | 34px | 700 | -0.24px | UPPER | Links de chrome (ABOUT, EMAIL, EXPLORE) | | `--f-meta` | 11px | 10px (0.91) | 700 | normal | UPPER | Metadata, créditos, disponibilidad | **Cuatro tamaños. Ningún cuerpo de lectura.** El texto largo del about se compone también en micro-etiqueta (11px) sobre el panel hueso, en columnas estrechas. Al trasladar el sistema a una página con lectura real, añadir un solo cuerpo intermedio *(derivado)*: 15-16px / 1.6 en Archivo 400, y nada más. ### Reglas duras ```css /* El display se compone apilado y sin aire */ --lh-display: 0.85; /* line-height MENOR que el cuerpo */ --lh-micro: 0.91; /* incluso las etiquetas van apretadas */ --tracking-display: -0.02em; /* condensada + tracking negativo */ --case: uppercase; /* NO existe caja baja en el sitio */ ``` > Todo el sitio está en mayúsculas: no hay una sola palabra en caja baja. La jerarquía se construye con un salto de escala de 4.5× a 20× (de 11px a 50px-14vw) sin tamaños intermedios. Si un diseño con este sistema necesita un 24px, es que está traicionando el sistema. --- ## 4. Estilos de Componentes ### Logotipo / lockup de esquina ``` Font: TIMMONS NY 2.0 (Anton), 50px, line-height 44px, letter-spacing -1px Color: #BAC4B8 Posición: esquina superior izquierda, a hueso del frame Variante índice: el número del proyecto activo ("1", "2"…) en el mismo cuerpo 50px, esquina o centro según vista Sin fondo, sin padding, sin borde: el lockup ES texto ``` ### Slice de película (componente firma) La unidad del sitio: una columna vertical de imagen de proyecto dentro de la tira central. ``` Proporción: ~1:3.5 (vertical), altura ~31vh en reposo Fondo: la imagen del proyecto, escala grises + atenuada (brightness ~0.35) Border-radius: 0 (canto vivo SIEMPRE) Gap entre slices: ~1vw Estados (todos en el motor WebGL): Reposo: tira compacta en el centro-derecha, slices atenuadas Drag: la tira se despliega por todo el ancho; cada slice se inclina (skew) proporcional a la velocidad del arrastre Hover: la slice recupera brillo 1.0 y crece unos px; aparece el título del proyecto en la titling a escala de viewport Click/enter: la slice se expande hasta llenar el viewport y la vista entra al case study con el acento propio del proyecto ``` ### Navegador de ticks (top center) El "menú" de proyectos: una fila de marcas verticales, una por proyecto. ``` Tick: 1px de ancho × ~12px de alto, color #BAC4B8, opacity .45 Tick activo: ~18px de alto, opacity 1 Gap: 8px Interacción: hover/scrub sobre la fila desplaza la tira de película; es un scrubber, no una lista de links (medidas de alto derivadas de la captura; el patrón es real) ``` ### Link de chrome (ABOUT / EMAIL / INSTAGRAM / TWITTER / EXPLORE) ``` Font: JWStudio Sans Bold (Archivo 700), 12px, line-height 34px, letter-spacing -0.24px, uppercase Color: #BAC4B8 Subrayado: 1px sólido; en los links tipo "e line-w" el subrayado se redibuja en hover (sale por un lado y entra por el otro) Hover: opacity .6 -> 1 y redibujado del subrayado (transition con cubic-bezier(0.25, 0.46, 0.45, 0.94)) Sin fondo, sin borde, sin radio: el link es texto + 1px ``` ### Metadata de esquina ``` Bloques de 2-3 líneas de 11px / lh 10px uppercase anclados a las cuatro esquinas del frame: inferior-izquierda: "INDEPENDENT DEVELOPER / AVAILABLE APR. 2023" inferior-derecha: "EMAIL / INSTAGRAM / TWITTER" superior-izquierda: logotipo superior-derecha: "ABOUT" Color: #BAC4B8 · Sin contenedor: el frame del viewport es el layout ``` ### Panel about (inversión) ``` Background: #BAC4B8 (el hueso pasa de tinta a superficie) Texto: #000000, JWStudio Sans Bold 11px uppercase en columnas estrechas Entrada: panel que cubre desde un borde con easing easeOutQuad (cubic-bezier(0.25, 0.46, 0.45, 0.94)) (dirección derivada de observación) Border-radius: 0 · Sin sombra: cubre, no flota Cierre: mismo gesto invertido ``` ### Cursor ``` El cursor del sistema se conserva (no hay cursor custom en DOM); el feedback de "puedes arrastrar" lo da la propia tira reaccionando al primer pixel de movimiento. (verificado: sin elementos .cursor) ``` --- ## 5. Principios de Layout ### El frame ```css --frame: clamp(40px, 3.5vw, 56px); /* margen perimetral (derivado de captura) */ ``` Todo el DOM vive en el perímetro: cuatro esquinas + centro superior. El interior del frame pertenece al canvas. No hay contenedor de lectura, no hay max-width: **el layout es un marco de cuadro, no una columna**. ### La tira ```css --strip-height: 31vh; /* altura de las slices en reposo */ --strip-gap: ~1vw; /* separación entre slices */ /* En reposo la tira ocupa ~45% del ancho, anclada al centro-derecha. Desplegada cubre el 100% del ancho con las slices equiespaciadas. */ ``` ### Escala de espaciado El espaciado DOM cabe en tres valores: el frame perimetral, el gap de la tira y un micro-gap de 8px entre líneas de metadata. No hay escala de 4/8/16/24: **el vacío es el componente principal**, y se administra por posiciones ancladas, no por flujo. ### Filosofía de layout El sitio es un plano fijo de 100vw × 100vh sin scroll vertical en la home: **el eje de exploración es horizontal** (drag de la tira) y la profundidad es el zoom (expansión de slice a case study). Las esquinas son la única retícula: cada bloque de texto se alinea al frame como los créditos de un cartel de cine. Al adaptar el sistema a una página con scroll, conservar el frame perimetral fijo y dejar que solo el lienzo interior se desplace *(derivado)*. --- ## 6. Profundidad y Elevación ### Sistema de profundidad No hay una sola `box-shadow` en el CSS (verificado). La profundidad tiene tres mecanismos, todos ópticos: | Nivel | Mecanismo | Uso | |-------|-----------|-----| | 0 - Lienzo | `#141414` plano | Todo el sitio | | 1 - Atenuación | Imágenes al ~35% de brillo | Contenido en reposo: presente pero dormido | | 2 - Luz | Brillo 1.0 + leve escala | Hover: lo iluminado es lo tocable | | 3 - Expansión | La slice crece hasta 100vw×100vh | Navegación: el zoom ES el cambio de página | | Inversión | Panel `#BAC4B8` con texto negro | El about: profundidad por negativo fotográfico | > **La luz es la elevación.** Donde otros sistemas suben una card con sombra, este sube el brillo de la imagen. Reproducirlo en CSS plano: `filter: brightness(.35)` en reposo, `brightness(1)` en hover con una transición de 400-600ms. ### Radios de borde ```css --radius: 0; /* único valor del sistema: TODO es canto vivo */ ``` > No hay ni un border-radius en el sitio (verificado: cero ocurrencias). Las slices, el panel about, los subrayados: todo rectangular. Un solo radio de 8px introduciría una voz que este sistema no tiene. --- ## 7. Lo que Sí y lo que No ### Sí hacer 1. **Mantén el sistema bicolor**: lienzo `#141414` + tinta hueso `#BAC4B8`. Cualquier tercer color debe ser el acento de UN proyecto, presente solo mientras ese proyecto está activo. 2. **Compón todo en mayúsculas** y en dos escalas extremas: titling condensada monumental (50px-14vw, lh ≤0.88, tracking negativo) o micro-etiqueta densa (11-12px, lh ≤0.91). 3. **Ancla el DOM al perímetro**: logo y metadata en las esquinas, navegación de ticks arriba al centro; el interior es del contenido. 4. **Usa la atenuación como jerarquía**: contenido en reposo al ~35% de brillo, contenido activo al 100%. La luz sustituye al color de estado. 5. **Canto vivo en todo**: radio 0, sin sombras, sin bordes salvo subrayados de 1px. 6. **Dale física al movimiento**: inercia al soltar, skew proporcional a la velocidad, expansión con easing suave (easeOutQuad `0.25,0.46,0.45,0.94`). 7. **Invierte, no aclares**: si necesitas un momento claro (about, créditos), usa el negativo exacto (hueso de fondo, negro de texto), no un gris intermedio. 8. **Deja respirar el vacío**: la home real tiene más del 60% del viewport vacío en reposo. El vacío es el escenario de la física. ### No hacer 1. **No conviertas las micro-etiquetas en texto de 14-16px.** La tensión monumental/microscópico ES el sistema; un tamaño intermedio lo diluye. (Excepción documentada: un solo cuerpo de lectura derivado para páginas de documentación.) 2. **No añadas border-radius ni sombras.** Cero radios y cero box-shadow en el original; una card redondeada con sombra es otro sitio. 3. **No uses blanco puro `#FFFFFF` como tinta.** El hueso `#BAC4B8` es la temperatura del sistema; el blanco puro vibra sobre `#141414` y rompe el tono de sala de cine. 4. **No pongas dos acentos de proyecto a la vez.** Los acentos son inquilinos con contrato de exclusividad temporal. 5. **No compongas el display con line-height ≥ 1.** La titling se apila (0.85-0.88); con aire deja de ser cartel. 6. **No sustituyas el drag por un carrusel con flechas.** La tira es un instrumento físico: si hay que paginar con botones, el sistema perdió su motivo. 7. **No uses caja baja.** Ni en links, ni en títulos, ni en metadata: el sitio no la tiene. 8. **No ilumines nada que no sea interactivo.** Brillo 1.0 = tocable; una imagen decorativa a plena luz miente sobre su función. --- ## 8. Comportamiento Responsive ### Breakpoints El CSS declara pocos breakpoints; el motor WebGL reescala en continuo con el viewport *(comportamiento observado)*: ```css @media (max-width: 1024px) { } /* tira más alta, frame más estrecho */ @media (max-width: 720px) { } /* móvil: drag táctil, metadata reagrupada */ ``` ### Cambios por tamaño **Desktop (> 1024px)** - Plano fijo 100vw×100vh sin scroll; tira al centro-derecha, ~31vh de alto - Drag con mouse + scrub sobre los ticks; hover ilumina y muestra el título - Metadata en las cuatro esquinas **Tablet (720px - 1024px)** - El frame baja a ~24px; la tira crece proporcionalmente - El hover no existe (touch): las slices viajan iluminadas a ~60% *(derivado)* **Mobile (< 720px)** - Drag táctil directo sobre la tira con la misma inercia - Metadata reagrupada: logo arriba-izquierda, about arriba-derecha, resto en una sola línea inferior - El título del proyecto activo se muestra fijo (no en hover) sobre la tira - Touch targets: los links de 12px ganan un área táctil de 44px de alto vía padding *(derivado)* ### Filosofía responsive No hay "versión móvil": hay el mismo instrumento con otro tamaño de escenario. Lo que cambia es la fuente de la física (mouse → dedo) y la sustitución del hover (que en touch no existe) por estados fijos más iluminados. La tipografía no encoge en proporción: las micro-etiquetas se mantienen en 11-12px también en móvil, porque son leyendas, no párrafos. --- ## 9. Guía de Prompts para Agentes ### Prompt de inicialización de sesión ```text Estás trabajando con el sistema de diseño del portfolio de Aristide Benoist. PALETA: bicolor estricto. Lienzo #141414 (negro elevado, nunca #000 de fondo), tinta hueso verdoso #BAC4B8 para TODO el chrome (10.2:1 AAA). Superficie secundaria #1E1E1E. Dorado #CC9933 como único acento editorial propio. Los demás colores (#FF71CB, #53BB89, #F04333, #FFF1CE…) son acentos POR PROYECTO: solo uno a la vez, solo mientras su proyecto está activo. Momento claro = inversión exacta: fondo #BAC4B8, texto #000000. TIPOGRAFÍA: dos voces sin término medio. Display: Anton (sustituta de TIMMONS NY 2.0), uppercase, line-height 0.85-0.88, tracking negativo, de 50px a 14vw. Micro-etiquetas: Archivo 600/700 (sustituta de JWStudio Sans Bold), 11-12px uppercase, line-height ≤0.91. NO existe cuerpo de 16px salvo el derivado de documentación (Archivo 400, 15-16px/1.6). ESTILO: radio 0 en todo, cero sombras, subrayados de 1px como único borde. Layout de frame perimetral (clamp(40px,3.5vw,56px)): DOM en las esquinas, contenido en el centro. Jerarquía por atenuación: reposo brightness .35, activo 1.0. MOTION: física de drag con inercia y skew de velocidad; easings easeOutQuad cubic-bezier(0.25,0.46,0.45,0.94) y easeOutSine cubic-bezier(0.39,0.575,0.565,1). MODO: oscuro absoluto. ``` ### Prompt: Crear nueva pantalla ```text Crea una pantalla de [FUNCIONALIDAD] para el sistema Benoist. Requisitos: - Lienzo #141414 con el DOM anclado al frame perimetral (esquinas) - Titular en Anton uppercase, lh 0.85, tracking -0.02em, monumental - Todo lo demás en micro-etiquetas Archivo 700, 11-12px uppercase - Sin cards, sin radios, sin sombras: separación por vacío y por 1px - El contenido interactivo vive atenuado (brightness .35) y se ilumina al 100% en hover/activo - Si la pantalla tiene color, es el acento de UN proyecto, no una paleta - Motion con inercia; nada de fades genéricos de 200ms ``` ### Prompt: Añadir componente al UI kit ```text Añade un componente de [TIPO] al sistema Benoist. Debe: - Usar solo tokens del DESIGN.md de Aristide Benoist - Ser texto + línea de 1px, o imagen a canto vivo; nunca caja con fondo - Uppercase siempre; 11-12px (chrome) o escala display (protagonista) - Estados: reposo atenuado, hover iluminado + subrayado redibujado, activo a brillo pleno; focus visible con outline 1px #BAC4B8 offset 3px - Easing: cubic-bezier(0.25,0.46,0.45,0.94), 400-600ms ``` ### Prompt: Revisión de consistencia ```text Revisa esta interfaz y detecta qué no sigue el sistema Benoist. Verifica: 1. Si hay más de un acento de proyecto visible a la vez (no debe) 2. Si la tinta del chrome es #BAC4B8 y no blanco puro 3. Si hay border-radius o box-shadow (no debe haber NINGUNO) 4. Si hay texto en caja baja (no debe, salvo documentación derivada) 5. Si el display va con line-height ≥ 1 (debe ir 0.85-0.88) 6. Si existe algún tamaño de texto entre 13px y el display (no debe) 7. Si hay elementos decorativos a brillo pleno (la luz = interactivo) 8. Si el layout usa columnas de lectura en vez de frame perimetral 9. Si el fondo es #000 puro en vez de #141414 ``` ### Prompt: Variante de campaña ```text Genera una variante [case study / índice / about] para el sistema Benoist manteniendo la base. Conserva: - Bicolor #141414 + #BAC4B8, frame perimetral, canto vivo - Anton monumental + Archivo microscópico, todo uppercase - La física: inercia, skew de velocidad, expansión como navegación Puedes variar: - El acento del proyecto activo (uno de la bolsa: #FF71CB, #53BB89, #CC9933, #F04333, #FFF1CE…) - La proporción de las slices (de 1:3 a 1:4) y su altura en reposo - La posición de la tira (centro, centro-derecha, borde inferior) ``` --- ## 10. Movimiento (Motion) El motion es el producto: Aristide vende motion e interacción y el sitio es su demo. Lo excepcional es el stack: **no hay GSAP, ni Three.js, ni Lenis, ni Locomotive** (verificado: ningún global expuesto). Todo el motor (render WebGL, física de arrastre, expansiones) vive en un único bundle propio (`/static/js/d.js`). **Nivel de motion**: total; el sitio en reposo ya respira (la tira flota sutilmente) y toda navegación es una animación física. **Física (el patrón central)**: - **Drag con inercia**: la tira de slices sigue al puntero con lag (lerp), y al soltar continúa con decaimiento de velocidad hasta frenar. No hay posiciones de snap duras: la tira se asienta donde la física la deja. - **Skew de velocidad**: cada slice se inclina proporcionalmente a la velocidad instantánea del arrastre y vuelve a la vertical al frenar. Es el sello visual del motor. - **Despliegue**: en el primer drag la tira pasa de compacta (~45% del ancho) a distribuida por el 100% del viewport, con cada slice interpolando a su nueva posición con stagger. - **Expansión como router**: entrar a un proyecto = la slice crece hasta cubrir el viewport mientras las demás se apartan; el case study hereda ese lienzo. No hay "cambio de página": hay zoom. **Duraciones y easings**: ```css /* reales, del CSS del chrome DOM */ --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* paneles, subrayados */ --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); /* fades de metadata */ /* derivados de observación del motor WebGL */ --lerp-drag: ~0.08-0.12; /* seguimiento del puntero */ --friction: ~0.92; /* decaimiento de la inercia por frame */ --duration-hover: 400-600ms; /* iluminación de slice */ --duration-expand: ~900ms; /* expansión a case study */ --duration-intro: ~1800ms; /* stagger de entrada de las slices */ ``` **Patrones de motion**: - **Intro**: las slices entran atenuadas con stagger (la tira se construye pieza a pieza) mientras el chrome DOM aparece con fades easeOutSine; el sitio queda "dormido" esperando el primer gesto. - **Hover de slice**: brillo .35 → 1.0 + crecimiento leve + aparición del título monumental (en canvas) letra a letra *(observado)*. - **Scrub de ticks**: la fila de ticks superior actúa de mapa: recorrerla desplaza la tira proporcionalmente, con la misma inercia. - **Subrayado redibujado**: los links del chrome (`line-w`) vacían su subrayado por un extremo y lo rellenan por el otro con easeOutQuad. - **Inversión del about**: el panel hueso cubre el viewport con canto recto (sin arco, sin fade): un corte de negativo. > **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`. Con motion reducido: la tira se muestra ya desplegada y a brillo .6, el drag pasa a desplazamiento por teclado/flechas sin skew ni inercia, la expansión de proyecto es un corte directo, y los subrayados cambian por opacidad. El canvas nunca debe ser la única vía: los ticks deben ser botones reales enfocables *(derivado: el original es 100% canvas y este es su punto débil de accesibilidad)*. --- ## Anexo: Stack técnico detectado - **Plataforma**: página estática mínima + motor WebGL propio. Un solo script (`/static/js/d.js?2`) contiene render, física, router y precarga. Sin frameworks detectables (verificado: `window.gsap`, `window.THREE`, `window.Lenis`, `window.LocomotiveScroll`, `window.barba` = undefined). - **Sistema de tokens**: inexistente a propósito: `:root` sin variables. Los "tokens" reales son: 2 fuentes, 2 colores de sistema, 2 easings CSS y las parejas de color por proyecto embebidas en los datos de cada case study. - **Tipografía**: 2 `@font-face` con nombres ofuscados: `"TNY"` → `t.woff2` = **TIMMONS NY 2.0 Regular** (Matt Willey, v2.002) y `"jws"` → `jw.woff2` = **JWStudio Sans Bold** (Jon Way Studio LCC, 2017, FLVI-614). Nombres recuperados de las tablas `name` de los woff2. Solo 2 archivos de fuente en todo el sitio: 7KB de tipografía total. - **Color**: medido en runtime: `html` a `rgb(20,20,20)`; 1.018 nodos con texto negro (el about invertido), 224 nodos en `#BAC4B8`; superficies `#1E1E1E`; y ~15 acentos de proyecto distintos, cada uno en un grupo de ~30 nodos (su case study). - **Radios y sombras**: cero `border-radius` distintos de 0 y cero `box-shadow` (censo de 4.000 nodos). - **Easings CSS**: solo dos: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` y `cubic-bezier(0.39, 0.575, 0.565, 1)` (los clásicos easeOutQuad/easeOutSine de Penner). Toda la física restante es JS propio. - **Reconocimiento**: portfolio premiado (Awwwards/FWA) y referencia habitual en la comunidad WebGL por su física de arrastre hecha a mano; clientes de moda y lujo en los case studies. - **(no detectado)**: variables CSS, grid system, modo claro, tipografía mono, librerías de animación, framework SPA, cursor custom.