---
version: "1.0"
name: "Adaline"
description: "Sistema visual de plataforma de observabilidad IA: canvas blanco verdoso (#FDFEFB) en modo claro, verde oscuro (#2A332A) en modo oscuro, tipografía serif Newsreader para display + Akkurat para body, acentos cyan teal (#3DD7D7) y rosa (#F377DC). Editorial-tech serif-led con paleta natural verde y acentos vibrantes."
colors:
  primary: "#3DD7D7"
  primary-hover: "#10EFF6"
  secondary: "#F377DC"
  accent: "#4A6D47"
  accent-soft: "#E1E6DF"
  neutral: "#DAE0D4"
  background: "#FDFEFB"
  surface: "#F1F3EF"
  surface-elevated: "#FFFFFF"
  surface-dark: "#2A332A"
  text-primary: "#050E11"
  text-secondary: "#2A332A"
  text-muted: "#548F28"
  text-on-primary: "#050E11"
  text-inverted: "#FDFEFB"
  border: "#E1E6DF"
  border-subtle: "#DAE0D4"
  success: "#548F28"
  success-bg: "#E3F2EA"
  warning: "#80581C"
  warning-bg: "#F0F5DF"
  error: "#B91C1C"
  error-bg: "#E9C3C1"
  info: "#3DD7D7"
  info-bg: "#E8F5F5"
typography:
  display-xl:
    fontFamily: "Newsreader"
    fontSize: "72px"
    fontWeight: 400
    lineHeight: "105%"
    letterSpacing: "-0.03em"
  display-lg:
    fontFamily: "Newsreader"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "110%"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "Newsreader"
    fontSize: "40px"
    fontWeight: 400
    lineHeight: "115%"
  heading:
    fontFamily: "Akkurat"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: "130%"
  body-lg:
    fontFamily: "Akkurat"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "160%"
  body-md:
    fontFamily: "Akkurat"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "160%"
  body-sm:
    fontFamily: "Akkurat"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "150%"
  label:
    fontFamily: "Akkurat"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "140%"
  mono:
    fontFamily: "Fragment Mono"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  full: "9999px"
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.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "10px 20px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.md}"
    padding: "10px 20px"
  card:
    backgroundColor: "{colors.surface-elevated}"
    borderColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - Adaline

> Sistema de diseño extraído de `https://www.adaline.ai` (sitio de marketing, junio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores observados del HTML + 2 CSS externos del sitio (variables CSS en `:root`, `@font-face` self-hosted via Next.js, rampas de color Tailwind v4). Estados derivados marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Adaline se siente como un paper de investigación que se viste de SaaS. El canvas no es blanco puro: es `#FDFEFB`, un blanco con un dejo de verde casi imperceptible que le da al sistema una frescura natural, como papel de laboratorio botánico. Sobre ese blanco cae una serif **Newsreader** (peso 400, óptica variable) para todo lo display, con una italic expresiva que se siente como una publicación científica premium, no como un dashboard.

La personalidad aparece en el contraste entre la sobriedad editorial y los acentos vibrantes. El cyan teal `#3DD7D7` aparece como acento primary (links, focus, highlights), un color que se siente como datos vivos, observabilidad en tiempo real. El rosa `#F377DC` aparece como acento secundario, un gesto atrevido que rompe la monotonía del verde natural. El modo oscuro usa un verde oscuro `#2A332A` (no negro) como canvas, una decisión que mantiene la conexión botánica del sistema en ambos modos. La sans **Akkurat** (neo-grotesk suiza) cubre el body con peso 400, y **Fragment Mono** cubre los specs técnicos.

La traducción digital debe conservar esa mezcla de paper científico y SaaS de observabilidad: canvas blanco verdoso, serif Newsreader para display, sans Akkurat para body, acentos cyan y rosa como gestos de datos vivos, y una paleta natural verde que conecta ambos modos. Cuando el sistema se ve bien, parece el cruce entre una publicación de investigación, un laboratorio botánico y un producto de observabilidad IA premium.

**Palabras clave de personalidad**: editorial, serif-led, natural-verde, observabilidad, científico, vibrante-puntual, premium

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

**Modo preferido**: claro (blanco verdoso, con modo oscuro verde)

**Nivel de ornamentación**: medio (tipografía serif protagonista, acentos vibrantes puntuales, sin decoración superficial)

**Audiencia visual objetivo**: equipos de AI/ML que buscan observabilidad y evals para agentes auto-mejorables, que aprecian un sistema maduro con personalidad editorial

---

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

La paleta real del sitio se organiza en un sistema de rampas Tailwind v4 con colores nombrados (azure, color-accent-1 a 10) más colores hex directos. El modo claro usa canvas `#FDFEFB` (blanco verdoso) y el modo oscuro usa `#2A332A` (verde oscuro). Los acentos cyan `#3DD7D7` y rosa `#F377DC` son los gestos vibrantes.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Cyan teal | `--color-primary` | `#3DD7D7` | Acento primary, links, focus, highlights (`#3DD7D7` real, 3 ocurrencias) | `#050E11` |
| Cyan hover | `--color-primary-hover` | `#10EFF6` | Hover del cyan (`#10EFF6` real del CSS) | `#050E11` |
| Rosa magenta | `--color-secondary` | `#F377DC` | Acento secundario, highlights (`#F377DC` real, 3 ocurrencias) | `#FFFFFF` |
| Rosa hover | `--color-secondary-hover` | `#D41665` | Hover del rosa (`#D41665` real del CSS) | `#FFFFFF` |
| Verde medio | `--color-accent` | `#4A6D47` | Acento natural, success (`#4A6D47` real, 4 ocurrencias) | `#FFFFFF` |
| Verde oscuro | `--color-surface-dark` | `#2A332A` | Modo oscuro canvas, texto secundario (`#2A332A` real, 70 ocurrencias en HTML) | `#FDFEFB` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo blanco verdoso | `--color-bg` | `#FDFEFB` | Fondo claro general (`#FDFEFB` real, 26 ocurrencias) |
| Fondo secundario | `--color-surface` | `#F1F3EF` | Secciones alternas (`#F1F3EF` real del CSS) |
| Superficie elevada | `--color-surface-elevated` | `#FFFFFF` | Cards, modales |
| Fondo oscuro verde | `--color-surface-dark` | `#2A332A` | Modo oscuro, `#2A332A` real |
| Fondo oscuro medio | `--color-surface-dark-2` | `#242A2E` | Superficie oscura media (`#242A2E` real) |
| Borde verde claro | `--color-border` | `#E1E6DF` | Bordes sutiles (`#E1E6DF` real, 26 ocurrencias) |
| Borde sutil | `--color-border-subtle` | `#DAE0D4` | Hairlines (`#DAE0D4` real, 2 ocurrencias) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto primary | `--color-text` | `#050E11` | Headings, body en modo claro (`#050E11` real, 19 ocurrencias) |
| Texto secondary | `--color-text-secondary` | `#2A332A` | Texto secundario, modo oscuro canvas (`#2A332A` real) |
| Texto muted | `--color-text-muted` | `#548F28` | Metadata, captions (`#548F28` real del CSS) |
| Texto on-primary | `--color-text-on-primary` | `#050E11` | Texto sobre cyan (oscuro sobre teal) |
| Texto invertido | `--color-text-inverted` | `#FDFEFB` | Texto sobre modo oscuro |

### Colores de estado

> El sitio expone algunos colores de estado reales. Los derivados se marcan.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#548F28` | `#FFFFFF` |
| Éxito (bg) | `--color-success-bg` | `#E3F2EA` | `#548F28` |
| Advertencia | `--color-warning` | `#80581C` | `#FFFFFF` |
| Advertencia (bg) | `--color-warning-bg` | `#F0F5DF` | `#80581C` |
| Error | `--color-error` | `#B91C1C` | `#FFFFFF` |
| Error (bg) | `--color-error-bg` | `#E9C3C1` | `#B91C1C` |
| Info | `--color-info` | `#3DD7D7` | `#050E11` |
| Info (bg) | `--color-info-bg` | `#E8F5F5` | `#3DD7D7` |

> `#B91C1C` (error) es real del CSS (2 ocurrencias). `#548F28` (verde success) y `#80581C` (warning) son reales del CSS. `#E3F2EA`, `#E8F5F5`, `#F0F5DF` son fondos tibios reales observados.

### Rampa azure (sistema de color Tailwind v4)

> El sitio declara una rampa azure completa (50-950) en RGB triplets, usada para elementos de UI y datos.

| Step | RGB | Hex aprox | Uso |
|------|-----|-----------|-----|
| `--azure-50` | 240 250 250 | `#F0FAFA` | Fondo azure más claro |
| `--azure-100` | 225 244 245 | `#E1F4F5` | Fondos suaves |
| `--azure-200` | 192 231 240 | `#C0E7F0` | Badges suaves |
| `--azure-300` | 146 212 233 | `#92D4E9` | Acento medio claro |
| `--azure-400` | 110 191 220 | `#6EBFDC` | Acento medio |
| `--azure-500` | 58 148 186 | `#3A94BA` | Acento base |
| `--azure-600` | 36 90 120 | `#245A78` | Hover |
| `--azure-700` | 22 54 74 | `#16364A` | Active |
| `--azure-800` | 18 36 49 | `#122431` | Fondo oscuro |
| `--azure-900` | 13 27 38 | `#0D1B26` | Fondo muy oscuro |
| `--azure-950` | 11 22 31 | `#0B161F` | Fondo azure más oscuro |

---

## 3. Reglas de Tipografía

```css
/* Display: Newsreader (serif variable, self-hosted via Next.js, 18 ocurrencias) ->
   disponible en Google Fonts, se conserva por fidelidad */
--font-display: 'Newsreader', Georgia, serif;

/* Display alternativo: Instrument Serif (self-hosted, 4 ocurrencias) ->
   disponible en Google Fonts, se conserva */
--font-serif-alt: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;

/* Body: Akkurat (neo-grotesk suiza, self-hosted via Next.js, 4+3 ocurrencias) ->
   sustituto Google: Hanken Grotesk (neo-grotesk humanista con masa similar) */
--font-body: 'Hanken Grotesk', 'Akkurat', Helvetica, sans-serif;

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

**Google Fonts (sustitutos + reales):**
```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=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Instrument+Serif:ital@0;1&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 cuatro fuentes self-hosted vía `@font-face` (31 bloques):
- **Newsreader** (serif variable, 18 ocurrencias): la voz display de la marca, una serif de producción de Productions Typographiques. Disponible en Google Fonts, se conserva sin sustitución por fidelidad.
- **Instrument Serif** (serif, 4 ocurrencias): serif para acentos editoriales y display alternativo. Disponible en Google Fonts, se conserva.
- **Akkurat** (neo-grotesk suiza, 4+3 ocurrencias): voz body de la marca, de Lineto (commercial). No en Google Fonts. `Hanken Grotesk` la sustituye: es una neo-grotesk humanista con masa similar y pesos 300-700.
- **Fragment Mono** (mono, 5 ocurrencias): mono para specs y labels técnicos. No en Google Fonts. `JetBrains Mono` la sustituye.

### Escala tipográfica

> Token · px · line-height · peso · uso. Valores reales del CSS (font-size observations + pesos 300/400/500/700). El peso 400 es el más frecuente (15 ocurrencias), seguido de 300 (6) y 500 (6).

| Token | px equiv. | Line height | Weight | Uso |
|-------|-----------|-------------|--------|-----|
| `--f-display-xl` | 72px | 105% | 400 | Hero headline (Newsreader serif) |
| `--f-display-lg` | 56px | 110% | 400 | Display secundario |
| `--f-display-md` | 40px | 115% | 400 | Titular de sección |
| `--f-heading` | 24px | 130% | 500 | Subtítulo (Akkurat 500) |
| `--f-body-lg` | 18px | 160% | 400 | Intro paragraphs |
| `--f-body-md` | 16px | 160% | 400 | Body general |
| `--f-body-sm` | 14px | 150% | 400 | Body secundario |
| `--f-label` | 14px | 140% | 500 | Labels, CTAs (Akkurat 500) |
| `--f-mono` | 13px | 140% | 400 | Specs, code (Fragment Mono) |

### Pesos tipográficos

```css
--font-light: 300;     /* 6 ocurrencias, body ligero */
--font-regular: 400;   /* 15 ocurrencias, DOMINANTE: body, display serif */
--font-medium: 500;    /* 6 ocurrencias, labels, headings sans */
--font-bold: 700;      /* 2 ocurrencias, micro-énfasis */
```

> El peso 400 es el dominante (15 ocurrencias). La serif Newsreader siempre va en peso 400, nunca en bold. La jerarquía se logra por tamaño y por contraste serif (display) vs sans (body), no por peso agresivo. Akkurat sube a 500 solo para labels y headings sans.

### Letter spacing

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

**Regla clave**: la serif Newsreader 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). El cuerpo en Akkurat 400 nunca compite con el headline serif; la marca gana por contraste tipográfico y por los acentos cyan/rosa que aparecen como gestos de datos vivos.

---

## 4. Estilos de Componentes

### Botones

**Primario (cyan teal)**
```
Background: var(--color-primary) -> #3DD7D7
Color de texto: var(--color-text-on-primary) -> #050E11
Padding: 10px 20px
Border-radius: var(--radius-md) -> 8px
Font-family: var(--font-body) -> Akkurat
Font-weight: 500
Font-size: 14px
Transicion: background-color 200ms ease, transform 200ms ease

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

Active/Pressed:
  Transform: translateY(0)

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

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

> El radio del CTA es `8px` (`--radius-md` real), un rectángulo suave, en línea con el tono editorial-tech. No es pill ni esquina afilada: es preciso.

**Secundario (outline)**
```
Background: transparent
Color de texto: var(--color-text) -> #050E11
Border: 1px solid var(--color-border) -> #E1E6DF
Border-radius: var(--radius-md) -> 8px
Padding: 10px 20px

Hover:
  Background: var(--color-surface) -> #F1F3EF
  Border-color: var(--color-text) -> #050E11
```

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

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

### Inputs de texto

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border) -> #E1E6DF
Border-radius: var(--radius-md) -> 8px
Padding: 10px 16px
Font-family: var(--font-body) -> Akkurat
Font-size: 16px
Color: var(--color-text) -> #050E11
Placeholder: var(--color-text-muted) -> #548F28

Focus:
  Border-color: var(--color-primary) -> #3DD7D7
  Box-shadow: 0 0 0 3px rgba(61, 215, 215, 0.18)
  Outline: none

Error:
  Border-color: var(--color-error) -> #B91C1C
```

### Cards

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border) -> #E1E6DF
Border-radius: var(--radius-lg) -> 12px
Padding: 24px

Hover (si es clickeable):
  Border-color: var(--color-border-subtle) -> #DAE0D4
  Box-shadow: 0 4px 12px 0 rgba(5, 14, 17, 0.06)
```

> El radio predominante para cards es `12px` (`--radius-lg`), para inputs y CTA `8px` (`--radius-md`). El sistema es conservador en radios: preciso pero no afilado.

### Badges / Chips

```
Padding: 4px 10px
Border-radius: var(--radius-sm) -> 4px
Font-family: var(--font-mono) -> Fragment Mono
Font-size: 12px
Font-weight: 400

Default:
  Background: var(--color-surface) -> #F1F3EF
  Color: var(--color-text-secondary) -> #2A332A

Cyan:
  Background: var(--color-info-bg) -> #E8F5F5
  Color: var(--color-primary) -> #3DD7D7

Rosa:
  Background: #FEEBFB
  Color: var(--color-secondary) -> #F377DC
```

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

```
Padding: 16px 20px
Border-radius: var(--radius-lg) -> 12px
Font-family: var(--font-body) -> Akkurat
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: rgba(253, 254, 251, 0.8) con backdrop-filter blur
Height: 64px aprox
Padding horizontal: 24px
Border-bottom: 1px solid var(--color-border)

Logo:
  #050E11, peso 400, Newsreader serif

Links de nav:
  Color: var(--color-text-secondary) -> #2A332A
  Font-family: var(--font-body) -> Akkurat
  Font-size: 14px
  Font-weight: 500
  Hover: Color var(--color-primary) -> #3DD7D7

CTA del nav:
  Rectángulo cyan #3DD7D7, texto #050E11, 10px 20px, radius 8px
```

---

## 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 (Tailwind v4). 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: 1280px;
```

### 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, grid de 2-3
columnas para cards de características, franjas full-bleed de producto con
captura del dashboard, y secciones de code/snippets con Fragment Mono.
```

### Filosofía de espaciado

Adaline necesita aire para que la serif Newsreader respire y para que los acentos cyan/rosa tengan presencia como datos vivos. 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 verdosas con paneles `#F1F3EF` y franjas de modo oscuro verde `#2A332A` 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 oscuro sobre blanco verdoso, y los acentos cyan/rosa como gestos de datos vivos. Las sombras son casi invisibles.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(5, 14, 17, 0.04);
--shadow-sm: 0 2px 4px 0 rgba(5, 14, 17, 0.06);
--shadow-md: 0 4px 12px 0 rgba(5, 14, 17, 0.06);
--shadow-lg: 0 24px 40px -12px rgba(5, 14, 17, 0.12);
```

> Las sombras usan alpha bajo con el color tibio `#050E11` del sistema. El sitio usa Tailwind v4 con `--tw-shadow` ring shadows; las sombras reales son minimal.

### Niveles de elevación

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

### Radios de borde

```css
--radius-none: 0;
--radius-sm: 4px;    /* badges, chips */
--radius-md: 8px;    /* CTA, inputs (predominante) */
--radius-lg: 12px;   /* cards, bloques */
--radius-xl: 16px;   /* hero blocks, modales */
--radius-full: 9999px; /* circulares */
```

> Los radios son conservadores y precisos, en línea con el tono editorial-tech. El radio predominante para CTA e inputs es `8px` (`--radius-md`), y para cards `12px` (`--radius-lg`). No hay radios generosos ni pills: la marca prefiere esquinas definidas pero suaves.

---

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

### Sí hacer

1. **Usa la serif Newsreader para todo lo display** - es la firma editorial; una serif en peso 400 que se siente como un paper de investigación.
2. **Mantén el canvas blanco verdoso `#FDFEFB`** - el dejo de verde diferencia el sistema de un blanco puro genérico y lo conecta con la paleta natural.
3. **Usa el cyan `#3DD7D7` como acento primary** - links, focus, highlights; se siente como datos vivos, observabilidad en tiempo real.
4. **Combina serif (display) con sans Akkurat (body)** - el contraste serif vs sans es la jerarquía, no el peso.
5. **Usa el rosa `#F377DC` como acento secundario puntual** - un gesto atrevido que rompe la paleta natural verde.
6. **Usa el modo oscuro verde `#2A332A` (no negro)** - mantiene la conexión botánica del sistema en ambos modos.

### 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 pongas la serif en bold** - peso 400 siempre; el bold en serif aplana la jerarquía y borra la firma de paper científico.
3. **No uses negro puro `#000` ni blanco puro `#FFF`** - el sistema usa `#050E11` y `#FDFEFB`; los puros rompen la paleta natural.
4. **No uses el cyan o rosa como fondo de todo el sitio** - son acentos puntuales de datos vivos, no baños de color.
5. **No uses sombras dramáticas ni glassmorphism pesado** - la identidad es flat-first con sombras sutiles; la profundidad viene del contraste.
6. **No uses esquinas afiladas ni pills** - el sistema prefiere radios precisos (8px CTA, 12px cards); los extremos rompen el tono editorial-tech.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — Tailwind v4, breakpoints reales del CSS */
/* sm: */ @media (min-width: 40rem) { }   /* 640px */
/* md: */ @media (min-width: 48rem) { }   /* 768px */
/* lg: */ @media (min-width: 64rem) { }   /* 1024px */
/* xl: */ @media (min-width: 80rem) { }   /* 1280px */
/* 2xl: */ @media (min-width: 96rem) { }  /* 1536px */
```

> El CSS del sitio declara `--breakpoint-sm: 40rem` hasta `--breakpoint-2xl: 96rem`, siguiendo la convención Tailwind v4 en rem.

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegación: logo + menú compacto, CTA compacto
- Grid: 1 columna
- Display H1: reducido (aprox. 48px, no 72px)
- 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: 72px (display-xl)
- Padding de contenedor: 24px
- Sección padding: 80px vertical

### Touch targets (mobile)

- Botones mínimo: 44x44px (el CTA con 10px 20px + 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 un paper de investigación, no como un sitio recortado. Prioriza un titular serif contundente (aunque reducido), los acentos cyan/rosa 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 Adaline.

PALETA: Canvas blanco verdoso #FDFEFB en modo claro, verde oscuro #2A332A en modo
oscuro. Texto #050E11. Acento primary cyan teal #3DD7D7 (datos vivos). Acento
secundario rosa #F377DC. Verde natural #4A6D47. Bordes #E1E6DF.
TIPOGRAFÍA: Display en Newsreader (serif, peso 400, nunca bold). Body en Hanken
Grotesk (sustituto de Akkurat) peso 400. Labels en peso 500. Mono en JetBrains Mono.
ESTILO: Editorial, serif-led, natural-verde, observabilidad. Flat-first con sombras
sutiles. Acentos cyan/rosa como gestos de datos vivos.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Claro (blanco verdoso).
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Debe sentirse como un paper de investigación + SaaS premium, no como un dashboard
- Usa fondo blanco verdoso #FDFEFB y texto #050E11
- Titulares en Newsreader peso 400 (serif, nunca bold), GIGANTES (h1 mínimo 56px)
- Body en Hanken Grotesk peso 400, labels en peso 500
- Acento cyan #3DD7D7 para links, focus y highlights
- Rosa #F377DC como gesto puntual, no como baño
- Responsive, con CTA principal cyan radius 8px
```

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

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

Debe:
- Usar solo tokens del DESIGN.md de Adaline
- Mantener radios de 8px para CTA/inputs, 12px para cards
- Tener versión default, hover, active, focus y disabled
- Sentirse editorial y preciso, no corporativo ni juguetón
- Sombras sutiles (flat-first), border #E1E6DF
- Tipografía: Newsreader 400 para títulos del componente, Hanken Grotesk para labels/body
```

### Prompt: Revisión de consistencia

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

Verifica:
1. Si los titulares display están en Newsreader peso 400 (no bold, no sans)
2. Si el canvas es #FDFEFB (no blanco puro #FFFFFF)
3. Si el cyan #3DD7D7 es el acento primary (no otros azules ni verdes)
4. Si el texto es #050E11 (no negro puro #000)
5. Si los radios son 8px para CTA/inputs, 12px para cards (no pills ni esquinas afiladas)
6. Si hay elementos demasiado fríos o genéricos (grises azulados, negros puros)
```

### Prompt: Variante de campaña

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

Conserva:
- Blanco verdoso #FDFEFB como canvas
- Texto #050E11
- Newsreader peso 400 para display
- Hanken Grotesk para body
- Cyan #3DD7D7 como primary

Puedes variar:
- El acento secundario entre rosa #F377DC, verde #4A6D47 o azure #3A94BA
- El bloque visual de producto (dashboard, traces, evals)
- El balance entre secciones claras y franjas de modo oscuro verde
```

---

## 10. Movimiento (Motion)

Adaline usa motion sutil y editorial, consistente con el tono de paper de investigación. Las transiciones son suaves (200ms) para hover y cambios de estado. 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-precedence="next"` y chunks `_next/static/` visibles), desplegado en Vercel
- **Framework CSS**: Tailwind v4 (CSS-first con `@theme`, variables `--tw-*`, rampas de color `--azure-*`, `--color-accent-*`), sistema de design tokens en `:root`
- **Tipografía**: cuatro fuentes self-hosted vía `@font-face` (31 bloques):
  - **Newsreader** (serif variable, 18 ocurrencias): display de Production Types. Disponible en Google Fonts.
  - **Instrument Serif** (serif, 4 ocurrencias): display alternativo. Disponible en Google Fonts.
  - **Akkurat** (neo-grotesk suiza, 4+3 ocurrencias): body de Lineto. No en Google Fonts.
  - **Fragment Mono** (mono, 5 ocurrencias): specs y labels. No en Google Fonts.
- **Animación**: CSS-first con transitions y `@keyframes` (Tailwind v4 defaults: bounce, ping, pulse, spin). No se detectaron librerías de motion pesadas.
- **3D / WebGL**: no detectado.
- **CDN / assets**: self-hosted en `/_next/static/`, Vercel para deploy
- **Comportamiento**: sitio de marketing de plataforma de observabilidad y evals para agentes IA auto-mejorables, estructura editorial con hero serif display, secciones de características (traces, evals, synthetic data), y enterprise controls al final