AI infrastructure that developers love

:root {
  /* color */
  --canvas: #181818;
  --canvas-2: #212525;
  --ink: #DDFFDC;
  --ink-soft: #D1D1D1;
  --muted: #94AB94;
  --primary: #7FEE64;
  --secondary: #DDFFDC;
  --tertiary: #37582F;
  --border: #464646;
  --btn-text: #000000;

  /* type (Goga -> Space Grotesk; Inter and Fira Mono are real) */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Mono", ui-monospace, monospace;

  /* shape */
  --btn-radius: 9999px;
  --card-radius: 16px;
  --shadow-nav: 0 16px 48px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.18);
  --shadow-glow: 0 0 48px rgba(127, 238, 100, 0.22);
}

@theme {
  --color-ground: #181818;
  --color-surface: #212525;
  --color-brand: #7FEE64;
  --color-brand-pale: #DDFFDC;
  --color-brand-deep: #37582F;
  --color-text-strong: #DDFFDC;
  --color-text-soft: #D1D1D1;
  --color-text-muted: #94AB94;
  --color-border: #464646;
  --color-on-brand: #000000;

  /* Goga -> Space Grotesk (Google substitute); Inter and Fira Mono are real */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fira Mono", ui-monospace, monospace;

  --radius-pill: 9999px;
  --radius-panel: 16px;
  --shadow-nav: 0 16px 48px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.18);
}

{
  "name": "Modal",
  "theme": "dark",
  "colorFamily": "green",
  "sourceUrl": "https://modal.com/",
  "color": {
    "primary": "#7FEE64",
    "primaryHover": "#DDFFDC",
    "secondary": "#DDFFDC",
    "accent": "#37582F",
    "background": "#181818",
    "surface": "#212525",
    "textPrimary": "#DDFFDC",
    "textSecondary": "#D1D1D1",
    "muted": "#94AB94",
    "border": "#464646",
    "onPrimary": "#000000"
  },
  "font": {
    "display": "Space Grotesk",
    "displayOriginal": "Goga (proprietary, Typekit)",
    "body": "Inter",
    "mono": "Fira Mono"
  },
  "radius": { "sm": "8px", "md": "16px", "lg": "24px", "full": "9999px" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "40px", "section": "64px" },
  "shadow": {
    "nav": "0 16px 48px rgba(0,0,0,0.25)",
    "card": "0 18px 40px rgba(0,0,0,0.18)",
    "glow": "0 0 48px rgba(127,238,100,0.22)"
  }
}

---
version: "1.0"
name: "Modal"
description: "Sistema de infraestructura AI con presencia nocturna, tipografia de producto muy controlada y un verde electrico que convierte el rendimiento tecnico en una promesa visible, casi escenica."
colors:
  primary: "#7FEE64"
  primary-hover: "#DDFFDC"
  primary-active: "#75D95C" # derivado para completar el sistema
  secondary: "#DDFFDC"
  accent: "#37582F"
  accent-soft: "#4D614C"
  neutral: "#181818"
  background: "#181818"
  surface: "#212525"
  surface-brand: "#222D20"
  text-primary: "#DDFFDC"
  text-secondary: "#D1D1D1"
  text-muted: "#94AB94"
  text-on-primary: "#000000"
  text-on-secondary: "#181818"
  border: "#464646"
  border-subtle: "#5D5D5D"
  success: "#7FEE64"
  success-bg: "#1D231C"
  warning: "#FFAB5E" # derivado desde la familia de tokens observada
  warning-bg: "#2F271F" # derivado para completar el sistema
  error: "#CB5F5F" # derivado desde la familia semantica observada
  error-bg: "#2E2121" # derivado para completar el sistema
  info: "#4B73FF" # derivado para completar el sistema
  info-bg: "#1E2433" # derivado para completar el sistema
typography:
  display-lg:
    fontFamily: "Goga"
    fontSize: "64px"
    fontWeight: 500
    lineHeight: "64px"
    letterSpacing: "0em"
  body-md:
    fontFamily: "Inter Variable"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  label-md:
    fontFamily: "Inter Variable"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "20px"
    letterSpacing: "0em"
rounded:
  sm: "8px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  gap: "16px"
  section-padding: "64px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "9px 21px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.secondary}"
    borderColor: "#DDFFDC4D"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "8px 20px"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "24px"
---

# DESIGN.md - Modal

> Sistema de diseno extraido de `https://modal.com/` a partir de la homepage publica, sus hojas CSS compiladas, sus fuentes servidas por `modal-cdn.com` y el kit tipografico cargado desde Adobe Typekit.
> La identidad central de color, modo y tipografia sale de valores observados.
> Los estados semanticos que no aparecen completos en la homepage se completan con derivados marcados.

---

## 1. Tema Visual y Atmosfera

Modal se presenta como una plataforma tecnica, pero rechaza la estetica fria de consola gris sobre azul.
Su presencia principal es negra, profunda y escenica.
Encima coloca un verde electrico casi biologico que transmite energia disponible, rendimiento y activacion inmediata.
El resultado no parece una consultora enterprise.
Parece una pieza de producto lista para demostrar poder.

La composicion visible trabaja con un contraste muy controlado.
La navegacion es una capsula oscura suspendida.
El titular usa una display propia con curvas amplias y un ritmo cercano al branding de producto de nueva generacion.
El copy de apoyo baja a una sans variable mas funcional.
La marca no compite entre maximalismo y minimalismo.
Se queda en un punto intermedio: fondo oscuro, pocas decisiones cromaticas, mucha confianza en escala tipografica y brillo localizado.

Digitalmente, el sistema debe sentirse rapido incluso en reposo.
La sensacion de velocidad no viene de llenar la interfaz de movimiento, sino de reducir friccion.
Los CTAs tienen volumen cero y contraste total.
Los contenedores parecen precisos.
Los verdes nunca se ensucian con grises calidos.
La superficie es casi mineral.
El acento, en cambio, es vivo y respirable.

Este lenguaje visual funciona especialmente bien para un producto que necesita vender infraestructura sin parecer burocracia.
Hay inteligencia en como se modula la dureza del negro:
el fondo base es `#181818`, la navegacion se separa hacia `#212525`, los bordes usan valores medios muy sobrios, y el verde protagonista queda libre para actuar como firma.

**Palabras clave de personalidad**: preciso, nocturno, tecnico, elastico, optimista, performante, confiable

**Densidad del layout**: comfortable a compacta, con heroes grandes y modulos aireados

**Modo preferido**: oscuro

**Nivel de ornamentacion**: medio; la ornamentacion existe en el glow verde, en el relief del hero y en la capsula de navegacion, no en decoracion gratuita

**Audiencia visual objetivo**: equipos de AI, infraestructura, research aplicada y developers que valoran tooling serio con lenguaje de producto contemporaneo

---

## 2. Paleta de Colores y Roles Semanticos

La paleta observada se organiza en tres capas.
Primero, un negro-carbon y un gris grafito construyen la escena.
Segundo, un blanco verdoso y una escala gris clara sostienen lectura, bordes y jerarquia secundaria.
Tercero, un verde electrico de alta saturacion aparece como CTA, firma y highlight.
No hay una familia grande de acentos compitiendo entre si en la homepage.
El sistema vive de un unico gesto cromatico fuerte y varias densidades de ese mismo universo verde.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Verde electrico | `--color-primary` | `#7FEE64` | CTA principal, firma de marca, subrayados clave, puntos de atraccion | `#000000` |
| Verde electrico hover | `--color-primary-hover` | `#DDFFDC` | Hover real del boton primario dark en marketing | `#000000` |
| Verde activo | `--color-primary-active` | `#75D95C` | Estado derivado para pressed y toggles | `#000000` |
| Verde soporte oscuro | `--color-accent` | `#37582F` | Focus rings, bordes activos, chips verdes oscuros | `#DDFFDC` |
| Verde soporte medio | `--color-accent-soft` | `#4D614C` | Overlay de apoyo, labels secundarios, fondos de estado leve | `#DDFFDC` |
| Verde atmosferico | `--color-secondary` | `#DDFFDC` | Texto premium, botones secundarios, brillo de copy | `#181818` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo base | `--color-background` | `#181818` | Lienzo principal del sitio y del hero |
| Superficie elevada | `--color-surface` | `#212525` | Capsula de navegacion, cards oscuras, paneles sobre fondo |
| Superficie de sistema | `--color-surface-brand` | `#222D20` | Estados activos sutiles, fondos brand-muted, overlays derivados |
| Superficie offset | `--color-surface-offset` | `#222222` | Tooltips y paneles opacos detectados en el sistema |
| Borde fuerte | `--color-border` | `#464646` | Inputs, cards, contornos funcionales |
| Borde sutil | `--color-border-subtle` | `#5D5D5D` | Separadores, divisores, lineas de baja prioridad |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso | Contraste sobre fondo base |
|--------|-------------|-----|-----|-----------------------------|
| Texto principal hero | `--color-text-primary` | `#DDFFDC` | Headings visibles, nav items, CTA secundarios | `16.41:1` |
| Texto base UI | `--color-text-secondary` | `#D1D1D1` | Body copy, listas, footers, cards | `11.63:1` |
| Texto muted | `--color-text-muted` | `#94AB94` | Metadata, logos menos prioritarios, captions | `7.07:1` |
| Texto sobre primario | `--color-text-on-primary` | `#000000` | Boton Get Started, marcas sobre verdes vivos | `14.32:1` |
| Texto sobre surface | `--color-text-on-surface` | `#DDFFDC` | UI sobre `#212525` | `14.32:1` |

### Colores de estado

> La homepage no expone todos los estados semanticos de forma sistematica.
> Se completan usando familias reales presentes en el CSS compilado.

| Estado | Variable CSS | Hex | Uso | Nota |
|--------|-------------|-----|-----|------|
| Exito | `--color-success` | `#7FEE64` | Confirmaciones, progreso validado | real de marca |
| Exito bg | `--color-success-bg` | `#1D231C` | Toasts de exito y badges suaves | derivado para completar el sistema |
| Advertencia | `--color-warning` | `#FFAB5E` | Warnings suaves, quotas y alertas | derivado desde familia naranja observada |
| Advertencia bg | `--color-warning-bg` | `#2F271F` | Surface warning | derivado para completar el sistema |
| Error | `--color-error` | `#CB5F5F` | Error field, destructive messaging | derivado desde familia roja observada |
| Error bg | `--color-error-bg` | `#2E2121` | Surface error | derivado para completar el sistema |
| Info | `--color-info` | `#4B73FF` | Tips, onboarding, docs callouts | derivado para completar el sistema |
| Info bg | `--color-info-bg` | `#1E2433` | Fondo informativo oscuro | derivado para completar el sistema |

### Escala verde observada

| Token observado | Hex | Uso visible o sistemico |
|----------------|-----|-------------------------|
| `--color-c-green-10` | `#222D20` | Fondo brand-muted, capas activas profundas |
| `--color-c-green-20` | `#2D4327` | Base oscura para superficies derivadas |
| `--color-c-green-30` | `#37582F` | Focus ring del boton marketing |
| `--color-c-green-40` | `#416E36` | Paso medio de apoyo para bordes vivos |
| `--color-c-green-50` | `#4C833E` | Tinte intermedio para escalas |
| `--color-c-green-60` | `#569846` | Hover/active derivados |
| `--color-c-green-70` | `#60AE4D` | Indicadores y barras |
| `--color-c-green-80` | `#6AC355` | Estados high-emphasis |
| `--color-c-green-90` | `#75D95C` | Pressed derivado cercano al CTA |
| `--color-c-green-100` | `#7FEE64` | CTA principal y acento dominante |

### Regla de uso cromatico

El verde vivo debe aparecer como accion o como declaracion.
No debe cubrir grandes masas continuas salvo momentos heroicos o glows controlados.
La mayor parte del producto debe permanecer en negros, grises carbon y textos verdes muy palidos.
Cuando el sistema se llena de mucho verde medio, pierde precision.

---

## 3. Reglas de Tipografia

La homepage de Modal combina dos registros reales y un tercero de soporte.
`Goga` resuelve display.
`Inter Variable` resuelve cuerpo y casi toda la interfaz.
`Fira Mono` queda disponible como tono tecnico y de tooling.
Adicionalmente, la pagina carga un kit de Adobe con `degular`, `degular-display` y `degular-text`, pero en la homepage analizada su uso visible no se pudo detectar con certeza.

```css
/* Display real observado en marketing */
--font-heading: "Goga", ui-sans-serif, system-ui, sans-serif;

/* Sans funcional real observada en body y UI */
--font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;

/* Mono real detectada en el bundle */
--font-mono: "Fira Mono", ui-monospace, monospace;

/* Kit cargado pero no verificable como visible en la homepage */
--font-alt-brand: "degular", sans-serif;
--font-alt-display: "degular-display", sans-serif;
--font-alt-text: "degular-text", sans-serif;
```

**Carga real detectada**

```html
<link rel="stylesheet" href="https://use.typekit.net/jcd8ppx.css">
<style>
  @font-face {
    font-family: "Inter Variable";
    src: url("https://modal-cdn.com/fonts/inter-variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
  }

  @font-face {
    font-family: "Inter Variable";
    src: url("https://modal-cdn.com/fonts/inter-variable-italic.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: italic;
  }

  @font-face {
    font-family: "Goga";
    src: url("https://modal-cdn.com/fonts/Goga-VariableVF.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
  }
</style>
```

**Nota de sustitucion tipografica**

`Goga` es una display propietaria de Modal, servida via Adobe Typekit y `modal-cdn.com`.
No esta en Google Fonts, asi que no renderiza en una pagina autocontenida.
Para la pagina de inspiracion se sustituye por `Space Grotesk` (grotesca geometrica con caracter tecnico y dev),
la familia mas cercana por masa ancha, apertura geometrica y tono de producto contemporaneo.

`Original: Goga -> HTML: Space Grotesk (Google substitute)`

`Inter` y `Fira Mono` son las fuentes reales del sitio y si estan en Google Fonts, asi que se usan sin sustituir.
La identidad central (display propia + sans funcional + mono tecnica) se conserva; solo cambia el portador del display.

### Escala tipografica observada y completada

| Token | rem | px | Line height | Weight | Uso |
|------|-----|----|-------------|--------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | 400 | metadata, source rails, captions |
| `--text-sm` | 0.875rem | 14px | 1.4 | 400-500 | nav, botones, labels |
| `--text-md` | 1rem | 16px | 1.5 | 400 | body base, cards, docs links |
| `--text-lg` | 1.125rem | 18px | 1.55 | 400 | cuerpo destacado y descripciones cortas |
| `--text-xl` | 1.25rem | 20px | 1.3 | 500 | hero copy desktop, section intros |
| `--text-2xl` | 1.875rem | 30px | 1.1 | 400-500 | h3 y cards feature |
| `--text-3xl` | 2.5rem | 40px | 1.05 | 400-500 | h2 marketing |
| `--text-4xl` | 4rem | 64px | 1 | 500 | h1 desktop observado |

### Pesos detectados

```css
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

### Letter-spacing

```css
--tracking-display: 0em;
--tracking-body: 0em;
--tracking-meta: 0.04em;
--tracking-code: 0.12em;
```

### Regla de jerarquia

La jerarquia no se consigue apilando familias.
Se consigue con cambio de funcion:
`Goga` para promesa y atmosfera.
`Inter Variable` para explicar y operar.
`Fira Mono` para diagnosticar, etiquetar o citar implementacion.

### Regla clave

Nunca mezclar `Goga` con tracking agresivo.
Su forma ya es ancha y respirada.
Forzarla con `-0.04em` como si fuera una grotesca condensada le quita la naturalidad que define el sistema.

---

## 4. Estilos de Componentes

La homepage muestra un kit de marketing sobrio pero muy utilizable.
Las recetas de abajo respetan los valores observados.
Cuando falta un estado, se completa con derivado explicitado.

### Boton primario dark - observado

```css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 21px;
  border: 0;
  border-radius: 9999px;
  background: #7FEE64;
  color: #000000;
  font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0, 0, .2, 1);
}

.btn-primary:hover {
  background: #DDFFDC; /* observado en marketing button dark */
}

.btn-primary:active {
  transform: scale(.97); /* observado */
  background: #DDFFDC; /* el CSS no oscurece; se conserva el hover y se escala */
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px #37582F;
}

.btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}
```

### Boton secundario dark - observado

```css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 9999px;
  border: 1px solid rgba(221, 255, 220, .30);
  background: transparent;
  color: #DDFFDC;
  font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: all 150ms cubic-bezier(0, 0, .2, 1);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.selected {
  border-color: #7FEE64;
  background: rgba(221, 255, 220, .05);
  color: #7FEE64;
}

.btn-secondary:focus-visible {
  box-shadow: 0 0 0 3px #37582F;
}
```

### Boton terciario dark - observado

```css
.btn-tertiary {
  padding: 0;
  border: 0;
  background: transparent;
  color: #DDFFDC;
  font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 150ms cubic-bezier(0, 0, .2, 1);
}

.btn-tertiary:hover {
  color: #7FEE64;
  text-decoration: none;
}
```

### Input dark - observado + completado

```css
.field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #464646;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: #DDFFDC;
  font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.field::placeholder {
  color: rgba(255, 255, 255, .60);
}

.field:hover {
  border-color: rgba(255, 255, 255, .25); /* derivado desde la familia observada */
}

.field:focus {
  border-color: rgba(127, 238, 100, .50);
  box-shadow: 0 0 0 2px rgba(127, 238, 100, .50);
  outline: none;
}

.field[aria-invalid="true"] {
  border-color: #CB5F5F; /* derivado desde la familia semantica observada */
  box-shadow: 0 0 0 2px rgba(203, 95, 95, .40);
}

.field:disabled {
  opacity: .4;
  cursor: not-allowed;
}
```

### Card de ejemplo - observada por patron

```css
.card {
  background: #212525;
  border: 1px solid #464646;
  border-radius: 16px;
  padding: 24px;
  color: #D1D1D1;
}

.card h3 {
  font-family: "Goga", ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
  color: #DDFFDC;
}

.card p {
  margin-top: 10px;
  font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #D1D1D1;
}
```

### Badge y chips - observados por patron

```css
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid #464646;
  background: #181818;
  color: #94AB94;
  font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
}

.chip.is-active {
  border-color: #7FEE64;
  color: #7FEE64;
  background: rgba(127, 238, 100, .08); /* derivado para completar el sistema */
}
```

### Alertas / toast - derivado, respetando semanticos observados

```css
.toast {
  border-radius: 16px;
  border: 1px solid #464646;
  padding: 16px 18px;
  background: #212525;
  color: #D1D1D1;
}

.toast--success {
  border-color: #37582F;
  background: #1D231C;
}

.toast--warning {
  border-color: #5D442D;
  background: #2F271F;
}

.toast--error {
  border-color: #5B3333;
  background: #2E2121;
}
```

### Navegacion / header - observado

```css
.nav-pill {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 10px;
  border-radius: 9999px;
  background: #212525;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}

.nav-pill a {
  color: #DDFFDC;
  font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
}

.nav-pill a:hover {
  color: #7FEE64;
}
```

### Regla de componentes

Los componentes de Modal no dependen de gradientes ruidosos ni de sombras complejas.
Su caracter viene de capsulas, contraste y una unica familia de verdes.
Si un componente nuevo necesita personalidad, primero prueba aumentar claridad estructural.
No lo arregles anadiendo mas color.

---

## 5. Principios de Layout

El layout visible usa heroes muy abiertos y contenedores amplios.
La homepage deja que la tipografia mande la primera impresion y luego introduce prueba social y ejemplos en bloques contenidos.
No hay una reticula ornamental compleja, pero si una disciplina clara:
containers anchos, bastante aire vertical y modules que cambian de ritmo entre fullscreen y cards.

### Escala de espaciado

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

### Contenedores

| Token | Valor | Uso |
|------|-------|-----|
| `--container-max` | `1400px` | `marketing-container` observado |
| `--container-pad-sm` | `16px` | padding horizontal small |
| `--container-pad-md` | `24px` | padding horizontal mediano |
| `--container-pad-lg` | `32px` | padding horizontal grande |

### Grid recomendado

```css
.grid-marketing {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 840px) {
  .grid-marketing {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }
}
```

### Filosofia de espaciado

1. El hero puede ocupar practicamente todo el alto util.
2. La navegacion flota sobre el contenido en lugar de partirlo.
3. Las cards nunca deben pegarse unas con otras sin respiracion lateral.
4. El texto explicativo vive mejor en anchos de 42 a 60 caracteres.
5. El verde debe tener aire alrededor para conservar impacto.

### Anchuras recomendadas

| Modulo | Max width |
|--------|-----------|
| Hero headline | `900px` aprox |
| Hero body | `640px` observado |
| CTA group | contenido intrinseco |
| Card example | `316px` observado en carousel |
| Copy column secundaria | `520px` |

---

## 6. Profundidad y Elevacion

Modal no es flat.
Tampoco es skeuomorphic.
La profundidad aparece en dos lugares:
la capsula de navegacion con sombra suave y el hero graphic que ilumina el borde inferior.
El resto del sistema mantiene profundidad contenida.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-nav: 0 16px 48px rgba(0, 0, 0, .25);
--shadow-card: 0 18px 40px rgba(0, 0, 0, .18);
--shadow-glow-brand: 0 0 40px rgba(127, 238, 100, .22);
--shadow-focus: 0 0 0 3px #37582F;
```

### Niveles de elevacion

| Nivel | Uso | Tratamiento |
|------|-----|-------------|
| 0 | canvas base | sin sombra, solo color |
| 1 | cards e inputs | borde `#464646`, sombra minima u opcional |
| 2 | nav pill / paneles hero | sombra negra suave y radio completo |
| 3 | glows de acento | blur verde controlado, nunca como drop shadow directa |

### Radios de borde

```css
--radius-xs: 6px;   /* derivado para elementos mini */
--radius-sm: 8px;   /* compatible con inputs */
--radius-md: 16px;  /* cards / panels */
--radius-lg: 24px;  /* hero frame y bloques destacados */
--radius-full: 9999px; /* botones y nav */
```

### Regla de profundidad

Si un panel necesita parecer mas importante, primero sube su radio o su contraste.
Solo despues anade sombra.
En Modal la profundidad buena es estructural, no blanda.

---

## 7. Lo que Si y lo que No

### Si hacer

1. Si usar `#181818` como fondo principal cuando la pantalla quiera sentirse estable, porque es la base que deja respirar al verde.
2. Si reservar `#7FEE64` para acciones y frases-gancho, porque su valor esta en la escasez.
3. Si combinar `Goga` para promesa e `Inter Variable` para explicacion, porque esa separacion hace que el sistema parezca producto y no poster.
4. Si construir botones como pills limpias y muy legibles, porque el sitio original prioriza decision inmediata.
5. Si mantener bordes visibles y discretos, porque ayudan a definir superficie sin ensuciar el modo oscuro.
6. Si dejar aire amplio alrededor del hero y de los logos, porque la marca comunica capacidad con calma.

### No hacer

1. No llenar la interfaz de verdes medios, porque la pagina pierde contraste y la accion se diluye.
2. No sustituir el negro base por un gris azulado cualquiera, porque cambia el caracter de infraestructura sobria.
3. No convertir `Goga` en una tipografia de labels pequenos, porque su rol es escenico y no operativo.
4. No meter degradados rainbow o multicolor, porque la referencia gana por una firma cromatica unica.
5. No usar sombras blandas grandes en todos los modulos, porque la UI original es mas seca y segura.
6. No comprimir demasiado la composicion vertical, porque el sistema depende de espacio negativo para sonar premium.

---

## 8. Comportamiento Responsive

La homepage observada usa clases utility con saltos claros entre mobile y desktop.
La regla general es preservar la capsula, el contraste y la legibilidad, aunque la navegacion cambie a hamburguesa y el hero reduzca altura.

### Breakpoints observados o coherentes con la implementacion

```css
--bp-sm: 500px;   /* salto visible en el hero line break */
--bp-md: 840px;   /* cercano al cambio de navegacion central */
--bp-lg: 1024px;  /* consolidacion de layout y paddings amplios */
--bp-xl: 1400px;  /* limite del container */
```

### Cambios por breakpoint

| Breakpoint | Cambio |
|-----------|--------|
| `< 500px` | titular pasa a 40px aprox, copy mas corto, line-breaks automaticos |
| `>= 500px` | se habilita un corte de linea mas controlado en hero |
| `>= 840px` | aparece la navegacion horizontal principal; los CTAs se acomodan con mas aire |
| `>= 1024px` | el hero toma mayor escala y las cards pueden mostrarse en filas largas |
| `>= 1400px` | el container ya no crece; crece el aire interior, no el ancho total |

### Touch targets

```css
--touch-target-min: 44px;
--pill-height-mobile: 44px;
--pill-height-desktop: 46px;
```

### Filosofia responsive

No se trata de meter todo lo de desktop en mobile.
Se trata de preservar tres cosas:
promesa clara,
accion visible,
y contraste impecable.
Si hace falta sacrificar links secundarios para mantener eso, se sacrifica.

---

## 9. Guia de Prompts para Agentes

Los prompts de abajo sirven para producir nuevas pantallas fieles al sistema de Modal sin caer en una plantilla generica de SaaS.

### Inicializacion de sesion

```text
Trabaja dentro del sistema visual de Modal.
Modo base oscuro (#181818), superficies grafito (#212525), display Goga para promesas y headings, Inter Variable para UI y body, verde electrico #7FEE64 solo para CTA, highlights y estados de foco.
La pantalla debe sentirse precisa, nocturna y lista para ejecutar, no decorada.
No introduzcas nuevos acentos de marca.
```

### Crear una nueva pantalla

```text
Disena una nueva pantalla para Modal manteniendo su lenguaje de infraestructura AI de alto rendimiento.
Usa un hero o encabezado con Goga, copy operativo con Inter Variable, pills limpias, fondo #181818 y contenedores #212525.
El CTA principal debe usar #7FEE64 con texto negro.
Toda decision visual debe priorizar legibilidad, contraste y calma tecnica.
```

### Anadir un componente al UI kit

```text
Crea un componente nuevo para Modal sin salir de su sistema.
Primero define si el componente vive en canvas o en surface.
Despues aplica bordes #464646, radios 8/16/9999 segun funcion, y decide si necesita el verde solo como accion o tambien como estado.
No uses colores nuevos salvo derivados semanticos marcados.
```

### Revision de consistencia

```text
Revisa esta interfaz como si perteneciera a Modal.
Detecta cualquier uso excesivo de verde, cualquier fondo que no respete la base #181818 / #212525, y cualquier heading que no use la jerarquia de Goga.
Verifica contraste, espaciado y si los CTAs se leen como decisiones claras.
```

### Variante de campana

```text
Genera una variante de campana dentro del sistema Modal.
Puedes amplificar glow verde, escala tipografica y proof blocks, pero no cambies el fondo base ni introduzcas paletas ajenas.
Debe seguir pareciendo infraestructura seria, solo con energia promocional mas alta.
```

---

## 10. Movimiento (Motion)

Modal usa movimiento con discrecion pero sin timidez.
El objetivo no es adornar.
Es confirmar que el producto responde.
Los botones cambian con rapidez.
La capsula navega con transicion suave.
Los carousels y auto-scrolls sugieren abundancia de casos de uso.
El hero graphic y los glows verdes introducen una sensacion de energia latente.

### Nivel de motion

Moderado.
Siempre funcional.
Nunca caricaturesco.

### Duraciones y easings observados o compatibles

```css
--motion-fast: 150ms;
--motion-base: 300ms;
--motion-slow: 450ms;
--ease-standard: cubic-bezier(.4, 0, .2, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--ease-emphasis: cubic-bezier(.16, 1, .3, 1); /* derivado para reveals editoriales */
```

### Propiedades animadas

| Elemento | Propiedad |
|---------|-----------|
| Botones | background-color, color, scale |
| Navegacion sticky | sombra, opacity, small layout shifts |
| Links | color, underline removal |
| Carousels | translate / scroll programado |
| Glows | blur y opacity suave |

### Patrones recomendados

1. Hover de CTA: pasar de `#7FEE64` a `#DDFFDC`.
2. Active de CTA: `scale(.97)` sin rebote exagerado.
3. Focus visible: ring verde oscuro `#37582F` de 3px.
4. Reveal de secciones: desplazamiento Y corto y fade con `--ease-emphasis` solo en marketing.
5. Marquees: velocidad lenta para logos y contenido de confianza.

### Prefers reduced motion

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn-primary:active {
    transform: none;
  }
}
```

### Regla de motion

Si una animacion no mejora claridad, feedback o orientacion, sobra.
Modal gana mas por respuesta limpia que por espectacularidad permanente.

---

## Anexo - Stack tecnico detectado

| Area | Deteccion | Nota |
|------|-----------|------|
| Framework | SvelteKit | observado por `data-sveltekit-preload-data`, `entry/start` y `entry/app` |
| CSS | Tailwind CSS v4.2.2 + CSS compilado | observado en los bundles |
| Tipografia | Adobe Typekit + fuentes propias en `modal-cdn.com` | `degular*`, `Goga`, `Inter Variable`, `Fira Mono` |
| Iconografia | Lucide | observado en SVGs de arrows y chevrons |
| Navegacion | sticky top capsule | observado en el nav principal |
| Motion | transiciones CSS + carruseles JS | observado en componentes y clases |
| 3D / WebGL | no verificable | el hero graphic se monta en contenedor dedicado, pero la implementacion exacta no es verificable solo con HTML y CSS publicos |
| Video | si | video en footer con poster y fuente mp4 publica |
| Lottie | no verificable | el logo usa asset con nombre `lottie`, pero la ejecucion real no se confirma desde la captura publica |
| CMS / builder | no detectado | no verificable desde los assets analizados |

### Resumen ejecutivo para implementacion

Si hubiera que reconstruir una pantalla de Modal desde cero, las reglas minimas serian estas:

1. Fondo `#181818`.
2. Superficies `#212525`.
3. Headings en `Goga`.
4. Body y UI en `Inter Variable`.
5. CTA principal `#7FEE64` con texto negro.
6. CTA secundario outline pale green sobre transparente.
7. Bordes visibles y secos.
8. Aire amplio en hero.
9. Verde usado como decision, no como wallpaper.
10. Motion corto, limpio y orientado a feedback.

### Valores no detectados con certeza

- Uso visible de `degular`, `degular-display` y `degular-text` en la homepage analizada: `(no detectado)`.
- Algoritmo exacto del hero graphic de fondo: `no verificable`.
- Sistema completo de sombras del producto logged-in: `no detectado`.
- Breakpoints internos exactos del app post-login: `no detectado`.

### Cierre

Modal no vende hardware.
Tampoco vende solo software.
Visualmente vende disponibilidad inmediata de capacidad computacional.
Su sistema funciona porque hace visible esa idea con muy pocos recursos:
una noche limpia,
una display propia,
un verde que parece energia lista,
y una interfaz que nunca se disculpa por ser tecnica.