---
version: "2.0"
name: "DXZO Studio"
description: "Identidad de estudio de diseño: un sistema oscuro, sistemático y de alto contraste. Negro puro como lienzo, azul navy como base de marca y un amplio sistema de color (acentos vivos + rampa de grises) gobernado con rigor. Sofisticación, modernidad y claridad en digital y print."
colors:
  primary: "#3E4FA5"
  secondary: "#7895CB"
  accent: "#00D1FE"
  neutral: "#F2F2F2"
  background: "#000000"
  surface: "#171717"
  text-primary: "#F2F2F2"
  text-secondary: "#A8A8A8"
  border: "#262626"
typography:
  display-lg:
    fontFamily: "Manrope"
    fontSize: "56px"
    fontWeight: 800
    lineHeight: "58px"
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  label-md:
    fontFamily: "Manrope"
    fontSize: "13px"
    fontWeight: 600
    lineHeight: "18px"
    letterSpacing: "0.14em"
rounded:
  sm: "8px"
  md: "10px"
  lg: "16px"
  full: "9999px"
spacing:
  base: "8px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "48px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "14px 24px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    border: "1px solid {colors.border}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "14px 24px"
  button-link:
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "0px"
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    borderRadius: "{rounded.lg}"
    padding: "24px"
    boxShadow: "0 18px 44px -16px rgba(0,0,0,0.6)"
---

# DESIGN.md — DXZO Studio

> Sistema de diseño extraído del board **DXZO STUDIO — Brand Guidelines / Design Direction 2026**.
> Formato DESIGN.md v2: frontmatter YAML de tokens (legible por máquina) + secciones narrativas (legibles por humano y agente).
> Fuente: brand guidelines estático (clearspace de logo, paletas, tipografía, iconos y aplicaciones). Hex verificados por muestreo de píxeles. Motion/WebGL/ThreeJS se completan o se omiten según lo que la fuente documenta.

---

## 1. Tema Visual y Atmósfera

DXZO Studio se presenta como un estudio de diseño con mentalidad de sistema. La identidad vive sobre **negro puro**, donde un **azul navy** sólido funciona como base de marca y un **azul claro** como su contrapunto luminoso. Sobre esa base, el board despliega un sistema de color inusualmente amplio: acentos vivos (cyan, amarillo, naranja, rojo, cada uno con su tinte claro) y una rampa completa de grises con nombres propios (Cloud, Smoke, Steel, Space, Graphite, Arsenic, Phantom, Black). El mensaje es claro: no es una paleta, es un sistema gobernado con rigor.

La voz visual, en palabras del propio board, busca el equilibrio entre *sophistication, modernity y clarity*, con fuerte contraste y consistencia en digital y print. El gesto distintivo es la marca **rX**: un monograma en cuadrado redondeado, limpio y geométrico, acompañado del wordmark **DXZO** con **STUDIO** en tracking amplio. Las páginas de guideline están maquetadas como un índice editorial (clearspace con retícula azul de construcción, paginación, "Index Content"), lo que refuerza la sensación de método.

**Palabras clave de personalidad**: sistemático, sofisticado, moderno, claro, versátil, de alto contraste.

**Densidad del layout**: comfortable, con maquetación modular tipo índice/bento.

**Modo preferido**: oscuro (negro puro como lienzo principal; existen versiones claras del logo para print).

**Nivel de ornamentación**: flat y sistemático. Sin texturas ni gradientes decorativos; la riqueza viene del sistema de color y la retícula.

**Audiencia visual objetivo**: clientes y partners creativos; un estudio que vende diseño, por lo que su propia marca demuestra criterio de sistema.

---

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

El board organiza el color en tres capas: **Primary** (4 colores fundacionales), **Secondary** (acentos vivos + tintes) y **Grayscale** (rampa de 8 grises). Hex verificados por muestreo.

### Colores primarios (marca)

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Navy Blue (Primario) | `--color-primary` | `#3E4FA5` | Base de marca, CTAs, superficies de acento | `#F2F2F2` |
| Navy hover | `--color-primary-hover` | `#4A5CBB` | Estado hover del primario | `#F2F2F2` |
| Navy activo | `--color-primary-active` | `#34428C` | Estado pressed del primario | `#F2F2F2` |
| Light Blue (Secundario) | `--color-secondary` | `#7895CB` | Contrapunto, links, highlights suaves | `#0A0A0A` |
| Off White | `--color-offwhite` | `#F2F2F2` | Tipografía principal, superficies claras, negative space | `#171717` |
| Matte Black | `--color-matteblack` | `#171717` | Superficies oscuras, cards | `#F2F2F2` |

### Colores secundarios (acentos del sistema)

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Cyan | `--color-cyan` | `#00D1FE` | Acento vivo, data, highlights |
| Yellow | `--color-yellow` | `#FFCF1E` | Acento vivo, atención |
| Orange | `--color-orange` | `#FF710F` | Acento vivo, energía |
| Red | `--color-red` | `#FF2A4B` | Acento vivo, alerta / destacado |

> Cada acento tiene su variante "Light" (Light Cyan/Yellow/Orange/Red) para fondos y estados suaves. Úsalos con intención, uno por contexto, nunca todos a la vez.

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Black (Fondo) | `--color-bg` | `#000000` | Background de página (lienzo principal) |
| Superficie | `--color-surface` | `#171717` | Cards, paneles (Matte Black) |
| Superficie elevada | `--color-surface-raised` | `#1F1F1F` | Dropdowns, popovers |
| Borde | `--color-border` | `#262626` | Divisores, bordes de card/input |
| Borde sutil | `--color-border-subtle` | `#1C1C1C` | Separadores ligeros |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Off White (principal) | `--color-text` | `#F2F2F2` | Body text, headings sobre oscuro |
| Texto secundario | `--color-text-secondary` | `#A8A8A8` | Descriptions, subtítulos (Steel) |
| Texto muted | `--color-text-muted` | `#6E6E6E` | Placeholders, metadata (Arsenic) |
| Texto sobre primario | `--color-text-on-primary` | `#F2F2F2` | Texto en botones navy |

### Rampa de grises (nombres del board)

```
Cloud · Smoke · Steel · Space · Graphite · Arsenic · Phantom · Black
(de claro a oscuro — usar como neutros de superficie, texto y borde)
```

### Colores de estado

> Derivados del sistema de acentos del board (rojo = error/alerta, amarillo = warning, cyan = info, verde no está en paleta; se usa el navy/light blue para success neutral). Marcados como derivados.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#7895CB` | `#0A0A0A` |
| Advertencia | `--color-warning` | `#FFCF1E` | `#171717` |
| Error | `--color-error` | `#FF2A4B` | `#F2F2F2` |
| Info | `--color-info` | `#00D1FE` | `#0A0A0A` |

---

## 3. Reglas de Tipografía

Una sola familia para todo el sistema: **Manrope**, usada en todo su rango de pesos (ExtraLight 200 → ExtraBold 800). Diseñada por Zumayed Shahria. Es una Google Font, así que se usa tal cual, sin sustitución.

### Familias tipográficas

```css
/* Display + Body + Labels: Manrope — grotesca geométrica moderna, alta legibilidad. */
--font-heading: 'Manrope', sans-serif;
--font-body: 'Manrope', sans-serif;
--font-label: 'Manrope', sans-serif;  /* mismos glyphs, peso 600/700 + tracking para labels */
```

**Google Fonts:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: ninguna. El board documenta **Manrope** explícitamente (con su escala completa de pesos), y existe en Google Fonts. Por fidelidad se renderiza tal cual, pese a ser una familia muy difundida: aquí es la fuente real de la marca, no un fallback por defecto.

### Pesos tipográficos (del board)

```css
--font-extralight: 200;  /* Manrope ExtraLight */
--font-light: 300;       /* Manrope Light */
--font-normal: 400;      /* Manrope Regular — body */
--font-medium: 500;      /* Manrope Medium */
--font-semibold: 600;    /* Manrope Semibold — labels, subtítulos */
--font-bold: 700;        /* Manrope Bold — headings */
--font-extrabold: 800;   /* Manrope ExtraBold — display, wordmark */
```

### Escala tipográfica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | ~12px | 1.5 | Captions, metadata, badges |
| `--text-sm` | 0.875rem | ~14px | 1.5 | Labels, helper text |
| `--text-base` | 1rem | 16px | 1.6 | Body text principal |
| `--text-lg` | 1.125rem | ~18px | 1.55 | Intro paragraphs |
| `--text-xl` | 1.25rem | ~20px | 1.35 | Subheadings |
| `--text-2xl` | 1.5rem | ~24px | 1.25 | Títulos de card |
| `--text-3xl` | 1.875rem | ~30px | 1.2 | H2, page subtitles |
| `--text-4xl` | 2.5rem | ~40px | 1.1 | H1 de contenido |
| `--text-5xl` | 3.5rem | ~56px | 1.02 | Display / hero ("Brand Colors.") |

### Letter spacing

```css
--tracking-tight: -0.03em;   /* Display ExtraBold */
--tracking-normal: 0em;      /* Body */
--tracking-wide: 0.14em;     /* Labels / eyebrow (STUDIO, Index Content) */
```

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-primary)        /* #3E4FA5 navy */
Color de texto: var(--color-text-on-primary)  /* #F2F2F2 */
Padding: 14px 24px
Border-radius: var(--radius-md)         /* 10px */
Font: Manrope 700, var(--text-sm)
Transición: all 160ms ease

Hover:    Background var(--color-primary-hover)  /* #4A5CBB */
Active:   Background var(--color-primary-active); transform translateY(1px)
Disabled: opacity 0.5; cursor not-allowed
Focus:    outline 2px solid var(--color-secondary); outline-offset 2px
```

**Secundario (outline sobre oscuro)**
```
Background: transparent
Color de texto: var(--color-text)       /* #F2F2F2 */
Border: 1px solid var(--color-border)   /* #262626 */
Padding y radius iguales al primario
Hover: border-color var(--color-secondary); color var(--color-secondary)
```

**Ghost / Link**
```
Background: transparent
Color de texto: var(--color-secondary)  /* Light Blue */
Border: none
Hover: subrayado fino light blue
```

### Inputs de texto

```
Background: var(--color-surface)        /* #171717 */
Border: 1px solid var(--color-border)
Border-radius: var(--radius-md)         /* 10px */
Padding: 12px 16px
Color: var(--color-text)
Placeholder: var(--color-text-muted)
Focus: border-color var(--color-primary); box-shadow 0 0 0 3px rgba(62,79,165,0.30)
```

### Cards

```
Background: var(--color-surface)        /* #171717 Matte Black */
Border: 1px solid var(--color-border)   /* #262626 */
Border-radius: var(--radius-lg)         /* 16px */
Padding: var(--space-6)                 /* 24px */
Box-shadow: 0 18px 44px -16px rgba(0,0,0,0.6)

Variante color-system: card de color sólido (navy / acento) con etiqueta,
HEX, RGB y CMYK, como las fichas de paleta del board.
```

### Badges / Chips

```
Padding: 4px 12px
Border-radius: var(--radius-full)       /* pill */
Font: Manrope 600, var(--text-xs)
Default:  background var(--color-surface-raised); color var(--color-text-secondary)
Navy:     background rgba(62,79,165,0.20); color var(--color-secondary)
Accent:   usa un acento del sistema (cyan/yellow/orange/red) por contexto
```

### Navegación / Header

```
Background: var(--color-bg)
Border-bottom: 1px solid var(--color-border)
Logo: marca rX + wordmark "DXZO STUDIO"
Links: Manrope 600, var(--text-sm)
  Color: var(--color-text-secondary)
  Hover: var(--color-text)
  Active: var(--color-secondary)
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;     /* base */
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;    /* gap entre componentes / card padding */
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;   /* separación entre secciones */
```

### Contenedores

```css
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
```

### Grid

```
Sistema: 12 columnas con gutter de 24px.
Maquetación tipo índice editorial: secciones numeradas, paginación, retícula de
construcción visible en las páginas de clearspace. Fichas de color en grid bento.
```

### Filosofía de espaciado

Metódica y aireada. El espacio organiza un sistema (paletas, pesos, iconos, aplicaciones) con la lógica de un manual de marca: clearspace explícito alrededor del logo, alineación a retícula y módulos consistentes. El vacío comunica criterio, no minimalismo vacío.

---

## 6. Profundidad y Elevación

### Sistema de sombras

```css
--shadow-none: none;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
--shadow-md: 0 10px 28px -10px rgba(0,0,0,0.55);
--shadow-lg: 0 18px 44px -16px rgba(0,0,0,0.60);
--shadow-xl: 0 30px 64px -20px rgba(0,0,0,0.70);
```

La profundidad es sobria y editorial: superficies Matte Black (`#171717`) sobre negro puro, separadas por un borde hairline (`#262626`) y sombras suaves. No hay glow ni gradientes; la jerarquía se logra con contraste de superficie y con el color del sistema (una card navy o de acento "salta" sobre el negro). En las fichas de color, el propio bloque sólido es la elevación.

### Niveles de elevación

| Nivel | Token | Uso |
|-------|-------|-----|
| 0 — Base | `--shadow-none` | Página (#000000) |
| 1 — Raised | `--shadow-sm` | Cards, tiles |
| 2 — Floating | `--shadow-md` | Dropdowns, tooltips |
| 3 — Overlay | `--shadow-lg` | Cards destacadas, popovers |
| 4 — Modal | `--shadow-xl` | Modals, sheets |

### Radios de borde

```css
--radius-sm: 8px;     /* chips, inputs pequeños */
--radius-md: 10px;    /* botones, inputs */
--radius-lg: 16px;    /* cards, paneles */
--radius-xl: 20px;    /* fichas de color, mock de app */
--radius-full: 9999px; /* badges pill, mark redondeado */
```

El radio predominante es **10–16px**: redondeado y contemporáneo, coherente con la marca **rX** en cuadrado redondeado, sin caer en lo blando.

---

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

### ✅ Hacer

1. **Respetar el clearspace del logo** — el board lo define explícitamente; mantén aire alrededor de la marca rX y del wordmark.
2. **Usar negro puro como lienzo** y Off White para el texto, para máximo contraste y claridad.
3. **Tratar el navy como base de marca** y el light blue como su contrapunto; reserva los acentos vivos para señales puntuales.
4. **Aplicar un acento por contexto** (cyan/yellow/orange/red), no toda la paleta a la vez; el sistema es amplio justamente para elegir, no para saturar.
5. **Mantener consistencia en digital y print** — mismas reglas de color, tipografía y espaciado en ambos medios.
6. **Usar Manrope en todo su rango de pesos** con intención: ExtraBold para display, Regular para body, Semibold para labels.

### ❌ No hacer

1. **No invadir el clearspace** del logo ni deformar la marca rX.
2. **No usar todos los acentos juntos** — convierte el sistema en ruido y rompe la jerarquía.
3. **No bajar el contraste** (texto gris medio sobre negro, o acento sobre acento); la claridad es un valor de marca.
4. **No introducir gradientes ni texturas decorativas** ajenas al sistema; la riqueza viene del color y la retícula.
5. **No sustituir Manrope** por otra fuente ni mezclar familias.
6. **No improvisar grises** fuera de la rampa nombrada (Cloud→Black).

---

## 8. Comportamiento Responsive

### Breakpoints

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

### Cambios por breakpoint

**Mobile (< 640px)** — Nav: logo + menú; grid bento a 1 columna; cards full-width; display baja a `--text-4xl`; padding `--space-4`.

**Tablet (640–1024px)** — bento de 2 columnas; H1 `--text-4xl`; padding `--space-6`.

**Desktop (> 1024px)** — nav completa; grids de paleta a 4 columnas; display hasta `--text-5xl`; contenedor con max-width centrado.

### Touch targets (mobile)

- Botones mínimo 44×44px · Links de nav mínimo 48px · Inputs mínimo 44px.

### Filosofía responsive

El sistema es agnóstico al medio: las mismas reglas escalan de la pantalla a la papelería, el packaging y la señalética que muestra el board. Mobile-first para producto digital, manteniendo clearspace, contraste y el sistema de color en cada touchpoint.

---

## 9. Guía de Prompts para Agentes

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

```
Estás trabajando con el sistema de diseño de DXZO Studio.

PALETA: Navy Blue #3E4FA5 (base de marca) y Light Blue #7895CB (contrapunto) sobre negro puro #000000, con texto Off White #F2F2F2 y superficies Matte Black #171717. Acentos del sistema (Cyan #00D1FE, Yellow #FFCF1E, Orange #FF710F, Red #FF2A4B) usados uno por contexto.
TIPOGRAFÍA: Manrope en todo su rango (ExtraBold display, Regular body, Semibold labels).
ESTILO: sistemático, sofisticado, moderno, alto contraste. Respeta clearspace del logo rX.
TOKENS: usa siempre las variables CSS. Un acento por contexto, nunca todos.
MODO: oscuro (negro puro).
```

### Prompt: Crear nueva pantalla

```
Crea una pantalla de [FUNCIONALIDAD] para DXZO Studio.
- Sigue el DESIGN.md adjunto y sus tokens.
- Negro puro de fondo, cards Matte Black, navy como acento de marca, un acento del sistema por contexto.
- Manrope: ExtraBold títulos, Regular cuerpo, Semibold labels.
- Maquetación modular tipo índice/bento. Responsive mobile-first.
```

### Prompt: Revisión de consistencia

```
Revisa esta interfaz y señala qué NO sigue el sistema DXZO Studio:
[CÓDIGO O DESCRIPCIÓN]
Para cada problema: el elemento, por qué viola el sistema (¿clearspace invadido?, ¿demasiados acentos?, ¿bajo contraste?, ¿gris fuera de la rampa?, ¿fuente sustituida?), y la corrección con los tokens correctos.
```

---

## 10. Movimiento (Motion)

> La fuente es un brand board estático: no documenta motion. Lo que sigue es una escala mínima **propuesta**, coherente con la atmósfera sistemática y precisa. Marcada como derivada, no observada.

El movimiento debe sentirse limpio y mecánico, al servicio de la claridad: transiciones cortas de estado (hover, focus, selección), revelado ordenado de módulos. Sin efectos expresivos ni físicos.

**Nivel de motion**: subtle.

**Duraciones**: 140ms (micro), 220ms (estándar), 320ms (entradas de módulo).

**Easings**: `cubic-bezier(0.4, 0, 0.2, 1)` (estándar), `ease-out` para entradas.

**Propiedades animadas en hover**: background, border-color, color, transform (translateY 1px en press).

**Patrones**: hover en cards/botones, focus-ring visible, fade+slide escalonado de los módulos bento al entrar en viewport.

```css
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 140ms;
--duration-base: 220ms;
--duration-slow: 320ms;
```

> **Accesibilidad**: respeta siempre `@media (prefers-reduced-motion: reduce)`.

---

## Anexo: Stack técnico detectado

> El board no expone tecnología de implementación (es una pieza de brand guidelines). Inferencias de aplicación:

- **Plataforma / builder**: no especificado en la fuente.
- **Aplicaciones documentadas**: iconografía de app (macOS / iOS), UI de producto (chat, dashboard), papelería, packaging, merch (camiseta, tote, business cards) y señalética/billboard.
- **Animación**: no documentada (ver Sección 10, propuesta).
- **3D / WebGL / ThreeJS**: no aplica (la fuente no usa gráficos 3D). Secciones 11 y 12 omitidas.