---
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"
  success: "#4DBF6A"
  error: "#FF4D00"
  warning: "#FFB224"
  info: "#8A8A8A"
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
    lineHeight: "1.05"
    letterSpacing: "-0.04em"
  section-label:
    fontFamily: "Geist"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.0"
    letterSpacing: "-0.03em"
  headline:
    fontFamily: "Geist"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: "1.0"
    letterSpacing: "-0.02em"
  body:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.50"
    letterSpacing: "normal"
  nav:
    fontFamily: "Geist"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "1.30"
    letterSpacing: "normal"
  caption:
    fontFamily: "Geist"
    fontSize: "13px"
    fontWeight: 600
    lineHeight: "1.30"
    letterSpacing: "normal"
  mono:
    fontFamily: "Geist Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.50"
    letterSpacing: "0.02em"
rounded:
  none: "0px"
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)"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-accent}"
    typography: "{typography.nav}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    boxShadow: "none"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    border: "1px solid {colors.border-strong}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav}"
    rounded: "{rounded.none}"
    padding: "4px 8px"
  nav-link-active:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav}"
    rounded: "{rounded.none}"
    padding: "4px 8px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: "24px"
    boxShadow: "none"
  input:
    backgroundColor: "{colors.canvas}"
    borderColor: "{colors.border-strong}"
    textColor: "{colors.text-body}"
    rounded: "{rounded.none}"
    padding: "8px 16px"
---

# DESIGN.md - Basement Studio

> Sistema de diseño extraído de `https://basement.studio` (home, julio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Colores, familia, tamaños y trackings medidos con Puppeteer sobre el sitio en vivo. La home es una escena WebGL (el sótano) y el DOM encima es mínimo: los grises y el naranja `#FF4D00` están medidos en estilos computados (el naranja, en el estado activo del nav de /blog y /lab); el neón del arcade (`#FF7825`) está muestreado píxel a píxel de la captura. El sitio no declara variables en el `:root`. Lo que no expone (estados, escala completa de espaciado) va marcado como *(derivado para completar el sistema)*.

---

## 1. Tema Visual y Atmósfera

El nombre es el brief. basement.studio no tiene home page: tiene un sótano. Al entrar, la pantalla es una escena 3D en WebGL de un sótano real —escaleras de madera, estanterías con merchandising, una máquina arcade encendida, una canasta de basketball con el logo "BSMNT SHOT", una pila de televisores CRT parpadeando estática y un neón que escribe *basement.* en la pared— y la instrucción es una sola: **"Scroll to Explore"**. El scroll no baja una página; mueve la cámara por el cuarto.

El sistema de color es un cuarto oscuro con un neón dentro. El fondo es **negro absoluto `#000000`** (medido: es literalmente el `background` del `body`, no un gris noche), y sobre él una escala de grises disciplinada y exacta: **`#E6E6E6`** para los titulares, **`#C4C4C4`** para el display de sección, **`#757575`** para los labels ("Trusted by Visionaries", "Capabilities", "Contact"), y **`#2E2E2E`/`#1A1A1A`** como únicas superficies de apoyo. El único color con sangre es el **naranja `#FF4D00`**: en el DOM aparece una sola vez por vista, marcando la sección activa del nav; en la escena arde por todas partes —el neón del arcade sube a `#FF7825` muestreado, y sus reflejos profundos bajan a `#700000`—. La regla es de racionamiento: el naranja es un pixel encendido en la oscuridad, no un color de relleno.

La tipografía es una sola familia en un solo gesto. **Geist** (la variable de Vercel, 100-900) hace todo el sitio, casi siempre en **SemiBold 600**: el h1 real mide 87px con line-height de 78px (0.9) y letter-spacing de **-3.48px (-0.04em)**, un display denso, apretado y técnico. Los labels de sección van a 24px con -0.72px, el nav a 12px 600, y **Geist Mono** aparece en los detalles de laboratorio. No hay una serif, no hay una display ornamental (la fuente custom *flauta* está cargada en el CSS pero no se usa en la home): la personalidad no está en la fuente sino en la compresión.

Y la geometría: **cero radios y cero sombras**. El censo completo de estilos devolvió `border-radius: 0px` en todos los elementos visibles y ni una sola `box-shadow`. Los límites son hairlines grises, las texturas son dithering (los patrones de tramado pixelado de los CRT y el suelo de la escena), y la profundidad la pone la luz del render. Es una estética de terminal y de recreativa: esquinas vivas, fósforo naranja, ruido de tubo.

**Palabras clave de personalidad**: oscuro, arcade, técnico, denso, irreverente, nostálgico-digital, preciso

**Densidad del layout**: alta en tipografía (tracking -0.04em, line-height 0.9), baja en cantidad: pocos bloques, mucho negro

**Modo preferido**: oscuro absoluto (#000000 como fondo único; no existe modo claro)

**Nivel de ornamentación**: alto dentro de la escena (neón, dithering, CRT, arcade), nulo en la interfaz (sin radios, sin sombras, sin gradientes)

**Audiencia visual objetivo**: marcas y equipos de producto que quieren "cool shit that performs": craft técnico demostrado, no prometido

---

## 2. Paleta de Colores y Roles Semánticos

Negro, cinco grises medidos y un naranja racionado. No hay azules, no hay tintes cálidos en los grises: la temperatura la pone el neón.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Negro sótano | `--color-canvas` | `#000000` | Fondo único del sitio (real: `background` del `body`) | `#E6E6E6` / `#FFFFFF` |
| Naranja basement | `--color-primary` | `#FF4D00` | El único saturado: sección activa del nav (medido: `rgb(255, 77, 0)`), contadores, momentos de marca | `#000000` |
| Neón arcade | `--color-primary-neon` | `#FF7825` | El naranja encendido del render (muestreado del arcade); glow y estados hover de marca | `#000000` |
| Brasa | `--color-primary-deep` | `#700000` | El reflejo profundo del neón (muestreado); fondos de momento de marca | `#FF7825` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Negro | `--color-canvas` | `#000000` | Todo el fondo, sin excepción |
| Carbón | `--color-surface` | `#1A1A1A` | Cards y bloques de apoyo (medido: `rgb(26, 26, 26)`) |
| Grafito | `--color-surface-raise` | `#2E2E2E` | Superficie elevada y hairlines fuertes (medido: `rgb(46, 46, 46)`) |
| Velo | `--color-overlay` | `rgba(0, 0, 0, 0.9)` | Overlay real del menú/transiciones (medido) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Titular | `--color-text-primary` | `#E6E6E6` | h1, h3, nav (medido: `rgb(230, 230, 230)`); nunca blanco puro en titulares |
| Body | `--color-text-body` | `#FFFFFF` | Texto corrido de 16px |
| Display | `--color-text-display` | `#C4C4C4` | Los h2 gigantes ("Featured Projects", 76px): un paso más apagado que el h1 |
| Label | `--color-text-label` | `#757575` | Labels de sección de 24px ("Capabilities", "Contact") |
| Activo | `--color-primary` | `#FF4D00` | El item de nav de la sección actual y los superíndices contadores |
| Sobre naranja | `--color-text-on-accent` | `#000000` | Texto sobre `#FF4D00` (el naranja es fondo solo en CTAs de marca) |

> Jerarquía de grises real del sitio, de más luz a menos: `#FFFFFF` body -> `#E6E6E6` titulares -> `#C4C4C4` display -> `#757575` labels. El display de 76px va MÁS apagado que el body: la jerarquía se invierte porque el tamaño ya grita, el color susurra.

### Contraste verificado

| Combinación | Ratio | Nivel |
|-------------|-------|-------|
| `#FFFFFF` sobre `#000000` | 21.0:1 | AAA |
| `#E6E6E6` sobre `#000000` | 16.8:1 | AAA |
| `#C4C4C4` sobre `#000000` | 12.0:1 | AAA |
| `#757575` sobre `#000000` | 4.6:1 | AA (justo: no bajar de este gris para texto) |
| `#FF4D00` sobre `#000000` | 6.3:1 | AA texto normal, AAA texto grande |
| `#FF7825` sobre `#000000` | 8.0:1 | AAA |
| `#000000` sobre `#FF4D00` | 6.3:1 | AA |
| `#FF4D00` sobre `#FFFFFF` | 3.3:1 | Solo texto grande; el naranja casi nunca sale del negro |
| `#E6E6E6` sobre `#1A1A1A` | 13.7:1 | AAA |
| `#E6E6E6` sobre `#2E2E2E` | 10.8:1 | AAA |

> **La regla del `#757575`**: es el gris más oscuro que el sitio usa para texto y queda en 4.6:1, apenas sobre AA. Todo gris de texto nuevo debe ser igual o más claro; los `#2E2E2E`/`#1A1A1A` son superficies y hairlines, jamás texto.

### Colores de estado

El sitio no expone estados de sistema; el naranja ya funciona como alarma visual. Derivados para completar el sistema, en la misma lógica de fósforo sobre negro:

| Estado | Variable CSS | Hex | Fondo | Texto |
|--------|-------------|-----|-------|-------|
| Éxito | `--color-success` | `#4DBF6A` *(derivado)* | `#0A2412` *(derivado)* | `#4DBF6A` |
| Error | `--color-error` | `#FF4D00` (reutiliza el primario) | `#2A0D00` *(derivado)* | `#FF7825` |
| Aviso | `--color-warning` | `#FFB224` *(derivado)* | `#291C03` *(derivado)* | `#FFB224` |
| Info | `--color-info` | `#8A8A8A` *(derivado)* | `#1A1A1A` | `#C4C4C4` |

---

## 3. Reglas de Tipografía

```css
/* Familia única: Geist (Vercel), variable 100-900, self-hosted vía next/font
   font-family real del body: Geist, "Geist Fallback"
   Mono real: "Geist Mono" (cargada, para detalle técnico y lab)
   Detectada además una custom "flauta" en @font-face, sin uso en la home.
   Geist y Geist Mono ESTÁN en Google Fonts: no hace falta sustitución. */
--font-display: 'Geist', system-ui, sans-serif;
--font-body:    'Geist', system-ui, sans-serif;
--font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;
```

**Google Fonts (misma familia, sin sustituto):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
```

### Nota sobre sustitución tipográfica

**Original: Geist -> HTML: Geist (disponible en Google Fonts, sin sustitución).** El sitio la sirve self-hosted vía `next/font` con eje variable 100-900; en Google Fonts basta pedir 400/500/600/700. **Geist Mono** también está en Google Fonts. La única fuente no replicable es **flauta** (custom del estudio, la display condensada de su identidad BSMNT): está declarada en `@font-face` y cargada, pero no se detectó en ningún nodo de la home, el blog ni el lab, así que el sistema se documenta sin ella. Si apareciera en otra vista, su papel (display condensada de impacto) se cubriría con `Archivo Black` o `Anton` como aproximación de Google Fonts.

### Escala tipográfica

> Tamaños reales medidos: 87px (h1), 76px (h2 display), 38px (link de contacto), 24px (labels de sección), 20px (h3 de capability), 16px (body), 13px, 12px (nav).

| Token | px real | Line height | Weight | Tracking | Uso |
|-------|---------|-------------|--------|----------|-----|
| `--f-display-xl` | 87px | 0.90 (78px) | 600 | -0.04em (-3.48px) | h1: "A digital studio & branding powerhouse…" |
| `--f-display-lg` | 76px | 0.895 (68px) | 600 | -0.04em (-3.04px) | h2 display: "Featured Projects", en `#C4C4C4` |
| `--f-title` | 38px | 1.05 | 600 | -0.04em (-1.52px) | Link gigante de contacto |
| `--f-label` | 24px | 1.0 (24px) | 600 | -0.03em (-0.72px) | Labels de sección en `#757575` |
| `--f-headline` | 20px | 1.0 (20px) | 600 | -0.02em (-0.4px) | h3 de capabilities, "Roll Me In" |
| `--f-body` | 16px | 1.50 (24px) | 400 | normal | Body y "Scroll to Explore" |
| `--f-caption` | 13px | 1.30 | 600 | normal | Metadatos y créditos |
| `--f-nav` | 12px | 1.30 | 600 | normal | Nav: Home / Services / Showcase / People / Blog / Lab |
| `--f-mono` | 12px | 1.50 | 400 | 0.02em | Geist Mono: specs, coordenadas del lab *(uso derivado)* |

### Pesos tipográficos

```css
--font-regular:  400;  /* body de 16px y "Scroll to Explorer": lo único que no es 600 */
--font-semibold: 600;  /* TODO lo demás: display, labels, h3, nav, captions */
```

> El sistema es binario: o hablas (400) o titulas (600). No se detectó ni un 500 ni un 700 en uso. La jerarquía no se hace con peso: se hace con **tamaño** (12px a 87px), con **gris** (blanco -> #E6E6E6 -> #C4C4C4 -> #757575) y con **compresión** (el tracking crece en negativo con el tamaño).

### Letter spacing

```css
--tracking-display: -0.04em;  /* 87px -> -3.48px, 76px -> -3.04px, 38px -> -1.52px */
--tracking-label:   -0.03em;  /* 24px -> -0.72px */
--tracking-small:   -0.02em;  /* 20px -> -0.4px */
--tracking-body:    normal;   /* 16px y menores sin tracking */
```

**Regla clave (la compresión proporcional)**: el tracking negativo escala con el cuerpo: cuanto más grande la letra, más se aprieta (-0.02em a 20px, -0.03em a 24px, -0.04em de 38px en adelante), y el line-height del display baja a 0.9. El body, en cambio, va limpio: 16px, normal, 1.5. Un display de Geist SIN comprimir no es basement: es la home de un SaaS.

---

## 4. Estilos de Componentes

### Botón primario (CTA de marca) *(derivado del lenguaje del sitio)*

```
Background: #FF4D00
Color de texto: #000000
Border: none
Border-radius: 0px   <- SIEMPRE; no hay radios en este sistema
Padding: 12px 24px
Font: Geist 600, 12-13px, uppercase opcional
Box-shadow: NINGUNA

Hover:
  Background: #FF7825   (el neón se enciende)
  Sin transform: el sitio no levanta elementos, los enciende

Active:
  Background: #CC3E00

Focus:
  Outline: 1px solid #FF4D00
  Outline-offset: 2px
```

### Botón ghost / secundario

```
Background: transparent
Color: #E6E6E6
Border: 1px solid #757575   (hairline, el borde del sistema)
Border-radius: 0px
Padding: 12px 24px
Font: Geist 600, 12-13px

Hover:
  Border-color: #E6E6E6
  Color: #FFFFFF
```

### Navegación / Header (real)

```
Posición: fija arriba, sobre el negro, sin superficie propia ni blur
Wordmark: "basement." Geist 600, #FFFFFF
Links: Home / Services / Showcase / People / Blog / Lab
  Font: Geist 600, 12px, color #E6E6E6
  Superíndice contador en Blog(28) y Showcase(25): mismo cuerpo pequeño
Estado activo (real, medido en /blog y /lab):
  color: #FF4D00  <- la única aparición del naranja en el DOM por vista
"Contact Us" a la derecha, 12px 600
```

### Chip "Scroll to Explore" (componente firma)

```
Background: #000000 (opaco sobre la escena)
Color: #FFFFFF
Font: Geist 400, 16px + flecha ↓
Padding: 4px (real)
Border-radius: 0px
Posición: centrado abajo, flotando sobre el render
Comportamiento: desaparece al primer scroll; es la única instrucción de la home
```

### Cards de proyecto / capability

```
Background: #1A1A1A  (o #000000 con hairline)
Border: 1px solid #2E2E2E
Border-radius: 0px
Padding: 24px
Box-shadow: NINGUNA
Label: Geist 600, 24px, tracking -0.72px, color #757575
Título: Geist 600, 20px, tracking -0.4px, color #E6E6E6
Body: Geist 400, 16px, 1.5, color #FFFFFF

Hover:
  Border-color: #757575
  El thumbnail (si hay) revela su versión a color o animada;
  la escena de basement usa dithering en los estados apagados
```

### Link de contacto gigante (real)

```
"Contact Us" como display: Geist 600, 38px, tracking -1.52px, #E6E6E6
Sin caja, sin borde: es texto que actúa como botón
Hover: color #FF4D00 (derivado: el patrón activo del nav a escala display)
```

### Inputs de texto (patrón del lab, real: "h-8 w-full border px-2 py-1")

```
Background: #000000
Border: 1px solid #757575
Border-radius: 0px
Height: 32px  (h-8 real)
Padding: 4px 8px
Font: Geist Mono 400, 12px  (el detalle técnico va en mono)
Color: #FFFFFF
Text-align: center en los campos numéricos del lab

Focus:
  Border-color: #FF4D00
  Outline: none
```

### Marco de escena / viewport 3D

```
La escena WebGL es el componente raíz: ocupa el 100% del viewport
El DOM flota encima en las 4 esquinas (nav arriba, chip abajo)
Overlay de transición: rgba(0, 0, 0, 0.9) (real)
Texturas internas: dithering ordenado (patrón de tramado pixelado
visible en CRTs, suelo y sombras de la escena): el "grano" de basement
es cuadriculado y retro, no fílmico
```

---

## 5. Principios de Layout

### Escala de espaciado

Sin variables declaradas en el `:root` (Tailwind compilado). Escala derivada de las distancias medidas, base 4:

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
--space-6: 64px;
--space-7: 104px;
--space-section: clamp(80px, 10vw, 160px);   /* (derivado) */
--page-margin:   clamp(16px, 2.5vw, 40px);   /* (derivado) */
```

### Rejilla

```css
--grid-columns: 12;          /* (derivado: bloques de contenido post-escena) */
--container: calc(100vw - var(--page-margin) * 2);
--container-text: 60ch;
```

> En la home la rejilla es el propio sótano: el contenido DOM se ancla a los bordes del viewport (nav arriba, instrucción abajo, contacto en esquina). Las vistas de contenido (blog, showcase) sí usan una retícula clásica de columnas con hairlines `#2E2E2E` como divisores visibles.

### Filosofía de espaciado

El negro es el espaciado. basement no separa bloques con margen: los separa con vacío absoluto: pantallas enteras de `#000000` entre secciones, hairlines de 1px donde hace falta orden. El display comprimido (0.9 de interlínea) hace bloques de texto muy densos que flotan en mucha nada. Regla práctica: **si un titular usa line-height 0.9 y tracking -0.04em, necesita a su alrededor al menos el doble de su altura en negro vacío**.

---

## 6. Profundidad y Elevación

La profundidad de basement es **luz dentro del render y hairlines fuera de él**. El censo devolvió cero `box-shadow` y cero `border-radius`.

### Sistema de sombras

```css
/* Real: NO HAY box-shadows. */
--shadow-none: none;

/* La elevación se hace con superficie y borde: */
--elevation-0: #000000;                    /* canvas */
--elevation-1: #1A1A1A;                    /* card */
--elevation-2: #2E2E2E;                    /* superficie alzada / hairline */
--border-hair: 1px solid #2E2E2E;
--border-strong: 1px solid #757575;

/* Único "glow" admitido, derivado del neón, solo para momentos de marca: */
--glow-neon: 0 0 24px rgba(255, 77, 0, 0.35);
```

> Si un elemento necesita destacar, no se levanta: **se enciende** (borde o texto a `#FF4D00`) o **se alza un gris** (#1A1A1A -> #2E2E2E). La sombra difusa gris no existe en este mundo.

### Niveles de elevación

| Nivel | Superficie | Separación | Uso |
|-------|-----------|------------|-----|
| 0 - Sótano | render WebGL | — | La escena: fondo de la home |
| 1 - Negro | `#000000` | vacío | Canvas de todas las vistas |
| 2 - Carbón | `#1A1A1A` | cambio de gris | Cards, bloques de apoyo |
| 3 - Grafito | `#2E2E2E` | hairline / superficie | Divisores y superficie alzada |
| 4 - Neón | `#FF4D00` | ignición | El único acento: activo, alerta, marca |

### Radios de borde

```css
--radius: 0px;   /* TODOS los elementos. El censo no encontró ni un radio. */
```

> La esquina viva es una decisión de identidad, no una omisión: pixel art, CRT, terminal. Redondear un botón de basement es como ponerle bordes suaves a una recreativa.

---

## 7. Lo que Sí y lo que No

### Sí hacer

1. **Funde todo sobre negro absoluto `#000000`.** No gris noche, no #0A0A0A: negro de tubo apagado.
2. **Raciona el naranja `#FF4D00` a un elemento por vista** (la sección activa, el contador, el CTA de marca). Su escasez es su poder.
3. **Comprime el display**: Geist 600, line-height 0.9, tracking -0.04em a partir de 38px. La densidad ES la voz.
4. **Apaga los titulares por tamaño**: body blanco, h1 `#E6E6E6`, display gigante `#C4C4C4`, labels `#757575`. Cuanto más grande, más gris.
5. **Esquinas vivas y hairlines**: radio 0px en todo, bordes de 1px en `#2E2E2E` o `#757575`.
6. **Enciende en lugar de elevar**: hover = color o borde que se ilumina (#FF7825), nunca sombra ni translate.
7. **Usa Geist Mono para el detalle técnico**: specs, inputs del lab, coordenadas, créditos.
8. **Texturiza con dithering** (tramado ordenado pixelado), el grano retro-digital de la marca, en imágenes apagadas y transiciones.

### No hacer

1. **No uses radios.** Ni 2px. El sistema entero es de esquina viva.
2. **No pongas sombras difusas.** La profundidad es superficie + hairline + luz.
3. **No repartas el naranja**: dos elementos naranjas en la misma vista compiten y el sistema pierde su alarma.
4. **No uses blanco puro en titulares**: el h1 es `#E6E6E6`; el blanco `#FFFFFF` es del body. Esa inversión sutil es de la casa.
5. **No aflojes la compresión**: un 87px con line-height 1.2 y tracking normal es otro estudio.
6. **No metas un segundo saturado** (azul, verde, morado de acento). El fósforo es naranja o no es.
7. **No bajes el gris de texto de `#757575`**: queda por debajo de AA sobre negro.
8. **No sustituyas el dithering por blur o grain fílmico**: el ruido de basement es cuadriculado, ordenado, de CRT.

---

## 8. Comportamiento Responsive

### Breakpoints

Tailwind compilado; breakpoints estándar detectables por el comportamiento:

```css
/* Mobile first */
/* sm: */ @media (min-width: 640px)  { }
/* md: */ @media (min-width: 768px)  { }
/* lg: */ @media (min-width: 1024px) { }
/* xl: */ @media (min-width: 1280px) { }
```

**Mobile (< 640px)**
- La escena 3D se simplifica o se sustituye por un encuadre fijo con scroll clásico
- h1: de 87px a ~40-48px manteniendo 0.9 de interlínea y el tracking proporcional
- Nav colapsa a menú (overlay `rgba(0,0,0,0.9)` real)
- Los hairlines pasan de divisores verticales a horizontales

**Tablet (640px a 1024px)**
- Display a ~56-64px
- Retícula de contenido a 2 columnas con hairline central

**Desktop (> 1024px)**
- Escena completa con cámara scroll-linked
- h1 87px / h2 76px, labels 24px
- El contenido post-escena entra en secciones de viewport completo

### Touch targets (mobile)

- Nav de 12px: área táctil mínima de 44px con padding, aunque el glifo sea pequeño *(derivado)*
- El chip "Scroll to Explore" pasa a "Tap to Explore" o desaparece: el gesto táctil ya es scroll
- Inputs del lab: subir de h-8 (32px) a 44px en táctil *(derivado)*

### Filosofía responsive

La escena es desktop-first (es una demo técnica de WebGL); el resto del sitio es mobile-first clásico de Tailwind. En pantallas pequeñas basement no intenta meter el sótano en el bolsillo: recorta a encuadres fijos y deja que la tipografía comprimida y el naranja hagan la marca.

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```text
Estás trabajando con el sistema de diseño de basement.studio (estudio
digital / branding powerhouse).

PALETA: fondo negro absoluto #000000, único. Grises exactos: body #FFFFFF,
titulares #E6E6E6, display gigante #C4C4C4, labels #757575, superficies
#1A1A1A y #2E2E2E (hairlines). UN solo saturado: naranja #FF4D00
(neón #FF7825 para hover/glow, brasa #700000 para fondos de marca),
racionado a UN elemento por vista.

TIPOGRAFÍA: una sola familia, Geist (Google Fonts, sin sustitución), y
Geist Mono para detalle técnico. Binario de pesos: 400 body / 600 todo
lo demás. Display comprimido: line-height 0.9, tracking -0.04em desde
38px (escala: -0.02em a 20px, -0.03em a 24px, -0.04em a 38px+).
Cuanto más grande el texto, más gris y más apretado.

ESTILO: radio 0px en TODO, cero sombras. Elevación por superficie
(#000 -> #1A1A1A -> #2E2E2E) y hairlines de 1px. Hover = encender
(color/borde a naranja), nunca levantar. Texturas: dithering pixelado
tipo CRT. MODO: oscuro absoluto.
```

### Prompt: Crear nueva pantalla

```text
Crea una pantalla de [FUNCIONALIDAD] para basement.studio.

Requisitos:
- Fondo #000000; secciones separadas por vacío o hairline #2E2E2E
- Titular Geist 600, line-height 0.9, tracking -0.04em, color #E6E6E6
  (si supera 60px, color #C4C4C4)
- Labels de sección: 24px, 600, -0.72px, #757575
- Body 16px/1.5 en #FFFFFF, sin tracking
- Un solo elemento naranja #FF4D00 en toda la vista
- Radio 0px y ninguna sombra; hover que enciende, no que eleva
- Detalle técnico (specs, métricas) en Geist Mono 12px
```

### Prompt: Añadir componente al UI kit

```text
Añade un componente de [TIPO] al sistema de basement.studio.

Debe:
- Usar solo tokens del DESIGN.md de basement
- Border-radius: 0px, sin excepción
- Sombras: ninguna; estados por color (#FF4D00/#FF7825) o borde
  (#2E2E2E -> #757575 -> #E6E6E6)
- Tener default, hover, active, focus y disabled
- Texto sobre naranja siempre en #000000
- Peso 400 solo si es texto corrido; el resto 600
```

### Prompt: Revisión de consistencia

```text
Revisa esta interfaz y detecta qué no sigue el sistema de basement.studio.

Verifica:
1. Si hay algún border-radius distinto de 0 (no debe)
2. Si hay box-shadows (no debe)
3. Si hay más de un elemento naranja por vista
4. Si el display lleva line-height ~0.9 y tracking negativo proporcional
5. Si los titulares van en #E6E6E6/#C4C4C4 y no en blanco puro
6. Si algún gris de texto es más oscuro que #757575
7. Si el fondo es #000000 puro y no un gris noche
8. Si los pesos son solo 400/600
9. Si el hover enciende (color) en lugar de elevar (sombra/translate)
```

### Prompt: Variante de campaña

```text
Genera una variante [lab / drop de merch / proyecto] para basement.studio
manteniendo el sistema base.

Conserva:
- Negro #000000, la escala de grises exacta y el naranja racionado
- Geist comprimida (0.9 / -0.04em) y el binario 400/600
- Esquinas vivas, hairlines, dithering

Puedes variar:
- La intensidad del neón (#FF4D00 <-> #FF7825) y su glow
- La densidad del dithering y la presencia de UI mono (Geist Mono)
- El objeto 3D protagonista (arcade, CRT, canasta, neón)
```

---

## 10. Movimiento (Motion)

El motion de basement es la home entera: la página ES una cámara. El estudio es además autor de una librería pública de scrollytelling construida sobre GSAP ScrollTrigger, y este sitio es su tesis.

**Nivel de motion**: muy alto en la escena, quirúrgico en la interfaz (la UI apenas se mueve: se enciende)

**Duraciones**: 150ms (hover de nav y encendido de color), 300ms (revelado de hairline/borde), 600ms (transiciones de overlay `rgba(0,0,0,0.9)`), scroll-linked sin duración (la cámara del sótano sigue al scroll 1:1 con suavizado) *(derivadas de observación; los timings no están expuestos)*

**Easings**: `power2.out`/`power3.out` (la familia GSAP, hipótesis razonable por su stack), `linear` con lerp para la cámara scroll-linked, `steps()` para efectos de dithering y glitch *(derivados)*

**Propiedades animadas**: cámara y luces dentro del canvas WebGL; en DOM: `color`, `border-color`, `opacity`, `clip-path` en reveals; casi nunca `transform` de elevación

**Patrones de motion (observados en el sitio real)**:
- **Cámara scroll-linked (el gesto fundacional)**: "Scroll to Explore" y la rueda no desplaza la página: interpola la posición de la cámara por el sótano 3D, pasando del plano general al arcade, los CRT y el neón. El progreso de scroll se mapea a un recorrido de cámara con suavizado (lerp), no a un tiempo.
- **La escena viva**: los CRT parpadean estática (ruido animado por frames), el neón "basement." zumba con variaciones de intensidad, la máquina arcade emite glow naranja pulsante y hay personajes idle (un personaje sentado con el móvil, el perro en la escalera).
- **Dithering como transición**: los materiales lejanos o apagados de la escena se traman con dithering ordenado; las superficies se "revelan" pasando de trama pixelada a textura, el equivalente basement de un fade.
- **Encendidos, no elevaciones**: el hover del nav pasa el gris a blanco o a naranja `#FF4D00` en ~150ms; el estado activo queda fijo en naranja. No hay translate, no hay sombra que crece.
- **Contadores en superíndice**: Blog(28) y Showcase(25) llevan el conteo vivo del CMS como parte del nav, un detalle de terminal.
- **El lab jugable**: la sección Lab contiene experimentos WebGL/WebGPU interactivos (el basketball "BSMNT SHOT" de la escena es literal: se puede tirar a canasta). El juego es parte del sistema de marca.
- **Overlay de transición**: los cambios de vista pasan por el velo real `rgba(0, 0, 0, 0.9)`, un fundido a negro casi total: la página respira en negro entre estados.

```css
--ease-ignite:   cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* encendidos de color */
--ease-camera:   linear;                                 /* + lerp en JS */
--duration-fast:  150ms;   /* hover de nav, ignición */
--duration-base:  300ms;   /* bordes y reveals */
--duration-veil:  600ms;   /* overlay de transición */
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`. Con motion reducido, la cámara se congela en encuadres fijos navegables por secciones, la estática de los CRT pasa a imagen fija, el neón queda encendido constante y los encendidos de hover se mantienen (son cambios de color, no de movimiento).

---

## Anexo: Stack técnico detectado

- **Plataforma**: Next.js sobre Vercel (chunks `_next/static` con parámetro de deployment `dpl_…`, Vercel Analytics y Speed Insights presentes). Analítica: PostHog (`/ingest/…`) y Ahrefs.
- **Render**: 2 elementos `canvas` (la escena del sótano + secundario). WebGL con modelos del estudio (arcade, CRTs, canasta "BSMNT SHOT", neón "basement.", personajes idle). Cámara controlada por scroll.
- **Motion**: ninguna librería expuesta en `window` (todo empaquetado); el estudio es autor de una librería pública de scrollytelling basada en GSAP ScrollTrigger, lo que hace de GSAP la hipótesis fuerte para la orquestación.
- **Sistema de tokens**: 0 variables CSS en el `:root` (Tailwind compilado; las clases utilitarias reales aparecen en el DOM, p. ej. `h-8 w-full border px-2 py-1`).
- **Tipografía**: Geist variable 100-900 y Geist Mono vía `next/font` (familias "Geist Fallback"/"Geist Mono Fallback" generadas). `@font-face` adicional: **flauta** (custom BSMNT), cargada pero sin nodos que la usen en home/blog/lab.
- **Colores medidos en DOM**: `#000000` (body), `rgba(0,0,0,0.9)` (overlay), `#E6E6E6`, `#C4C4C4`, `#757575`, `#2E2E2E`, `#1A1A1A`, `#FFFFFF` y `#FF4D00` (nav activo en /blog y /lab). Muestreados de la captura del render: neón `#FF7825`, brasas `#700000`-`#8E351E`.
- **Geometría**: censo completo sin un solo `border-radius` distinto de 0 y sin una sola `box-shadow`.
- **Título real del sitio**: "basement.studio | We make cool shit that performs."
- **(no detectado)**: variables CSS de color o espaciado, modo claro, radios, sombras, uso vivo de flauta, timings de animación expuestos.