Move, hold,
& lend the dollar

:root {
  /* Color - blanco + azul-negro + verde-teal + neutros azulados */
  --color-canvas: #FFFFFF;
  --color-surface: #F0F0F0;
  --color-surface-blue: #E3E9F2;
  --color-ink: #011821;           /* azul-negro, texto principal */
  --color-ink-soft: #354A50;      /* texto secondary */
  --color-ink-tertiary: #465962;  /* texto tertiary */
  --color-ink-light: #A9ACB6;     /* texto light, 36 ocurrencias */
  --color-primary: #167E6C;       /* verde-teal, acento de marca */
  --color-secondary: #0C6997;     /* azul oscuro, hover */
  --color-accent: #4575CD;        /* azul gradient */
  --color-orange: #EC652B;        /* naranja puntual */
  --color-border: #E3E9F2;
  --color-on-primary: #FFFFFF;

  /* Gradiente real del sitio */
  --hero-gradient: linear-gradient(165deg, #4575CD 0%, #7EA7E9 92%);

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

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

  /* Radius + shadow */
  --radius-sm: 4px;
  --radius-lg: 8px;   /* --border-radius real, predominante */
  --shadow-sm: 0 1px 2px 0 rgba(1,24,33,0.04), 0 2px 4px 0 rgba(1,24,33,0.06);

  /* 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: #FFFFFF;
  --color-surface: #F0F0F0;
  --color-surface-blue: #E3E9F2;
  --color-ink: #011821;
  --color-ink-soft: #354A50;
  --color-ink-light: #A9ACB6;
  --color-primary: #167E6C;
  --color-secondary: #0C6997;
  --color-accent: #4575CD;
  --color-border: #E3E9F2;
  --color-on-primary: #FFFFFF;

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

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

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

  --radius-sm: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px 0 rgba(1,24,33,0.04), 0 2px 4px 0 rgba(1,24,33,0.06);
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

{
  "color": {
    "canvas": "#FFFFFF",
    "surface": "#F0F0F0",
    "surfaceBlue": "#E3E9F2",
    "ink": "#011821",
    "inkSoft": "#354A50",
    "inkTertiary": "#465962",
    "inkLight": "#A9ACB6",
    "primary": "#167E6C",
    "secondary": "#0C6997",
    "accent": "#4575CD",
    "orange": "#EC652B",
    "border": "#E3E9F2"
  },
  "gradient": {
    "primary": "linear-gradient(165deg, #4575CD 0%, #7EA7E9 92%)"
  },
  "font": {
    "display": { "family": "Hanken Grotesk", "substituteOf": "SuisseIntl (Swiss Type, commercial)" },
    "body": { "family": "Hanken Grotesk", "substituteOf": "SuisseIntl" },
    "mono": { "family": "JetBrains Mono", "substituteOf": "SuisseIntlMono (Swiss Type)" }
  },
  "fontSize": {
    "displayXl": { "px": 80, "weight": 500, "lineHeight": "100%", "tracking": "-0.03em" },
    "displayLg": { "px": 56, "weight": 500, "lineHeight": "105%" },
    "displayMd": { "px": 36, "weight": 500, "lineHeight": "110%" },
    "bodyMd": { "px": 16, "weight": 400, "lineHeight": "160%" },
    "label": { "px": 14, "weight": 500, "lineHeight": "140%" }
  },
  "radius": { "sm": "4px", "lg": "8px" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "section": "80px" },
  "shadow": { "sm": "0 1px 2px 0 rgba(1,24,33,0.04), 0 2px 4px 0 rgba(1,24,33,0.06)" },
  "motion": { "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "durationFast": "200ms" }
}

---
version: "1.0"
name: "Column"
description: "Sistema visual de infraestructura bancaria B2B: canvas blanco puro, texto azul-negro (#011821), acento verde-teal (#167E6C) como firma de marca, tipografía SuisseIntl (Swiss Type, commercial) para todo el sistema, y una paleta de neutros azulados que da profundidad técnica. Minimal tech fintech con precisión suiza y calor controlado."
colors:
  primary: "#167E6C"
  primary-hover: "#0C6997"
  secondary: "#4575CD"
  accent: "#EC652B"
  accent-soft: "#E3E9F2"
  neutral: "#A9ACB6"
  background: "#FFFFFF"
  surface: "#F0F0F0"
  surface-elevated: "#FFFFFF"
  surface-blue: "#E3E9F2"
  text-primary: "#011821"
  text-secondary: "#354A50"
  text-muted: "#465962"
  text-light: "#A9ACB6"
  text-on-primary: "#FFFFFF"
  border: "#E3E9F2"
  border-subtle: "#F0F0F0"
  border-emphasized: "#A9ACB6"
  blue-800: "#0C6997"
  blue-50: "#E3E9F2"
  gradient-primary: "linear-gradient(165deg, #4575CD 0%, #7EA7E9 92%)"
  success: "#167E6C"
  warning: "#FFDA44"
  error: "#D80027"
  info: "#4575CD"
typography:
  display-xl:
    fontFamily: "SuisseIntl"
    fontSize: "80px"
    fontWeight: 500
    lineHeight: "100%"
    letterSpacing: "-0.03em"
  display-lg:
    fontFamily: "SuisseIntl"
    fontSize: "56px"
    fontWeight: 500
    lineHeight: "105%"
  display-md:
    fontFamily: "SuisseIntl"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: "110%"
  heading:
    fontFamily: "SuisseIntl"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: "130%"
  body-lg:
    fontFamily: "SuisseIntl"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "160%"
  body-md:
    fontFamily: "SuisseIntl"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "160%"
  body-sm:
    fontFamily: "SuisseIntl"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "150%"
  label:
    fontFamily: "SuisseIntl"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "140%"
  mono:
    fontFamily: "SuisseIntlMono"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "140%"
rounded:
  sm: "4px"
  md: "6px"
  lg: "8px"
  xl: "12px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  gap: "16px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: "12px 20px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: "12px 20px"
  card:
    backgroundColor: "{colors.surface-elevated}"
    borderColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - Column

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

---

## 1. Tema Visual y Atmósfera

Column se siente como un banco que se viste de estudio suizo. El canvas es blanco puro `#FFFFFF`, sin crema ni tibio: es un blanco limpio de producto fintech que deja que los neutros azulados y el acento verde-teal hagan el trabajo. Sobre ese blanco cae un texto azul-negro `#011821` (`--color-0` real), no negro puro, que le da al sistema una profundidad de ink técnica, como tinta de infraestructura. La tipografía **SuisseIntl** (Swiss Type, commercial, self-hosted) cubre todo el sistema con peso 500 para display y 400 para body, una neo-grotesk suiza precisa que se siente como la voz de un banco moderno.

La personalidad aparece en el acento verde-teal `#167E6C` (43 ocurrencias en el HTML), un color que se siente como dinero, crecimiento y estabilidad, sin ser el verde banking tradicional. Los neutros azulados (`#354A50`, `#465962`, `#A9ACB6`) sostienen texto secundario y bordes sin introducir gris cálido, manteniendo el tono técnico-preciso. Un gradiente azul `linear-gradient(165deg, #4575CD 0%, #7EA7E9 92%)` (`--bg-gradient-primary` real) aparece en momentos de marca como un gesto de profundidad.

La traducción digital debe conservar esa mezcla de banco moderno y precisión suiza: canvas blanco, texto azul-negro, SuisseIntl para todo con peso 500/400, verde-teal como acento de marca, neutros azulados para profundidad técnica, y un gradiente azul como gesto puntual. Cuando el sistema se ve bien, parece el cruce entre un banco de infraestructura B2B, un estudio de diseño suizo y un producto fintech premium.

**Palabras clave de personalidad**: suizo, preciso, fintech, teal, infraestructura, limpio, técnico, B2B

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

**Modo preferido**: claro (blanco puro)

**Nivel de ornamentación**: minimal (tipografía suiza protagonista, acento teal puntual, sin decoración superficial)

**Audiencia visual objetivo**: desarrolladores, equipos de producto y empresas fintech que buscan infraestructura bancaria programable, que aprecian un sistema preciso y bien diseñado

---

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

La paleta real del sitio se organiza con un sistema de variables CSS nombradas (`--color-*`, `--bg-*`, `--btn-*`) más colores hex directos. El acento principal es el verde-teal `#167E6C` que organiza CTA, links y badges. Los neutros azulados sostienen texto y bordes.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Verde-teal | `--color-primary` | `#167E6C` | Acento primary, CTA, links, marca (43 ocurrencias en HTML) | `#FFFFFF` |
| Azul oscuro | `--color-secondary` | `#0C6997` | Acento secundario, hover, info (`#0C6997` real, 12 ocurrencias) | `#FFFFFF` |
| Azul gradient | `--color-blue` | `#4575CD` | Gradiente primary, links alternativos (`#4575CD` real, 2 ocurrencias) | `#FFFFFF` |
| Naranja | `--color-accent` | `#EC652B` | Acento cálido puntual, highlight (`#EC652B` real, 3 ocurrencias) | `#FFFFFF` |
| Azul gradient light | `--color-blue-light` | `#7EA7E9` | Gradiente primary final (`#7EA7E9` real) | `#011821` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo blanco | `--color-bg` | `#FFFFFF` | Fondo general, `#FFF` real (138 ocurrencias) |
| Superficie gris | `--color-surface` | `#F0F0F0` | Secciones alternas (`#F0F0F0` real, 5 ocurrencias) |
| Superficie elevada | `--color-surface-elevated` | `#FFFFFF` | Cards, modales |
| Superficie azul claro | `--color-surface-blue` | `#E3E9F2` | Fondos de énfasis (`#E3E9F2` real, 27 ocurrencias) |
| Borde claro | `--color-border` | `#E3E9F2` | Bordes sutiles (`#E3E9F2` real) |
| Borde sutil | `--color-border-subtle` | `#F0F0F0` | Hairlines (`#F0F0F0` real) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto primary | `--color-text` | `#011821` | Headings, body, `#011821` real (14 ocurrencias) |
| Texto secondary | `--color-text-secondary` | `#354A50` | Descripciones, `#354A50` real (22 ocurrencias) |
| Texto tertiary | `--color-text-tertiary` | `#465962` | Captions, `#465962` real (10 ocurrencias) |
| Texto muted | `--color-text-muted` | `#575A64` | Metadata, `#575A64` real (3 ocurrencias) |
| Texto light | `--color-text-light` | `#A9ACB6` | Placeholders, `#A9ACB6` real (36 ocurrencias) |
| Texto on-primary | `--color-text-on-primary` | `#FFFFFF` | Texto sobre teal CTA |

### Gradientes de marca

> Column usa gradientes como gestos puntuales de marca, no como baños.

| Nombre | Variable CSS | Valor | Uso |
|--------|-------------|-------|-----|
| Primary | `--bg-gradient-primary` | `linear-gradient(165deg, #4575CD 0%, #7EA7E9 92%)` | Azul, fondo de hero |
| Secondary | `--bg-gradient-secondary` | `linear-gradient(215deg, rgba(orange-400, 0.4), ...)` | Naranja suave |

### Colores de estado

> El sitio no expone estados formales extensos. Estos se derivan de los acentos reales.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#167E6C` | `#FFFFFF` |
| Advertencia | `--color-warning` | `#FFDA44` | `#011821` |
| Error | `--color-error` | `#D80027` | `#FFFFFF` |
| Info | `--color-info` | `#4575CD` | `#FFFFFF` |

> `#167E6C` (success) es el verde-teal de marca. `#D80027` (error) y `#FFDA44` (warning) son reales del HTML (6 y 3 ocurrencias respectivamente, aparecen en elementos de bandera/flag).

---

## 3. Reglas de Tipografía

```css
/* Display + Body + Headings + Labels: SuisseIntl (Swiss Type, commercial,
   self-hosted, 4+1 ocurrencias) -> sustituto Google: Hanken Grotesk
   (neo-grotesk humanista con masa similar y precisión suiza) */
--font-display: 'Hanken Grotesk', 'SuisseIntl', system-ui, sans-serif;
--font-body: 'Hanken Grotesk', 'SuisseIntl', system-ui, sans-serif;

/* Mono: SuisseIntlMono (Swiss Type, commercial, self-hosted, 2 ocurrencias) ->
   sustituto Google: JetBrains Mono (mono geometrica con peso 400) */
--font-mono: 'JetBrains Mono', 'SuisseIntlMono', ui-monospace, 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=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga fuentes Swiss Type (commercial, self-hosted):
- **SuisseIntl** (neo-grotesk suiza, 4+1 ocurrencias, `'SuisseIntl'`): la voz principal del sitio, usada para todo lo display, body y headings. No en Google Fonts. Es una grotesk suiza precisa de Swiss Type.
- **SuisseIntlMono** (mono suiza, 2 ocurrencias): mono para code, specs y labels técnicos. No en Google Fonts.
- **Suisse Neue** (2 ocurrencias): variante para contextos específicos.
- **Inter** (3 ocurrencias): usada en algunos contextos como fallback.

`Hanken Grotesk` sustituye a SuisseIntl: es una neo-grotesk humanista con pesos 300-700, masa similar, y una precisión que encaja con el tono suizo-fintech de Column. No está en la lista AI-slop. `JetBrains Mono` sustituye a SuisseIntlMono: es una mono geometrica con peso 400.

### Escala tipográfica

> Token · px · line-height · peso · uso. Valores reales del CSS (`--text-*` variables, `--btn-font-size: var(--text-200)`).

| Token | px equiv. | Line height | Weight | Uso |
|-------|-----------|-------------|--------|-----|
| `--f-display-xl` | 80px | 100% | 500 | Hero headline (SuisseIntl) |
| `--f-display-lg` | 56px | 105% | 500 | Display secundario |
| `--f-display-md` | 36px | 110% | 500 | 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, nav |
| `--f-mono` | 14px | 140% | 400 | Specs, code (SuisseIntlMono) |

### Pesos tipográficos

```css
--font-regular: 400;   /* Body, descripciones */
--font-medium: 500;    /* Display, headings, labels, CTAs (predominante) */
--font-semibold: 600;  /* Énfasis medio (derivado) */
--font-bold: 700;      /* Raro; el sitio evita bold por precisión suiza */
```

> El peso 500 es el dominante para display, headings y labels. El body va en 400. Esta restricción es la firma suiza de Column: peso 500 se siente más preciso y técnico que 400, sin llegar a la agresividad de 700. Es el peso de un banco moderno que quiere sentirse confiable, no ligero ni gritón.

### Letter spacing

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

**Regla clave**: SuisseIntl siempre va en peso 500 para display y headings, nunca en bold (700). La jerarquía se logra por tamaño y por el contraste peso 500 (display) vs 400 (body). El cuerpo en peso 400 nunca compite con el headline en peso 500; la marca gana por contraste sutil de peso y por el acento verde-teal que aparece como gesto de marca.

---

## 4. Estilos de Componentes

### Botones

**Primario (verde-teal)**
```
Background: var(--color-primary) -> #167E6C
Color de texto: var(--color-text-on-primary) -> #FFFFFF
Padding: 12px 20px
Border-radius: var(--border-radius) -> 8px
Font-family: var(--font-ui) -> SuisseIntl
Font-weight: 500
Font-size: var(--text-200) -> 14px
Border: var(--btn-border-primary) -> var(--color-blue-800)
Transicion: background-color 200ms ease, transform 200ms ease

Hover:
  Background: var(--btn-bg-primary-hover) -> var(--color-blue-800) -> #0C6997
  Transform: translateY(-1px)

Active/Pressed:
  Background: var(--btn-bg-primary-active) -> var(--color-blue-800) -> #0C6997

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--btn-focus-ring-primary) -> var(--color-blue-100)
  Outline-offset: 3px
```

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

**Secundario (outline)**
```
Background: transparent
Color de texto: var(--color-text-primary) -> #011821
Border: 1px solid var(--btn-border-secondary) -> rgba(var(--rgb-gray-600), 0.12)
Border-radius: var(--border-radius) -> 8px
Padding: 12px 20px

Hover:
  Background: var(--btn-bg-secondary-hover) -> var(--color-0) -> #011821
  Color: var(--color-text-on-primary) -> #FFFFFF
  Border-color: var(--color-0)
```

> El botón secundario es un outline que al hover se invierte: fondo negro `#011821` con texto blanco. Es la firma de interacción de Column: de la transparencia al ink.

**Ghost / Link**
```
Background: transparent
Color: var(--btn-text-color-link) -> var(--color-gray-900) -> #011821
Border: none
Padding: 8px 16px

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

### Inputs de texto

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border) -> #E3E9F2
Border-radius: var(--border-radius) -> 8px
Padding: 12px 16px
Font-family: var(--font-ui) -> SuisseIntl
Font-size: 16px
Font-weight: 400
Color: var(--color-text-primary) -> #011821
Placeholder: var(--color-text-light) -> #A9ACB6

Focus:
  Border-color: var(--color-primary) -> #167E6C
  Box-shadow: 0 0 0 3px rgba(22, 126, 108, 0.18)
  Outline: none

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

### Cards

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

Hover (si es clickeable):
  Border-color: var(--color-border-emphasized) -> #A9ACB6
  Box-shadow: 0 4px 12px 0 rgba(1, 24, 33, 0.06)
```

> El radio `8px` (`--border-radius` real) es el radio predominante para cards, inputs y CTA. El sistema es conservador en radios: preciso suizo, no generoso ni afilado.

### Badges / Chips

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

Default:
  Background: var(--color-surface-blue) -> #E3E9F2
  Color: var(--color-text-secondary) -> #354A50

Teal:
  Background: rgba(22, 126, 108, 0.12)
  Color: var(--color-primary) -> #167E6C
```

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

```
Padding: 16px 20px
Border-radius: var(--border-radius) -> 8px
Font-family: var(--font-ui) -> SuisseIntl
Font-size: 14px

Success: background rgba(22,126,108,0.12), color #167E6C
Warning: background rgba(255,218,68,0.15), color #FFDA44 (texto #011821)
Error:   background rgba(216,0,39,0.12), color #D80027
Info:    background rgba(69,117,205,0.12), color #4575CD
```

### Navegación / Header

```
Background: rgba(255, 255, 255, 0.8) con backdrop-filter blur
Height: 64px aprox
Padding horizontal: 24px
Border-bottom: 1px solid var(--color-border)

Logo:
  #011821, peso 500, SuisseIntl

Links de nav:
  Color: var(--color-text-secondary) -> #354A50
  Font-family: var(--font-ui) -> SuisseIntl
  Font-size: 14px
  Font-weight: 500
  Hover: Color var(--color-primary) -> #167E6C

CTA del nav:
  Rectángulo teal #167E6C, texto blanco, 12px 20px, radius 8px
```

---

## 5. Principios de Layout

### Escala de espaciado

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

> Base de 4px. 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 (estándar)
Gutter: 16px
Margin lateral: 24px en desktop, 16px en tablet, 12px en mobile
Patrones base: hero a una columna con titular display sobre fondo blanco o
gradiente azul, grid de 2-3 columnas para productos (Move, Hold, Lend),
secciones de developers con code snippets en SuisseIntlMono, y franjas
full-bleed de producto con captura del dashboard.
```

### Filosofía de espaciado

Column necesita aire para que la tipografía SuisseIntl respire y para que el acento verde-teal tenga presencia precisa. No es una marca de dashboards densos: el espacio sirve para que cada titular en peso 500 se lea como una decisión de banco moderno, no como ruido. Alterna secciones blancas con paneles azul claro `#E3E9F2` y franjas de gradiente azul en momentos de marca; 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 sutiles**. Su sensación de precisión suiza no viene de sombras dramáticas, sino de la tipografía SuisseIntl, el contraste texto azul-negro sobre blanco, y los neutros azulados como profundidad técnica.

### Sistema de sombras

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

> Las sombras usan alpha bajo con el color ink `#011821` del sistema. El sitio es flat-first; las sombras son casi invisibles.

### Niveles de elevación

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

### Radios de borde

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

> Los radios son conservadores y precisos, en línea con el tono suizo-fintech. El radio predominante `8px` (`--border-radius` real) es un rectángulo suave exacto. No hay pills ni esquinas afiladas: la marca prefiere precisión.

---

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

### Sí hacer

1. **Usa el verde-teal `#167E6C` como acento de marca** - CTA, links, focus, badges; es la firma de dinero, crecimiento y estabilidad.
2. **Mantén la tipografía SuisseIntl con peso 500 para display** - la voz suiza precisa es la firma; nunca bold (700).
3. **Usa el texto azul-negro `#011821`** - no negro puro; el dejo azul da profundidad técnica de ink.
4. **Combina SuisseIntl (display) con SuisseIntlMono (code)** - el contraste sans vs mono es parte del lenguaje developer-fintech.
5. **Usa neutros azulados (`#354A50`, `#465962`, `#A9ACB6`)** - la familia de grises azulados sostiene el tono técnico-preciso.
6. **Usa el gradiente azul `#4575CD -> #7EA7E9` como gesto puntual** - en hero y momentos de marca, nunca como baño.

### No hacer

1. **No uses negro puro `#000` ni gris cálido** - el sistema usa `#011821` y neutros azulados; los puros rompen la precisión suiza.
2. **No uses peso 700 (bold) para display** - el peso 500 es la firma; 700 se siente agresivo, no suizo.
3. **No introduzcas colores cálidos (naranja, amarillo) fuera de acentos puntuales** - la paleta es fría-azulada con teal; un cálido destruye la precisión.
4. **No uses sombras dramáticas ni glassmorphism** - la identidad es flat-first con sombras sutiles; la profundidad viene del contraste.
5. **No uses tipografía serif ni decorativa** - la marca es neo-grotesk suiza; una serif rompe el tono fintech.
6. **No uses el gradiente azul como fondo de todo el sitio** - es un gesto puntual de hero; bañar todo el sitio lo vuelve agresivo.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first — sitio custom, breakpoints estándar */
/* sm: */ @media (min-width: 640px) { }
/* md: */ @media (min-width: 768px) { }
/* lg: */ @media (min-width: 1024px) { }
/* xl: */ @media (min-width: 1280px) { }
```

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegación: logo + menú compacto
- Grid: 1 columna
- Display H1: reducido (aprox. 48px, no 80px)
- Padding de contenedor: 16px
- Cards: apiladas, una por fila

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

**Desktop (> 1024px)**
- Navegación: full nav visible
- Grid: 3 columnas en productos, hero a una columna
- Display H1: 80px (display-xl)
- Padding de contenedor: 24px
- Sección padding: 80px vertical

### Touch targets (mobile)

- Botones mínimo: 44x44px (el CTA con 12px 20px + 14px font cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px

### Filosofía responsive

Mobile-first con ambición suiza. En pequeño formato la marca debe seguir sintiéndose como un banco moderno preciso, no como un sitio recortado. Prioriza un titular SuisseIntl contundente (aunque reducido), el acento verde-teal como gesto de marca, y un CTA claro por viewport.

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```text
Estás trabajando con el sistema de diseño de Column.

PALETA: Canvas blanco puro #FFFFFF. Texto azul-negro #011821. Acento primary
verde-teal #167E6C (dinero, crecimiento). Azul #0C6997 como secondary.
Neutros azulados #354A50/#465962/#A9ACB6. Gradiente azul #4575CD -> #7EA7E9.
TIPOGRAFÍA: Display + body en Hanken Grotesk (sustituto de SuisseIntl) peso 500
para display, 400 para body. Mono en JetBrains Mono (sustituto de SuisseIntlMono).
ESTILO: Suizo, preciso, fintech B2B. Minimal tech con acento teal puntual.
Flat-first con sombras sutiles. Radios 8px.
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Claro (blanco puro).
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Debe sentirse como un banco moderno preciso, no como un SaaS genérico
- Usa fondo blanco puro #FFFFFF y texto #011821
- Titulares en Hanken Grotesk peso 500 (sustituto de SuisseIntl), no bold
- Body en peso 400, labels en peso 500
- Acento verde-teal #167E6C para CTA, links y focus
- Gradiente azul solo en hero, no como baño
- Radios 8px para CTA/inputs/cards
- Responsive, con CTA principal teal radius 8px
```

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

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

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

### Prompt: Revisión de consistencia

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

Verifica:
1. Si los titulares display están en peso 500 (no bold 700, no 400)
2. Si el texto es #011821 (no negro puro #000)
3. Si el verde-teal #167E6C es el acento primary (no otros verdes ni azules)
4. Si los neutros son azulados (no grises cálidos)
5. Si los radios son 8px (no pills ni esquinas afiladas)
6. Si hay elementos cálidos fuera de la paleta (no deben estar)
```

### Prompt: Variante de campaña

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

Conserva:
- Blanco #FFFFFF como canvas
- Texto #011821
- Hanken Grotesk peso 500 para display
- Verde-teal #167E6C como primary

Puedes variar:
- El acento secundario entre azul #0C6997, naranja #EC652B o gradiente azul
- El bloque visual de producto (dashboard, API, transacciones)
- El balance entre secciones blancas y franjas azul claro #E3E9F2
```

---

## 10. Movimiento (Motion)

Column usa motion sutil y preciso, consistente con el tono suizo-fintech. Las transiciones son rápidas (200ms) para hover y cambios de estado. No hay animaciones cinematográficas pesadas.

**Nivel de motion**: sutil-preciso

**Duraciones**: 200ms (hover, transiciones de color), 400ms (transiciones medias), 800ms (scroll reveal), 900ms (entrada orquestada del hero), 26s (ken-burns del hero)

**Easings**: `ease` (transiciones generales), `ease-out` (transiciones de salida), `cubic-bezier(0.16, 1, 0.3, 1)` (para reveals escalonados)

**Propiedades animadas**: opacity, transform (translateY, scale), background-color, color, border-color

**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay`
- Scroll reveal por sección (fade-up 26px, 800ms)
- Ken-burns lento en la captura del hero (26s, alternate, scale 1 -> 1.07)
- Transiciones de 200ms en hover de botones y links
- Micro-lift en hover de botones (translateY -1px)
- Cambio de color directo en badges y nav links

```css
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: ease-out;
--duration-fast: 200ms;
--duration-base: 400ms;
--duration-slow: 800ms;
--duration-kenburns: 26s;
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)` y reduce todos los gestos a cambios de color sin desplazamiento. El ken-burns del hero y los reveals escalonados se desactivan; el contenido aparece estático.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Next.js (App Router, chunks `_next/static/` visibles en HTML), sitio de marketing con React Server Components
- **Framework CSS**: CSS custom con variables en `:root` (no Tailwind), sistema de design tokens con nombres semánticos (`--color-*`, `--bg-*`, `--btn-*`, `--text-*`), sistema de escala tipográfica (`--text-100` a `--text-900`)
- **Tipografía**: fuentes Swiss Type (commercial, self-hosted):
  - **SuisseIntl** (neo-grotesk suiza, 4+1 ocurrencias): voz principal. No en Google Fonts.
  - **SuisseIntlMono** (mono suiza, 2 ocurrencias): specs y code. No en Google Fonts.
  - **Suisse Neue** (2 ocurrencias): variante. No en Google Fonts.
  - **Inter** (3 ocurrencias): fallback en algunos contextos.
- **Animación**: CSS-first con transitions. No se detectaron librerías de motion pesadas.
- **3D / WebGL**: no detectado.
- **CDN / assets**: self-hosted, Next.js para deploy
- **Comportamiento**: sitio de marketing de infraestructura bancaria B2B (move, hold, lend the dollar at scale), estructura editorial con hero display, grid de productos, sección de developers con code snippets, y sección de empresa