Security Data
Pipelines, Made Easy

:root {
  /* Color - crema-blanco + nav oscura + naranja + datos vivos */
  --color-canvas: #F6F3F1;
  --color-surface: #F8F8F8;
  --color-surface-elevated: #FFFFFF;
  --color-nav-dark: #000000;
  --color-ink: #231F20;
  --color-ink-soft: #242424;
  --color-muted: #CCCCCC;
  --color-primary: #F37A0A;       /* naranja signature */
  --color-primary-hover: #F3A45B;
  --color-secondary: #A7FCCD;     /* mint, datos vivos */
  --color-accent: #E2C161;        /* amarillo, warning */
  --color-accent-soft: #A0B5EB;   /* azul soft, info */
  --color-success: #27A367;
  --color-border: #E4E4E7;
  --color-on-primary: #FFFFFF;

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

  /* Scale - peso 400 dominante */
  --f-display-xl: 400 72px/105% var(--font-display);
  --f-display-lg: 400 56px/110% var(--font-display);
  --f-display-md: 400 36px/120% var(--font-display);
  --f-body-md: 400 16px/160% var(--font-body);
  --f-label: 500 14px/140% var(--font-body);

  /* Radius + shadow */
  --radius-lg: 12px;
  --radius-xl: 16px;    /* cards, predominante */
  --radius-pill: 100px; /* CTA */
  --shadow-card: 0 2px 5px #0003;
  --shadow-hover: 0 30px 50px #2424241a;

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

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

@theme {
  --color-canvas: #F6F3F1;
  --color-surface: #F8F8F8;
  --color-nav-dark: #000000;
  --color-ink: #231F20;
  --color-ink-soft: #242424;
  --color-muted: #CCCCCC;
  --color-primary: #F37A0A;
  --color-primary-hover: #F3A45B;
  --color-secondary: #A7FCCD;
  --color-accent: #E2C161;
  --color-accent-soft: #A0B5EB;
  --color-success: #27A367;
  --color-border: #E4E4E7;

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

  --text-display-xl: 72px;
  --text-display-lg: 56px;
  --text-body: 16px;
  --text-label: 14px;

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

  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 100px;

  --shadow-card: 0 2px 5px #0003;
  --shadow-hover: 0 30px 50px #2424241a;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

{
  "color": {
    "canvas": "#F6F3F1",
    "surface": "#F8F8F8",
    "navDark": "#000000",
    "ink": "#231F20",
    "inkSoft": "#242424",
    "muted": "#CCCCCC",
    "primary": "#F37A0A",
    "primaryHover": "#F3A45B",
    "secondary": "#A7FCCD",
    "accent": "#E2C161",
    "accentSoft": "#A0B5EB",
    "success": "#27A367",
    "border": "#E4E4E7"
  },
  "font": {
    "display": { "family": "Hanken Grotesk", "substituteOf": "Untitled Sans (Commercial Type)" },
    "body": { "family": "Hanken Grotesk", "substituteOf": "Untitled Sans" },
    "mono": { "family": "JetBrains Mono", "substituteOf": "ABC Diatype Mono (ABC)" }
  },
  "fontSize": {
    "displayXl": { "px": 72, "weight": 400, "lineHeight": "105%", "tracking": "-0.03em" },
    "displayLg": { "px": 56, "weight": 400, "lineHeight": "110%" },
    "displayMd": { "px": 36, "weight": 400, "lineHeight": "120%" },
    "bodyMd": { "px": 16, "weight": 400, "lineHeight": "160%" },
    "label": { "px": 14, "weight": 500, "lineHeight": "140%" }
  },
  "radius": { "lg": "12px", "xl": "16px", "pill": "100px" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "section": "80px" },
  "shadow": { "card": "0 2px 5px #0003", "hover": "0 30px 50px #2424241a" },
  "motion": { "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "durationFast": "200ms" }
}

---
version: "1.0"
name: "Monad"
description: "Sistema visual de security data pipelines para enterprise: canvas crema-blanco con nav oscura cinematográfica, acento naranja signature (#F37A0A) con verde-mint (#A7FCCD) y amarillo (#E2C161) como familia de datos vivos, tipografía Untitled Sans (commercial) + Untitled Serif para acentos editoriales + ABC Diatype Mono para code. Minimal tech con calor controlado y datos vibrantes."
colors:
  primary: "#F37A0A"
  primary-hover: "#F3A45B"
  secondary: "#A7FCCD"
  accent: "#E2C161"
  accent-soft: "#A0B5EB"
  neutral: "#CCC"
  background: "#F6F3F1"
  surface: "#F8F8F8"
  surface-elevated: "#FFFFFF"
  surface-dark: "#242424"
  surface-black: "#000000"
  text-primary: "#231F20"
  text-secondary: "#242424"
  text-muted: "#CCC"
  text-on-primary: "#FFFFFF"
  text-on-dark: "#F6F3F1"
  border: "#E4E4E7"
  border-subtle: "#F4F4F5"
  success: "#27A367"
  warning: "#E2C161"
  error: "#FF9473"
  info: "#3898EC"
typography:
  display-xl:
    fontFamily: "Untitled Sans"
    fontSize: "72px"
    fontWeight: 400
    lineHeight: "105%"
    letterSpacing: "-0.03em"
  display-lg:
    fontFamily: "Untitled Sans"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "110%"
  display-md:
    fontFamily: "Untitled Sans"
    fontSize: "36px"
    fontWeight: 400
    lineHeight: "120%"
  heading:
    fontFamily: "Untitled Sans"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: "130%"
  body-lg:
    fontFamily: "Untitled Sans"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "160%"
  body-md:
    fontFamily: "Untitled Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "160%"
  body-sm:
    fontFamily: "Untitled Sans"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "150%"
  label:
    fontFamily: "Untitled Sans"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "140%"
  mono:
    fontFamily: "ABC Diatype Mono"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  pill: "100px"
  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.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "14px 28px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.pill}"
    padding: "14px 28px"
  card:
    backgroundColor: "{colors.surface-elevated}"
    borderColor: "{colors.border}"
    rounded: "{rounded.xl}"
    padding: "24px"
---

# DESIGN.md - Monad

> Sistema de diseño extraído de `https://www.monad.com` (sitio de marketing, junio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores observados del HTML + CSS externo del sitio (Webflow, CSS en CDN `website-files.com`, `@font-face` self-hosted). Estados derivados marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Monad se siente como un producto de security que se viste de campaña de diseño. El canvas es crema-blanco `#F6F3F1` (muestreado del hero), no blanco puro: un blanco con un dejo de calidez que le da al sistema una sensación de papel de producto premium, no de SaaS frío. Sobre ese crema cae un texto negro tibio `#231F20` (26 ocurrencias en HTML), no negro puro, que se siente como tinta de publicación editorial técnica.

La personalidad aparece en el contraste entre la limpieza del canvas crema y los acentos vibrantes de datos. El naranja `#F37A0A` (21 ocurrencias en HTML, 12 en CSS) es el acento signature de marca: un naranja cálido que se siente como alerta de security, energía de pipeline y fuego de datos en movimiento. El verde-mint `#A7FCCD` (8 ocurrencias en CSS) y el amarillo `#E2C161` (6 ocurrencias) aparecen como familia de datos vivos: mint para success/healthy, amarillo para warning/highlight. El azul `#A0B5EB` (6 ocurrencias) suaviza la paleta como acento frio puntual.

La nav superior es negra `#000000`, creando un contraste cinematográfico con el canvas crema del hero. La tipografía **Untitled Sans** (commercial, self-hosted) para todo el sistema con peso 400 dominante (23 ocurrencias), acompañada por **Untitled Serif** para acentos editoriales y **ABC Diatype Mono** para code y specs técnicos.

La traducción digital debe conservar esa mezcla de security enterprise y campaña de diseño: canvas crema-blanco, nav oscura cinematográfica, acento naranja signature, familia de datos vivos (mint, amarillo, azul), Untitled Sans para todo, y un sistema que se siente como un producto de security premium con personalidad de diseño, no un SaaS genérico.

**Palabras clave de personalidad**: security, datos-vivos, naranja-fuego, crema, cinematográfico-nav, enterprise-premium, pipeline

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

**Modo preferido**: claro (crema-blanco con nav oscura)

**Nivel de ornamentación**: medio (tipografía commercial, acentos vibrantes, nav cinematográfica, sin decoración superficial)

**Audiencia visual objetivo**: equipos de security enterprise que buscan data pipelines manajados, que aprecian un sistema premium con personalidad de diseño

---

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

La paleta real del sitio se organiza con un acento naranja signature más una familia de datos vivos (mint, amarillo, azul) y neutros tibios. El canvas es crema-blanco y la nav es negra, creando un contraste cinematográfico.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Naranja signature | `--color-primary` | `#F37A0A` | Acento primary, CTA, marca, pipeline (21 ocurrencias HTML, 12 CSS) | `#FFFFFF` |
| Naranja hover | `--color-primary-hover` | `#F3A45B` | Hover del naranja (`#F3A45B` real del CSS, 2 ocurrencias) | `#231F20` |
| Verde-mint | `--color-secondary` | `#A7FCCD` | Datos vivos, success, healthy (8 ocurrencias CSS) | `#231F20` |
| Mint medio | `--color-mint-medium` | `#79ECB4` | Variante mint (3 ocurrencias CSS) | `#231F20` |
| Amarillo | `--color-accent` | `#E2C161` | Warning, highlight, datos (6 ocurrencias CSS) | `#231F20` |
| Azul soft | `--color-accent-soft` | `#A0B5EB` | Acento frío suave, info (6 ocurrencias CSS) | `#231F20` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo crema-blanco | `--color-bg` | `#F6F3F1` | Fondo general (muestreado del hero) |
| Fondo secundario | `--color-surface` | `#F8F8F8` | Secciones alternas (`#F8F8F8` real, 6 ocurrencias CSS) |
| Superficie elevada | `--color-surface-elevated` | `#FFFFFF` | Cards, modales (`#FFF` real, 17 ocurrencias CSS) |
| Nav oscura | `--color-surface-dark` | `#000000` | Nav superior cinematográfica (`#000` real, 12 ocurrencias CSS) |
| Surface dark tibia | `--color-surface-dark-warm` | `#242424` | Superficie oscura tibia (`#242424` real, 18 ocurrencias HTML) |
| Surface dark medium | `--color-surface-dark-medium` | `#302F2C` | Variante oscura (`#302F2C` real, 2 ocurrencias CSS) |
| Borde claro | `--color-border` | `#E4E4E7` | Bordes sutiles (`#E4E4E7` real del HTML) |
| Borde sutil | `--color-border-subtle` | `#F4F4F5` | Hairlines (`#F4F4F5` real del HTML) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto primary | `--color-text` | `#231F20` | Headings, body (`#231F20` real, 26 ocurrencias HTML) |
| Texto secondary | `--color-text-secondary` | `#242424` | Texto alternativo (`#242424` real, 18 ocurrencias HTML) |
| Texto muted | `--color-text-muted` | `#CCC` | Metadata (`#CCC` real, 7 ocurrencias CSS) |
| Texto on-primary | `--color-text-on-primary` | `#FFFFFF` | Texto sobre naranja CTA |
| Texto on-dark | `--color-text-on-dark` | `#F6F3F1` | Texto sobre nav oscura |

### Colores de estado

> El sitio expone algunos colores de estado reales en la familia de datos vivos.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#27A367` | `#FFFFFF` |
| Advertencia | `--color-warning` | `#E2C161` | `#231F20` |
| Error | `--color-error` | `#FF9473` | `#231F20` |
| Info | `--color-info` | `#3898EC` | `#FFFFFF` |

> `#27A367` (success) es real del CSS (7 ocurrencias). `#FF9473` (error) es real del CSS (3 ocurrencias). `#3898EC` (info) es real del CSS (7 ocurrencias, es el azul Webflow default usado como link). `#E2C161` (warning) es el amarillo de marca.

---

## 3. Reglas de Tipografía

```css
/* Display + Body + Headings + Labels: Untitled Sans (commercial, self-hosted,
   8+4 ocurrencias) -> sustituto Google: Hanken Grotesk (neo-grotesk humanista
   con masa similar y humanismo controlado) */
--font-display: 'Hanken Grotesk', 'Untitled Sans', system-ui, sans-serif;
--font-body: 'Hanken Grotesk', 'Untitled Sans', system-ui, sans-serif;

/* Serif: Untitled Serif (commercial, self-hosted, 2 @font-face blocks) ->
   sustituto Google: Fraunces (serif de display con peso 400, óptica variable) */
--font-serif: 'Fraunces', 'Untitled Serif', Georgia, serif;

/* Mono: ABC Diatype Mono (commercial, self-hosted, 4 ocurrencias) ->
   sustituto Google: JetBrains Mono (mono geometrica con peso 400) */
--font-mono: 'JetBrains Mono', 'ABC Diatype 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=Hanken+Grotesk:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga tres fuentes commercial self-hosted vía `@font-face` (8 bloques):
- **Untitled Sans** (neo-grotesk humanista, 8+4 ocurrencias): la voz principal del sitio, usada para todo lo display, body, headings y labels. No en Google Fonts. Es de Commercial Type.
- **Untitled Serif** (serif, 2 `@font-face` blocks): serif para acentos editoriales y display alternativo. No en Google Fonts. Es de Commercial Type.
- **ABC Diatype Mono** (mono, 4 ocurrencias): mono para code, specs y labels técnicos. No en Google Fonts. Es de ABC (Art Branding Concepts).

`Hanken Grotesk` sustituye a Untitled Sans: es una neo-grotesk humanista con pesos 300-700, masa similar, y un humanismo que encaja con el tono security-premium de Monad. `Fraunces` sustituye a Untitled Serif: es una serif de display con peso 400, óptica variable. `JetBrains Mono` sustituye a ABC Diatype Mono: es una mono geometrica con peso 400.

### Escala tipográfica

> Token · px · line-height · peso · uso. Valores reales del CSS (font-weight: 400 dominante con 23 ocurrencias, 500 con 5, 700 con 4).

| Token | px equiv. | Line height | Weight | Uso |
|-------|-----------|-------------|--------|-----|
| `--f-display-xl` | 72px | 105% | 400 | Hero headline (Untitled Sans) |
| `--f-display-lg` | 56px | 110% | 400 | Display secundario |
| `--f-display-md` | 36px | 120% | 400 | Titular de sección |
| `--f-heading` | 24px | 130% | 500 | Subtítulo |
| `--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 |
| `--f-mono` | 14px | 140% | 400 | Specs, code (ABC Diatype Mono) |

### Pesos tipográficos

```css
--font-light: 300;     /* 1 ocurrencia, raro */
--font-regular: 400;   /* 23 ocurrencias, DOMINANTE: body, display */
--font-medium: 500;    /* 5 ocurrencias, headings, labels */
--font-semibold: 600;  /* 1 ocurrencia, énfasis */
--font-bold: 700;      /* 4 ocurrencias, micro-énfasis */
```

> El peso 400 es el dominante absoluto (23 ocurrencias). Untitled Sans siempre va en peso 400 para display. La jerarquía se logra por tamaño y por el contraste sans (display/body) vs serif (acentos editoriales) vs mono (code), no por peso agresivo.

### Letter spacing

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

**Regla clave**: Untitled Sans siempre va en peso 400 para display, nunca en bold. La jerarquía se logra por tamaño y por el contraste sans vs serif (acentos) vs mono (code). El cuerpo en peso 400 nunca compite con el headline; la marca gana por contraste tipográfico y por el acento naranja que aparece como fuego de datos.

---

## 4. Estilos de Componentes

### Botones

**Primario (naranja signature pill)**
```
Background: var(--color-primary) -> #F37A0A
Color de texto: var(--color-text-on-primary) -> #FFFFFF
Padding: 14px 28px
Border-radius: 100px (pill completo, 10 ocurrencias en CSS)
Font-family: var(--font-body) -> Untitled Sans
Font-weight: 500
Font-size: 14px
Transicion: background-color 200ms ease, transform 200ms ease

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

Active/Pressed:
  Transform: translateY(0)

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

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

> El radio del CTA es `100px` (pill completo, 10 ocurrencias en CSS), en línea con el tono security-premium amigable. No es rectángulo ni esquina afilada: es un pill suave que se siente accesible.

**Secundario (outline)**
```
Background: transparent
Color de texto: var(--color-text) -> #231F20
Border: 1px solid var(--color-border) -> #E4E4E7
Border-radius: 100px
Padding: 14px 28px

Hover:
  Background: var(--color-surface) -> #F8F8F8
  Border-color: var(--color-text) -> #231F20
```

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

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

### Inputs de texto

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border) -> #E4E4E7
Border-radius: var(--radius-lg) -> 12px
Padding: 12px 16px
Font-family: var(--font-body) -> Untitled Sans
Font-size: 16px
Font-weight: 400
Color: var(--color-text) -> #231F20
Placeholder: var(--color-text-muted) -> #CCC

Focus:
  Border-color: var(--color-primary) -> #F37A0A
  Box-shadow: 0 0 0 3px rgba(243, 122, 10, 0.18)
  Outline: none
```

### Cards

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border) -> #E4E4E7
Border-radius: var(--radius-xl) -> 16px (13 ocurrencias en CSS, predominante)
Padding: 24px
Box-shadow: 0 2px 5px #0003 (6 ocurrencias reales del CSS)

Hover (si es clickeable):
  Box-shadow: 0 30px 50px #2424241a (2 ocurrencias reales, sombra larga suave)
```

> El radio de cards es `16px` (`--radius-xl`, 13 ocurrencias), generoso y suave. La sombra `0 2px 5px #0003` (6 ocurrencias) es la sombra default de cards, y `0 30px 50px #2424241a` (2 ocurrencias) es la sombra hover larga que da una sensación de flotación cinematográfica.

### Badges / Chips

```
Padding: 4px 12px
Border-radius: 100px (pill)
Font-family: var(--font-mono) -> ABC Diatype Mono
Font-size: 12px
Font-weight: 400

Default:
  Background: var(--color-surface) -> #F8F8F8
  Color: var(--color-text) -> #231F20

Mint:
  Background: rgba(167, 252, 205, 0.2)
  Color: #27A367

Orange:
  Background: rgba(243, 122, 10, 0.12)
  Color: var(--color-primary) -> #F37A0A
```

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

```
Padding: 16px 20px
Border-radius: 12px
Font-family: var(--font-body) -> Untitled Sans
Font-size: 14px

Success: background rgba(167,252,205,0.2), color #27A367
Warning: background rgba(226,193,97,0.2), color #E2C161 (texto #231F20)
Error:   background rgba(255,148,115,0.2), color #FF9473
Info:    background rgba(160,181,235,0.2), color #A0B5EB
```

### Navegación / Header

```
Background: var(--color-surface-dark) -> #000000 (nav cinematográfica oscura)
Height: 64px aprox
Padding horizontal: 24px
Border-bottom: none (transición limpia al hero crema)

Logo:
  Blanco #FFFFFF sobre nav oscura, peso 400, Untitled Sans

Links de nav:
  Color: rgba(255, 255, 255, 0.7) sobre nav oscura
  Font-family: var(--font-body) -> Untitled Sans
  Font-size: 14px
  Font-weight: 500
  Hover: Color #FFFFFF

CTA del nav:
  Pill naranja #F37A0A, texto blanco, 14px 28px, radius 100px
```

> La nav es negra `#000000`, creando un contraste cinematográfico con el canvas crema-blanco del hero. Es la firma de profondeur de Monad: la nav oscura "flota" sobre el contenido claro, como una barra de control de security.

---

## 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 (Webflow default). 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 (Webflow default)
Gutter: 16px
Margin lateral: 24px en desktop, 16px en tablet, 12px en mobile
Patrones base: hero a una columna con titular display sobre canvas crema
con nav oscura superior, grid de 2-3 columnas para features (Managed Data
Pipelines, In-flight Transforms, Rule-Based Routing), secciones de FAQ
con accordion, y franjas de producto con captura del dashboard.
```

### Filosofía de espaciado

Monad necesita aire para que la tipografía Untitled Sans respire y para que los acentos naranja y mint tengan presencia de datos vivos. No es una marca de dashboards densos: el espacio sirve para que cada titular en peso 400 se lea como una decisión de security premium, no como ruido. Alterna secciones crema-blanco con paneles `#F8F8F8` y la nav oscura superior como contraste cinematográfico; ese cambio de ritmo 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 suaves**. Su sensación premium no viene de sombras dramáticas, sino de la tipografía Untitled Sans, el contraste texto tibio sobre crema, y los acentos vibrantes como datos vivos. Las sombras son suaves y cortas.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-card: 0 2px 5px #0003;           /* 6 ocurrencias reales */
--shadow-hover: 0 30px 50px #2424241a;    /* 2 ocurrencias reales */
--shadow-focus: 0 0 3px 1px #3898ec;      /* 2 ocurrencias reales (focus blue) */
```

> Las sombras usan hex con alpha (`#0003` = `rgba(0,0,0,0.2)`, `#2424241a` = `rgba(36,36,36,0.1)`). `--shadow-hover` (30px blur) es la sombra cinematográfica de cards en hover: larga y suave, da una sensación de flotación teatral.

### Niveles de elevación

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Secciones, fondos |
| 1 - Card | `--shadow-card` | Cards informativas (0 2px 5px) |
| 2 - Hover | `--shadow-hover` | Cards en hover (0 30px 50px, cinematográfica) |
| 3 - Focus | `--shadow-focus` | Focus rings (0 0 3px 1px azul) |

### Radios de borde

```css
--radius-none: 0;
--radius-sm: 4px;     /* elementos pequeños (4 ocurrencias) */
--radius-md: 8px;     /* elementos medianos (7 ocurrencias) */
--radius-lg: 12px;    /* inputs, elementos medianos (11 ocurrencias) */
--radius-xl: 16px;    /* cards (13 ocurrencias, predominante) */
--radius-pill: 100px; /* CTA, badges (10 ocurrencias) */
--radius-full: 50%;   /* circulares (19 ocurrencias) */
```

> Los radios son generosos y variados: `16px` para cards (predominante), `100px` para CTA (pill completo), `50%` para circulares. El sistema es amigable y accesible, no afilado ni corporativo.

---

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

### Sí hacer

1. **Usa el naranja `#F37A0A` como acento signature de marca** - CTA, links, highlight; es el fuego de datos en movimiento.
2. **Mantén el canvas crema-blanco `#F6F3F1`** - el dejo de calidez diferencia el sistema de un blanco puro genérico.
3. **Usa la nav oscura `#000000` como contraste cinematográfico** - flota sobre el canvas crema, como una barra de control de security.
4. **Combina Untitled Sans (display) con ABC Diatype Mono (code)** - el contraste sans vs mono es parte del lenguaje developer-security.
5. **Usa la familia de datos vivos (mint `#A7FCCD`, amarillo `#E2C161`, azul `#A0B5EB`)** - cada color representa un estado de datos: healthy, warning, info.
6. **Usa pills `100px` para CTA y `16px` para cards** - los radios suaves son parte del tono accessible-premium.

### No hacer

1. **No uses negro puro `#000` para texto sobre canvas claro** - el sistema usa `#231F20` (negro tibio); el puro es solo para nav.
2. **No uses blanco puro `#FFF` como canvas** - el sistema usa `#F6F3F1` (crema-blanco); el puro rompe la calidez.
3. **No pongas Untitled Sans en bold (700) para display** - peso 400 siempre; el bold aplana la jerarquía editorial.
4. **No uses el naranja o mint como fondo de todo el sitio** - son acentos de datos vivos, no baños de color.
5. **No uses sombras dramaticas material** - la identidad usa sombras suaves (`0 2px 5px`) y una cinematográfica hover (`0 30px 50px`), no blur pesado.
6. **No introduzcas verdes banking ni azules corporativos genéricos** - la paleta es naranja + familia de datos vivos (mint, amarillo, azul soft); un genérico destruye la personalidad.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — Webflow breakpoints */
/* sm: */ @media (max-width: 991px) { }   /* tablet */
/* xs: */ @media (max-width: 767px) { }   /* mobile */
```

> Webflow usa breakpoints max-width (991px tablet, 767px mobile). Por encima de 991px, desktop completo.

### Cambios por breakpoint

**Mobile (< 767px)**
- Navegación: logo + menú hamburguesa
- Grid: 1 columna
- Display H1: reducido (aprox. 40px, no 72px)
- Padding de contenedor: 16px
- Cards: apiladas, una por fila
- Nav oscura: conservada pero compacta

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

**Desktop (> 991px)**
- Navegación: full nav oscura visible
- Grid: 3 columnas en features, 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 pill CTA con 14px 28px + 14px font cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px

### Filosofía responsive

Mobile-first con ambición de security premium. En pequeño formato la marca debe seguir sintiéndose como un producto de enterprise premium, no como un sitio recortado. Prioriza un titular Untitled Sans contundente (aunque reducido), los acentos naranja/mint como datos vivos, y un CTA pill claro por viewport. La nav oscura se conserva como contraste cinematográfico.

---

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

PALETA: Canvas crema-blanco #F6F3F1. Nav oscura #000000 (cinematográfica).
Texto negro tibio #231F20. Acento primary naranja #F37A0A (fuego de datos).
Familia de datos vivos: mint #A7FCCD (success), amarillo #E2C161 (warning),
azul soft #A0B5EB (info). Verde success #27A367.
TIPOGRAFÍA: Display + body en Hanken Grotesk (sustituto de Untitled Sans) peso 400.
Serif en Fraunces (sustituto de Untitled Serif) para acentos editoriales.
Mono en JetBrains Mono (sustituto de ABC Diatype Mono).
ESTILO: Security enterprise premium, datos vivos, nav cinematográfica.
Flat-first con sombras suaves. Pills 100px para CTA, 16px para cards.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Claro (crema-blanco con nav oscura).
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Debe sentirse como un producto de security enterprise premium, no como un SaaS
- Usa fondo crema-blanco #F6F3F1 y texto #231F20
- Nav oscura #000000 como contraste cinematográfico
- Titulares en Hanken Grotesk peso 400, no bold
- Acento naranja #F37A0A para CTA, links y highlight
- Familia de datos vivos: mint #A7FCCD, amarillo #E2C161, azul #A0B5EB
- Pills 100px para CTA, 16px para cards
- Responsive, con CTA principal naranja pill
```

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

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

Debe:
- Usar solo tokens del DESIGN.md de Monad
- Mantener radios de 100px para CTA, 16px para cards, 12px para inputs
- Tener versión default, hover, active, focus y disabled
- Sentirse premium y accessible, no corporativo ni frío
- Sombras suaves (0 2px 5px #0003), hover cinematográfico (0 30px 50px)
- Tipografía: Hanken Grotesk 400 para UI, JetBrains Mono para specs
```

### Prompt: Revisión de consistencia

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

Verifica:
1. Si el canvas es #F6F3F1 (no blanco puro #FFFFFF)
2. Si el texto es #231F20 (no negro puro #000, excepto nav)
3. Si el naranja #F37A0A es el acento primary (no otros naranjas ni rojos)
4. Si los titulares están en peso 400 (no bold 700)
5. Si los CTA son pills 100px (no rectángulos ni esquinas afiladas)
6. Si la familia de datos vivos (mint, amarillo, azul) se usa con intención
```

### Prompt: Variante de campaña

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

Conserva:
- Crema-blanco #F6F3F1 como canvas
- Nav oscura #000000
- Hanken Grotesk peso 400 para display
- Naranja #F37A0A como primary

Puedes variar:
- El acento secundario entre mint #A7FCCD, amarillo #E2C161 o azul #A0B5EB
- El bloque visual de producto (dashboard, pipeline, arquitectura)
- El balance entre secciones crema y nav oscura
```

---

## 10. Movimiento (Motion)

Monad usa motion sutil y premium, consistente con el tono security enterprise. Las transiciones son suaves (200ms) para hover y cambios de estado. Webflow usa interactions nativas para scroll animations y reveals.

**Nivel de motion**: sutil-premium

**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, box-shadow

**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)
- Sombra hover cinematográfica en cards (transición de `0 2px 5px` a `0 30px 50px`)

```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-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**: Webflow (CMS, CSS en CDN `cdn.prod.website-files.com`, clases `w-*` y IDs `64eccd375717312326d818c7` visibles)
- **Framework CSS**: CSS custom de Webflow con variables `--_text-style-*` (sistema de tipografía Webflow), sin Tailwind
- **Tipografía**: tres fuentes commercial self-hosted vía `@font-face` (8 bloques):
  - **Untitled Sans** (neo-grotesk humanista, 8+4 ocurrencias): voz principal de Commercial Type. No en Google Fonts.
  - **Untitled Serif** (serif, 2 `@font-face` blocks): acentos editoriales de Commercial Type. No en Google Fonts.
  - **ABC Diatype Mono** (mono, 4 ocurrencias): specs y code de ABC. No en Google Fonts.
- **Animación**: Webflow interactions nativas (scroll animations, reveals) + CSS transitions. No se detectaron librerías de motion pesadas.
- **3D / WebGL**: no detectado.
- **CDN / assets**: `cdn.prod.website-files.com` para CSS, JS e imágenes
- **Comportamiento**: sitio de marketing de security data pipelines para enterprise, estructura editorial con hero display sobre canvas crema con nav oscura, grid de features (Managed Data Pipelines, In-flight Transforms, Rule-Based Routing), sección de FAQ con accordion, y CTA final