---
description: design.md for actiun
globs: app/views/**/*.html.erb,lib/jumpstart/app/views/**/*.html.erb
---

version: alpha
name: Actiun
description: Una plataforma mexicana de facturación CFDI y cobranza con IA cuya superficie de marketing se siente como un SaaS financiero serio pero accesible. El canvas base es blanco puro; Actiun Blue (`#1fa3f4`) es el único voltaje de marca, usado escasamente en CTAs primarios, wordmark y links de énfasis. Type pairing recomendado por Fontpair: **Instrument Sans** para display y body ([Instrument Sans + Instrument Sans](https://www.fontpair.co/playground/instrument-sans-instrument-sans?color=2563EB&icons=1)), con **JetBrains Mono** para datos tabulares. El ritmo de página rota entre bandas blancas brillantes y bandas suaves `surface-soft` (#f7f7f7), con tarjetas de feature limitadas por hairlines. Sin bandas oscuras, sin sombras decorativas. Iconografía geométrica y mínima; la profundidad se construye con hairlines, capas de tarjeta sobre tarjeta y elevación suave.

colors:
  primary: "#1fa3f4"
  primary-active: "#0f8edd"
  primary-disabled: "#a5d4f0"
  primary-soft: "#e3f3fd"
  ink: "#0a0b0d"
  body: "#5b616e"
  body-strong: "#0a0b0d"
  muted: "#7c828a"
  muted-soft: "#a8acb3"
  hairline: "#dee1e6"
  hairline-soft: "#eef0f3"
  canvas: "#ffffff"
  surface-soft: "#f7f7f7"
  surface-card: "#ffffff"
  surface-strong: "#eef0f3"
  on-primary: "#ffffff"
  semantic-positive: "#05b169"
  semantic-negative: "#cf202f"
  semantic-warning: "#f4b000"

typography:
  display-mega:
    fontFamily: "'Instrument Sans', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.5px
  display-xl:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.2px
  display-lg:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1px
  display-md:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.09
    letterSpacing: -0.8px
  display-sm:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: -0.4px
  title-lg:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.13
    letterSpacing: -0.3px
  title-md:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0
  title-sm:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  body-md:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-strong:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption-strong:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0
  number-display:
    fontFamily: "'JetBrains Mono', 'Instrument Sans', monospace"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  button:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: 0
  nav-link:
    fontFamily: "'Instrument Sans', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 100px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  base: 16px
  md: 20px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 96px

components:
  top-nav-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 64px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
    height: 44px
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
  button-secondary-light:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
    height: 44px
  button-outline-light:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 11px 19px
    height: 44px
    border: 1px solid "{colors.hairline}"
  button-tertiary-text:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button}"
  button-pill-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    height: 56px
  hero-band-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-mega}"
    padding: 96px
  hero-band-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.display-mega}"
    padding: 96px
  product-ui-card-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    border: 1px solid "{colors.hairline}"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.xl}"
    padding: 32px
    border: 1px solid "{colors.hairline}"
  data-row:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: 16px 0
  status-paid-cell:
    backgroundColor: transparent
    textColor: "{colors.semantic-positive}"
    typography: "{typography.number-display}"
  status-overdue-cell:
    backgroundColor: transparent
    textColor: "{colors.semantic-negative}"
    typography: "{typography.number-display}"
  status-pending-cell:
    backgroundColor: transparent
    textColor: "{colors.semantic-warning}"
    typography: "{typography.number-display}"
  pricing-tier-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px
    border: 1px solid "{colors.hairline}"
  pricing-tier-featured:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px
    border: 2px solid "{colors.primary}"
  cta-band-light:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: 96px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 14px 16px
    height: 48px
    border: 1px solid "{colors.hairline}"
  search-input-pill:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
    height: 44px
  badge-pill:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-strong}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-pill-brand:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption-strong}"
    rounded: "{rounded.pill}"
    padding: 6px 16px
  icon-circular:
    backgroundColor: "{colors.surface-strong}"
    rounded: "{rounded.full}"
    size: 32px
  footer-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    padding: 64px 48px
  footer-link:
    backgroundColor: transparent
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
  legal-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
---

## Overview

Actiun se lee como un SaaS financiero mexicano serio pero accesible — superficies de marketing claras, canvas blanco, espaciado editorial y casi monocromáticas. El único voltaje de marca es **Actiun Blue** (`{colors.primary}` — #1fa3f4, el azul del logo), usado escasamente: cada CTA primaria pill, el wordmark, los énfasis inline en headlines y los badges de tinte azul-soft. Fuera de ese único azul, el sistema es canvas blanco + ink + bandas suaves de gris para elevación + tarjetas con hairline.

Type pairing **Instrument Sans** para headlines, body, captions y navegación — misma familia en display y texto, según [Fontpair — Instrument Sans + Instrument Sans](https://www.fontpair.co/playground/instrument-sans-instrument-sans?color=2563EB&icons=1). Display vive en **peso 700** — bold que genera presencia e impacto visual en los headlines de marketing.

El ritmo de página alterna entre bandas editoriales blancas brillantes y bandas `{colors.surface-soft}` (#f7f7f7) suaves para separación visual. Las tarjetas de feature se agrupan en grids 2-up / 3-up con borde hairline de 1px, sin sombras decorativas. No hay bandas oscuras: Actiun es 100% canvas claro.

**Key Characteristics:**
- Color de acento único: `{colors.primary}` (#1fa3f4 Actiun Blue) lleva cada CTA primaria, wordmark y link inline de marca. Uso escaso.
- Pesos de display en bold — Instrument Sans en peso 700 para todos los headers.
- Geometría pill editorial: cada CTA es `{rounded.pill}` (100px), cada glifo es `{rounded.full}`, cada tarjeta es `{rounded.xl}` (24px). Esquinas filosas ausentes.
- Bandas blancas alternando con `{component.hero-band-soft}` para separación rítmica — sin bandas oscuras en marketing.
- Tarjetas con borde hairline 1px (`{colors.hairline}`) en vez de drop shadows.
- Semántica de cobranza: `{colors.semantic-positive}` (#05b169 pagado), `{colors.semantic-negative}` (#cf202f vencido), `{colors.semantic-warning}` (#f4b000 pendiente) — color de texto únicamente, nunca rellenos de fondo.
- Ritmo de sección de 96px — pacing editorial generoso.

## Colors

### Brand & Accent
- **Actiun Blue** (`{colors.primary}` — #1fa3f4): El único color de marca. Cada CTA primaria pill, el wordmark Actiun y links inline de marca.
- **Actiun Blue Active** (`{colors.primary-active}` — #0f8edd): Estado de press, oscurece sobre el pill primario.
- **Actiun Blue Disabled** (`{colors.primary-disabled}` — #a5d4f0): Tinte azul desvaído para CTAs deshabilitadas.
- **Actiun Blue Soft** (`{colors.primary-soft}` — #e3f3fd): Tinte azul-claro para badges de marca, fondos de pricing-tier featured y zonas de highlight suave.

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): El piso por default de la página.
- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): Banda alterna sutil para separación rítmica.
- **Surface Strong** (`{colors.surface-strong}` — #eef0f3): Relleno gris-claro detrás de botones secundarios, search pills y plates de iconos.
- **Surface Card** (`{colors.surface-card}` — #ffffff): Mismo hex que canvas; nombre semántico para tarjetas que necesitan distinguirse del fondo.

### Hairlines
- **Hairline** (`{colors.hairline}` — #dee1e6): Divider 1px default sobre superficies blancas. Borde de feature cards y form inputs.
- **Hairline Soft** (`{colors.hairline-soft}` — #eef0f3): Divider más liviano — mismo hex que `{colors.surface-strong}`.

### Text
- **Ink** (`{colors.ink}` — #0a0b0d): Display headings, nav primario, énfasis de cuerpo.
- **Body** (`{colors.body}` — #5b616e): Texto corrido default — gris ligeramente frío.
- **Body Strong** (`{colors.body-strong}` — #0a0b0d): Mismo que ink, usado para énfasis más fuerte.
- **Muted** (`{colors.muted}` — #7c828a): Sub-títulos, breadcrumbs, secundario de footer.
- **Muted Soft** (`{colors.muted-soft}` — #a8acb3): Texto de link deshabilitado.
- **On Primary** (`{colors.on-primary}` — #ffffff): Texto blanco sobre CTAs Actiun Blue.

### Status Semantics
- **Semantic Positive** (`{colors.semantic-positive}` — #05b169): Verde de "factura pagada / éxito", color de texto únicamente.
- **Semantic Negative** (`{colors.semantic-negative}` — #cf202f): Rojo de "factura vencida / error", color de texto únicamente.
- **Semantic Warning** (`{colors.semantic-warning}` — #f4b000): Ámbar de "pendiente / próximo a vencer", color de texto únicamente.

## Typography

### Font Family
El sistema corre **Instrument Sans** para display, body, navegación, captions y botones, más **JetBrains Mono** para datos numéricos tabulares, siguiendo el pairing recomendado por [Fontpair](https://www.fontpair.co/playground/instrument-sans-instrument-sans?color=2563EB&icons=1). Stack de fallback: `-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`.

La jerarquía display/body es una sola familia: **Instrument Sans** en headlines (700, tracking negativo) y en UI/cuerpo (400–700, tracking 0); los números tabulares siguen en JetBrains Mono.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-mega}` | 80px | 700 | 1.0 | -1.5px | Hero h1 de homepage |
| `{typography.display-xl}` | 64px | 700 | 1.0 | -1.2px | Heroes secundarios |
| `{typography.display-lg}` | 52px | 700 | 1.0 | -1px | Section heads |
| `{typography.display-md}` | 44px | 700 | 1.09 | -0.8px | Headlines de CTA-band |
| `{typography.display-sm}` | 36px | 700 | 1.11 | -0.4px | Sub-section heads — Instrument Sans |
| `{typography.title-lg}` | 32px | 700 | 1.13 | -0.3px | Títulos de grupos de tarjeta |
| `{typography.title-md}` | 18px | 600 | 1.33 | 0 | Títulos de componente, data-row primaria — Instrument Sans |
| `{typography.title-sm}` | 16px | 600 | 1.25 | 0 | Labels de lista |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Body default |
| `{typography.body-strong}` | 16px | 700 | 1.5 | 0 | Body enfatizado |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Body de footer |
| `{typography.caption}` | 13px | 400 | 1.5 | 0 | Captions de imagen |
| `{typography.caption-strong}` | 12px | 600 | 1.5 | 0 | Labels de badge pill |
| `{typography.number-display}` | 18px | 500 | 1.4 | 0 | Precios, totales, montos — JetBrains Mono |
| `{typography.button}` | 16px | 600 | 1.15 | 0 | CTA pill estándar |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Items de top-nav |

### Principles
- **Display vive en peso 700 (bold).** Los headers de Instrument Sans usan `font-bold` para generar presencia e impacto visual claro en cada sección de marketing.
- **Letter-spacing negativo solo en display.** Display usa tracking de -0.3px a -1.5px; body se mantiene en 0.
- **JetBrains Mono en cada número.** Montos de factura, totales, precios de plan — cualquier dato tabular se renderiza en JetBrains Mono vía `{typography.number-display}`.
- **Instrument Sans 400 corrido, 600 para énfasis cómodo, 700 solo para `body-strong`.** Una sola sans geométrica humanista mantiene lectura clara en español de punta a punta.

### Note on Fonts
Instrument Sans y JetBrains Mono son **fuentes libres** listas para `@import`:
- **Instrument Sans** — [Google Fonts](https://fonts.google.com/specimen/Instrument+Sans), licencia SIL Open Font.
- **JetBrains Mono** — [Google Fonts](https://fonts.google.com/specimen/JetBrains+Mono), licencia SIL Open Font.

No requieren substitutes — los nombres en `fontFamily` son los nombres reales de las familias.

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
- **Section padding:** `{spacing.section}` (96px) para cada banda editorial mayor.
- **Card internal padding:** `{spacing.xl}` (32px) para feature cards y product-UI mockups.

### Grid & Container
- **Max content width:** ~1200px centrado.
- **Editorial body:** Grid de 12 columnas único.
- **Feature card grids:** 2-up en desktop para splits de hero, 3-up para grids de beneficios.
- **Footer:** Lista de links a 6 columnas en desktop.

### Whitespace Philosophy
Pacing editorial generoso — más cercano a un sitio de servicios financieros profesionales que a un dashboard. 96px entre bandas; tarjetas dentro de bandas a 24px de separación. La densidad vive detrás del login, no en marketing.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | Sin shadow, sin border | 80% de las superficies |
| Hairline border | 1px `{colors.hairline}` | Borde de feature cards y product-UI mockups sobre canvas blanco |
| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | Único tier de shadow — solo en hover de tarjetas |
| Banda alterna | `{colors.surface-soft}` band | Separación rítmica vertical entre secciones |

### Decorative Depth
- **Tarjetas con hairline sobre canvas blanco** es el patrón decorativo principal — `{component.feature-card}` y `{component.product-ui-card-light}` se delimitan con borde 1px en lugar de shadow.
- **Bandas suaves alternas** (`{colors.surface-soft}`) crean ritmo vertical sin necesidad de heroes oscuros.
- **Tinte de marca soft** (`{colors.primary-soft}`) para destacar el pricing-tier featured y badges de hero.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Reservado (esencialmente sin uso) |
| `{rounded.xs}` | 4px | Tags inline |
| `{rounded.sm}` | 8px | Filas compactas |
| `{rounded.md}` | 12px | Form inputs |
| `{rounded.lg}` | 16px | Tarjetas medianas |
| `{rounded.xl}` | 24px | Feature cards, product-UI mockups, pricing tiers |
| `{rounded.pill}` | 100px | Todas las CTA, search pills, badges |
| `{rounded.full}` | 9999px | Círculos de icono, avatars |

Pill para interactivo, radio de tarjeta (24px) para contenedores, círculo full para iconos. Esquinas filosas ausentes.

## Components

### Top Navigation

**`top-nav-light`** — Top nav default sobre páginas blancas. Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: wordmark Actiun a la izquierda, menú horizontal primario (Productos / Precios / Contacto / Blog / Recursos / Otros) al centro-izquierda, CTAs "Ingresar" + "Regístrate" a la derecha. El CTA "Regístrate" usa `{component.button-primary}`.

### Buttons

**`button-primary`** — La pill firma Actiun Blue. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (16px / 600), padding 12px × 20px, height 44px, rounded `{rounded.pill}` (100px).

**`button-primary-active`** — Estado de press. Background `{colors.primary-active}`, azul más profundo.

**`button-primary-disabled`** — Tinte azul desvaído. Background `{colors.primary-disabled}`. Cursor not-allowed.

**`button-secondary-light`** — Secundario gris-soft sobre superficies blancas. Background `{colors.surface-strong}`, text `{colors.ink}`, misma geometría pill.

**`button-outline-light`** — Pill transparente con borde hairline. Background transparente, text `{colors.ink}`, borde 1px `{colors.hairline}`. Usada como segunda CTA junto al primary (ej. "Ver Demo de Conciliación" en hero).

**`button-tertiary-text`** — Link de texto inline. Background transparente, text `{colors.primary}`, type `{typography.button}`.

**`button-pill-cta`** — Pill CTA más grande usada en hero de homepage ("Probar Gratis - Sin Tarjeta"). Misma paleta Actiun Blue pero con 56px de height y padding 16px × 32px para una postura más prominente.

### Hero Bands

**`hero-band-light`** — Hero blanco-canvas principal. Background `{colors.canvas}`, text `{colors.ink}`. Layout: badge pill `{component.badge-pill-brand}` arriba ("IA + Facturación CFDI + Cobranza Inteligente"), headline display centrado o a la izquierda en `{typography.display-mega}` (80px / 700) con palabras clave de énfasis en `{colors.primary}`, subhead descriptivo en `{typography.body-md}`, dos CTAs: una primaria + una outline.

**`hero-band-soft`** — Variante con fondo `{colors.surface-soft}` para heroes secundarios o pages de producto. Mismo skeleton, paleta más suave.

### Cards

**`product-ui-card-light`** — Tarjeta product-UI mockup. Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.xl}` (24px), padding 32px, borde 1px `{colors.hairline}`. Frecuentemente se usa para ilustrar pantallas del producto (factura emitida, conciliación, dashboard).

**`feature-card`** — Usada en grids 3-up y 2-up. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.xl}`, padding 32px, borde 1px `{colors.hairline}`. Layout interno: icon arriba, título h3 en title-md, descripción en body-md, opcional lista de bullets.

### Data Surfaces

**`data-row`** — Fila horizontal en listas (facturas, clientes, cobranza). Background transparente, divider 1px hairline inferior. Layout: icono circular 32px o avatar a la izquierda, nombre primario + secundario, columna de monto en `{typography.number-display}`, columna de estado con `{component.status-paid-cell}` / `{component.status-overdue-cell}` / `{component.status-pending-cell}`.

**`status-paid-cell`**, **`status-overdue-cell`**, **`status-pending-cell`** — Celdas de estado inline. Solo color de texto — verde, rojo o ámbar en `{typography.number-display}`, sin relleno de fondo.

**`icon-circular`** — Plate circular detrás de glifos / icons de feature. Background `{colors.surface-strong}`, rounded `{rounded.full}`, 32px de diámetro.

### Pricing

**`pricing-tier-card`** — Tier de pricing estándar. Background `{colors.canvas}`, rounded `{rounded.xl}`, padding 32px, borde 1px hairline. Layout: nombre de tier + precio + checklist de features + CTA pill.

**`pricing-tier-featured`** — El tier destacado. Background `{colors.primary-soft}` (tinte azul Actiun) + borde 2px `{colors.primary}`, text `{colors.ink}`. La inversión sutil con tinte de marca señala "opción recomendada" sin necesidad de ribbons de color.

### Forms

**`text-input`** — Input de texto estándar. Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.md}` (12px), padding 14px × 16px, height 48px, borde 1px hairline. En focus, el borde sube a 2px `{colors.primary}` (Actiun Blue).

**`search-input-pill`** — Search bar con forma de pill. Background `{colors.surface-strong}`, rounded `{rounded.pill}`, padding 12px × 20px, height 44px.

### Tags & Badges

**`badge-pill`** — Pill pequeño usado como labels neutrales. Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-strong}`, rounded `{rounded.pill}`.

**`badge-pill-brand`** — Variante con tinte azul de marca. Background `{colors.primary-soft}`, text `{colors.primary}`, type `{typography.caption-strong}`, rounded `{rounded.pill}`, padding 6px × 16px. Usado en el badge arriba del hero ("IA + Facturación CFDI + Cobranza Inteligente").

### CTA / Footer

**`cta-band-light`** — Banda pre-footer "Recupera tu flujo de efectivo hoy". Background `{colors.surface-soft}`, text `{colors.ink}`, vertical padding 96px. Headline centrado en `{typography.display-lg}` + dos CTAs (una primaria + una outline) + texto microcopy ("Sin tarjeta de crédito • CFDI certificado • Configuración en 5 minutos").

**`footer-light`** — Footer de cierre sobre canvas blanco. Background `{colors.canvas}`, text `{colors.body}`. Lista de links a 6 columnas (Producto / Soluciones / Recursos / Empresa / Legal / Social).

**`footer-link`** — Link individual de footer. Background transparente, text `{colors.body}`.

**`legal-band`** — Strip inferior debajo de columnas de footer. Todo el texto en `{colors.muted}` y `{typography.caption}` (copyright + tagline).

## Do's and Don'ts

### Do
- Reservar `{colors.primary}` (Actiun Blue) para CTAs primarias, wordmark, énfasis inline en headlines y badges de marca.
- Configurar cada CTA como `{rounded.pill}` (100px); cada glifo / icon plate como `{rounded.full}`.
- Usar `font-bold` (peso 700) en todos los headers con `font-display` (Instrument Sans).
- Usar `{colors.surface-soft}` para alternar bandas y crear ritmo vertical entre secciones blancas.
- Renderizar cada valor numérico (monto, total, precio, porcentaje) en JetBrains Mono vía `{typography.number-display}`.
- Usar `{component.badge-pill-brand}` (azul-soft) arriba de heroes para señalar tema o categoría.
- Usar borde hairline 1px en tarjetas en vez de drop shadows.

### Don't
- No introducir un segundo color de marca. Actiun Blue es el único color de acción; positive/negative/warning son solo semánticos.
- No usar pesos menores a 700 en headers de display — `font-medium` (500) resulta demasiado liviano para los headlines de marketing.
- No agregar tiers múltiples de drop shadow — el sistema tiene un solo tier de shadow (hover).
- No usar esquinas filosas `{rounded.none}` (0px) en CTAs.
- No mezclar otra familia sans de marketing distinta de Instrument Sans dentro del mismo headline o bloque de cuerpo.
- No usar bandas oscuras (`#0a0b0d` o similar) en superficies de marketing — Actiun es 100% canvas claro.
- No usar verde/rojo semántico como background de botón.
- No extraer un color de CTA de un widget de terceros (cookie consent, OneTrust). El color de CTA de la marca es el que aparece en CTAs reales del producto, no en modales inyectados.

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Hero h1 80→40px; grid de feature cards 1-up; data-rows se apilan; nav colapsa a hamburger. |
| Tablet | 640–1024px | Hero h1 64px; grid de feature cards 2-up; data-rows se mantienen horizontales pero comprimen columnas. |
| Desktop | 1024–1280px | Hero h1 80px completo; grid de feature cards 3-up; layout completo de data-row. |
| Wide | > 1280px | Contenido limitado a 1200px; tipografía de hero full-bleed. |

### Touch Targets
- CTA primaria pill a 44px de height — al nivel WCAG AAA.
- Hero pill más grande (`{component.button-pill-cta}`) a 56px — muy por encima de AAA.
- Iconos circulares a 32px — al borde; padding de 8px en la fila crea zona efectiva de tap de 48px.
- Search pill a 44px de height — al nivel AAA.

### Collapsing Strategy
- Top nav cambia a hamburger sheet bajo 768px. CTA "Regístrate" se mantiene visible.
- Hero h1 baja gradualmente: 80 → 64 → 52 → 44 → 36px en pantallas pequeñas.
- Pricing tier rows: 3-up → 2-up → 1-up.
- Data rows en mobile se apilan verticalmente: línea de cliente arriba, monto + estado abajo.

## Iteration Guide

1. Enfocarse en un solo componente a la vez. Referenciar las llaves YAML directamente.
2. CTAs nuevas default a `{rounded.pill}` (100px); icon plates default a `{rounded.full}`. Las tarjetas usan `{rounded.xl}`.
3. Las variantes viven como entradas separadas dentro del bloque `components:`.
4. Usar `{token.refs}` en todos lados — nunca hex inline.
5. Hover state no documentado. Solo Default y Active/Pressed.
6. Instrument Sans 700 (`font-bold`) para display headers; Instrument Sans 400/600/700 para body y UI. JetBrains Mono en cada número.
7. Actiun Blue se mantiene escaso — uno o dos momentos azul por banda.
8. Las tarjetas se delimitan con borde hairline 1px, no con shadow.

## Known Gaps

- Iconografía específica de cobranza (status de factura, conciliación, recordatorios) aún por catalogar.
- Estados de factura visual (pagada / vencida / parcial / cancelada / borrador) en data-rows necesitan tokens visuales más allá del color de texto.
- Animaciones y micro-interacciones fuera de alcance de este documento.
- Estados de validación de form más allá de focus no están visibles en las superficies capturadas.
- Componentes in-product (dashboard de cuentas por cobrar, vista de factura emitida, conciliación bancaria) viven detrás del login — este documento cubre solo marketing.
- Sub-temas regionales (banner SAT, addendas Walmart/Amazon/Soriana) no documentados aún.