Dia reads
between the tabs

:root {
  /* Color — canvas tibio + texto alpha + acentos vibrantes */
  --color-canvas: #F8F8F8;        /* --background, blanco tibio */
  --color-surface: #FFFFFF;
  --color-ink: rgba(0,0,0,0.85);  /* --primary, texto principal */
  --color-ink-soft: rgba(0,0,0,0.60);
  --color-muted: rgba(0,0,0,0.45);
  --color-blue: #0358F7;          /* --blue, acento primary */
  --color-red: #FA3D1D;           /* --red, acento secundario */
  --color-yellow: #FFB005;        /* --grad-primary-1 */
  --color-pink: #FD02F5;          /* --pink */
  --color-brown: #340B05;         /* --brown */
  --color-accent-soft: #E1E1FE;   /* lavanda */
  --color-border: rgba(0,0,0,0.06);
  --color-on-primary: #FFFFFF;

  /* Gradientes nombrados (firma de marca) */
  --grad-sunshine: linear-gradient(180deg, #5092C7 60%, #FFB005);
  --grad-midnight: linear-gradient(180deg, #340B05 60%, #5092C7);
  --grad-creamsicle: linear-gradient(180deg, #FFF1AC 60%, #FF6F3C);
  --grad-cotton-candy: linear-gradient(180deg, #96D0FF 60%, #FFC1FD);
  --grad-grapefruit: linear-gradient(180deg, #FFADA0 60%, #96D0FF);
  --grad-student: linear-gradient(180deg, #FD02F5 -10%, #FA3D1D 7%, #FFB005 43%);
  --grad-primary: linear-gradient(90deg, #FFB005, #FA3D1D, rgba(198,121,196,0.75));

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Sora', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Scale — serif siempre peso 400, variable fonts con pasos finos */
  --f-display-xl: 400 80px/100% var(--font-display);
  --f-display-lg: 400 56px/105% var(--font-display);
  --f-display-md: 400 40px/110% var(--font-display);
  --f-body-md: 400 16px/150% var(--font-body);
  --f-label: 500 14px/140% var(--font-body);

  /* Radius — generosos y suaves */
  --radius-sm: 0.8rem;   /* 13px, badges */
  --radius-md: 1.6rem;   /* 26px, inputs */
  --radius-lg: 2.4rem;   /* 38px, cards + CTA (predominante) */
  --radius-xl: 4rem;     /* 64px, hero blocks */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.06);

  /* Spacing */
  --space-4: 4px; --space-8: 8px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px;
  --space-64: 64px; --space-80: 80px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms; --duration-base: 400ms;
}

@theme {
  --color-canvas: #F8F8F8;
  --color-surface: #FFFFFF;
  --color-ink: rgba(0,0,0,0.85);
  --color-ink-soft: rgba(0,0,0,0.60);
  --color-muted: rgba(0,0,0,0.45);
  --color-blue: #0358F7;
  --color-red: #FA3D1D;
  --color-yellow: #FFB005;
  --color-pink: #FD02F5;
  --color-brown: #340B05;
  --color-accent-soft: #E1E1FE;
  --color-border: rgba(0,0,0,0.06);
  --color-on-primary: #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Sora', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-display-xl: 80px;
  --text-display-lg: 56px;
  --text-display-md: 40px;
  --text-body: 16px;
  --text-label: 14px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --radius-sm: 0.8rem;
  --radius-md: 1.6rem;
  --radius-lg: 2.4rem;
  --radius-xl: 4rem;

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.06);

  --spacing-4: 4px; --spacing-8: 8px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-80: 80px;

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

{
  "color": {
    "canvas": "#F8F8F8",
    "surface": "#FFFFFF",
    "ink": "rgba(0,0,0,0.85)",
    "inkSoft": "rgba(0,0,0,0.60)",
    "muted": "rgba(0,0,0,0.45)",
    "blue": "#0358F7",
    "red": "#FA3D1D",
    "yellow": "#FFB005",
    "pink": "#FD02F5",
    "brown": "#340B05",
    "accentSoft": "#E1E1FE",
    "border": "rgba(0,0,0,0.06)"
  },
  "gradient": {
    "sunshine": "linear-gradient(180deg, #5092C7 60%, #FFB005)",
    "midnight": "linear-gradient(180deg, #340B05 60%, #5092C7)",
    "creamsicle": "linear-gradient(180deg, #FFF1AC 60%, #FF6F3C)",
    "cottonCandy": "linear-gradient(180deg, #96D0FF 60%, #FFC1FD)",
    "grapefruit": "linear-gradient(180deg, #FFADA0 60%, #96D0FF)",
    "student": "linear-gradient(180deg, #FD02F5 -10%, #FA3D1D 7%, #FFB005 43%)",
    "primary": "linear-gradient(90deg, #FFB005, #FA3D1D, rgba(198,121,196,0.75))"
  },
  "font": {
    "display": { "family": "Fraunces", "substituteOf": "Exposure VAR (serif variable, self-hosted)" },
    "body": { "family": "Sora", "substituteOf": "ABC Oracle (sans, self-hosted)" },
    "mono": { "family": "JetBrains Mono", "substituteOf": "ABC Favorit Mono (self-hosted)" }
  },
  "fontSize": {
    "displayXl": { "px": 80, "weight": 400, "lineHeight": "100%", "tracking": "-0.03em" },
    "displayLg": { "px": 56, "weight": 400, "lineHeight": "105%", "tracking": "-0.02em" },
    "displayMd": { "px": 40, "weight": 400, "lineHeight": "110%" },
    "bodyMd": { "px": 16, "weight": 400, "lineHeight": "150%" },
    "label": { "px": 14, "weight": 500, "lineHeight": "140%" }
  },
  "radius": { "sm": "0.8rem", "md": "1.6rem", "lg": "2.4rem", "xl": "4rem" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "64px", "4xl": "80px" },
  "shadow": { "sm": "0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.06)" },
  "motion": { "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "durationFast": "200ms" }
}

---
version: "1.0"
name: "Dia"
description: "Sistema visual de navegador IA: canvas blanco tibio (#F8F8F8), texto negro con alpha (rgba 0.85), tipografía serif variable Exposure (display) + ABC Oracle (body), gradientes nombrados vibrantes (sunshine, midnight, creamsicle, cotton-candy) y un gradiente primary tricolor amarillo-rojo-púrpura. Dirección de arte editorial con colores juguetones y atmósfera de producto premium."
colors:
  primary: "#0358F7"
  secondary: "#FA3D1D"
  accent: "#FFB005"
  accent-soft: "#E1E1FE"
  neutral: "#D9D9D9"
  background: "#F8F8F8"
  surface: "#FFFFFF"
  text-primary: "rgba(0,0,0,0.85)"
  text-secondary: "rgba(0,0,0,0.60)"
  text-muted: "rgba(0,0,0,0.45)"
  border: "rgba(0,0,0,0.06)"
  border-emphasized: "rgba(0,0,0,0.12)"
  blue: "#0358F7"
  red: "#FA3D1D"
  yellow: "#FFB005"
  pink: "#FD02F5"
  brown: "#340B05"
  purple-soft: "#C679C4"
typography:
  display-xl:
    fontFamily: "Exposure VAR"
    fontSize: "80px"
    fontWeight: 400
    lineHeight: "100%"
    letterSpacing: "-0.03em"
  display-lg:
    fontFamily: "Exposure VAR"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "105%"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "Exposure VAR"
    fontSize: "40px"
    fontWeight: 400
    lineHeight: "110%"
  heading:
    fontFamily: "ABC Oracle"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "130%"
  body-lg:
    fontFamily: "ABC Oracle"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "150%"
  body-md:
    fontFamily: "ABC Oracle"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "150%"
  body-sm:
    fontFamily: "ABC Oracle"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "145%"
  label:
    fontFamily: "ABC Oracle"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "140%"
  mono:
    fontFamily: "ABC Favorit Mono"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "0.8rem"
  md: "1.6rem"
  lg: "2.4rem"
  xl: "4rem"
  full: "50%"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  gap: "16px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "{colors.text-primary}"
    textColor: "{colors.background}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: "12px 24px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - Dia

> Sistema de diseño extraído de `https://diabrowser.com` (sitio de marketing, junio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores observados del HTML + CSS externo del sitio (variables CSS en `:root`, `@font-face` self-hosted via Next.js, gradientes nombrados reales). Estados derivados marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Dia se siente como un navegador que se viste de revista de diseño. El canvas no es blanco puro: es `#F8F8F8` (`--background` real), un blanco tibio con un dejo de gris que le quita la fricoldad del blanco puro y lo acerca a un papel editorial. Sobre ese blanco cae un texto negro con alpha `rgba(0,0,0,0.85)` (`--primary` real), que se siente más suave que un negro puro `#000` y le da al sistema una legibilidad cómoda, no agresiva.

La personalidad aparece en los gradientes nombrados. Dia no usa un solo acento: usa una familia de gradientes con nombres evocativos (sunshine, midnight, creamsicle, cotton-candy, grapefruit, student) que aparecen en ilustraciones, backgrounds de producto y momentos de marca. El gradiente primary es tricolor: `#FFB005 -> #FA3D1D -> rgba(198,121,196,0.75)` (amarillo -> rojo -> púrpura), un gesto art-directed que se siente como una campaña de producto premium. La tipografía es una serif variable **Exposure VAR** para display, con peso 400 y óptica variable, acompañada por **ABC Oracle** (sans humanista) para body y **ABC Favorit Mono** para specs.

La traducción digital debe conservar esa mezcla de navegador premium y dirección de arte editorial: canvas blanco tibio, texto negro con alpha, serif Exposure para display, sans ABC Oracle para body, gradientes nombrados como gesto art-directed, y un sistema de colores vibrantes (azul, rojo, amarillo, rosa, marrón) que se siente como una paleta de campaña, no de dashboard. Cuando el sistema se ve bien, parece el cruce entre un navegador de producto, una pieza de dirección de arte y una revista de diseño.

**Palabras clave de personalidad**: editorial, art-directed, vibrante, serif-led, gradiente, premium, navegante

**Densidad del layout**: cómoda (aire editorial, ritmo generoso)

**Modo preferido**: claro (blanco tibio)

**Nivel de ornamentación**: medio-alto (gradientes nombrados, tipografía serif variable, colores vibrantes, ilustraciones de producto)

**Audiencia visual objetivo**: profesionales y creativos que buscan un navegador IA premium con personalidad de diseño, no un SaaS genérico

---

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

La paleta real del sitio se organiza en un sistema de colores con alpha para texto (`--primary`, `--secondary`, `--tertiary`, `--quaternary`) más colores sólidos para acentos (`--blue`, `--red`, `--yellow`, `--pink`, `--brown`) y gradientes nombrados para momentos de marca.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Azul | `--color-blue` | `#0358F7` | Acento primary, links, info (`--blue` real, 11 ocurrencias) | `#FFFFFF` |
| Rojo | `--color-red` | `#FA3D1D` | Acento secundario, gradiente, highlight (`--red` real, 11 ocurrencias) | `#FFFFFF` |
| Amarillo | `--color-yellow` | `#FFB005` | Acento cálido, gradiente, marca (`--grad-primary-1` real, 10 ocurrencias) | `#340B05` |
| Rosa | `--color-pink` | `#FD02F5` | Acento vibrante, gradiente student (`--pink` real, 4 ocurrencias) | `#FFFFFF` |
| Marrón | `--color-brown` | `#340B05` | Acento oscuro cálido, gradiente midnight (`--brown` real, 7 ocurrencias) | `#FFFFFF` |
| Púrpura soft | `--color-purple-soft` | `#C679C4` | Gradiente primary, acento suave (`--grad-primary-3` real) | `#FFFFFF` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo blanco tibio | `--color-bg` | `#F8F8F8` | Fondo general, `--background` real (23 ocurrencias) |
| Superficie blanca | `--color-surface` | `#FFFFFF` | Cards, modales, `#FFF` real |
| Header background | `--header-background` | `#DDDDDD77` | Header con alpha, real del CSS |
| Lavanda soft | `--color-accent-soft` | `#E1E1FE` | Fondos de énfasis suaves (`#E1E1FE` real, 8 ocurrencias) |
| Gris claro | `--color-grey` | `#D9D9D9` | Bordes, divisores (`--grey` real) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto primary | `--color-text` | `rgba(0,0,0,0.85)` | Headings, body, `--primary` real |
| Texto secondary | `--color-text-secondary` | `rgba(0,0,0,0.60)` | Descripciones, `--secondary` real |
| Texto tertiary | `--color-text-tertiary` | `rgba(0,0,0,0.45)` | Metadata, `--tertiary` real |
| Texto quaternary | `--color-text-quaternary` | `rgba(0,0,0,0.20)` | Placeholders, `--quaternary` real |
| Texto fill primary | `--fill-primary` | `rgba(0,0,0,0.9)` | Texto sobre CTA, `--fill-primary` real |
| Stroke light | `--stroke-light` | `rgba(0,0,0,0.06)` | Bordes sutiles, `--stroke-light` real |
| Stroke medium | `--stroke-medium` | `rgba(0,0,0,0.12)` | Bordes medios, `--stroke-medium` real |

### Gradientes nombrados (firma de marca)

> Dia usa gradientes con nombres evocativos como sistema de marca. Cada gradiente tiene una personalidad y un uso específico.

| Nombre | Variable CSS | Valor | Uso |
|--------|-------------|-------|-----|
| Sunshine | `--sunshine-gradient` | `linear-gradient(180deg, #5092C7 60%, #FFB005)` | Azul -> amarillo |
| Midnight | `--midnight-gradient` | `linear-gradient(180deg, #340B05 60%, #5092C7)` | Marrón -> azul |
| Creamsicle | `--creamsicle-gradient` | `linear-gradient(180deg, #FFF1AC 60%, #FF6F3C)` | Crema -> naranja |
| Cotton-candy | `--cotton-candy-gradient` | `linear-gradient(180deg, #96D0FF 60%, #FFC1FD)` | Azul -> rosa |
| Grapefruit | `--grapefruit-gradient` | `linear-gradient(180deg, #FFADA0 60%, #96D0FF)` | Rosa -> azul |
| Student | `--student-gradient` | `linear-gradient(180deg, #FD02F5 -10%, #FA3D1D 7%, #FFB005 43%)` | Rosa -> rojo -> amarillo |
| Primary | `--grad-primary` | `#FFB005 -> #FA3D1D -> rgba(198,121,196,0.75)` | Amarillo -> rojo -> púrpura |

### 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` | `#4CAE50` | `#FFFFFF` |
| Advertencia | `--color-warning` | `#FFB005` | `#340B05` |
| Error | `--color-error` | `#FA3D1D` | `#FFFFFF` |
| Info | `--color-info` | `#0358F7` | `#FFFFFF` |

---

## 3. Reglas de Tipografía

```css
/* Display: Exposure VAR (serif variable, self-hosted via Next.js, 22 ocurrencias) ->
   sustituto Google: Fraunces (serif de display con peso 400, óptica variable, itálica) */
--font-display: 'Fraunces', 'Exposure VAR', Georgia, serif;

/* Body + Headings + Labels: ABC Oracle (sans humanista, self-hosted, 5 ocurrencias) ->
   sustituto Google: Sora (grotesk geometrico-humanista con pesos 400-700) */
--font-body: 'Sora', 'ABC Oracle', Helvetica, sans-serif;

/* Mono: ABC Favorit Mono (self-hosted via Next.js, 3 ocurrencias) ->
   sustituto Google: JetBrains Mono (mono geometrica con peso 400) */
--font-mono: 'JetBrains Mono', 'ABC Favorit Mono', monospace;
```

**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=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga cuatro fuentes self-hosted vía `@font-face` (34 bloques `@font-face`):
- **Exposure VAR** (serif variable, 22 ocurrencias, "Exposure Variable, Exposure VAR, serif"): la voz display de la marca, una serif con peso 400 y óptica variable. No en Google Fonts. Es una serif de Commercial Type.
- **ABC Oracle** (sans humanista, 5 ocurrencias, "ABC Oracle, Helvetica, sans-serif"): voz body y headings. No en Google Fonts. Es de ABC (Art Branding Concepts).
- **ABC Favorit Mono** (mono, 3 ocurrencias): mono para specs y labels técnicos. No en Google Fonts.
- **Quadrant Text Mono** (mono, 1 ocurrencia): mono alternativo para contextos específicos. No en Google Fonts.

`Fraunces` sustituye a Exposure: es una serif de display con peso 400, óptica variable, itálica expresiva, y un humanismo que encaja con el tono editorial-vibrante de Dia. `Sora` sustituye a ABC Oracle: es una grotesk geometrico-humanista con pesos 300-700, no en AI-slop, y su modernidad encaja con el canvas tibio. `JetBrains Mono` sustituye a ABC Favorit Mono: es una mono geometrica con peso 400.

### Escala tipográfica

> Token · px · line-height · peso · uso. Valores reales del CSS (font-size observations + pesos variables 300-999). El sitio usa pesos variables finos (300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 999).

| Token | px equiv. | Line height | Weight | Uso |
|-------|-----------|-------------|--------|-----|
| `--f-display-xl` | 80px | 100% | 400 | Hero headline (Exposure VAR serif) |
| `--f-display-lg` | 56px | 105% | 400 | Display secundario |
| `--f-display-md` | 40px | 110% | 400 | Titular de sección |
| `--f-heading` | 24px | 130% | 400 | Subtítulo (ABC Oracle) |
| `--f-body-lg` | 20px | 150% | 400 | Intro paragraphs |
| `--f-body-md` | 16px | 150% | 400 | Body general |
| `--f-body-sm` | 14px | 145% | 400 | Body secundario |
| `--f-label` | 14px | 140% | 500 | Labels, CTAs (ABC Oracle 500) |
| `--f-mono` | 14px | 140% | 400 | Specs, code (ABC Favorit Mono) |

### Pesos tipográficos

```css
--font-light: 300;     /* 13 ocurrencias, body ligero */
--font-regular: 400;   /* 16 ocurrencias, body y display serif */
--font-medium: 500;    /* 6 ocurrencias, labels */
--font-semibold: 600;  /* 2 ocurrencias, énfasis */
--font-bold: 700;      /* 6 ocurrencias, micro-énfasis */
--font-heavy: 999;     /* 1 ocurrencia, máximo peso variable */
```

> El sitio usa variable fonts con pesos finos (300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 999). El peso 400 es el más frecuente (16 ocurrencias), seguido de 300 (13). La jerarquía se logra por tamaño y por contraste serif vs sans, no por peso agresivo.

### Letter spacing

```css
--tracking-tight: -0.03em;   /* Display xl */
--tracking-snug: -0.02em;    /* Display lg */
--tracking-normal: 0em;      /* Body, headings */
```

**Regla clave**: la serif Exposure VAR siempre va en peso 400, nunca en bold. La jerarquía se logra por tamaño y por el contraste serif (display) vs sans (body). ABC Oracle cubre el rango de body con pesos 400-500. El cuerpo nunca compite con el headline; la marca gana por contraste tipográfico (serif vs sans) y por los gradientes nombrados que aparecen como gestos art-directed.

---

## 4. Estilos de Componentes

### Botones

**Primario (negro con alpha, rectangular suave)**
```
Background: var(--primary) -> rgba(0,0,0,0.85)
Color de texto: var(--background) -> #F8F8F8
Padding: 12px 24px
Border-radius: var(--radius-lg) -> 2.4rem (38px, generoso)
Font-family: var(--font-body) -> ABC Oracle
Font-weight: 500
Font-size: 14px
Transicion: background-color 200ms ease, transform 200ms ease

Hover:
  Background: var(--get-dia-button-hover) -> rgba(0,0,0,0.90)
  Transform: translateY(-1px)

Active/Pressed:
  Transform: translateY(0)

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--blue) -> #0358F7
  Outline-offset: 3px
```

> El radio del CTA es `2.4rem` (38px, `--radius-lg` real, 7 ocurrencias), un radio generoso casi-pill, en línea con el tono editorial-vibrante. No es un pill completo ni un rectángulo: es un suave que se siente amigable.

**Secundario (outline)**
```
Background: transparent
Color de texto: var(--primary) -> rgba(0,0,0,0.85)
Border: 1px solid var(--stroke-medium) -> rgba(0,0,0,0.12)
Border-radius: var(--radius-lg) -> 2.4rem
Padding: 12px 24px

Hover:
  Background: var(--fill-tertiary) -> rgba(0,0,0,0.04)
  Border-color: var(--primary) -> rgba(0,0,0,0.85)
```

**Ghost / Texto**
```
Background: transparent
Color: var(--secondary) -> rgba(0,0,0,0.60)
Border: none
Padding: 8px 16px

Hover:
  Color: var(--primary) -> rgba(0,0,0,0.85)
```

### Inputs de texto

```
Background: var(--color-surface) -> #FFFFFF
Border: 1px solid var(--stroke-medium) -> rgba(0,0,0,0.12)
Border-radius: var(--radius-md) -> 1.6rem (26px)
Padding: 12px 16px
Font-family: var(--font-body) -> ABC Oracle
Font-size: 16px
Color: var(--primary) -> rgba(0,0,0,0.85)
Placeholder: var(--tertiary) -> rgba(0,0,0,0.45)

Focus:
  Border-color: var(--blue) -> #0358F7
  Box-shadow: 0 0 0 3px rgba(3, 88, 247, 0.18)
  Outline: none
```

### Cards

```
Background: var(--color-surface) -> #FFFFFF
Border: 1px solid var(--stroke-light) -> rgba(0,0,0,0.06)
Border-radius: var(--radius-lg) -> 2.4rem
Padding: 24px

Hover (si es clickeable):
  Border-color: var(--stroke-medium) -> rgba(0,0,0,0.12)
  Box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06)
```

> El radio `2.4rem` (38px) es el radio predominante para cards y botones, un radio generoso que se siente editorial y amigable. Para elementos menores, `1.6rem` (26px). Para hero blocks, `4rem` (64px).

### Badges / Chips

```
Padding: 4px 12px
Border-radius: var(--radius-sm) -> 0.8rem (13px)
Font-family: var(--font-mono) -> ABC Favorit Mono
Font-size: 12px
Font-weight: 500

Default:
  Background: var(--fill-tertiary) -> rgba(0,0,0,0.04)
  Color: var(--secondary) -> rgba(0,0,0,0.60)

Blue:
  Background: var(--blue-10) -> rgba(3,88,247,0.1)
  Color: var(--blue) -> #0358F7
```

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

```
Padding: 16px 20px
Border-radius: var(--radius-md) -> 1.6rem
Font-family: var(--font-body) -> ABC Oracle
Font-size: 14px

Success: background rgba(76,174,80,0.1), color #4CAE50
Warning: background rgba(255,176,5,0.1), color #FFB005
Error:   background rgba(250,61,29,0.1), color #FA3D1D
Info:    background rgba(3,88,247,0.1), color #0358F7
```

### Navegación / Header

```
Background: var(--header-background) -> #DDDDDD77 (con alpha)
Backdrop-filter: blur(12px)
Height: 64px aprox
Padding horizontal: 24px
Border-bottom: 1px solid var(--stroke-light)

Logo:
  rgba(0,0,0,0.85), peso 400, Exposure VAR serif

Links de nav:
  Color: var(--secondary) -> rgba(0,0,0,0.60)
  Font-family: var(--font-body) -> ABC Oracle
  Font-size: 14px
  Font-weight: 500
  Hover: Color var(--primary) -> rgba(0,0,0,0.85)

CTA del nav:
  Rectángulo rgba(0,0,0,0.85), texto #F8F8F8, 12px 24px, radius 2.4rem
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
```

> Base de 4px. El padding de sección predominante es 80px, con 64px en franjas full-bleed.

### Contenedores

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1080px;
--container-xl: 1440px;
```

### Grid

```
Sistema: 12 columnas (Tailwind v4)
Gutter: 16px
Margin lateral: 24px en desktop, 16px en tablet, 12px en mobile
Patrones base: hero a una columna con titular serif display sobre gradiente
azul-blanco, grid de 2-3 columnas para cards de características, franjas
full-bleed con gradientes nombrados (sunshine, midnight, creamsicle) como
gestos art-directed, y secciones de producto con captura del navegador.
```

### Filosofía de espaciado

Dia necesita aire para que la serif Exposure respire y para que los gradientes nombrados tengan presencia art-directed. No es una marca de dashboards densos: el espacio sirve para que cada titular serif en peso 400 se lea como una decisión editorial, no como ruido. Alterna secciones blancas tibias con franjas de gradiente en momentos de producto; ese cambio de ritmo y temperatura es parte del lenguaje, no solo decoración. El vertical rhythm es generoso: 80px entre secciones, 24-32px entre bloques.

---

## 6. Profundidad y Elevación

La marca es **flat-first con sombras sutiles**. Su sensación premium no viene de sombras dramáticas, sino de la tipografía serif, el contraste texto-alpha sobre blanco tibio, y los gradientes nombrados como gestos art-directed. Las sombras son casi invisibles.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.04);
--shadow-sm: 0 2px 4px 0 rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px 0 rgba(0,0,0,0.06);
--shadow-lg: 0 24px 40px -12px rgba(0,0,0,0.12);
--shadow-inset-glow: inset 0 0 7.8px 2px rgba(255,255,255,0.5);
```

> `--shadow-inset-glow` (1 ocurrencia real) es un glow inset sutil que simula un borde iluminado desde dentro, usado en elementos con gradiente.

### Niveles de elevación

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Secciones, fondos, gradientes |
| 1 - Raised | `--shadow-xs` | Inputs, botones |
| 2 - Card | `--shadow-sm` | Cards informativas |
| 3 - Floating | `--shadow-md` | Popovers, dropdowns |
| 4 - Inset glow | `--shadow-inset-glow` | Elementos con gradiente, glow interno |
| 5 - Spotlight | `--shadow-lg` | Producto destacado del hero |

### Radios de borde

```css
--radius-sm: 0.8rem;   /* 13px, badges, chips */
--radius-md: 1.6rem;   /* 26px, inputs, elementos medianos */
--radius-lg: 2.4rem;   /* 38px, cards, botones (predominante, 7 ocurrencias) */
--radius-xl: 4rem;     /* 64px, hero blocks, modales grandes */
--radius-full: 50%;    /* circulares */
```

> Los radios son generosos y suaves, en línea con el tono editorial-vibrante. El radio predominante `2.4rem` (38px) es casi-pill, más amigable que un rectángulo pero más definido que un pill completo. No hay esquinas afiladas en el sistema.

---

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

### Sí hacer

1. **Usa la serif Exposure VAR (Fraunces) para todo lo display** - es la firma editorial; una serif en peso 400 que se siente como una revista de diseño.
2. **Mantén el texto en negro con alpha `rgba(0,0,0,0.85)`** - el alpha le da suavidad y legibilidad; un negro puro `#000` se siente agresivo.
3. **Usa los gradientes nombrados como gestos art-directed** - sunshine, midnight, creamsicle, cotton-candy; cada gradiente tiene una personalidad y un uso específico.
4. **Combina serif (display) con sans ABC Oracle (body)** - el contraste serif vs sans es la jerarquía, no el peso.
5. **Usa el canvas blanco tibio `#F8F8F8`** - el dejo de gris diferencia el sistema de un blanco puro genérico y lo acerca a editorial.
6. **Usa radios generosos `2.4rem` (38px)** - las esquinas suaves son parte del tono amigable-editorial.

### No hacer

1. **No uses sans-serif para titulares display** - la marca es serif-led; una sans en el headline borra la personalidad editorial.
2. **No uses negro puro `#000` para texto** - el sistema usa `rgba(0,0,0,0.85)`; el puro rompe la suavidad.
3. **No pongas la serif en bold** - peso 400 siempre; el bold en serif aplana la jerarquía y borra la firma.
4. **No uses los gradientes nombrados como fondo de todo el sitio** - son gestos puntuales; bañar todo el sitio los vuelve agresivos.
5. **No uses sombras dramáticas ni glassmorphism pesado** - la identidad es flat-first; la profundidad viene del contraste y los gradientes.
6. **No uses esquinas afiladas ni radios pequeños** - el sistema es de radios generosos (38px mínimo para cards); las esquinas afiladas rompen el tono.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — Next.js, Tailwind v4 */
/* sm: */ @media (min-width: 640px) { }
/* md: */ @media (min-width: 768px) { }
/* lg: */ @media (min-width: 1024px) { }
/* xl: */ @media (min-width: 1280px) { }
```

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegación: logo + menú compacto, CTA reducido
- Grid: 1 columna
- Display H1: reducido (aprox. 48px, no 80px)
- Padding de contenedor: 16px
- Cards: apiladas, una por fila

**Tablet (640px - 1024px)**
- Navegación: logo + links + CTA
- Grid: 2 columnas para cards
- Display H1: 56px aprox.
- Padding de contenedor: 24px

**Desktop (> 1024px)**
- Navegación: full nav visible
- Grid: 3 columnas en cards, hero a una columna
- Display H1: 80px (display-xl)
- Padding de contenedor: 24px
- Sección padding: 80px vertical

### Touch targets (mobile)

- Botones mínimo: 44x44px (el CTA con 12px 24px + 14px font cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px

### Filosofía responsive

Mobile-first con ambición editorial. En pequeño formato la marca debe seguir sintiéndose como una revista de diseño, no como un sitio recortado. Prioriza un titular serif contundente (aunque reducido), los gradientes nombrados como gestos puntuales, y un CTA claro por 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 Dia.

PALETA: Canvas blanco tibio #F8F8F8. Texto negro con alpha rgba(0,0,0,0.85).
Acentos: azul #0358F7, rojo #FA3D1D, amarillo #FFB005, rosa #FD02F5, marrón #340B05.
Gradientes nombrados: sunshine, midnight, creamsicle, cotton-candy, grapefruit, student.
TIPOGRAFÍA: Display en Fraunces (sustituto de Exposure VAR) peso 400, nunca bold.
Body en Sora (sustituto de ABC Oracle) peso 400-500. Mono en JetBrains Mono.
ESTILO: Editorial, art-directed, vibrante. Serif-led con gradientes nombrados.
Flat-first con sombras sutiles. Radios generosos 2.4rem.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Claro (blanco tibio).
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Debe sentirse como una revista de diseño + producto premium, no como un SaaS
- Usa fondo blanco tibio #F8F8F8 y texto rgba(0,0,0,0.85)
- Titulares en Fraunces peso 400 (serif, nunca bold), GIGANTES (h1 mínimo 56px)
- Body en Sora peso 400, labels en peso 500
- Gradientes nombrados como gestos art-directed puntuales (sunshine, midnight, etc.)
- Radios generosos 2.4rem (38px)
- Responsive, con CTA principal negro-alpha radius 2.4rem
```

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

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

Debe:
- Usar solo tokens del DESIGN.md de Dia
- Mantener radios de 2.4rem para cards/CTA, 1.6rem para inputs, 0.8rem para badges
- Tener versión default, hover, active, focus y disabled
- Sentirse editorial y premium, no corporativo ni infantil
- Sombras sutiles (flat-first), borde rgba(0,0,0,0.06)
- Tipografía: Fraunces 400 para títulos del componente, Sora para labels/body
```

### Prompt: Revisión de consistencia

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

Verifica:
1. Si los titulares display están en Fraunces peso 400 (no bold, no sans)
2. Si el texto usa rgba(0,0,0,0.85) (no negro puro #000)
3. Si los gradientes nombrados aparecen como gestos puntuales (no como baño)
4. Si el canvas es #F8F8F8 (no blanco puro #FFFFFF)
5. Si los radios son 2.4rem generosos (no esquinas afiladas ni radios pequeños)
6. Si hay elementos demasiado fríos o genéricos (grises azulados, sombras dramáticas)
```

### Prompt: Variante de campaña

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

Conserva:
- Blanco tibio #F8F8F8 como canvas
- Texto rgba(0,0,0,0.85)
- Fraunces peso 400 para display
- Sora para body
- Radios 2.4rem

Puedes variar:
- El gradiente principal entre sunshine, midnight, creamsicle, cotton-candy
- El bloque visual de producto (navegador, demo, ilustración)
- El balance entre secciones blancas y franjas de gradiente
```

---

## 10. Movimiento (Motion)

Dia usa motion sutil y editorial, consistente con el tono de revista de diseño. Las transiciones son suaves (200ms) para hover y cambios de estado. Los gradientes pueden tener animación sutil de posición. No hay animaciones cinematográficas pesadas en el cuerpo del sitio.

**Nivel de motion**: sutil-editorial

**Duraciones**: 200ms (hover, transiciones de color), 400ms (transiciones medias), 800ms (scroll reveal), 900ms (entrada orquestada del hero), 26s (ken-burns del hero)

**Easings**: `ease` (transiciones generales), `ease-out` (transiciones de salida), `cubic-bezier(0.16, 1, 0.3, 1)` (para reveals escalonados)

**Propiedades animadas**: opacity, transform (translateY, scale), background-color, color, border-color

**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay`
- Scroll reveal por sección (fade-up 26px, 800ms)
- Ken-burns lento en la captura del hero (26s, alternate, scale 1 -> 1.07)
- Transiciones de 200ms en hover de botones y links
- Micro-lift en hover de botones (translateY -1px)
- Cambio de color directo en badges y nav links

```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 los reveals escalonados se desactivan; el contenido aparece estático.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Next.js (App Router, `data-n-g` y chunks `_next/static/` visibles, parámetro `?dpl=` de Vercel Deploy), desplegado en Vercel
- **Framework CSS**: Tailwind v4 (CSS-first con `@theme`, variables `--tw-*`), sistema de design tokens en `:root` con colores alpha (`--primary`, `--secondary`), colores sólidos (`--blue`, `--red`, `--yellow`, `--pink`, `--brown`) y gradientes nombrados (`--sunshine-gradient`, `--midnight-gradient`, etc.)
- **Tipografía**: cuatro fuentes self-hosted vía `@font-face` (34 bloques):
  - **Exposure VAR** (serif variable, 22 ocurrencias): display de Commercial Type. No en Google Fonts.
  - **ABC Oracle** (sans humanista, 5 ocurrencias): body de ABC. No en Google Fonts.
  - **ABC Favorit Mono** (mono, 3 ocurrencias): specs y labels. No en Google Fonts.
  - **Quadrant Text Mono** (mono, 1 ocurrencia): alternativo. No en Google Fonts.
- **Animación**: CSS-first con transitions y `@keyframes`. No se detectaron librerías de motion pesadas.
- **3D / WebGL**: no detectado.
- **CDN / assets**: self-hosted en `/_next/static/` e `/images/`, Vercel para deploy
- **Gradientes nombrados**: sistema único de gradientes con nombres evocativos (sunshine, midnight, creamsicle, cotton-candy, grapefruit, student) usados como gestos art-directed de marca
- **Comportamiento**: sitio de marketing de navegador IA ("the browser for your best work"), estructura editorial con hero serif display, secciones de características con gradientes nombrados, y capturas de producto con tabs (Notion, Docs, Figma)