Hyperstudio

:root {
  /* Color — negro galería + blanco + acentos puntuales */
  --color-canvas: #080808;        /* --newbr, negro absoluto */
  --color-surface: #0D0D0D;       /* --blk */
  --color-surface-elevated: #18181B;
  --color-surface-light: #EEEBE7;
  --color-ink: #FDFDFD;           /* --white */
  --color-ink-soft: #F3F3F3;
  --color-muted: #7F7F7F;         /* --gray */
  --color-primary: #F74F39;       /* rojo signature */
  --color-primary-hover: #FF6149;
  --color-primary-active: #E00908;
  --color-secondary: #98FF38;     /* --green, verde neón */
  --color-accent: #ADFF02;        /* lima glow */
  --color-accent-soft: #E7C59A;   /* crema dorado */
  --color-border: #3B3D45;        /* --border */
  --color-border-subtle: #212121;
  --color-on-primary: #FDFDFD;

  /* Typography */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Scale — peso 400 único (firma de marca) */
  --f-display-xl: 400 120px/100% var(--font-display);
  --f-display-lg: 400 60px/105% var(--font-display);
  --f-display-md: 400 37px/110% var(--font-display);
  --f-body-md: 400 17px/150% var(--font-body);
  --f-body-sm: 400 16px/145% var(--font-body);
  --f-label: 400 14px/140% var(--font-body);
  --f-mono: 400 13px/140% var(--font-mono);

  /* Radius — esquinas definidas, no redondeces suaves */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;       /* cards, predominante */
  --radius-xl: 20px;
  --radius-full: 99px;     /* CTA, pill suave */

  /* Spacing — base 4px, unidad real --sp: 30px */
  --space-4: 4px; --space-8: 8px; --space-16: 16px;
  --space-24: 24px; --space-30: 30px; --space-40: 40px;
  --space-60: 60px; --space-80: 80px;

  /* Motion — opacity únicamente (real del CSS) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;   /* opacity .2s */
  --duration-base: 400ms;   /* opacity .4s ease-out */
}

@theme {
  /* Color */
  --color-canvas: #080808;
  --color-surface: #0D0D0D;
  --color-surface-elevated: #18181B;
  --color-surface-light: #EEEBE7;
  --color-ink: #FDFDFD;
  --color-ink-soft: #F3F3F3;
  --color-muted: #7F7F7F;
  --color-primary: #F74F39;
  --color-primary-hover: #FF6149;
  --color-primary-active: #E00908;
  --color-secondary: #98FF38;
  --color-accent: #ADFF02;
  --color-accent-soft: #E7C59A;
  --color-border: #3B3D45;
  --color-on-primary: #FDFDFD;

  /* Font families */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Font sizes (px) — escala real del sitio */
  --text-display-xl: 120px;
  --text-display-lg: 60px;
  --text-display-md: 37px;
  --text-body: 17px;
  --text-body-sm: 16px;
  --text-label: 14px;
  --text-mono: 13px;

  /* Font weight — 400 único */
  --font-weight-regular: 400;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 20px;
  --radius-full: 99px;

  /* Spacing */
  --spacing-4: 4px; --spacing-8: 8px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-30: 30px; --spacing-40: 40px;
  --spacing-60: 60px; --spacing-80: 80px;

  /* Easing */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

{
  "color": {
    "canvas": "#080808",
    "surface": "#0D0D0D",
    "surfaceElevated": "#18181B",
    "surfaceLight": "#EEEBE7",
    "ink": "#FDFDFD",
    "inkSoft": "#F3F3F3",
    "muted": "#7F7F7F",
    "primary": "#F74F39",
    "primaryHover": "#FF6149",
    "primaryActive": "#E00908",
    "secondary": "#98FF38",
    "accent": "#ADFF02",
    "accentSoft": "#E7C59A",
    "border": "#3B3D45",
    "borderSubtle": "#212121",
    "onPrimary": "#FDFDFD"
  },
  "font": {
    "display": { "family": "Hanken Grotesk", "substituteOf": "Aeonik (self-hosted, peso 400 único)" },
    "body": { "family": "Hanken Grotesk", "substituteOf": "Aeonik" },
    "mono": { "family": "JetBrains Mono", "substituteOf": "Input Mono (self-hosted)" },
    "alt": { "family": "Geist", "real": true, "selfHosted": true }
  },
  "fontSize": {
    "displayXl": { "px": 120, "weight": 400, "lineHeight": "100%", "tracking": "-0.03em" },
    "displayLg": { "px": 60, "weight": 400, "lineHeight": "105%", "tracking": "-0.02em" },
    "displayMd": { "px": 37, "weight": 400, "lineHeight": "110%", "tracking": "-0.01em" },
    "bodyMd": { "px": 17, "weight": 400, "lineHeight": "150%" },
    "bodySm": { "px": 16, "weight": 400, "lineHeight": "145%" },
    "label": { "px": 14, "weight": 400, "lineHeight": "140%", "tracking": "0.01em" },
    "mono": { "px": 13, "weight": 400, "lineHeight": "140%" }
  },
  "radius": { "sm": "4px", "md": "8px", "lg": "10px", "xl": "20px", "full": "99px" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "30px", "2xl": "40px", "3xl": "60px", "4xl": "80px" },
  "shadow": { "none": "none" },
  "motion": {
    "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
    "durationFast": "200ms",
    "durationBase": "400ms"
  }
}

---
version: "1.0"
name: "Hyperstudio"
description: "Sistema visual de estudio creativo: canvas negro absoluto (#080808), tipografía grotesk Aeonik (self-hosted, peso 400 único) con Input Mono para specs, acentos rojo signature (#F74F39) y verde neón (#98FF38) que aparecen como gestos puntuales. Estudio creativo que se siente como una galería oscura con trabajo fotografico y Lottie animations."
colors:
  primary: "#F74F39"
  primary-hover: "#FF6149"
  primary-active: "#E00908"
  secondary: "#98FF38"
  accent: "#ADFF02"
  accent-soft: "#E7C59A"
  neutral: "#7F7F7F"
  background: "#080808"
  surface: "#0D0D0D"
  surface-elevated: "#18181B"
  surface-light: "#EEEBE7"
  text-primary: "#FDFDFD"
  text-secondary: "#F3F3F3"
  text-muted: "#7F7F7F"
  text-on-primary: "#FDFDFD"
  text-inverted: "#080808"
  border: "#3B3D45"
  border-subtle: "#212121"
  border-emphasized: "#424242"
  success: "#98FF38"
  success-bg: "#0D0D0D"
  warning: "#E7C59A"
  warning-bg: "#EEEBE7"
  error: "#F74F39"
  error-bg: "#0D0D0D"
  info: "#F74F39"
  info-bg: "#0D0D0D"
typography:
  display-xl:
    fontFamily: "Aeonik"
    fontSize: "120px"
    fontWeight: 400
    lineHeight: "100%"
    letterSpacing: "-0.03em"
  display-lg:
    fontFamily: "Aeonik"
    fontSize: "60px"
    fontWeight: 400
    lineHeight: "105%"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "Aeonik"
    fontSize: "37px"
    fontWeight: 400
    lineHeight: "110%"
    letterSpacing: "-0.01em"
  heading:
    fontFamily: "Aeonik"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: "120%"
  body-lg:
    fontFamily: "Aeonik"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "150%"
  body-md:
    fontFamily: "Aeonik"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: "150%"
  body-sm:
    fontFamily: "Aeonik"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "145%"
  label:
    fontFamily: "Aeonik"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "140%"
    letterSpacing: "0.01em"
  mono:
    fontFamily: "Input Mono"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "4px"
  md: "8px"
  lg: "10px"
  xl: "20px"
  full: "99px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "30px"
  2xl: "40px"
  3xl: "60px"
  4xl: "80px"
  gap: "30px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "{colors.text-primary}"
    textColor: "{colors.text-inverted}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: "14px 28px"
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    rounded: "{rounded.full}"
    padding: "14px 28px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border-subtle}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - Hyperstudio

> Sistema de diseño extraído de `https://hyperstudio.org` (sitio de estudio creativo, junio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores observados del HTML + CSS del sitio (`/static/css/main.css`, variables CSS en `:root`, `@font-face` self-hosted, jQuery + Lottie para animaciones). Estados no expuestos se derivan de la familia real, marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Hyperstudio se siente como una galería de arte oscura donde el trabajo es el héroe. El canvas no es casi-negro ni gris oscuro: es negro absoluto `#080808` (`--newbr` real del CSS), un negro de galería que hace que todo lo demás, el texto blanco, los acentos rojos, las fotos de producto, brille como si estuviera iluminado en un museo. Sobre ese negro cae un blanco casi-puro `#FDFDFD` (`--white` real) para texto, con una grotesk Aeonik (self-hosted, peso 400 único) que se siente como la voz neutral de un estudio que prefiere dejar que el trabajo hable.

La personalidad aparece en los gestos puntuales de color. Un rojo signature `#F74F39` (naranja-rojo coral) aparece en acentos, badges y hover states, como una firma del estudio. Un verde neón `#ADFF02` / `#98FF38` aparece como glow y acento secundario, un gesto atrevido que rompe la monotonía del monocromo. El sitio tiene una variante clara `#EEEBE7` (`--background` real) que se usa en secciones específicas, pero el dominante es el negro de galería. Las animaciones Lottie (`lottie.min.js` + `lottie-init.js` cargados) añaden movimiento vectorial sutil.

La traducción digital debe conservar esa mezcla de galería oscura y estudio creativo atrevido: canvas negro absoluto, texto blanco, tipografía grotesk Aeonik en peso 400 (nunca bold, la restricción es la firma), acentos rojos y verdes neón como gestos puntuales, y mucho aire para que el trabajo fotografico respire. Cuando el sistema se ve bien, parece el cruce entre una galería de Chelsea, un portfolio de agencia premium y un estudio de diseño que se atreve a usar neón.

**Palabras clave de personalidad**: galería, oscuro, monócoro, atrevido, estudio, premium, Lottie, neón-puntual

**Densidad del layout**: espaciada (mucho aire, trabajo como héroe)

**Modo preferido**: oscuro (negro absoluto de galería)

**Nivel de ornamentación**: medio (tipografía grotesk neutral, acentos de color puntuales, Lottie animations, sin decoración superficial)

**Audiencia visual objetivo**: startups y marcas que buscan branding + websites de nivel mundial, que aprecian un estudio con personalidad y criterio

---

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

La paleta real del sitio se organiza en cuatro gestos: un negro absoluto como canvas (`#080808`), un blanco casi-puro como tinta (`#FDFDFD`), un rojo signature como acento de marca (`#F74F39`), y un verde neón como acento atrevido (`#98FF38`/`#ADFF02`). Los neutros tibios (`#212121`, `#3B3D45`, `#7F7F7F`) sostienen bordes y texto secundario sin introducir gris frío. Una variante clara `#EEEBE7` aparece en secciones específicas, pero el dominante es el negro.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Rojo signature | `--color-primary` | `#F74F39` | Acento de marca, hover, badges, CTA activo (`#F74F39` real del CSS) | `#FDFDFD` |
| Rojo hover | `--color-primary-hover` | `#FF6149` | Hover del rojo (derivado para completar el sistema) | `#FDFDFD` |
| Rojo activo | `--color-primary-active` | `#E00908` | Pressed state (`#E00908` real del CSS) | `#FDFDFD` |
| Verde neón | `--color-secondary` | `#98FF38` | Acento atrevido, glow, highlights (`--green` real del CSS) | `#080808` |
| Lima glow | `--color-accent` | `#ADFF02` | Glow secundario, ilustraciones (`#ADFF02` real del CSS) | `#080808` |
| Crema dorado | `--color-accent-soft` | `#E7C59A` | Acento cálido sutil, detalles (`#E7C59A` real del CSS) | `#080808` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo negro | `--color-bg` | `#080808` | Fondo general del sitio, `--newbr` real del CSS |
| Superficie negra | `--color-surface` | `#0D0D0D` | Superficie tibia, `--blk` real del CSS |
| Superficie elevada | `--color-surface-elevated` | `#18181B` | Cards, modales, `--black` real del CSS |
| Superficie clara | `--color-surface-light` | `#EEEBE7` | Variante clara, `--background` real del CSS |
| Borde oscuro | `--color-border` | `#3B3D45` | Bordes sutiles, `--border` real del CSS |
| Borde hairline | `--color-border-subtle` | `#212121` | Hairlines, `--gr23` real del CSS |
| Borde énfasis | `--color-border-emphasized` | `#424242` | Bordes fuertes (`#424242` real del CSS) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto blanco | `--color-text` | `#FDFDFD` | Headings, body, `--white` real del CSS |
| Texto claro | `--color-text-secondary` | `#F3F3F3` | Descripciones, captions (`#F3F3F3` real del CSS, el más frecuente) |
| Texto muted | `--color-text-muted` | `#7F7F7F` | Metadata, placeholders, `--gray` real del CSS |
| Texto oscuro | `--color-text-dark` | `#080808` | Texto sobre superficies claras, `--newbr` real |
| Texto invertido | `--color-text-inverted` | `#080808` | Texto sobre CTA blanco |

### Colores de estado

> El sitio no expone estados formales. Estos tonos se derivan de los acentos reales para completar el sistema.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#98FF38` | `#080808` |
| Éxito (bg) | `--color-success-bg` | `#0D0D0D` | `#98FF38` |
| Advertencia | `--color-warning` | `#E7C59A` | `#080808` |
| Advertencia (bg) | `--color-warning-bg` | `#EEEBE7` | `#080808` |
| Error | `--color-error` | `#F74F39` | `#FDFDFD` |
| Error (bg) | `--color-error-bg` | `#0D0D0D` | `#F74F39` |
| Info | `--color-info` | `#F74F39` | `#FDFDFD` |
| Info (bg) | `--color-info-bg` | `#0D0D0D` | `#F74F39` |

---

## 3. Reglas de Tipografía

```css
/* Display + Body + Headings: Aeonik (grotesk, self-hosted en /static/fonts/aeonik-regular.woff2) ->
   sustituto Google: Hanken Grotesk (grotesk humanista con peso 400 y masa similar) */
--font-display: 'Hanken Grotesk', 'Aeonik', system-ui, sans-serif;
--font-body: 'Hanken Grotesk', 'Aeonik', system-ui, sans-serif;

/* Mono: Input Mono (self-hosted en /static/fonts/input-mono.ttf) ->
   sustituto Google: JetBrains Mono (mono geometrica con peso 400) */
--font-mono: 'JetBrains Mono', 'Input Mono', ui-monospace, monospace;

/* Sans alternativa: Geist (self-hosted en /static/fonts/geist-regular.woff2) ->
   disponible en Google Fonts, se menciona como alternativa del sitio */
--font-alt: 'Geist', system-ui, sans-serif;
```

**Google Fonts (sustitutos):**
```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=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga tres familias self-hosted vía `@font-face`:
- **Aeonik** (grotesk, peso 400 único, `/static/fonts/aeonik-regular.woff2`): la voz principal del sitio, usada para todo lo display, body y headings. No está en Google Fonts. Es una grotesk neo-grotesk británica con un humanismo controlado.
- **Input Mono** (mono, peso 400, `/static/fonts/input-mono.ttf`): mono para specs, datos y labels técnicos. No está en Google Fonts (es de Font Bureau).
- **Geist** (sans, peso 400, `/static/fonts/geist-regular.woff2`): sans alternativa usada en algunos contextos. Disponible en Google Fonts.

`Hanken Grotesk` sustituye a Aeonik: es una grotesk humanista con peso 400, masa similar, y un humanismo que encaja con el tono de estudio creativo. `JetBrains Mono` sustituye a Input Mono: es una mono geometrica con peso 400, disponible en Google Fonts. `Geist` se conserva por fidelidad (está en Google Fonts y es real del sitio).

### Escala tipográfica

> Token · px · line-height · peso · uso. Valores reales del CSS (font-size observations + variables `--text: 60px`, `--sp: 30px`). El sitio usa peso 400 únicamente (15 ocurrencias, ninguna con otro peso), lo que es la firma tipográfica de la marca.

| Token | px equiv. | Line height | Weight | Uso |
|-------|-----------|-------------|--------|-----|
| `--f-display-xl` | 120px | 100% | 400 | Hero headline display (Aeonik) |
| `--f-display-lg` | 60px | 105% | 400 | Display secundario (`--text` real) |
| `--f-display-md` | 37px | 110% | 400 | Titular de sección |
| `--f-heading` | 30px | 120% | 400 | Subtítulo de bloque (`--sp` real) |
| `--f-body-lg` | 18px | 150% | 400 | Intro paragraphs |
| `--f-body-md` | 17px | 150% | 400 | Body general (17px es el más frecuente) |
| `--f-body-sm` | 16px | 145% | 400 | Body secundario (16px es el más frecuente) |
| `--f-label` | 14px | 140% | 400 | Labels, nav, captions |
| `--f-mono` | 13px | 140% | 400 | Specs, datos (Input Mono) |

### Pesos tipográficos

```css
--font-regular: 400;    /* ÚNICO peso del sitio (15 ocurrencias, ninguna con otro peso) */
--font-medium: 500;     /* Derivado para completar el sistema */
--font-semibold: 600;   /* Derivado */
--font-bold: 700;       /* Raro; el sitio evita bold por restricción de marca */
```

### Letter spacing

```css
--tracking-tight: -0.03em;   /* Display xl */
--tracking-snug: -0.02em;    /* Display lg */
--tracking-normal: -0.01em;  /* Display md, headings */
--tracking-wide: 0.01em;     /* Labels, mono */
```

**Regla clave**: el sitio usa peso 400 únicamente. Nunca bold, nunca light. La jerarquía se logra por tamaño y por contraste con el mono (Input Mono para specs técnicos). Esta restricción es la firma tipográfica de Hyperstudio: una grotesk neutral que no grita, que deja que el trabajo y los acentos de color hablen. Subir a bold aplana la jerarquía y borra la personalidad de estudio premium.

---

## 4. Estilos de Componentes

### Botones

**Primario (blanco pill sobre negro)**
```
Background: var(--color-text) -> #FDFDFD
Color de texto: var(--color-text-inverted) -> #080808
Padding: 14px 28px
Border-radius: var(--radius-full) -> 99px (pill suave, real del CSS)
Font-family: var(--font-body) -> Aeonik
Font-weight: 400
Font-size: 14px
Letter-spacing: 0.01em
Transicion: opacity .2s ease, transform .2s ease

Hover:
  Background: var(--color-primary) -> #F74F39
  Color: var(--color-text) -> #FDFDFD
  Transform: translateY(-1px)

Active/Pressed:
  Background: var(--color-primary-active) -> #E00908
  Transform: translateY(0)

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--color-primary) -> #F74F39
  Outline-offset: 3px
```

> El radio `99px` es un pill suave (no `9999px`), observado 1 vez en el CSS como el radio del CTA. Es un pill generoso pero no infinito, en línea con el tono del estudio.

**Secundario (outline blanco)**
```
Background: transparent
Color de texto: var(--color-text) -> #FDFDFD
Border: 1px solid var(--color-text) -> #FDFDFD
Border-radius: var(--radius-full) -> 99px
Padding: 14px 28px

Hover:
  Background: rgba(253, 253, 253, 0.08)
  Border-color: var(--color-primary) -> #F74F39
  Color: var(--color-primary) -> #F74F39
```

**Ghost / Texto**
```
Background: transparent
Color: var(--color-text-secondary) -> #F3F3F3
Border: none
Padding: 8px 16px
Border-radius: var(--radius-md) -> 8px

Hover:
  Color: var(--color-primary) -> #F74F39
```

**Acento (rojo signature)**
```
Background: var(--color-primary) -> #F74F39
Color: var(--color-text-on-primary) -> #FDFDFD
Border-radius: var(--radius-full) -> 99px
Padding: 14px 28px

Hover:
  Background: var(--color-primary-hover) -> #FF6149
  Transform: translateY(-1px)
```

### Inputs de texto

```
Background: transparent
Border: 1px solid var(--color-border) -> #3B3D45
Border-radius: var(--radius-md) -> 8px
Padding: 12px 16px
Font-family: var(--font-body) -> Aeonik
Font-size: 16px
Color: var(--color-text) -> #FDFDFD
Placeholder: var(--color-text-muted) -> #7F7F7F

Hover:
  Border-color: var(--color-border-emphasized) -> #424242

Focus:
  Border-color: var(--color-primary) -> #F74F39
  Box-shadow: 0 0 0 3px rgba(247, 79, 57, 0.18)
  Outline: none

Error:
  Border-color: var(--color-error) -> #F74F39

Disabled:
  Opacity: 0.5
```

### Cards

```
Background: var(--color-surface) -> #0D0D0D
Border: 1px solid var(--color-border-subtle) -> #212121
Border-radius: var(--radius-lg) -> 10px
Padding: 24px

Hover (si es clickeable):
  Border-color: var(--color-border) -> #3B3D45
  Transform: translateY(-2px)
```

> El radio predominante para cards es `10px` (12 ocurrencias en el CSS), un radio sutil, casi rectangular, en línea con el tono de galería. Para inputs y elementos menores, `8px` (7 ocurrencias). Para CTA, pill `99px`.

### Badges / Chips

```
Padding: 5px 12px
Border-radius: var(--radius-sm) -> 4px
Font-family: var(--font-mono) -> Input Mono
Font-size: 12px
Font-weight: 400
Letter-spacing: 0.01em

Default:
  Background: var(--color-surface-elevated) -> #18181B
  Color: var(--color-text-secondary) -> #F3F3F3

Accent:
  Background: var(--color-primary) -> #F74F39
  Color: var(--color-text-on-primary) -> #FDFDFD

Neón:
  Background: var(--color-secondary) -> #98FF38
  Color: var(--color-text-dark) -> #080808
```

### Alertas / Toasts (derivados para completar el sistema)

```
Padding: 16px 20px
Border-radius: var(--radius-md) -> 8px
Border-left: 4px solid currentColor
Font-family: var(--font-body) -> Aeonik
Font-size: 14px

Success: background var(--color-success-bg), color var(--color-success)
Warning: background var(--color-warning-bg), color var(--color-warning)
Error:   background var(--color-error-bg), color var(--color-error)
Info:    background var(--color-info-bg), color var(--color-info)
```

### Navegación / Header

```
Background: transparent sobre el canvas negro #080808
Height: 65px (--other real del CSS)
Padding horizontal: 30px (--sp real del CSS)

Logo:
  Blanco #FDFDFD, peso 400, Aeonik

Links de nav:
  Color: var(--color-text-secondary) -> #F3F3F3
  Font-family: var(--font-mono) -> Input Mono
  Font-size: 13px
  Font-weight: 400
  Hover: Color var(--color-primary) -> #F74F39

CTA del nav:
  Pill blanco #FDFDFD, texto #080808, 14px 28px, radius 99px
```

> La nav usa Input Mono para los links, una decisión distintiva que le da un tono técnico-creativo al header. El logo en Aeonik y los links en Input Mono crean un contraste tipográfico dentro del propio header.

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;
--space-8: 30px;     /* --sp real del CSS */
--space-10: 40px;
--space-12: 48px;
--space-16: 60px;    /* --other real del CSS */
--space-20: 80px;
```

> El sitio usa `--sp: 30px` como unidad base para gaps y padding horizontal, y `--other: 65px` para la altura de nav. El padding de sección es generoso (80px+).

### Contenedores

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1200px;   /* --maxw / --eid real del CSS */
--container-xl: 1550px;   /* --width real del CSS */
--container-max: 1700px;  /* --we real del CSS */
```

### Grid

```
Sistema: grid de 12 columnas (estándar)
Gutter: 30px (--sp real)
Margin lateral: 30px en desktop, 16px en tablet, 12px en mobile
Max width: 1200px para contenido principal, 1700px para hero full-bleed
Patrones base: hero a una columna con titular display gigante centrado o
alineado a la izquierda, grid de 2-3 columnas para portfolios de trabajo,
secciones de servicios con iconos en grid, y franjas full-bleed de producto
fotografico que rompen el ritmo negro.
```

### Filosofía de espaciado

Hyperstudio necesita aire para que el trabajo fotografico respire y para que la tipografía display tenga presencia de galería. No es un sitio denso: el espacio sirve para que cada pieza de portfolio se lea como una obra expuesta, no como ruido. El canvas negro uniforme hace que el aire se sienta como una sala de museo, no como vacío. El vertical rhythm es generoso, con 80px entre secciones y 30px entre bloques dentro de una sección. Las transiciones son sutiles (`opacity .2s` y `opacity .4s ease-out` reales del CSS), sin animaciones dramáticas en el layout.

---

## 6. Profundidad y Elevación

La marca es **flat-first absoluto**. No hay sombras en el CSS (`box-shadow` no aparece en el archivo). La profundidad viene exclusivamente del contraste negro-blanco, de los acentos de color puntuales, y de las Lottie animations que añaden movimiento vectorial. Es un sistema de galería: la profundidad es conceptual, no material.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
```

> El sitio no declara sombras formales. Las sombras se derivan para completar el sistema, usando alpha alto por el fondo negro. En la práctica, el sistema es flat y la elevación se logra por contraste y separación, no por sombras.

### Niveles de elevación

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Canvas negro, secciones full-bleed |
| 1 - Raised | `--shadow-xs` | Inputs, botones sobre canvas (derivado) |
| 2 - Card | `--shadow-sm` | Cards informativas (derivado) |
| 3 - Floating | `--shadow-md` | Popovers, modales (derivado) |
| 4 - Spotlight | `--shadow-lg` | Producto destacado del hero (derivado) |

### Radios de borde

```css
--radius-none: 0px;      /* --radius real del CSS */
--radius-sm: 4px;        /* badges, chips */
--radius-md: 8px;        /* inputs, elementos menores */
--radius-lg: 10px;       /* cards, bloques (predominante) */
--radius-xl: 20px;       /* hero blocks, modales grandes */
--radius-full: 99px;     /* CTA, badges pill (--radiusservices usa 5px) */
```

> El radio predominante para cards es `10px` (12 ocurrencias), un radio sutil, casi rectangular, en línea con el tono de galería. El CTA usa `99px` (pill suave, no `9999px`). `--radiusservices: 5px` se usa en bloques de servicios. El sistema es conservador en radios: la marca prefiere esquinas definidas sobre redondeces suaves.

---

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

### Sí hacer

1. **Usa el negro absoluto `#080808` como canvas uniforme** - es la firma de galería; un negro que hace que el trabajo y los acentos brillen.
2. **Mantén la tipografía en peso 400 únicamente** - la restricción es la firma; nunca bold, nunca light. La jerarquía va por tamaño y contraste con mono.
3. **Usa el rojo `#F74F39` como acento signature puntual** - hover, badges, CTA activo; nunca como baño general.
4. **Combina Aeonik (grotesk) para display con Input Mono para specs y nav** - el contraste grotesk vs mono es parte del lenguaje de estudio técnico-creativo.
5. **Deja mucho aire entre secciones (80px+)** - el trabajo fotografico necesita espacio de galería, no densidad de dashboard.
6. **Usa el verde neón `#98FF38` como gesto atrevido puntual** - glow, highlights, un momento de sorpresa que rompe el monocromo.

### No hacer

1. **No uses grises fríos ni azules corporativos** - el sistema es negro-blanco con acentos cálidos (rojo) y atrevidos (neón); un frío destruye la personalidad.
2. **No subas la tipografía a bold ni uses pesos variables** - peso 400 único; subir a bold aplana la jerarquía y borra la firma de estudio premium.
3. **No llenes el canvas de sombras dramáticas ni glassmorphism** - el sistema es flat-first absoluto; la profundidad es conceptual, no material.
4. **No uses el verde neón como color dominante** - es un gesto puntual; usarlo como baño lo vuelve agresivo y pierde impacto.
5. **No mezcles tipografías serif ni decorativas** - la marca es grotesk + mono; una serif rompe el tono técnico-creativo.
6. **No introduzcas radios grandes ni redondeces suaves** - el sistema prefiere esquinas definidas (10px max para cards); los radios grandes lo vuelven infantil.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — breakpoints reales del CSS */
/* sm: */ @media screen and (max-width: 479px) { }
/* md: */ @media screen and (max-width: 767px) { }
/* lg: */ @media screen and (max-width: 991px) { }
```

> El sitio declara tres breakpoints max-width (479px, 767px, 991px). Por encima de 991px, usa la escala completa de escritorio.

### Cambios por breakpoint

**Mobile (< 479px)**
- Navegación: logo + menú hamburguesa compacto
- Grid: 1 columna
- Display H1: reducido proporcionalmente (aprox. 48-60px, no 120px)
- Padding de contenedor: 16px
- Portfolio: apilado en una columna, imagen grande por item

**Tablet (480px - 767px)**
- Navegación: logo + links primarios visibles + CTA
- Grid: 2 columnas para portfolio, 1 columna para hero
- Display H1: 80px aprox.
- Padding de contenedor: 24px

**Desktop (> 991px)**
- Navegación: full nav visible, links en Input Mono con hover a rojo
- Grid: 2-3 columnas en portfolio, hero a una columna con titular display
- Display H1: 120px (display-xl)
- Padding de contenedor: 30px (--sp real)
- Sección padding: 80px vertical

### Touch targets (mobile)

- Botones mínimo: 44x44px (el pill CTA con 14px 28px cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px (12px 16px de padding + 16px font cumple)
- Iconos interactivos: hitbox mínimo 44x44px

### Filosofía responsive

Mobile-first con ambición de galería. En pequeño formato la marca debe seguir sintiéndose como un portfolio premium, no como un sitio recortado. Prioriza el trabajo fotografico, un titular display contundente (aunque reducido), y el canvas negro uniforme. Los acentos rojos y verdes neón se conservan como gestos puntuales. El aire negativo se mantiene proporcional al viewport.

---

## 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 Hyperstudio.

PALETA: Canvas negro absoluto #080808, texto blanco #FDFDFD, acento rojo signature
#F74F39 para hover y CTA activo, verde neón #98FF38 como gesto atrevido puntual.
TIPOGRAFÍA: Display + body en Hanken Grotesk (sustituto de Aeonik) peso 400 ÚNICO
(nunca bold). Mono en JetBrains Mono (sustituto de Input Mono) para specs y nav.
ESTILO: Estudio creativo, galería oscura, flat-first absoluto. Acentos puntuales,
mucho aire, Lottie animations. Sin sombras.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Oscuro (negro absoluto).
```

### Prompt: Crear nueva pantalla

```text
Crea una pantalla de [FUNCIONALIDAD] para Hyperstudio.

Requisitos:
- Debe sentirse como una galería de arte oscura, no como un sitio de marketing
- Usa fondo negro absoluto #080808 y texto blanco #FDFDFD
- Titulares display en Hanken Grotesk peso 400 (nunca bold), GIGANTES (h1 mínimo 80px)
- Mono en JetBrains Mono para specs, labels técnicos y links de nav
- Acento rojo #F74F39 solo en hover y CTA activo, verde neón #98FF38 como gesto puntual
- Mucho aire entre secciones (80px+), ritmo de galería
- Responsive, con CTA principal pill blanco sobre negro
```

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

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

Debe:
- Usar solo tokens del DESIGN.md de Hyperstudio
- Mantener radios de 10px para cards, 8px para inputs, 99px para CTA
- Tener versión default, hover, active, focus y disabled
- Sentirse como estudio creativo premium, no corporativo ni infantil
- Sin sombras (flat-first absoluto), profundidad por contraste
- Tipografía: Hanken Grotesk 400 para UI, JetBrains Mono para specs
```

### Prompt: Revisión de consistencia

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

Verifica:
1. Si el canvas es negro absoluto #080808 (no gris oscuro ni casi-negro)
2. Si la tipografía está en peso 400 único (no bold, no light, no pesos variables)
3. Si el rojo #F74F39 aparece solo como acento puntual (no como baño)
4. Si los links de nav están en mono (no en sans-serif)
5. Si hay elementos con sombras, glassmorphism o radios grandes (no deben estar)
6. Si hay colores fríos o azules corporativos (no deben estar)
```

### Prompt: Variante de campaña

```text
Genera una variante [producto / cliente / promo] para Hyperstudio manteniendo el sistema base.

Conserva:
- Negro absoluto #080808 como canvas
- Blanco #FDFDFD como texto
- Hanken Grotesk peso 400 para display
- JetBrains Mono para specs y nav
- Flat-first, sin sombras

Puedes variar:
- El acento principal entre rojo #F74F39, verde neón #98FF38 o crema #E7C59A
- El bloque visual de portfolio (foto, ilustración, 3D, Lottie)
- El balance entre aire negativo y densidad de grid
```

---

## 10. Movimiento (Motion)

Hyperstudio usa motion sutil y controlado, consistente con el tono de galería. Las transiciones son de opacity únicamente (`opacity .2s` 6 ocurrencias, `opacity .4s ease-out` 3 ocurrencias, reales del CSS), sin transforms dramáticos. Las Lottie animations (`lottie.min.js` + `lottie-init.js` cargados) añaden movimiento vectorial sutil en iconos y elementos decorativos. No hay animaciones de scroll pesadas ni cinematic effects.

**Nivel de motion**: sutil

**Duraciones**: 200ms (opacity .2s, transiciones rápidas), 400ms (opacity .4s ease-out, transiciones medias), 800ms (scroll reveal derivado), 900ms (entrada orquestada del hero), 26s (ken-burns del hero)

**Easings**: `ease-out` (opacity .4s ease-out real), `ease` (transiciones generales), `linear` (Lottie animations), `cubic-bezier(0.16, 1, 0.3, 1)` (para reveals escalonados)

**Propiedades animadas**: opacity (única propiedad real observada en transitions), posiblemente transform via Lottie

**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay` (titular, lede, flags, captura)
- Scroll reveal por sección (fade 26px, 800ms)
- Ken-burns lento en la captura del hero (26s, alternate, scale 1 -> 1.07)
- Transiciones de opacity .2s en hover de links y botones
- Transiciones de opacity .4s ease-out en cambios de estado de cards
- Lottie animations en iconos y elementos decorativos (loop sutil)

```css
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: ease-out;
--duration-fast: 200ms;
--duration-base: 400ms;
--duration-slow: 800ms;
--duration-entrance: 900ms;
--duration-kenburns: 26s;
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)` y reduce todos los gestos a cambios de color sin desplazamiento. El ken-burns del hero y las Lottie animations se desactivan; el contenido aparece estático con opacity 1.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: sitio estático (HTML + CSS vanilla, no framework JS), desplegado en Vercel (`/_vercel/insights/script.js`, `/_vercel/speed-insights/script.js` visibles)
- **Framework CSS**: CSS custom vanilla en `/static/css/main.css` (no Tailwind, no CSS-in-JS), variables en `:root` con nombres cortos (`--newbr`, `--blk`, `--sp`, `--we`)
- **Tipografía**: tres familias self-hosted vía `@font-face` en `/static/fonts/`:
  - **Aeonik** (grotesk, peso 400, `aeonik-regular.woff2`): voz principal del sitio. No en Google Fonts.
  - **Input Mono** (mono, peso 400, `input-mono.ttf`): mono para specs y nav. No en Google Fonts (Font Bureau).
  - **Geist** (sans, peso 400, `geist-regular.woff2`): alternativa usada en algunos contextos. Disponible en Google Fonts.
- **Animación**: jQuery 3.5.1 (`/static/js/jquery-3.5.1.min.js`) + Lottie (`/static/js/lottie.min.js` + `lottie-init.js`) para animaciones vectoriales. CSS transitions de opacity únicamente (`.2s` y `.4s ease-out`).
- **3D / WebGL / Three.js**: no detectado en el HTML. Las animaciones son 2D vectorial (Lottie).
- **CDN / assets**: self-hosted en `/static/` (fonts, css, js, images), Vercel para hosting e insights
- **Imágenes**: formato `.avif` para hero y producto (`hero-hands.avif`, `avatar-ruben-hume.avif`), `.svg` para iconos y logos
- **Comportamiento**: sitio de estudio creativo (branding + websites para startups), estructura de portfolio con hero display gigante, grid de trabajos, sección de servicios con iconos, y sección "Why Hyperstudio" con credenciales