The AI coworker that never sleeps.

:root {
  --canvas: #0C0C0C;
  --surface: rgba(255,255,255,0.05);
  --surface-strong: rgba(255,255,255,0.10);
  --text: #FFFFFF;
  --text-soft: #EDEDED;
  --muted: #B2B2B2;
  --primary: #73A7FF;
  --accent: #6B62F2;
  --light-surface: #FCFCFC;
  --font-display: "Host Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --radius-sm: 10px;
  --radius-md: 17px;
  --radius-pill: 9999px;
}

.dimension-hero-title {
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 120px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.dimension-cta {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #161616;
}

<section class="bg-[#0C0C0C] text-white">
  <div class="mx-auto grid max-w-[1180px] gap-8 px-4 py-20 lg:grid-cols-[1fr_.95fr]">
    <div>
      <h1 class="max-w-[9ch] font-[Host_Grotesk] text-[clamp(60px,8vw,120px)] font-medium leading-[0.92] tracking-[-0.035em]">
        The AI coworker that never sleeps.
      </h1>
      <p class="mt-6 max-w-[36ch] text-[clamp(18px,2vw,23px)] leading-[1.5] text-[#EDEDED]">
        Connected to your apps. Understands your work. Gets things done.
      </p>
      <div class="mt-7 flex flex-wrap gap-3.5">
        <button class="min-h-[50px] rounded-full bg-white px-5.5 text-[#161616]">Get Started</button>
        <button class="min-h-[50px] rounded-full border border-white/15 bg-white/5 px-5.5 backdrop-blur-md">Morning Briefing</button>
      </div>
    </div>
  </div>
</section>

{
  "name": "dimension",
  "theme": "dark",
  "colorFamily": "blue",
  "sections": ["Glassmorphism", "Minimal Tech", "Moderno"],
  "colors": {
    "canvas": "#0C0C0C",
    "surface": "rgba(255,255,255,0.05)",
    "surfaceStrong": "rgba(255,255,255,0.10)",
    "text": "#FFFFFF",
    "muted": "#B2B2B2",
    "primary": "#73A7FF",
    "accent": "#6B62F2",
    "lightSurface": "#FCFCFC"
  },
  "typography": {
    "displayOriginal": "Geist",
    "displayRender": "Host Grotesk",
    "bodyOriginal": "DM Sans",
    "bodyRender": "DM Sans",
    "monoOriginal": "Geist Mono",
    "monoRender": "IBM Plex Mono"
  },
  "metrics": {
    "heroSize": "48px",
    "panelHeading": "36px",
    "pillRadius": "9999px",
    "smallRadius": "10px"
  }
}

---
version: "1.0"
name: "Dimension"
description: "Sistema visual de asistente AI para trabajo moderno: fondo carbon oscuro, neblina azul a arena, superficies glass sobrias, tipografia sans precisa y una interfaz que combina calma nocturna con claridad operativa."
source:
  url: "https://www.dimension.dev/"
  capture: "dimension-hero.jpg"
  generatedWith: "url-inspiration-styleguide"
classification:
  theme: "dark"
  colorFamily: "blue"
  sections:
    - "Glassmorphism"
    - "Minimal Tech"
    - "Moderno"
colors:
  dominant: "#73A7FF"
  primary: "#73A7FF"
  primary-hover: "#8AB5FF (derivado para completar el sistema)"
  primary-active: "#5E95F2 (derivado para completar el sistema)"
  secondary: "#FFFFFF"
  accent: "#6B62F2"
  accent-soft: "#E1E1E1"
  neutral: "#EDEDED"
  background: "#0C0C0C"
  background-soft: "#1D1D1D"
  surface: "rgba(255,255,255,0.05)"
  surface-strong: "rgba(255,255,255,0.10)"
  surface-light: "#FCFCFC"
  text-primary: "#FFFFFF"
  text-secondary: "#EDEDED"
  text-muted: "#B2B2B2"
  text-on-primary: "#0F1722"
  text-on-secondary: "#161616"
  border: "rgba(255,255,255,0.20)"
  border-subtle: "rgba(212,212,212,0.10)"
  success: "#73A7FF"
  success-bg: "rgba(115,167,255,0.12) (derivado para completar el sistema)"
  warning: "#E1E1E1"
  warning-bg: "rgba(225,225,225,0.12) (derivado para completar el sistema)"
  error: "#FF0000"
  error-bg: "rgba(255,0,0,0.10) (derivado para completar el sistema)"
  info: "#6B62F2"
  info-bg: "rgba(107,98,242,0.20)"
typography:
  display-lg:
    fontFamily: "Geist"
    fontSize: "48px"
    fontWeight: 500
    lineHeight: "48px"
    letterSpacing: "normal"
  heading-md:
    fontFamily: "Geist"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: "40px"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 700
    lineHeight: "20px"
  label-sm:
    fontFamily: "Geist"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "20px"
  mono-sm:
    fontFamily: "Geist Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16px"
rounded:
  sm: "10px"
  md: "17px"
  lg: "24px (derivado visual)"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "32px"
  hero-gap: "40px (derivado visual)"
  section-padding: "88px (derivado visual)"
components:
  button-primary:
    backgroundColor: "#FFFFFF"
    textColor: "#161616"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "12px 22px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#FFFFFF"
    border: "1px solid rgba(255,255,255,0.20)"
    rounded: "{rounded.full}"
    padding: "12px 18px"
  panel-glass:
    backgroundColor: "rgba(255,255,255,0.05)"
    border: "1px solid rgba(255,255,255,0.20)"
    rounded: "{rounded.sm}"
    padding: "16px to 20px"
notes:
  fidelity: "Colores, tipografias base y radios principales salen del sitio observado. Estados, ciertas sombras y parte del spacing se derivan visualmente cuando el sitio no expone el valor exacto."
  specimen: "AaEeCcGg50."
---

# DESIGN.md - Dimension

> Sistema de diseno extraido de `https://www.dimension.dev/`.
>
> Generado siguiendo el skill `url-inspiration-styleguide`.
>
> Base observada desde captura real, HTML en vivo, estilos computados y familias cargadas por el sitio.

---

## 1. Tema Visual y Atmosfera

Dimension no se presenta como una herramienta AI hiperactiva.

Tampoco como una interfaz corporativa neutra.

Su mayor acierto es que se ubica en una zona intermedia mucho mas sofisticada:

una calma nocturna con inteligencia visible.

El fondo base es carbon oscuro.

Encima aparece una neblina de color muy controlada, entre azul aireado y arena rosada.

Ese gradiente no busca espectaculo.

Busca contexto.

Hace que la interfaz parezca viva sin caer en el brillo obvio de muchas marcas de AI.

El headline `The AI coworker that never sleeps.` comunica la promesa completa en una sola frase.

No hay barroquismo.

No hay grandilocuencia.

Hay una mezcla precisa de ayuda constante, automatizacion y presencia siempre disponible.

La interfaz que acompana al hero refuerza esa promesa con tarjetas limpias, tabs discretos, contenedores oscuros y superficies levemente translúcidas.

La marca transmite:

- asistencia continua
- claridad diaria
- trabajo conectado
- inteligencia contextual

El sistema visual se construye sobre una idea importante:

la AI no se ve como magia.

Se ve como una capa fluida sobre el trabajo real.

Por eso el lenguaje es tan contenido.

Los blancos son suaves.

Los bordes son finos.

Las cards parecen flotar apenas.

No gritan.

### Palabras clave de personalidad

- nocturno
- preciso
- calmado
- conectado
- operativo
- asistivo
- elegante
- moderno
- silencioso
- smart

### Densidad del layout

Densidad media.

Hay bastante aire, pero las cards y los paneles sostienen estructura constante.

### Modo preferido

Oscuro.

La identidad depende del fondo carbon, los brillos suaves y la legibilidad clara sobre superficie oscura.

### Nivel de ornamentacion

Bajo a medio.

Hay gradiente atmosferico y glass sobrio, pero no decoracion excesiva.

### Audiencia visual objetivo

Profesionales del conocimiento, founders, operadores y equipos que viven entre apps y quieren una AI que reduzca carga mental sin introducir ruido visual.

### Tension principal

La tension que define a Dimension es:

soft glow contra estructura rigurosa.

Eso la vuelve contemporanea sin volverse difusa.

---

## 2. Paleta de Colores y Roles Semanticos

Dimension usa una paleta corta y muy disciplinada.

Los colores no compiten.

Se reparten funciones claras:

- carbon para fondo
- blanco para legibilidad y CTA
- azul claro para identidad activa
- violeta para info/estado de capa inteligente
- grises translúcidos para superficie

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Azul briefing | `--color-primary` | `#73A7FF` | glow sutil, acento de identidad, indicadores funcionales | `#0F1722` |
| Azul hover | `--color-primary-hover` | `#8AB5FF` | estado hover derivado del acento | `#0F1722` |
| Azul active | `--color-primary-active` | `#5E95F2` | estado activo derivado | `#FFFFFF` |
| Blanco operativo | `--color-secondary` | `#FFFFFF` | CTA principal, texto de maxima jerarquia | `#161616` |
| Violeta cognition | `--color-accent` | `#6B62F2` | info, soporte AI, resplandor secundario | `#FFFFFF` |
| Gris paper | `--color-accent-soft` | `#E1E1E1` | superficies claras, texto de alto contraste en seccion light | `#161616` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Canvas dark | `--color-background` | `#0C0C0C` | fondo principal del sitio |
| Surface dark | `--color-background-soft` | `#1D1D1D` | cards oscuras y bloques internos |
| Glass light 5 | `--color-surface` | `rgba(255,255,255,0.05)` | paneles flotantes, tabs, overlays |
| Glass light 10 | `--color-surface-strong` | `rgba(255,255,255,0.10)` | estados destacados, nav, capsulas |
| Surface light | `--color-surface-light` | `#FCFCFC` | CTA claro, seccion de contraste y piezas sobre fondo blanco |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#FFFFFF` | headline, labels primarios, CTA secundarios |
| Texto secundario | `--color-text-secondary` | `#EDEDED` | subcopy y headings en dark menos enfaticos |
| Texto muted | `--color-text-muted` | `#B2B2B2` | metadata, tabs inactivos, notas |
| Texto sobre primario | `--color-text-on-primary` | `#0F1722` | si el azul entra como fondo o chip |
| Texto sobre surface light | `--color-text-on-secondary` | `#161616` | CTA blanco y cards claras |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#73A7FF` | `#0F1722` |
| Exito (bg) | `--color-success-bg` | `rgba(115,167,255,0.12)` | `#FFFFFF` |
| Advertencia | `--color-warning` | `#E1E1E1` | `#161616` |
| Advertencia (bg) | `--color-warning-bg` | `rgba(225,225,225,0.12)` | `#FFFFFF` |
| Error | `--color-error` | `#FF0000` | `#FFFFFF` |
| Error (bg) | `--color-error-bg` | `rgba(255,0,0,0.10)` | `#FFFFFF` |
| Info | `--color-info` | `#6B62F2` | `#FFFFFF` |
| Info (bg) | `--color-info-bg` | `rgba(107,98,242,0.20)` | `#FFFFFF` |

### Estructura cromatica

El sistema no esta impulsado por saturacion.

Esta impulsado por translucidez y contraste.

Los colores viven muchas veces como:

- lineas suaves
- fondos al 5%
- glows discretos
- superficies microelevadas

### Regla clave de color

Si el azul toma mas peso del necesario, la marca se acerca a SaaS generico.

Si se elimina por completo, pierde identidad.

El equilibrio correcto es:

blanco y gris para operacion, azul para inteligencia.

---

## 3. Reglas de Tipografia

```css
--font-heading: "Host Grotesk", "Geist", sans-serif;
--font-body: "DM Sans", sans-serif;
--font-mono: "IBM Plex Mono", "Geist Mono", monospace;
```

**Google Fonts para esta pieza**

```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=DM+Sans:wght@400;500;700&family=Host+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota de sustitucion**

La fuente display real observada en el sitio es `Geist`.

Para el HTML autocontenido se usa `Host Grotesk` como sustituta de Google Fonts.

Se eligio porque conserva:

- neutralidad precisa
- tono contemporaneo
- aperturas limpias
- presencia de producto moderno

`DM Sans` si aparece cargada y se conserva como fuente de cuerpo.

`Geist Mono` se sustituye por `IBM Plex Mono` para la capa tecnica del HTML.

### Escala tipografica

| Token | rem | px | line-height | Uso |
|------|-----|----|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.35 | metadata mono, counters, labels finos |
| `--text-sm` | 0.875rem | 14px | 1.45 | nav, botones, tabs |
| `--text-base` | 1rem | 16px | 1.5 | cuerpo general |
| `--text-md` | 1.125rem | 18px | 1.55 | CTA o copy fuerte |
| `--text-xl` | 2.25rem | 36px | 1.11 | headings de cards y modulos |
| `--text-2xl` | 3rem | 48px | 1 | headline principal |
| `--text-3xl` | 3.125rem | 50px | 1.12 | seccion de cierre grande |

### Pesos tipograficos

```css
--font-regular: 400;
--font-medium: 500;
--font-bold: 700;
```

### Letter spacing

```css
--tracking-tight: -0.02em (derivado visual para el HTML)
--tracking-normal: 0em
--tracking-wide: 0.03em
--tracking-mono: 0.08em
```

En los estilos computados observados, el sistema trabaja mayormente con tracking normal.

La ligera compresion del HTML de inspiracion se usa solo para que el lenguaje se sienta mas cercano al original en Google Fonts.

### Regla clave

La tipografia no busca caracter exotico.

Busca parecer la mejor version posible de una herramienta que ya entiende tu trabajo.

Eso exige limpieza, no adorno.

---

## 4. Estilos de Componentes

### Boton primario

```
Background: #FFFFFF
Color: #161616
Border: 1px solid #FFFFFF
Border-radius: 9999px
Padding: 12px 22px
Font-family: "Geist" / HTML substitute "Host Grotesk"
Font-size: 14px
Font-weight: 500

Hover:
  Background: #FCFCFC
  Transform: translateY(-1px)

Active:
  Background: #E1E1E1
  Transform: translateY(0)

Focus:
  Outline: 2px solid #73A7FF
  Outline-offset: 3px

Disabled:
  Opacity: 0.45
  Cursor: not-allowed
```

### Boton secundario / nav pill

```
Background: transparent o rgba(255,255,255,0.05)
Color: #FFFFFF
Border: 1px solid rgba(255,255,255,0.20)
Border-radius: 9999px
Padding: 12px 18px

Hover:
  Background: rgba(255,255,255,0.10)
```

### Tab de feature

```
Background: rgba(0,0,0,0.05) para activa
Background: transparent para inactiva
Color: #FFFFFF
Border-radius: 10px
Padding: 12px 14px
```

### Panel glass

```
Background: rgba(255,255,255,0.05)
Border: 1px solid rgba(255,255,255,0.20)
Border-radius: 10px
Padding: 16px to 20px
Backdrop-filter: blur(12px) (derivado visual para completar la tecnica)
```

### Panel hero dark

```
Background: #1D1D1D
Border: 1px solid rgba(255,255,255,0.10)
Border-radius: 24px (derivado visual de familia)
Shadow: 0 24px 64px rgba(0,0,0,0.28) (derivado visual)
```

### Card clara

La seccion `Built for real work.` invierte el sistema y lleva el fondo a un blanco sucio claro.

Receta observable:

```
Background: #FCFCFC
Color: #161616 o #000000
Border: none o line muy suave
```

### Input / waitlist

`(no detectado)` como receta expuesta completa.

Si se reconstruye, debe seguir:

- pill radius
- glass o surface suave
- texto blanco en dark

### Navegacion inferior fija

Uno de los gestos distintivos del sitio es una nav inferior flotante.

Receta visual:

```
Background: rgba(255,255,255,0.10) sobre dark
Border: 1px solid rgba(255,255,255,0.20)
Border-radius: 9999px
Backdrop-filter: blur(12px)
```

### Regla de componente

Todo componente debe sentirse como una interfaz que se posa sobre el trabajo, no que lo recubre con peso innecesario.

---

## 5. Principios de Layout

Dimension construye layout por capas, no por bloques pesados.

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 56px;
--space-10: 88px;
```

### Estructura general

El hero se divide claramente entre:

- copy a la izquierda
- demo operativa a la derecha

Esa estructura evita ambiguedad.

El producto se entiende de inmediato.

### Filosofia de layout

La experiencia busca que el usuario sienta continuidad.

No son muchas pantallas.

Es un flujo de trabajo condensado.

### Contenedores

Los contenedores son amplios, con mucho aire lateral y cards que no tocan el borde.

### Jerarquia espacial

La jerarquia viene de:

- headline
- card demo
- capsulas
- fondo atmosferico

### Grid

Aunque no expone una reticula obvia, la pagina parece trabajar con un grid muy ordenado y columnas estables en desktop.

### Regla clave

No convertir el layout en una pagina demasiado editorial o demasiado dashboard.

Debe seguir siendo producto.

Pero producto con calma.

---

## 6. Profundidad y Elevacion

Dimension si usa profundidad.

Pero la usa con moderacion y limpieza.

### Naturaleza de la elevacion

La elevacion principal no es sombra dura.

Es glass + blur + borde fino + glow atmosferico de fondo.

### Sistema de sombras

```css
--shadow-soft: 0 16px 40px rgba(0,0,0,0.20);
--shadow-panel: 0 24px 64px rgba(0,0,0,0.28);
--shadow-glow: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 40px rgba(107,98,242,0.10);
```

Las sombras exactas no se exponen de forma aislada en el sitio visible.

Estas recetas se derivan para completar el sistema manteniendo su comportamiento.

### Tabla de niveles

| Nivel | Uso | Receta |
|------|-----|--------|
| Hairline | nav y capsulas | borde sutil sin sombra dura |
| Soft panel | tabs y glass cards | `--shadow-soft` |
| Hero panel | demo principal | `--shadow-panel` + borde sutil |
| Glow info | highlight AI | `--shadow-glow` |

### Radios

```css
--radius-sm: 10px;
--radius-md: 17px;
--radius-lg: 24px;
--radius-full: 9999px;
```

### Regla de profundidad

Si el blur o el glow se vuelven muy evidentes, el sistema pierde credibilidad.

La profundidad correcta en Dimension apenas se percibe.

Pero si la quitas por completo, la interfaz se aplana demasiado.

---

## 7. Lo que Si y lo que No

### Si hacer

1. Usa un fondo nocturno con gradiente muy suave porque la marca vive de esa atmosfera continua y no de un color plano absoluto.

2. Mantén las superficies glass sobrias y finas porque el sistema necesita ligereza visual, no efectos llamativos.

3. Usa la tipografia como un instrumento de claridad y no de expresion exotica porque la promesa de la marca es eficacia serena.

4. Reserva el blanco como CTA o maxima jerarquia porque eso le da valor dentro del fondo oscuro.

5. Deja que el azul sea una capa de inteligencia y no un color de relleno masivo porque ahi esta el sello operativo de la marca.

6. Diseña cards y paneles como capas flotantes limpias porque eso conecta con la idea de una AI que acompana el trabajo real.

### No hacer

1. No conviertas el gradiente del fondo en un espectaculo cromatico porque perderia sofisticacion y se volveria otra marca AI mas.

2. No sustituyas los pills suaves por botones duros o angulares porque la interfaz perderia cercania y fluidez.

3. No sobrecargues de bordes, divisores y sombras porque la marca funciona mejor cuando todo parece ligero.

4. No uses el azul como color base dominante de todas las superficies porque se vuelve SaaS comun y desaparece la jerarquia.

5. No mezcles demasiadas familias tipograficas porque la claridad de producto se rompe rapido.

6. No vuelvas la UI demasiado minimal en blanco y negro porque sin la neblina y el acento azul el sistema pierde humanidad.

---

## 8. Comportamiento Responsive

La experiencia observada sugiere una adaptacion cuidadosa entre desktop y mobile.

### Filosofia responsive

El demo debe seguir siendo comprensible cuando cambia el ancho.

No puede quedar solo como decoracion lateral.

### Desktop

- hero en dos columnas
- demo grande
- headline de 48px

### Tablet

- demo y copy mas cercanos
- cards apiladas con radios constantes

### Mobile

- headline apilado pero fuerte
- CTA visible muy pronto
- tabs compactas y panel principal con buena lectura

### Touch targets

La interfaz observada usa capsulas y botones suficientemente amplios.

Mantener `44px` o mas de altura funcional es consistente con la marca.

### Breakpoints

`(no detectado explícitamente)`

Para completar el sistema:

```css
@media (max-width: 1200px) { ... }
@media (max-width: 900px) { ... }
@media (max-width: 640px) { ... }
```

### Regla responsive

No sacrificar el hero por intentar mantener demasiadas piezas del demo visibles a la vez.

Es mejor priorizar uno o dos momentos fuertes y dejar el resto para scroll.

---

## 9. Guia de Prompts para Agentes

### Inicializacion de sesion

```text
Construye una interfaz con lenguaje Dimension: fondo carbon oscuro, neblina azul suave, superficies glass discretas, tipografia sans limpia, CTA blancos y una sensacion general de AI calmada pero muy competente.
```

### Nueva pantalla

```text
Disena una nueva pantalla siguiendo el sistema Dimension. Prioriza claridad operativa, pocos colores, bordes finos, blur sobrio y una jerarquia donde el trabajo real siempre se entienda antes que el efecto visual.
```

### Anadir componente al UI kit

```text
Agrega un componente al UI kit de Dimension respetando: dark mode, radii suaves entre 10px y pill total, white primary CTA, paneles translúcidos y tipografia neutral de producto.
```

### Revision de consistencia

```text
Revisa esta interfaz con criterio Dimension. Marca donde el glass sea demasiado fuerte, donde falte claridad en la jerarquia del trabajo, donde el azul domine de mas o donde los componentes se sientan pesados para el sistema.
```

### Variante de campana

```text
Genera una variante de campana dentro del sistema Dimension. Puedes aumentar ligeramente el glow azul-violeta, pero la experiencia debe seguir sintiendose sobria, nocturna y orientada a productividad real.
```

### Variante para onboarding

```text
Adapta el sistema Dimension a un flujo de onboarding. Mantén los CTA blancos, los fondos oscuros y el clima calmado, pero simplifica los paneles para que la persona entienda valor y accion en segundos.
```

---

## 10. Movimiento

Dimension sugiere movimiento constante, pero de baja friccion.

No es una marca de gran teatralidad.

Es una marca de continuidad suave.

### Nivel de motion

Medio.

Lo suficiente para sostener la percepcion de interfaz viva.

### Patrones observados

- resplandor y atmosfera en fondo
- paneles flotantes
- cambio de tabs
- capsulas y elementos suaves con hover

### Tokens de motion

```css
--motion-fast: 140ms;
--motion-base: 220ms;
--motion-slow: 420ms;
--ease-standard: cubic-bezier(.16, 1, .3, 1);
--ease-soft: cubic-bezier(.2, .8, .2, 1);
```

### Propiedades animadas

- opacity
- translateY
- scale sutil
- background-color
- blur / glow ambiental en bajo nivel

### Regla de motion

Todo movimiento debe sentirse como una transicion de contexto de trabajo.

Nunca como celebracion.

### Reduced motion

La pieza debe respetar `prefers-reduced-motion`.

En este sistema es especialmente importante porque el valor principal no depende de una animacion compleja.

Depende de una UX calmada y disponible.

---

## Anexo: Stack tecnico detectado

### Plataforma / implementacion

- Web moderna con tipografias custom cargadas

### Tipografias detectadas

- `Geist`
- `Geist Mono`
- `DM Sans`
- `Inter` aparece cargada en la pagina, pero no como identidad principal visible

### Colores detectados

- `#0C0C0C`
- `#1D1D1D`
- `#FFFFFF`
- `#EDEDED`
- `#E1E1E1`
- `#73A7FF`
- `#6B62F2`
- `#FF0000`

### Componentes detectados

- nav capsulada
- CTA primario blanco
- paneles glass dark
- tabs de workflow
- card demo principal

### Motion / visual behavior

- blur atmosferico de fondo
- glass ligero
- transiciones sobrias

### 3D / WebGL

`(no detectado)`

### Nota de fidelidad

Los estados extendidos, algunas sombras y ciertos tamaños complementarios se derivan para completar el sistema.

Los colores, el modo, las familias principales y las formas centrales provienen del sitio real observado.