DXZO Studio Brand Style Guide
← Color Fonts

DXZO Studio System

Identidad de estudio de diseño: negro puro como lienzo, navy como base de marca y un amplio sistema de color gobernado con rigor. Sistemático, sofisticado y de alto contraste.

FUENTE: DXZO-Studio-Brand-Identity-DESIGN.md

Typography

1 familia · 200–800
Heading system
Manrope
ExtraBold 800 · 38px · ls -0.03em · display y wordmark
Body system
Manrope
Regular 400 / Medium 500 · specimen 38px · 16px/1.6 body · misma familia
A clean, contemporary identity built on sophistication, modernity and clarity across digital and print.
Manrope es la familia única del sistema (diseñada por Zumayed Shahria). Documentada literalmente por la marca y disponible en Google Fonts, así que se renderiza tal cual, sin sustitución.
LightRegularMediumSemiboldBoldExtraBold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Primary · dark
Navy Blue#3E4FA5
Light Blue#7895CB
Matte Black#171717
Off White#F2F2F2
CYAN
YELLOW
ORANGE
RED

Background Black #000000 · Surface Matte Black #171717 · Text Off White #F2F2F2 · Border #262626 · Brand Navy #3E4FA5 / Light Blue #7895CB · Accents Cyan #00D1FE · Yellow #FFCF1E · Orange #FF710F · Red #FF2A4B (uno por contexto)

Overview

Index / bento
LayoutÍndice editorial + grid bento
Content width1280px máx, centrado
FramingNegro puro, clearspace explícito
Grid12 col · gutter 24px · paleta 4 cols

Buttons

3 styles
Primary → Secondary Link ↗
Primary#3E4FA5 · #F2F2F2 · 10px
Secondaryoutline #262626 · 10px

Components

Live recipe
rXPrimary Color · 02
Navy Blue
HEX #3E4FA5RGB 62 79 165CMYK 62 76 0 0
Brand Info Alert Default

Spacing

base 8px
Index content
Title block
La copy de descripción refleja la medida de línea, el clearspace del módulo y el espaciado del CTA en la retícula.
CTA →
Scale
481216244896
Gap · Card padding
gap 24pxcard 24pxsection 96px

Elevation & Depth

Matte / editorial

Profundidad sobria: superficies Matte Black (#171717) sobre negro puro, separadas por un hairline (#262626) y sombras suaves. Sin glow ni gradientes; una card navy o de acento "salta" sobre el negro por contraste de color, no por brillo.

TécnicaSurface + hairline border + soft shadow; el bloque de color sólido es la elevación en las fichas de paleta.
Surface#171717
Border1px #262626
Shadow0 18px 44px -16px rgba(0,0,0,.6)
Canvas#000000 (pure)

Shapes

Radius family

Radios contenidos (10–16px): redondeados y contemporáneos, en sintonía con la marca rX en cuadrado redondeado, sin caer en lo blando.

8px · sm10px · md16px · lg20px · xl9999px · pill
Primary radius10px botones · 16px cards
Marca · treatmentrX en cuadrado redondeado

Do's and Don'ts

Guardrails

Do

Respetar el clearspace del logo rX y del wordmark.
Usar negro puro de lienzo y Off White de texto, máximo contraste.
Navy como base de marca, light blue como contrapunto.
Aplicar un acento del sistema por contexto, no todos a la vez.
Mantener las mismas reglas en digital y print.

Don't

Invadir el clearspace ni deformar la marca rX.
Usar todos los acentos juntos; rompe la jerarquía.
Bajar el contraste (acento sobre acento, gris medio sobre negro).
Introducir gradientes o texturas ajenas al sistema.
Sustituir Manrope o improvisar grises fuera de la rampa.

Motion

Subtle · derivado

La fuente es un board estático: motion no observado. Escala mínima propuesta, limpia y mecánica, al servicio de la claridad. Transiciones de estado y revelado ordenado de módulos; sin efectos expresivos.

Motion levelSubtle
Durations140 · 220 · 320ms
Easingcubic-bezier(.4,0,.2,1)
Hovercolor, border, lift 1px
Generado desde DESIGN.md · design-md-styleguide · DXZO Studio
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #3E4FA5;
  --color-secondary: #7895CB;
  --color-accent: #00D1FE;
  --color-neutral: #F2F2F2;
  --color-background: #000000;
  --color-surface: #171717;
  --color-text-primary: #F2F2F2;
  --color-text-secondary: #A8A8A8;
  --color-border: #262626;
  --font-display: "Manrope";
  --font-body: "Manrope";
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --space-base: 8px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-gap: 24px;
  --space-section-padding: 96px;
}
@theme {
  --color-primary: #3E4FA5;
  --color-secondary: #7895CB;
  --color-accent: #00D1FE;
  --color-neutral: #F2F2F2;
  --color-background: #000000;
  --color-surface: #171717;
  --color-text-primary: #F2F2F2;
  --color-text-secondary: #A8A8A8;
  --color-border: #262626;
  --font-display: "Manrope";
  --font-body: "Manrope";
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --spacing-base: 8px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-gap: 24px;
  --spacing-section-padding: 96px;
}
{
  "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"
  }
}
---
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.