# Diseñar como Designloop

Guía para agentes que construyen o revisan interfaz de Designloop: la landing (designloop.app) y el portal de clientes. Léela entera antes de empezar.

> Borrador del 2026-10-11. El lenguaje visual sale del CSS de producción; la lista de reflejos que rechazar es una propuesta pendiente de revisión por Andrés.

## Contexto

Designloop es un estudio de diseño de una persona, Andrés, con una suscripción mensual. Propuesta: «Partner de diseño para fundadores obsesionados y equipos ambiciosos». La interfaz tiene que transmitir criterio y calma, no volumen.

## Orden de prioridad

1. Lo que diga Andrés en la conversación.
2. La guía de voz (`docs/VOICE_AND_TONE.md` en el repo de producción) para cualquier texto.
3. Las fichas «En producción» de este sistema.
4. Esta guía.
5. Si nada de lo anterior lo cubre: pregunta. No lo resuelvas con un patrón genérico.

## Integración

- La landing es HTML estático con `public/site/styles.css`. Usa sus clases; no añadas utilidades ni otro framework.
- El portal es Next con Tailwind y los componentes de `src/components/ui`. Usa esos componentes antes de escribir clases sueltas.
- Los textos salen de los diccionarios i18n (español e inglés). Un texto nuevo se pide; no se inventa.

## Lenguaje visual

- Fondo cálido (`--paper`), tinta casi negra (`--ink`) y un único azul (`--accent`) reservado al foco y la selección.
- Titulares en Newsreader ligera (peso 340) con interletraje ajustado; interfaz en Geist; datos en Geist Mono.
- Radios generosos (de 10 a 32 px) y sombras mínimas.
- Movimiento corto con `--ease-out`; las escenas animadas respetan `prefers-reduced-motion`.

## Rechaza estos reflejos

- **Eyebrows y kickers:** etiquetas en mayúsculas con interletraje abierto sobre los titulares.
- **Degradados decorativos** y fondos con brillo.
- **Acento como color de marca:** botones, titulares o iconos en `--accent`.
- **Doble principal:** dos botones rellenos juntos.
- **Sinónimos de clase:** `.btn`, `.button-primary`, `.card-title` inventados. Usa la API publicada abajo.
- **Copy de relleno:** frases genéricas de agencia, superlativos, emojis.

## Accesibilidad

- Contraste AA como mínimo; el texto `--faint` solo para metadatos.
- Foco visible siempre (contorno de 2 px en `--accent`).
- Objetivos táctiles de 44 px; 36 px solo en controles secundarios de cabecera.

---

<!-- Todo lo que sigue se genera desde las fichas y el sync. No se edita a mano. -->

## Estados

- **Sin iniciar:** Esta plataforma aún no tiene implementación.
- **Exploración:** En diseño. Puede cambiar o desaparecer. No se usa en producción.
- **En desarrollo:** Definido y construido en el sistema, pero aún no está en producción.
- **En producción:** Existe en producción y el sync lo verifica contra el código.
- **Obsoleto:** Sigue en producción, pero no se usa en trabajo nuevo.

## API pública de clases (solo «En producción»)

Usa exactamente estos nombres. No inventes sinónimos.

- Botón (landing): `.button`, `.button-outline`, `.button-ghost`, `.button-subtle`, `.button-danger`, `.button-light`, `.button-small`, `.button-block`
- Cabecera (landing): `.site-header`, `.header-inner`, `.wordmark`, `.brand-mark`, `.desktop-nav`, `.nav-actions`, `.menu-toggle`, `.mobile-nav`
- Enlace de texto (landing): `.text-link`
- Mosaico (landing): `.tile`, `.tile-sand`, `.tile-sky`, `.tile-sage`, `.tile-clay`, `.tile-lilac`, `.tile-night`
- Beneficios (landing): `.benefits`, `.benefit-grid`, `.num`
- Cómo funciona (landing): `.steps`, `.step`, `.step-num`
- Estructura de sección (landing): `.section`, `.section-head`, `.wrap`, `.is-center`
- Hero (landing): `.hero`, `.hero-copy`, `.hero-lede`, `.hero-actions`, `.stage-wrap`
- Pie (landing): `.site-footer`, `.footer-inner`, `.footer-brand`, `.footer-nav`, `.footer-contact`, `.footer-meta`, `.footer-legal`
- Precios (landing): `.pricing`, `.plan`
- Preguntas frecuentes (landing): `.faq`, `.faq-inner`, `.faq-intro`, `.faq-list`, `.faq-answer`

## Fichas

### Fundamentos

- [Color](/designloop/fundamentos/color.md) — En producción. Superficies cálidas, tinta casi negra y un único acento azul para el foco y la selección.
- [Ilustración](/designloop/fundamentos/ilustracion.md) — En producción. Ilustraciones de trazo animadas dentro de los mosaicos de la landing. Pendiente de documentar.
- [Paleta Jerte](/designloop/fundamentos/paleta-jerte.md) — En producción. Cinco colores sacados de los cerezos en flor del Valle del Jerte. Blancos neutros para las superficies; oliva, tierra y cielo solo para acentos. Es la paleta de la landing.
- [Superficies](/designloop/fundamentos/superficies.md) — En producción. Las dos partes del producto con código propio, la landing y el portal, y cómo se ven aquí.
- [Tipografía](/designloop/fundamentos/tipografia.md) — En producción. Titulares en serif ligera y ajustada; interfaz en sans; datos en mono.
- [Voz y tono](/designloop/fundamentos/voz-y-tono.md) — En producción. Directa, cercana y tranquila. Los textos aprobados no se reescriben sin petición expresa.

### Tokens

- [Color](/designloop/tokens/color.md) — En producción. Valores de color de producción y el rol de cada uno.
- [Maquetación](/designloop/tokens/maquetacion.md) — En producción. Ancho máximo y margen lateral de la página.
- [Movimiento](/designloop/tokens/movimiento.md) — En producción. Dos curvas y tres duraciones, de la microinteracción a la aparición de bloques.
- [Radios](/designloop/tokens/radios.md) — En producción. Cuatro radios, de controles a contenedores grandes.
- [Sombras](/designloop/tokens/sombras.md) — En producción. Elevación mínima. Una sombra para tarjetas y otra para elementos flotantes.
- [Tipografía](/designloop/tokens/tipografia.md) — En producción. Familias y tamaños tipográficos de producción y el rol de cada uno.

### Componentes

- [Aviso](/designloop/componentes/aviso.md) — En producción. Mensaje en línea que informa del resultado de una acción o de una situación de la cuenta. Cuatro tonos.
- [Botón](/designloop/componentes/boton.md) — En producción. Lanza una acción o lleva al siguiente paso. Un solo botón principal por grupo de acciones.
- [Cabecera de página](/designloop/componentes/cabecera-de-pagina.md) — En producción. Título de las pantallas de lista y de ajustes del portal en serif display, con antetítulo, descripción y acciones opcionales.
- [Cabecera](/designloop/componentes/cabecera.md) — En producción. Barra fija con la marca, la navegación y las dos acciones de cuenta.
- [Enlace de texto](/designloop/componentes/enlace-de-texto.md) — En producción. Enlace subrayado con flecha opcional, para acciones secundarias dentro de un bloque.
- [Indicador de carga](/designloop/componentes/indicador-de-carga.md) — En producción. Círculo que gira mientras una acción está en curso. Hereda el color y el tamaño del texto que acompaña.
- [Insignia](/designloop/componentes/insignia.md) — En producción. Etiqueta corta de estado, rol o categoría. Once tonos, de la marca y de estado.
- [Mosaico](/designloop/componentes/mosaico.md) — En producción. Rectángulo de color de marca con una ilustración centrada. Acompaña a pasos y bloques de la landing.
- [Tarjeta](/designloop/componentes/tarjeta.md) — En producción. Superficie blanca con borde y sombra suave que agrupa un bloque de contenido. Cabecera, título y cuerpo opcionales.

### Patrones

- [Beneficios](/designloop/patrones/beneficios.md) — En producción. Rejilla de seis bloques numerados con título y texto, bajo una cabecera centrada.
- [Cómo funciona](/designloop/patrones/como-funciona.md) — En producción. Tres pasos numerados con un mosaico ilustrado, título y texto. Explica el ciclo de la suscripción.
- [Estructura de sección](/designloop/patrones/estructura-de-seccion.md) — En producción. El esqueleto común de las secciones de la landing. Espaciado vertical, ancho máximo y cabecera con título y entradilla.
- [Hero](/designloop/patrones/hero.md) — En producción. Titular, entradilla y dos acciones centradas, seguidos del escenario animado.
- [Pie](/designloop/patrones/pie.md) — En producción. Pie oscuro con la marca y su lema, la navegación de la página, el contacto, el idioma y los enlaces legales.
- [Precios](/designloop/patrones/precios.md) — En producción. Tarjeta del plan con el precio, lo que incluye y la acción para empezar.
- [Preguntas frecuentes](/designloop/patrones/preguntas-frecuentes.md) — En producción. Introducción fija a la izquierda y lista de preguntas desplegables a la derecha, sobre fondo papel.

### Iniciativas

- [Botón unificado](/designloop/iniciativas/boton-unificado.md) — En producción. Un solo botón para la landing y el portal, con una hoja de estilos compartida.
- [Sistema de diseño agentic-first](/designloop/iniciativas/sistema-agentic-first.md) — En desarrollo. Este mismo sistema. Estructura, enlace con producción y capa para agentes.

## Tokens de producción (commit 455e861)

### Landing

| Token | Valor |
| --- | --- |
| `--bg` | `#161912` |
| `--ink` | `#f2f0e8` |
| `--ink-2` | `#b9b6a8` |
| `--ink-3` | `#6f6f63` |
| `--line` | `#2a2e23` |
| `--line-2` | `#3a3f31` |
| `--panel` | `#1f231a` |
| `--surface` | `#2a2f23` |
| `--deep` | `#596b45` |
| `--deep-ink` | `#f6f6f3` |
| `--deep-2` | `#4f603d` |
| `--deep-line` | `#6f805b` |
| `--deep-mute` | `#dcdfcf` |
| `--accent` | `#b1905c` |
| `--on-accent` | `#1f2419` |
| `--signal` | `#84aad7` |
| `--focus` | `#84aad7` |
| `--ink-fixed` | `#1f2419` |
| `--paper-fixed` | `#f6f6f3` |
| `--cta` | `#596b45` |
| `--cta-ink` | `#f6f6f3` |
| `--cta-hover` | `#4a5a39` |
| `--deep-cta-hover` | `#e3e3df` |
| `--sans` | `'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif` |
| `--mono` | `'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace` |
| `--gutter` | `16px` |
| `--gap` | `12px` |
| `--left` | `clamp(300px, 30.5vw, 470px)` |
| `--radius` | `14px` |
| `--top` | `96px` |
| `--ease` | `cubic-bezier(.16, 1, .3, 1)` |
| `--spring` | `linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1)` |

### Portal de clientes

| Token | Valor |
| --- | --- |
| `--paper` | `#faf9f6` |
| `--paper-2` | `#f3f1eb` |
| `--paper-3` | `#ebe8e0` |
| `--card` | `#ffffff` |
| `--night` | `#1b1b19` |
| `--ink` | `#171716` |
| `--ink-2` | `#3b3b38` |
| `--ink-hover` | `#2e2e2b` |
| `--muted` | `#6d6c66` |
| `--faint` | `#a19f97` |
| `--line` | `#e5e2da` |
| `--line-strong` | `#d4d0c5` |
| `--accent` | `#3b5bdb` |
| `--accent-soft` | `#e4e9fb` |
| `--danger` | `#b42318` |
| `--danger-soft` | `#fdecea` |
| `--success` | `#2f6b4f` |
| `--success-soft` | `#e3efe8` |
| `--warning` | `#8a5a00` |
| `--warning-soft` | `#fbf0d9` |
| `--tile-sand` | `#e9dfcb` |
| `--tile-clay` | `#e8c6b2` |
| `--tile-sage` | `#c6d4cb` |
| `--tile-sky` | `#c7d3ec` |
| `--tile-lilac` | `#d4d1e3` |
| `--shadow-card` | `0 1px 2px rgb(23 23 22 / 4%), 0 12px 32px -16px rgb(23 23 22 / 18%)` |
| `--shadow-pop` | `0 2px 6px rgb(23 23 22 / 6%), 0 24px 48px -20px rgb(23 23 22 / 28%)` |
| `--ease-out` | `cubic-bezier(.16, 1, .3, 1)` |