Un estudio cuya home no es una página: es un sótano 3D navegable en WebGL. "Scroll to Explore": la rueda no desplaza el documento, mueve la cámara por el cuarto.
Negro absoluto #000000, una escala de grises exacta y un solo saturado: el naranja #FF4D00, racionado a un elemento por vista. Geist SemiBold comprimida (interlínea 0.9, tracking -0.04em), radio 0px en todo, cero sombras, y texturas de dithering pixelado: fósforo de arcade sobre esquinas vivas.
El sitio no declara este degradado: el DOM solo conoce el #FF4D00 del nav activo. La rampa está muestreada de la captura del sótano: los reflejos del arcade bajan del neón #FF7825 hasta la brasa #700000 antes de fundirse en el negro. Úsala como iluminación de momento de marca (un glow, una brasa de fondo), nunca como gradiente decorativo repartido por la interfaz.
El sistema de peso es binario: o hablas (400) o titulas (600). No se midió ni un 500 ni un 700 en uso. La jerarquía no se hace con negrita: se hace con tamaño (12px a 87px), con gris (blanco, #E6E6E6, #C4C4C4, #757575) y con compresión, porque el tracking negativo escala con el cuerpo.
La compresión proporcional: -0.02em a 20px, -0.03em a 24px y -0.04em de 38px en adelante, con el display a interlínea 0.9. Un display de Geist sin comprimir no es basement: es la home de un SaaS.
| Rol | Size real | Weight | LH | Tracking |
|---|---|---|---|---|
| display xl | 87px | 600 | 0.90 | -3.48px |
| display lg | 76px | 600 | 0.895 | -3.04px |
| title / contacto | 38px | 600 | 1.05 | -1.52px |
| label sección | 24px | 600 | 1.0 | -0.72px |
| headline h3 | 20px | 600 | 1.0 | -0.4px |
| body | 16px | 400 | 1.5 | normal |
| caption | 13px | 600 | 1.3 | normal |
| nav | 12px | 600 | 1.3 | normal |
| mono | 12px | 400 | 1.5 | 0.02em |
Primario: naranja #FF4D00 con texto negro; el hover no eleva, enciende (#FF7825). Ghost: hairline #757575 que se aclara. El texto: gris #E6E6E6 que prende a naranja. Nota: en el sitio real todos los controles van a radio 0px estricto; en esta página de galería los controles llevan el radio normalizado del pipeline.
El nav real: Geist 600 a 12px con contadores vivos del CMS en superíndice. El item activo es la única aparición del naranja #FF4D00 en el DOM de cada vista: su escasez es su poder.
Card sobre negro con hairline #2E2E2E y radio 0. El label de 24px va en #757575, el h3 de 20px en #E6E6E6 y el hover aclara el borde, no levanta la caja.
El link de contacto gigante real: Geist 600 a 38px con tracking -1.52px, sin caja ni borde. Texto que actúa como botón y que prende a naranja al hover, el patrón activo del nav a escala display.
"Scroll to Explore": la rueda no desplaza el documento, interpola la posición de la cámara por el sótano 3D, del plano general al arcade, los CRT y el neón. El progreso de scroll se mapea a un recorrido con suavizado (lerp), no a un tiempo. El estudio es además autor de una librería pública de scrollytelling sobre GSAP ScrollTrigger: este sitio es su tesis.
Los televisores CRT de la pila parpadean estática animada por frames, el neón "basement." zumba con caídas de intensidad y hay personajes idle (uno sentado con el móvil, el perro en la escalera). Nada está quieto, pero nada pide atención: es ambiente.
El hover del nav pasa el gris a blanco o a naranja en ~150ms; el estado activo queda fijo en #FF4D00. No hay translate, no hay sombra que crece: en basement las cosas no se levantan, se encienden. Pruébalo:
Los materiales lejanos o apagados de la escena se traman con dithering ordenado (el tramado pixelado visible en CRTs, suelo y sombras); las superficies se revelan pasando de trama a textura. Es el equivalente basement de un fade: cuadriculado, retro, de CRT, nunca un blur fílmico.
| Gesto | Duración | Easing | Propiedades |
|---|---|---|---|
| Ignición de hover (nav, links) | 150ms | ease-out | color, border-color |
| Revelado de borde / hairline | 300ms | ease-out | border-color, clip-path |
| Overlay de transición (velo) | 600ms | ease-in-out | rgba(0,0,0,0.9) · opacity |
| Cámara del sótano | scroll-linked | linear + lerp | canvas WebGL |
| Estática CRT / neón | continuo | steps() / irregular | canvas WebGL |
Duraciones derivadas de observación (los timings no están expuestos; GSAP va empaquetado en los chunks de Next.js). Con prefers-reduced-motion: la cámara se congela en encuadres fijos navegables, la estática pasa a imagen fija, el neón queda encendido constante; los encendidos de hover se mantienen porque son cambios de color, no de movimiento. El lab es jugable: la canasta "BSMNT SHOT" de la escena se puede tirar de verdad.
:root {
--color-primary: #FF4D00;
--color-primary-neon: #FF7825;
--color-primary-deep: #700000;
--color-canvas: #000000;
--color-surface: #1A1A1A;
--color-surface-raise: #2E2E2E;
--color-overlay: rgba(0, 0, 0, 0.9);
--color-text-primary: #E6E6E6;
--color-text-body: #FFFFFF;
--color-text-display: #C4C4C4;
--color-text-label: #757575;
--color-text-on-accent: #000000;
--color-border: #2E2E2E;
--color-border-strong: #757575;
--color-success: #4DBF6A;
--color-error: #FF4D00;
--color-warning: #FFB224;
--color-info: #8A8A8A;
--font-display: "Geist";
--font-body: "Geist";
--font-mono: "Geist Mono";
--radius: 0px; /* el sistema entero es de esquina viva */
--shadow: none; /* cero sombras; la elevación es superficie + hairline */
--glow-neon: 0 0 24px rgba(255, 77, 0, 0.35);
--tracking-display: -0.04em;
--tracking-label: -0.03em;
--tracking-small: -0.02em;
--leading-display: 0.9;
--space-base: 4px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 104px;
--space-section: clamp(80px, 10vw, 160px);
--page-margin: clamp(16px, 2.5vw, 40px);
--ease-ignite: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--duration-fast: 150ms;
--duration-base: 300ms;
--duration-veil: 600ms;
}@theme {
--color-primary: #FF4D00;
--color-primary-neon: #FF7825;
--color-primary-deep: #700000;
--color-canvas: #000000;
--color-surface: #1A1A1A;
--color-surface-raise: #2E2E2E;
--color-text-primary: #E6E6E6;
--color-text-body: #FFFFFF;
--color-text-display: #C4C4C4;
--color-text-label: #757575;
--color-text-on-accent: #000000;
--color-border: #2E2E2E;
--color-border-strong: #757575;
--color-success: #4DBF6A;
--color-error: #FF4D00;
--color-warning: #FFB224;
--color-info: #8A8A8A;
--font-display: "Geist", system-ui, sans-serif;
--font-body: "Geist", system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, monospace;
--radius: 0px;
--spacing-base: 4px;
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 40px;
--spacing-xl: 64px;
--spacing-2xl: 104px;
}{
"colors": {
"primary": "#FF4D00",
"primary-neon": "#FF7825",
"primary-deep": "#700000",
"canvas": "#000000",
"surface": "#1A1A1A",
"surface-raise": "#2E2E2E",
"overlay": "rgba(0, 0, 0, 0.9)",
"text-primary": "#E6E6E6",
"text-body": "#FFFFFF",
"text-display": "#C4C4C4",
"text-label": "#757575",
"text-on-accent": "#000000",
"border": "#2E2E2E",
"border-strong": "#757575",
"success": "#4DBF6A",
"error": "#FF4D00",
"warning": "#FFB224",
"info": "#8A8A8A"
},
"gradient": {
"neon": {
"angle": "90deg",
"stops": ["#000000 0%", "#700000 30%", "#FF4D00 62%", "#FF7825 100%"],
"source": "muestreado de la captura del sótano (render WebGL, no CSS)"
}
},
"typography": {
"display-xl": {
"fontFamily": "Geist",
"fontSize": "87px",
"fontWeight": 600,
"lineHeight": "0.90",
"letterSpacing": "-0.04em"
},
"display-lg": {
"fontFamily": "Geist",
"fontSize": "76px",
"fontWeight": 600,
"lineHeight": "0.895",
"letterSpacing": "-0.04em",
"color": "#C4C4C4"
},
"title": {
"fontFamily": "Geist",
"fontSize": "38px",
"fontWeight": 600,
"lineHeight": "1.05",
"letterSpacing": "-0.04em"
},
"section-label": {
"fontFamily": "Geist",
"fontSize": "24px",
"fontWeight": 600,
"lineHeight": "1.0",
"letterSpacing": "-0.03em",
"color": "#757575"
},
"headline": {
"fontFamily": "Geist",
"fontSize": "20px",
"fontWeight": 600,
"lineHeight": "1.0",
"letterSpacing": "-0.02em"
},
"body": {
"fontFamily": "Geist",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": "1.5",
"letterSpacing": "normal"
},
"nav": {
"fontFamily": "Geist",
"fontSize": "12px",
"fontWeight": 600,
"lineHeight": "1.3"
},
"mono": {
"fontFamily": "Geist Mono",
"fontSize": "12px",
"fontWeight": 400,
"lineHeight": "1.5",
"letterSpacing": "0.02em"
}
},
"rounded": {
"all": "0px"
},
"shadow": {
"none": "none",
"glow-neon": "0 0 24px rgba(255, 77, 0, 0.35)"
},
"spacing": {
"base": "4px",
"xs": "8px",
"sm": "16px",
"md": "24px",
"lg": "40px",
"xl": "64px",
"2xl": "104px",
"section": "clamp(80px, 10vw, 160px)",
"page-margin": "clamp(16px, 2.5vw, 40px)"
},
"motion": {
"ease-ignite": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
"duration-fast": "150ms",
"duration-base": "300ms",
"duration-veil": "600ms",
"patterns": ["cámara scroll-linked por el sótano 3D", "estática CRT y neón vivo", "hover que enciende (color), nunca eleva", "dithering ordenado como transición", "overlay rgba(0,0,0,0.9)", "lab jugable (BSMNT SHOT)"]
}
}---
version: "1.0"
name: "Basement Studio"
description: "Sistema visual de basement.studio: estudio digital y powerhouse de branding cuya home es un sótano 3D navegable en WebGL. Negro absoluto #000000 como único fondo, una escala de grises exacta (#E6E6E6 títulos, #C4C4C4 display, #757575 labels, #2E2E2E/#1A1A1A superficies) y un solo saturado: el naranja #FF4D00, que en el DOM marca la sección activa y en la escena arde como neón de arcade (#FF7825 muestreado). Una sola familia, Geist (100-900 variable), en SemiBold 600 con tracking -0.04em y line-height 0.9 para el display; Geist Mono para el detalle técnico. Cero radios, cero sombras: esquinas vivas, hairlines y dithering. El scroll no desplaza la página: mueve la cámara por el sótano."
colors:
primary: "#FF4D00"
primary-neon: "#FF7825"
primary-deep: "#700000"
canvas: "#000000"
surface: "#1A1A1A"
surface-raise: "#2E2E2E"
overlay: "#000000E6"
ink: "#E6E6E6"
text-primary: "#E6E6E6"
text-body: "#FFFFFF"
text-display: "#C4C4C4"
text-label: "#757575"
text-on-accent: "#000000"
border: "#2E2E2E"
border-strong: "#757575"
typography:
display-xl:
fontFamily: "Geist"
fontSize: "87px"
fontWeight: 600
lineHeight: "0.90"
letterSpacing: "-0.04em"
display-lg:
fontFamily: "Geist"
fontSize: "76px"
fontWeight: 600
lineHeight: "0.895"
letterSpacing: "-0.04em"
title:
fontFamily: "Geist"
fontSize: "38px"
fontWeight: 600
letterSpacing: "-0.04em"
section-label:
fontFamily: "Geist"
fontSize: "24px"
fontWeight: 600
letterSpacing: "-0.03em"
headline:
fontFamily: "Geist"
fontSize: "20px"
fontWeight: 600
letterSpacing: "-0.02em"
body:
fontFamily: "Geist"
fontSize: "16px"
fontWeight: 400
lineHeight: "1.50"
nav:
fontFamily: "Geist"
fontSize: "12px"
fontWeight: 600
mono:
fontFamily: "Geist Mono"
fontSize: "12px"
fontWeight: 400
rounded:
none: "0px"
spacing:
base: "4px"
sm: "16px"
md: "24px"
lg: "40px"
xl: "64px"
section: "clamp(80px, 10vw, 160px)"
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.text-on-accent}"
rounded: "{rounded.none}"
padding: "12px 24px"
boxShadow: "none"
nav-link-active:
textColor: "{colors.primary}"
card:
backgroundColor: "{colors.surface}"
borderColor: "{colors.border}"
rounded: "{rounded.none}"
padding: "24px"
input:
backgroundColor: "{colors.canvas}"
borderColor: "{colors.border-strong}"
rounded: "{rounded.none}"
height: "32px"
---
# DESIGN.md - Basement Studio (resumen embebido)
> Sistema extraído de https://basement.studio (julio 2026) con Puppeteer.
> La home es una escena WebGL; los grises y el #FF4D00 están medidos en
> estilos computados, el neón #FF7825 muestreado de la captura. Censo real:
> cero border-radius y cero box-shadow en todo el sitio.
## 1. Tema
La home es un sótano 3D: arcade encendida, canasta "BSMNT SHOT", CRTs con
estática y el neón "basement." en la pared. "Scroll to Explore": el scroll
mueve la cámara, no la página. Negro absoluto, grises disciplinados y un
naranja racionado a un elemento por vista. Estética de terminal y de
recreativa: esquinas vivas, fósforo naranja, dithering de tubo.
## 2. Color
Medidos: #000000 body, overlay rgba(0,0,0,.9), #1A1A1A y #2E2E2E superficies,
#FFFFFF body text, #E6E6E6 titulares, #C4C4C4 display, #757575 labels,
#FF4D00 nav activo. Muestreados: neón #FF7825, brasa #700000.
Jerarquía invertida: cuanto más grande el texto, más gris.
Contraste: #E6E6E6 16.8:1, #C4C4C4 12:1, #757575 4.6:1 (límite AA),
#FF4D00 sobre negro 6.3:1 AA, #FF7825 8:1 AAA.
## 3. Tipografía
Original: Geist -> HTML: Geist (Google Fonts, sin sustitución); Geist Mono
para detalle técnico; custom "flauta" cargada pero sin uso observado.
Escala real: 87px/600/0.9/-3.48px; 76px en #C4C4C4; 38px/-1.52px;
24px/-0.72px en #757575; 20px/-0.4px; body 16px/400/1.5; nav 12px/600.
Binario de pesos: 400 habla, 600 titula. La compresión escala con el
cuerpo: -0.02em a 20px, -0.03em a 24px, -0.04em desde 38px.
## 4. Componentes
Botón primario naranja con texto negro, radio 0, hover que enciende a
#FF7825. Ghost con hairline #757575. Nav 12px/600 con contadores en
superíndice y activo naranja (única aparición del color por vista).
Cards #1A1A1A con borde #2E2E2E. Inputs del lab: h-8, Geist Mono, radio 0.
Link de contacto gigante: 38px que prende a naranja.
## 5. Layout
El negro es el espaciado: pantallas de vacío entre secciones, hairlines
donde hace falta orden. Base 4: 4/8/16/24/40/64/104. Display a lh 0.9
pide el doble de su altura en negro alrededor.
## 6. Profundidad
Cero sombras, cero radios (censo real). Elevación por superficie:
#000000 -> #1A1A1A -> #2E2E2E -> hairline #757575. Destacar = encender
(naranja), no levantar. Único glow: 0 0 24px rgba(255,77,0,.35).
## 7. Motion
Cámara scroll-linked por el sótano (lerp, 1:1 con el scroll). CRTs con
estática por frames, neón con parpadeo irregular, personajes idle.
Hover = ignición de color en ~150ms, jamás translate/sombra. Dithering
ordenado como transición (trama pixelada -> textura). Overlay de velo
rgba(0,0,0,.9) a ~600ms. Lab jugable (BSMNT SHOT). El estudio es autor
de una librería de scrollytelling sobre GSAP ScrollTrigger.
prefers-reduced-motion: encuadres fijos, estática congelada, neón fijo.
## Stack detectado
Next.js en Vercel (chunks con dpl_), 2 canvas WebGL, PostHog + Vercel
Analytics, Tailwind compilado (0 variables :root), Geist/Geist Mono vía
next/font, @font-face custom "flauta" sin uso, título real: "We make
cool shit that performs."