Linear.

:root {
  /* Brand — single accent */
  --color-primary: #5E6AD2;
  --color-primary-hover: #6B77E0;
  --color-primary-active: #4F5ABF;
  --color-link: #828FFF;
  --color-text-on-primary: #FFFFFF;

  /* Surfaces — layered near-black (elevation by layer) */
  --color-bg: #08090A;
  --color-surface: #0F1011;
  --color-surface-elevated: #141516;
  --color-surface-floating: #191A1B;
  --color-neutral: #1C1C1F;

  /* Text ramp */
  --color-text: #F7F8F8;
  --color-text-secondary: #D0D6E0;
  --color-text-tertiary: #8A8F98;
  --color-text-muted: #62666D;

  /* Borders */
  --color-border: #23252A;
  --color-border-subtle: rgba(255,255,255,0.05);

  /* Status (iconography only) */
  --color-success: #27A644;
  --color-warning: #F0BF00;
  --color-error: #EB5757;
  --color-info: #4EA7FC;

  /* Typography */
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tracking-display: -0.022em;
  --tracking-body: -0.011em;
  --font-normal: 400;
  --font-medium: 510;
  --font-semibold: 590;

  /* Radii — 6/8/12 + pill */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Spacing — 8px base */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  /* Depth — flat by design */
  --shadow-global: none;
  --shadow-product-mock: 0 4px 12px rgba(0,0,0,0.15);

  /* Motion */
  --ease-quad: cubic-bezier(.455,.03,.515,.955);
  --duration-control: 160ms;
  --duration-panel: 600ms;
}

/* Tailwind v4 — CSS-first @theme (no tailwind.config.js) */
@theme {
  /* Brand */
  --color-primary: #5E6AD2;
  --color-primary-hover: #6B77E0;
  --color-link: #828FFF;

  /* Surfaces */
  --color-bg: #08090A;
  --color-surface: #0F1011;
  --color-surface-elevated: #141516;
  --color-neutral: #1C1C1F;

  /* Text */
  --color-text: #F7F8F8;
  --color-text-secondary: #D0D6E0;
  --color-text-tertiary: #8A8F98;
  --color-text-muted: #62666D;

  /* Borders */
  --color-border: #23252A;

  /* Status */
  --color-success: #27A644;
  --color-warning: #F0BF00;
  --color-error: #EB5757;
  --color-info: #4EA7FC;

  /* Fonts */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Spacing (8px base) */
  --spacing: 8px;

  /* Easing */
  --ease-quad: cubic-bezier(.455,.03,.515,.955);
}

{
  "color": {
    "primary": "#5E6AD2",
    "primary-hover": "#6B77E0",
    "primary-active": "#4F5ABF",
    "link": "#828FFF",
    "text-on-primary": "#FFFFFF",
    "bg": {
      "base": "#08090A",
      "surface": "#0F1011",
      "elevated": "#141516",
      "floating": "#191A1B",
      "neutral": "#1C1C1F"
    },
    "text": {
      "primary": "#F7F8F8",
      "secondary": "#D0D6E0",
      "tertiary": "#8A8F98",
      "muted": "#62666D"
    },
    "border": {
      "primary": "#23252A",
      "subtle": "rgba(255,255,255,0.05)"
    },
    "status": {
      "success": "#27A644",
      "warning": "#F0BF00",
      "error": "#EB5757",
      "info": "#4EA7FC",
      "orange": "#FC7840",
      "teal": "#00B8CC"
    }
  },
  "font": {
    "heading": "Inter",
    "body": "Inter",
    "serif": "Fraunces",
    "mono": "JetBrains Mono",
    "weight": { "normal": 400, "medium": 510, "semibold": 590, "bold": 680 },
    "tracking": { "display": "-0.022em", "body": "-0.011em" }
  },
  "spacing": { "base": "8px", "1": "8px", "2": "16px", "3": "24px", "4": "32px", "6": "48px", "8": "64px" },
  "radius": { "xs": "4px", "sm": "6px", "md": "8px", "lg": "12px", "xl": "16px", "full": "9999px" },
  "shadow": { "global": "none", "product-mock": "0 4px 12px rgba(0,0,0,0.15)" },
  "motion": {
    "duration-control": "160ms",
    "duration-panel": "600ms",
    "ease-quad": "cubic-bezier(.455,.03,.515,.955)"
  }
}

---
version: "1.0"
name: "Linear — Product Development System"
description: "Sistema de diseno de producto en modo oscuro: lienzo casi negro, un unico acento indigo, tipografia Inter de interfaz y una captura de producto como heroe. Preciso, de alto contraste y sin ornamento; pensado para herramientas de desarrollo, SaaS B2B y landings product-led."
colors:
  primary: "#5E6AD2"
  primary-hover: "#6B77E0"
  primary-active: "#4F5ABF"
  secondary: "#828FFF"
  accent: "#5E6AD2"
  neutral: "#1C1C1F"
  background: "#08090A"
  surface: "#0F1011"
  surface-elevated: "#141516"
  text-primary: "#F7F8F8"
  text-secondary: "#D0D6E0"
  text-tertiary: "#8A8F98"
  text-muted: "#62666D"
  text-on-primary: "#FFFFFF"
  border: "#23252A"
  border-subtle: "#FFFFFF0D"
  success: "#27A644"
  success-bg: "#10231A"
  warning: "#F0BF00"
  warning-bg: "#231F0A"
  error: "#EB5757"
  error-bg: "#2A1416"
  info: "#4EA7FC"
  info-bg: "#0E1E2E"
typography:
  display-lg:
    fontFamily: "Inter Variable"
    fontSize: "64px"
    fontWeight: 510
    lineHeight: "1.06"
    letterSpacing: "-0.022em"
  body-md:
    fontFamily: "Inter Variable"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: "1.6"
    letterSpacing: "-0.011em"
  label-md:
    fontFamily: "Berkeley Mono"
    fontSize: "13px"
    fontWeight: 510
    lineHeight: "1"
    letterSpacing: "0"
rounded:
  sm: "6px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  full: "9999px"
spacing:
  base: "8px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  gap: "8px"
  card-padding: "12px"
  section-padding: "64px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "#FFFFFF0D"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.full}"
    padding: "0 16px"
  button-tertiary:
    textColor: "{colors.text-tertiary}"
    rounded: "{rounded.full}"
    padding: "0 16px"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    padding: "12px"
---

# DESIGN.md - Linear

> Sistema de diseno extraido de la homepage de marketing de linear.app (modo oscuro), leyendo sus archivos de tokens `:root` reales (index-*.css, Button.*.css) y verificando la captura del producto en vivo.
> Generado con el skill `url-inspiration-styleguide`. Los valores observados mandan; lo derivado para completar el sistema (estados, fondos semanticos) va marcado.

---

## 1. Tema Visual y Atmosfera

Linear se siente como una herramienta que respeta el foco. La base es un casi-negro `#08090A` que no llega a negro puro: lo justo para que la interfaz repose sin sentirse apagada. Encima, un unico indigo `#5E6AD2` ordena toda la accion; no compite con otros acentos, asi que cada vez que aparece, significa algo. El texto es un blanco templado `#F7F8F8`, nunca `#FFFFFF` duro, y baja por una rampa de grises hasta el ruido mas silencioso de metadata.

La personalidad es precision sin frialdad. No hay gradientes ambientales, blobs ni halos: la profundidad nace de apilar superficies casi-negras (`#08090A` a `#0F1011` a `#141516`) y de bordes de un pixel translucidos. El heroe no es un efecto, es una captura real del producto, tratada como evidencia. La tipografia Inter, con tracking negativo afinado, da ese aire de software bien hecho.

Su traduccion a cualquier pantalla debe conservar ese contrato: lienzo oscuro estable, un solo color de marca, jerarquia por superficie y borde (no por sombra), y el producto o el dato como protagonista. Cuando Linear se ve bien, parece rapido antes de que lo toques.

**Palabras clave de personalidad**: preciso, oscuro, alto contraste, sobrio, tecnico, enfocado, product-led

**Densidad del layout**: comfortable (columna centrada, ritmo vertical generoso)

**Modo preferido**: oscuro

**Nivel de ornamentacion**: minimo (sin gradientes ni adornos; profundidad por capas y hairlines)

**Audiencia visual objetivo**: equipos de producto e ingenieria que valoran velocidad, claridad y herramientas serias

---

## 2. Paleta de Colores y Roles Semanticos

La paleta real se apoya en cuatro gestos: un casi-negro como lienzo, una rampa neutra de grises para texto y bordes, un unico indigo de marca, y una familia de tonos de estado reservada para iconografia de sistema. El color se usa con tacaneria deliberada.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Indigo primario | `--color-primary` | `#5E6AD2` | CTA principal, focus ring, acento de marca | `#FFFFFF` |
| Indigo hover | `--color-primary-hover` | `#6B77E0` | Hover del CTA *(derivado +brillo del real)* | `#FFFFFF` |
| Indigo activo | `--color-primary-active` | `#4F5ABF` | Pressed state *(derivado -brillo del real)* | `#FFFFFF` |
| Indigo claro | `--color-secondary` | `#828FFF` | Links y texto acento sobre superficie oscura | `#08090A` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Lienzo base | `--color-bg` | `#08090A` | Fondo de pagina, secciones |
| Panel | `--color-surface` | `#0F1011` | Cards, paneles con copy |
| Superficie elevada | `--color-surface-elevated` | `#141516` | Segundo nivel de elevacion por capa |
| Superficie secundaria | `--color-neutral` | `#1C1C1F` | Tercer nivel, chips, hovers de fila |
| Lienzo marketing | `--color-bg-marketing` | `#010102` | Bandas de marketing aun mas profundas |
| Borde primario | `--color-border` | `#23252A` | Divisores, contornos de card |
| Borde translucido | `--color-border-subtle` | `#FFFFFF0D` | Hairlines sobre superficie, separadores suaves |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#F7F8F8` | Headings, body, labels importantes |
| Texto secundario | `--color-text-secondary` | `#D0D6E0` | Descripciones, subcopy |
| Texto terciario | `--color-text-tertiary` | `#8A8F98` | Labels silenciosos, UI quieta |
| Texto muted | `--color-text-muted` | `#62666D` | Metadata, placeholders |
| Texto sobre primario | `--color-text-on-primary` | `#FFFFFF` | Texto sobre el indigo de marca |

### Colores de estado

> Linear expone estos tonos como sistema de iconografia de estado (valores reales). Los fondos `*-bg` estan **derivados para completar el sistema** mezclando cada tono con el lienzo casi-negro, sin romper la familia.

| Estado | Variable CSS | Hex | Fondo (`-bg`, derivado) |
|--------|-------------|-----|-------------------------|
| Exito | `--color-success` | `#27A644` | `#10231A` |
| Advertencia | `--color-warning` | `#F0BF00` | `#231F0A` |
| Error | `--color-error` | `#EB5757` | `#2A1416` |
| Info | `--color-info` | `#4EA7FC` | `#0E1E2E` |

> Tonos de iconografia adicionales observados (no semanticos): naranja `#FC7840`, teal `#00B8CC`. Usalos solo para iconos/labels, nunca como segundo acento de marca.

---

## 3. Reglas de Tipografia

```css
/* Heading + interfaz: grotesca neo de UI, tracking negativo afinado */
--font-heading: 'Inter', 'Inter Variable', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;

/* Editorial: serif de alto contraste reservada a momentos de marketing */
--font-serif-display: 'Fraunces', Georgia, serif;

/* Mono: code, atajos de teclado y labels tecnicos */
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
```

**Google Fonts (sustitutos):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota sobre sustitucion (por rol):** Inter Variable -> **Inter** (match exacto, Inter esta en Google Fonts). Tiempos Headline -> **Fraunces** (serif editorial de alto contraste, mejor que las didonas obvias). Berkeley Mono -> **JetBrains Mono** (grotesca mono neutra). El heroe de la home se renderiza en Inter, no en la serif.

### Escala tipografica

> Linear usa una escala `title-1..title-9` en rem, toda semibold (590) en Inter.

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--title-1` | 1.0625rem | 17px | 1.4 | Subheads pequenos |
| `--title-2` | 1.25rem | 20px | 1.35 | Titulos de bloque |
| `--title-3` | 1.5rem | 24px | 1.3 | Subsecciones |
| `--title-4` | 2rem | 32px | 1.2 | Titulos de seccion |
| `--title-5` | 2.5rem | 40px | 1.12 | Headlines medianos |
| `--title-6` | 3rem | 48px | 1.08 | Headlines grandes |
| `--title-7` | 3.5rem | 56px | 1.06 | Hero secundario |
| `--title-8` | 4rem | 64px | 1.06 | Hero principal (display-lg) |
| `--title-9` | 4.5rem | 72px | 1.02 | Display maximo |
| `--body` | 0.9375rem | 15px | 1.6 | Body general |
| `--label` | 0.8125rem | 13px | 1 | Labels mono / code |

### Pesos tipograficos

```css
--font-light: 300;
--font-normal: 400;     /* Body */
--font-medium: 510;     /* Display, botones, labels */
--font-semibold: 590;   /* Titles 1..9 */
--font-bold: 680;       /* Enfasis fuerte */
```

### Letter spacing

```css
--tracking-display: -0.022em;  /* Headlines Inter */
--tracking-body: -0.011em;     /* Body Inter */
--tracking-mono: 0em;          /* Berkeley/JetBrains Mono */
```

**Regla clave**: el tracking negativo es parte de la identidad; Inter sin apretar se ve generico. Reserva la serif (Fraunces) para momentos editoriales, nunca para el hero de producto.

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-primary)        /* #5E6AD2 */
Color de texto: var(--color-text-on-primary)  /* #FFFFFF */
Height: 40px
Padding: 0 16px
Border-radius: var(--radius-full)       /* 9999px (pill) */
Font: var(--font-medium) 13px, Berkeley/JetBrains Mono
Transicion: filter 160ms, background-color 160ms

Hover:    Background var(--color-primary-hover) /* o filter: brightness(1.15) */
Active:   Background var(--color-primary-active)
Focus:    Outline 2px solid var(--color-primary); outline-offset 2px
Disabled: Opacity 0.45; cursor not-allowed
```

**Secundario (translucido)**
```
Background: #FFFFFF0D
Color: var(--color-text)                /* #F7F8F8 */
Height: 40px; Padding: 0 16px; Radius: var(--radius-full)
Backdrop-filter: blur(4px)
Box-shadow: inset 0 0 0 1px #FFFFFF08, inset 0 1px #FFFFFF0A, 0 0 0 1px #0009, 0 4px 4px #0000001A

Hover: Background #FFFFFF14
```

**Terciario (bordeado)**
```
Background: var(--color-bg)             /* #08090A */
Border: 1px solid var(--color-neutral)  /* #1C1C1F */
Color: var(--color-text-tertiary)       /* #8A8F98 */
Radius: var(--radius-full); Padding: 0 16px

Hover: Color var(--color-text); Background #232326
```

**Ghost / Texto**
```
Background: transparent
Color: var(--color-text-tertiary)
Border: none; Padding: 0 12px

Hover: Color var(--color-text); Background #28282C
```

### Inputs de texto

```
Background: var(--color-surface)        /* #0F1011 */
Border: 1px solid var(--color-border)   /* #23252A */
Border-radius: var(--radius-md)         /* 8px */
Padding: 8px 12px
Font-size: 15px; Color: var(--color-text)
Placeholder: var(--color-text-muted)    /* #62666D */

Hover:    Border-color #34343A
Focus:    Border-color var(--color-primary); box-shadow 0 0 0 3px rgba(94,106,210,0.25); outline none
Error:    Border-color var(--color-error); box-shadow 0 0 0 3px rgba(235,87,87,0.22)
Disabled: Opacity 0.5; cursor not-allowed
```
> Estados hover/focus/error/disabled **derivados para completar el sistema** a partir del borde y el acento reales.

### Cards

```
Background: var(--color-surface)        /* #0F1011 */
Border: 1px solid var(--color-border)   /* #23252A */
Border-radius: var(--radius-sm)         /* 6px */
Padding: 12px
Box-shadow: 0 4px 12px #00000026        /* solo en el mock de producto embebido */

Hover (si es clickeable): Border-color #34343A; background var(--color-surface-elevated)
```

### Code chip / keyboard hint

```
Font: var(--font-mono) 13px            /* JetBrains Mono */
Background: #FFFFFF0D
Border: 1px solid #FFFFFF14 (hairline)
Border-radius: 4px
Padding-inline: 6px; Height: 24px
Color: var(--color-text-secondary)
```

### Badges / Chips

```
Padding: 2px 8px; Border-radius: var(--radius-full)
Font-size: 12px; Font-weight: var(--font-medium); Letter-spacing: 0
Default: Background var(--color-neutral) /* #1C1C1F */, Color var(--color-text-secondary)
Brand:   Background rgba(94,106,210,0.16), Color var(--color-secondary)
```

### Alertas / Toasts (derivado del sistema de estado)

```
Padding: 12px 16px; Border-radius: var(--radius-md); Border-left: 3px solid currentColor; Font-size: 13px
Success: bg var(--color-success-bg), color var(--color-success)
Warning: bg var(--color-warning-bg), color var(--color-warning)
Error:   bg var(--color-error-bg),   color var(--color-error)
Info:    bg var(--color-info-bg),    color var(--color-info)
```

### Navegacion / Header

```
Background: rgba(8,9,10,0.8); Backdrop-filter: blur(12px)
Border-bottom: 1px solid var(--color-border-subtle)  /* #FFFFFF0D */
Height: 64px (72px en paginas de marketing anchas); Padding horizontal: 24px

Links: Color var(--color-text-tertiary); Font-size 14px; Font-weight var(--font-medium)
  Hover: Color var(--color-text)
CTA: boton primario pill indigo
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 8px;   /* base */
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
--page-inset: 32px;
--section-padding-block: 64px;
--section-padding-inline: 24px;
```

### Contenedores

```css
--container-content: 1024px;   /* columna principal */
--container-wide: 1344px;      /* secciones anchas de marketing */
```

### Grid

```
Sistema: columna centrada sobre grid de 12 columnas de marketing
Gutter: 24px
Margenes: 24px en mobile/tablet, auto (max-width) en desktop
Patrones base: hero centrado con captura de producto full-width, bloques 6/6, tarjetas 3xN
```

### Filosofia de espaciado

Linear respira en vertical. El ritmo de 8px mantiene todo alineado y predecible; las secciones se separan con 64px de bloque para que cada idea tenga su propio aire. No es una marca de dashboards apretados en su superficie de marketing: el espacio comunica calma y control, y deja que la captura del producto sea el evento de la pantalla.

---

## 6. Profundidad y Elevacion

La marca es **flat por capas**. La sensacion premium no viene de sombras: Linear pone todos los tokens globales de sombra en `none` en la superficie de marketing. La elevacion se lee por escalones de fondo casi-negro y por hairlines de 1px translucidos.

### Sistema de sombras

```css
--shadow-none: none;            /* tokens globales (tiny/low/medium/high) resuelven a none */
/* Profundidad local solo en componentes concretos: */
--shadow-button-secondary: inset 0 0 0 1px #FFFFFF08, inset 0 1px #FFFFFF0A, 0 0 0 1px #0009, 0 4px 4px #0000001A;
--shadow-product-mock: 0 4px 12px #00000026;
```

### Niveles de elevacion (por fondo, no por sombra)

| Nivel | Fondo | Uso |
|-------|-------|-----|
| 0 - Base | `#08090A` | Lienzo de pagina, bandas |
| 1 - Panel | `#0F1011` | Cards, paneles con copy |
| 2 - Elevado | `#141516` | Hover de card, segundo plano |
| 3 - Flotante | `#191A1B` | Popovers, menus |

### Radios de borde

```css
--radius-xs: 4px;     /* code chips */
--radius-sm: 6px;     /* cards, paneles */
--radius-md: 8px;     /* inputs, controles */
--radius-lg: 12px;    /* paneles grandes */
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-3xl: 32px;
--radius-full: 9999px;/* botones (pill) */
```

El radio de superficies vive entre 6px y 12px; el pill completo se reserva para botones. Nada de mezclar radios al azar: la familia es parte del orden.

---

## 7. Lo que Si y lo que No

### Si hacer

1. **Manten `#5E6AD2` como unico acento de marca** - cada aparicion del indigo debe significar accion o foco, no decoracion.
2. **Construye profundidad por capas casi-negras y hairlines** - `#08090A` a `#0F1011` a `#141516`, con bordes de 1px; nunca con sombras dramaticas.
3. **Deja que la captura de producto sea el heroe** - es evidencia real, no un efecto; no la entierres bajo gradientes.
4. **Manten el ritmo de 8px** - alinea todo a esa cadencia para que la pagina se sienta construida con precision.
5. **Usa Inter con tracking negativo** - es parte de la identidad; reserva la serif para momentos editoriales.
6. **Pill para botones, 6-12px para cards** - respeta la familia de radios.

### No hacer

1. **No metas un segundo acento saturado junto al indigo** - los tonos de estado son solo para iconografia.
2. **No anadas gradientes ambientales, blobs ni halos detras del hero** - el producto es el hero.
3. **No uses sombras pesadas** - los tokens globales resuelven a `none` por diseno; rompe la identidad.
4. **No uses `#000` ni `#fff` puros en el chrome** - el lienzo es `#08090A` y el texto principal `#F7F8F8`.
5. **No aprietes el layout como un dashboard denso** - la superficie de marketing necesita aire vertical.
6. **No uses Inter sin tracking** - sin el ajuste negativo se ve generico y pierde el sello.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first */
@media (min-width: 640px)  { } /* sm */
@media (min-width: 768px)  { } /* md */
@media (min-width: 1024px) { } /* lg */
@media (min-width: 1280px) { } /* xl */
```

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegacion: logo + menu compacto, CTA unico
- Grid: 1 columna
- Hero headline: `--title-5` o `--title-6` (40-48px)
- Padding de contenedor: 24px
- Captura de producto: visible arriba del fold, recortada con foco

**Tablet (640px - 1024px)**
- Navegacion: logo + links primarios
- Grid: 2 columnas para copy + visual
- Hero headline: `--title-7` (56px)
- Padding de contenedor: 24px

**Desktop (> 1024px)**
- Navegacion completa visible, header sticky con blur
- Grid: columna centrada 1024px, secciones anchas 1344px, hero full-width
- Hero headline: `--title-8` (64px)
- Padding de contenedor: auto con max-width

### Touch targets (mobile)

- Botones: minimo 40px de alto (44px en CTA principal)
- Links de navegacion: hitbox minimo 44px
- Inputs: alto minimo 40px

### Filosofia responsive

Mobile-first pero sin perder calma. En pequeno formato Linear sigue sintiendose como software serio: un mensaje, un acento, una captura dominante por viewport. La densidad nunca debe traicionar la sensacion de control.

---

## 9. Guia de Prompts para Agentes

### Prompt de inicializacion de sesion

```text
Estas trabajando con el sistema de diseno de Linear (modo oscuro).

PALETA: Lienzo casi-negro #08090A, texto blanco templado #F7F8F8, un unico acento indigo
#5E6AD2. Rampa neutra de grises para texto y bordes. Tonos de estado solo para iconografia.
TIPOGRAFIA: Inter para interfaz y headlines (tracking negativo), Fraunces para editorial,
JetBrains Mono para code y labels.
ESTILO: Preciso, oscuro, alto contraste, sin ornamento. Profundidad por capas y hairlines,
no por sombras. La captura de producto es el heroe.
TOKENS: Usa siempre variables CSS; nunca #000/#fff puros ni un segundo acento saturado.
MODO: Oscuro.
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Lienzo #08090A, un solo acento indigo #5E6AD2 para accion y foco
- Jerarquia por superficie (#0F1011 / #141516) y borde 1px, no por sombra
- Inter con tracking negativo en headlines; ritmo de 8px
- Botones pill, cards 6-12px de radio
- Responsive, header sticky con blur, CTA primario indigo
```

### Prompt: Anadir componente al UI kit

```text
Anade un componente de [TIPO] al sistema de Linear.

Debe:
- Usar solo tokens del DESIGN.md de Linear
- Tener default, hover, active, focus y disabled
- Respetar la familia de radios (pill en botones, 6-12px en superficies)
- Construir profundidad por capa/borde, sin sombras pesadas
```

### Prompt: Revision de consistencia

```text
Revisa esta interfaz y detecta que no sigue el sistema de Linear.

Verifica:
1. Si el indigo #5E6AD2 es el unico acento de marca
2. Si la profundidad viene de capas y hairlines, no de sombras
3. Si el texto evita #fff puro y usa #F7F8F8
4. Si el espaciado respeta el ritmo de 8px
5. Si Inter lleva el tracking negativo correcto
```

### Prompt: Variante de tema

```text
Genera una variante [seccion / producto / campana] para Linear manteniendo el sistema base.

Conserva:
- Lienzo casi-negro y texto templado
- Indigo como unico acento
- Profundidad por capas y hairlines

Puedes variar:
- El contenido del hero (otra captura de producto real)
- El balance entre copy y visual
- La densidad de las tarjetas inferiores
```

---

## 10. Movimiento (Motion)

El movimiento es rapido y guiado por la interfaz. Los controles transicionan en 160ms; el mock de producto en 600ms; hay un loop de brillo de texto de 2200ms. Sin parallax en el hero: la captura es estable.

**Nivel de motion**: subtle

**Duraciones**: 160ms (controles), 600ms (transiciones de panel), 2200ms (loop de text-shine)

**Easings**: `cubic-bezier(.455,.03,.515,.955)` (in-out-quad), `cubic-bezier(.785,.135,.15,.86)` (in-out-circ), `cubic-bezier(.645,.045,.355,1)` (in-out-cubic)

**Propiedades animadas**: filter (brightness), background-color, opacity, transform en reveals

**Patrones de motion**: reveals sutiles de seccion al hacer scroll; cambio de brillo en hover de botones; sin parallax en el hero

```css
--ease-quad: cubic-bezier(.455,.03,.515,.955);
--ease-circ: cubic-bezier(.785,.135,.15,.86);
--duration-control: 160ms;
--duration-panel: 600ms;
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)` y reduce estos gestos a cambios de color sin desplazamiento.

---

## Anexo: Stack tecnico detectado

- **Plataforma / builder**: Next.js (tokens servidos como CSS `:root` en `index-*.css`, `Button.*.css`).
- **Animacion**: transiciones CSS y un loop de text-shine; sin libreria de motion pesada observada en la home.
- **3D / WebGL / Three.js**: no hay evidencia en la home de marketing.
- **Comportamiento**: superficie de marketing product-led; el sistema real de la app es mas denso, pero la home prioriza claridad y la captura de producto como prueba.