# Sistema de diseño de vicentemolero.com — reglas para agentes

El sistema de diseño de https://vicentemolero.com/sistema, escrito para que un agente construya una pantalla respetándolo. Valores: [tokens.json](https://vicentemolero.com/sistema/tokens.json) (W3C Design Tokens). Si un valor no está aquí, no está en el sistema: no te lo inventes.

## Tipografía
- Familias: Inter para leer; IBM Plex Mono solo en `t1` (etiquetas y datos, en mayúsculas).
- Escala (escritorio/portátil/móvil): `t8` 56/48/38 px · 500 (titulares y cifras) · `t7` 36/32/28 px · 500 (títulos de sección) · `t6` 24/24/22 px · 500 (subtítulos, decisiones y citas) · `t5` 22/22/20 px · 400 (entradillas) · `t4` 18/18/17 px · 400 (texto de lectura) · `t3` 15 px · 400 (tarjetas y listas) · `t2` 13 px · 400 (navegación, pies y metadatos) · `t1` 11 px · 400 · mono (etiquetas y datos).
- Solo pesos 400 y 500. Ni negrita ni 600/700. La jerarquía sale del tamaño y del gris, no del grosor.
- Un tamaño por uso: no uses tamaños intermedios.

## Color
- Interfaz: blanco y cuatro grises. `ink` #0a0a0a (19,8:1) titulares y texto principal · `body` #3a3a3a (11,4:1) texto de lectura · `muted` #6b6b6b (5,3:1) apoyo y navegación · `faint` #8a8a8a (3,5:1) solo etiquetas y adornos, nunca texto que haya que leer.
- Fondo de controles e imágenes que cargan #f3f3f3; separadores rgba(0,0,0,.08); bordes de botones y campos rgba(0,0,0,.14).
- El color, solo para estados. Verde #43B966: disponibilidad, nada más. Azul #0D99FF: marcos, foco y etiquetas de selección, como en Figma. Nunca como color de texto, de enlace ni de fondo de botón (3,0:1, excepción aceptada para etiquetas cortas y decorativas).

## Espacio y radios
- Espacios, solo estos: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 px. Dentro de un componente 4–16 · mismo bloque 16–24 · entre bloques 48 (32 en móvil) · entre secciones 128 (96 en móvil).
- Radios: 4 px etiquetas · 8 px tarjetas · 16 px paneles · 999 px botones (píldora).

## Botones y enlaces
- 14 px, peso 400, fuera de la escala a propósito para que se lean como acción. Alto 40 px, relleno 0 16 px, radio 999 px.
- Principal: fondo #0a0a0a, texto blanco. Secundario: blanco, borde de 1 px rgba(0,0,0,.14), al pasar el ratón borde #6b6b6b. Al pulsar: escala .96.
- Enlaces: subrayados, separación 3 px, subrayado #0a0a0a al 35 %.

## Movimiento
- Una curva: cubic-bezier(.22,1,.36,1). `enter` cubic-bezier(.34,1.18,.64,1) solo para hojas y paneles que entran.
- Duraciones: 150 ms responder (hover, pulsar, copiar) · 300 ms cambiar de estado (menú, pestañas) · 600 ms entrar en pantalla.
- El movimiento confirma algo que pasa; no decora. Con «reducir movimiento», casi nada se mueve y todo sigue funcionando.

## Ejemplo: una tarjeta de proyecto
- Contenedor: blanco, borde de 1 px rgba(0,0,0,.08), radio 8 px, relleno 24 px, 12 px entre sus partes.
- Imagen: proporción 16/10, fondo #f3f3f3, radio 8 px arriba, borde inferior de 1 px rgba(0,0,0,.08).
- Título: `t4` peso 500, `ink`. Descripción: `t3` 400, `body`. Entregables: `t3` 400, `muted`.
- Pie: borde superior de 1 px rgba(0,0,0,.08), 12 px de relleno; cifra en `t1` mono, `ink`; flecha → que se mueve al pasar el ratón en 150 ms con la curva del sistema.
- Seleccionada: marco de 1,5 px en azul #0D99FF con etiqueta en `t1`, como en Figma. Sin sombras.