# Tipografía, color y materialidad

---

## 1. Tipografía

### Escalas base

- **Display / titulares:** escala grande con `tracking` cerrado y `leading` corto
- **Cuerpo:** tamaño base, color gris medio, `leading` relajado, **ancho máximo
  de 65 caracteres**
- La jerarquía se controla con **peso y color**, no con escala bruta

### Elección de sans

- **Desaconsejado como default:** Inter. Alternativas primero: Geist, Outfit,
  Cabinet Grotesk, Satoshi, o una serif apropiada a la marca
- **Se permite Inter** cuando el cliente pide algo neutro o estándar, o cuando el
  sitio es de accesibilidad crítica
- **Parejas conocidas:** Geist + Geist Mono · Satoshi + JetBrains Mono ·
  Cabinet Grotesk + Inter Tight

### Disciplina de serif

**Muy desaconsejada como default en cualquier proyecto.** "Se siente creativo /
premium / editorial" **no** es razón. El modelo mental de "brief creativo = serif"
es el tell más probado en producción.

Serif sólo se acepta si **una** de estas es explícitamente cierta:

- La marca nombra literalmente una serif, **o**
- La familia estética es genuinamente editorial / lujo / publicación / patrimonio
  **y** puedes articular por qué **esa** serif le queda a **esa** marca

Para todo lo demás — agencia creativa, estudio de diseño, marca moderna, consumo
premium, portafolio, lifestyle — **sans display por defecto**. No son aburridas;
son el default por la misma razón que el negro lo es en moda.

**Prohibidas como default:** `Fraunces` e `Instrument Serif`.

**Si la serif se justifica**, rotar del pool y no repetir entre proyectos
consecutivos: PP Editorial New, GT Sectra, Reckless Neue, Tiempos Headline,
Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, Canela, Domaine.

### Énfasis dentro de un titular

Cursiva o negrita **de la misma familia**. Meter una palabra serif dentro de un
titular sans (o al revés) sólo para dar interés visual es de aficionado.

### Descendentes en cursiva

Cuando se usa cursiva en display y la palabra tiene `y g j p q`, un `leading`
demasiado cerrado corta el descendente. Mínimo `leading-[1.1]` más reserva
inferior. Auditar cada palabra en cursiva antes de entregar.

---

## 2. Color

### Reglas base

- **Un solo color de acento.** Saturación bajo 80% por defecto.
- **Bases neutras** (zinc, slate, stone) con un acento único de alto contraste:
  esmeralda, azul eléctrico, rosa profundo, naranja quemado.
- **Una paleta por proyecto.** No fluctuar entre grises cálidos y fríos dentro del
  mismo sitio.

### Bloqueo de color — obligatorio

Una vez elegido el acento, se usa en **toda** la página. Un sitio de grises cálidos
no recibe de pronto un CTA azul en la sección 7. Un sitio con acento rosa no
recibe un badge turquesa en el footer.

Elegir uno, bloquearlo, auditar cada componente antes de entregar.

### Prohibiciones

Ver `anti-slop.md` §8 para las familias de paleta prohibidas por defecto
(morado de IA, beige+latón+espresso) y sus alternativas rotables.

### Modo oscuro

- Si la página es clara, es clara completa. Nada de una sección oscura suelta sin
  razón compositiva.
- Si hay modo oscuro, se prueba en ambos antes de entregar.
- Nunca negro puro. Casi-negro o carbón.

---

## 3. Materialidad, sombras y tarjetas

- **Tarjetas sólo cuando la elevación comunica jerarquía real.** Si no, agrupar
  con línea superior, divisores o espacio negativo.
- **Sombra tintada al tono del fondo.** Nunca negro puro sobre fondo claro.
- **Con DENSIDAD > 7**, los contenedores de tarjeta genéricos están prohibidos.

### Bloqueo de forma — obligatorio

Un solo sistema de radio de esquina para toda la página:

- Todo recto (radio 0)
- Todo suave (12-16px)
- Todo píldora (radio completo en interactivos)

Sistemas mixtos sólo con regla documentada — por ejemplo "botones píldora, tarjetas
16px, inputs 8px" — y esa regla se sigue en todas partes.

Botones redondos en un layout cuadrado, o tarjetas cuadradas en una página de
botones píldora, es diseño roto.

---

## 4. Estados interactivos

Los modelos entregan sólo "el estado exitoso estático". Siempre implementar el
ciclo completo:

- **Carga:** esqueletos con la forma del layout final. Nada de spinners circulares
  genéricos.
- **Vacío:** compuesto con cuidado, indicando cómo poblarlo.
- **Error:** mensaje concreto y accionable, no "algo salió mal".
- **Hover / foco / activo:** definidos, y el foco visible para teclado.
- **Deshabilitado:** legible, no invisible.

---

## 5. Imágenes

Las landings y los portafolios son **productos visuales**. Una página de puro
texto con divs simulando capturas es basura.

- Priorizar fotos reales del cliente
- Si faltan, proponerlas en el plan visual y esperar aprobación
- Generar sólo lo aprobado, con `higgsfield-generate`
- Cero enlaces rotos, cero placeholders en la entrega final
- Overlay claro u oscuro cuando haya texto encima, manteniendo la foto visible y
  el contraste AA
- Preservar proporción real de producto. Si el producto tiene tamaño no obvio,
  aplicar la regla de referencia de escala del motor de creativos
