labre-web/DESIGN.md

# UABC — Style Reference
> Identidad editorial institucional en clave monoespaciada

**Theme:** mixed

El sistema conserva la estructura editorial del original —bandas oscuras documentales alternadas con secciones claras de lectura— pero reemplaza por completo la paleta cromática por la colorimetría institucional de la UABC (verde principal, dorados y acentos complementarios) y unifica toda la tipografía en una sola familia monoespaciada, Azeret Mono, que trata la página como una hoja de especificación técnica: encabezados, cuerpo y controles de UI comparten la misma fuente y se diferencian solo por peso y tamaño. El Verde Institucional (#00723F) actúa como el único interruptor de acción —CTAs, enlaces, estados activos— mientras el resto de la paleta (verde claro, dorado, amarillo, verde jardín, azul) aporta soporte cromático secundario sin competir con el verde principal. Los componentes siguen siendo deliberadamente delgados: pills de radio completo, nav flotante translúcido, bordes de 1px, casi sin sombra — la interfaz se retira para que el contenido institucional lleve el peso visual.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Verde Institucional | `#00723F` | `--color-verde-institucional` | Color institucional principal (Pantone 356) — CTAs primarios, nav activo, íconos, acentos de enlace; el único color con función de "interruptor" en la UI |
| Verde Claro | `#50B848` | `--color-verde-claro` | Estados hover, contornos de acento suaves, eco desaturado del Verde Institucional (Pantone 369) |
| Dorado UABC | `#DD971A` | `--color-dorado-uabc` | Acento cálido secundario — bordes de tags, highlights, contraste cálido frente al verde (Pantone 131) |
| Amarillo Dorado | `#FEBE10` | `--color-amarillo-dorado` | Badges y estados destacados sobre fondo oscuro (Pantone 124) |
| Verde Jardín | `#024731` | `--color-verde-jardin` | Superficie oscura alterna, bordes fuertes sobre fondo oscuro (Pantone 3435) |
| Dorado Oscuro | `#B08208` | `--color-dorado-oscuro` | Fondo translúcido de nav, bordes de fuerza media, superficies UI mudas (Pantone 132) |
| Azul Institucional | `#20419A` | `--color-azul-institucional` | Acento informativo/enlaces alternos — distingue contenido secundario de las acciones primarias en verde (Pantone Reflex Blue) |
| Bone White | `#fffefb` | `--color-bone-white` | Lienzo de página en secciones claras, color de texto en secciones oscuras |
| Linen | `#f3f2ee` | `--color-linen` | Superficie secundaria cálida, fondo de tarjetas elevadas |
| Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Bordes finos en tarjetas, imágenes, divisores y campos de formulario |
| Graphite | `#333833` | `--color-graphite` | Texto principal y encabezados sobre superficies claras |
| Negro Institucional | `#000000` | `--color-negro-institucional` | Lienzos de sección oscura (Pantone Process Black), texto de máximo contraste, scrims sobre imagen |

## Tokens — Typography

### Azeret Mono — Fuente única del sistema: encabezados, cuerpo y controles de UI. Al ser monoespaciada en todos los roles, la jerarquía se construye solo con peso y tamaño, reforzando la lectura de "hoja de especificación técnica" en toda la interfaz. · `--font-azeret-mono`
- **Fuente:** Fontsource (`@fontsource/azeret-mono` / fontsource.org/fonts/azeret-mono)
- **Substitute:** JetBrains Mono, IBM Plex Mono, o monoespacio del sistema
- **Weights:** 300 (encabezados y cuerpo), 500 (nav, botones, controles de UI)
- **Sizes:** 10px, 12px, 14px, 16px, 24px, 32px, 72px
- **Line height:** 1.10–1.83 según rol
- **Letter spacing:** -1.44px a 72px, -0.64px a 32px, -0.48px a 24px, -0.32px a 16px (cuerpo), +0.5px a 10px, +0.6px a 12px, +0.7px a 14px (micro/caption)
- **Role — Display/Heading:** peso 300, tamaños 24/32/72px. El peso liviano en tamaños grandes es no negociable — mantiene la autoridad editorial por contención en vez de volumen.
- **Role — Body:** peso 300, tamaños 14–16px, line-height 1.57–1.83. Trata el párrafo como salida de terminal, no como folleto de marketing.
- **Role — UI/Nav/Buttons:** peso 500, tamaños 12–16px. El salto de peso (300 → 500) es la única señal que distingue controles interactivos del texto editorial, ya que comparten la misma fuente.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Weight | Token |
|------|------|-------------|----------------|--------|-------|
| micro | 10px | 1.6 | 0.5px | 300 | `--text-micro` |
| caption | 12px | 1.63 | 0.6px | 300 | `--text-caption` |
| body-sm | 14px | 1.63 | 0.7px | 300 | `--text-body-sm` |
| body | 16px | 1.57 | -0.32px | 300 | `--text-body` |
| ui | 16px | 1.83 | -0.017em | 500 | `--text-ui` |
| heading | 24px | 1.3 | -0.48px | 300 | `--text-heading` |
| heading-lg | 32px | 1.3 | -0.64px | 300 | `--text-heading-lg` |
| display | 72px | 1.1 | -1.44px | 300 | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 64 | 64px | `--spacing-64` |
| 120 | 120px | `--spacing-120` |
| 128 | 128px | `--spacing-128` |
| 152 | 152px | `--spacing-152` |

### Border Radius

| Element | Value |
|---------|-------|
| nav | 30px |
| tags | 8px |
| cards | 12px |
| buttons | 9999px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Verde Pill CTA
**Role:** Botón de llamada a la acción primaria

Relleno con #00723F, texto blanco en Azeret Mono peso 500, 16px, 9999px de border-radius, 10px de padding vertical / 24px horizontal. Etiqueta de una sola línea. Sin sombra. La forma de pill es el único elemento con curvatura completa — hace que el CTA sea inconfundible como el interruptor de acción de la página.

### Nav Flotante Translúcido
**Role:** Navegación superior de página

Contenedor tipo pill a 30px de border-radius, Dorado Oscuro (#B08208) a baja opacidad sobre la página, conteniendo los enlaces en Azeret Mono peso 500, 12px.

### Mono Display Heading
**Role:** Encabezados de hero y de sección

Azeret Mono peso 300, 72px en hero, 32–24px en títulos de sección. Line-height 1.10–1.30. Letter-spacing según escala. Color Bone White (#fffefb) sobre secciones oscuras, Graphite (#333833) sobre secciones claras. El peso liviano es no negociable — engrosarlo rompe el efecto editorial.

### Mono Body Block
**Role:** Copy de párrafo en secciones de contenido

Azeret Mono peso 300, 14–16px, line-height 1.63–1.83, letter-spacing -0.32px a 16px. Color Graphite (#333833) sobre superficies claras, Bone White (#fffefb) sobre oscuras. Max-width ~480px para preservar la medida de "lectura de terminal".

### Two-Column Editorial Section
**Role:** Layout de contenido: encabezado izquierda, cuerpo derecha

Grid lado a lado con 48–64px de gap. Columna izquierda contiene el Mono Display Heading a 32px. Columna derecha contiene el Mono Body Block a 14–16px. Ambas alineadas arriba. Fondo: Bone White o Linen. Padding de sección: 64px horizontal, 64px vertical.

### Full-Bleed Documentary Image
**Role:** Banda de imagen atmosférica entre secciones de contenido

Fotografía a sangre completa sobre fondo Negro Institucional (#000000). Scrim oscuro opcional (rgba(0,0,0,0.3–0.5)) para contraste de texto. Texto superpuesto en Bone White, Azeret Mono peso 300. Las imágenes son documentales/candid, no de stock pulido.

### Vertical Sidebar Label
**Role:** Indicador de sección en el margen de la página

Texto rotado 90° en el margen izquierdo, posicionado 24–49px del borde. Azeret Mono 10–12px, letter-spacing 0.05em, mayúsculas o tal cual. Color: Graphite sobre secciones claras, Hairline Gray (#e5e7eb) o Bone White sobre oscuras. Funciona como marcador de sección, no como navegación.

### Ghost Text Link
**Role:** Enlaces en línea dentro del cuerpo de texto

Sin fondo, subrayado de 1px en #00723F o Graphite según contexto. Azeret Mono a 14–16px. El hover aumenta opacidad o cambia a Verde Claro (#50B848).

### Hairline Divider
**Role:** Separador de sección

1px sólido en #e5e7eb o #B08208, a todo el ancho o contenido. Sin ornamentación, sin degradado. La división entre secciones se implica por espaciado, no por líneas visuales — esto es un respaldo.

### Image Frame Card
**Role:** Tarjeta de contenido con imagen

Borde 1px sólido #e5e7eb, 12px de border-radius, interior Linen (#f3f2ee), 24px de padding. Imagen arriba con borde 1px en #e5e7eb. Texto de cuerpo en Azeret Mono 14px debajo. Elevación mínima — sin drop shadow.

### Compact Pill Tag
**Role:** Badge de categoría o estado

8px de border-radius (pill sutil, no curvatura completa), 4–8px de padding vertical / 8–12px horizontal, Azeret Mono peso 500 a 12px. Borde 1px en #e5e7eb o #DD971A. Fondo: Bone White o transparente. Color: Graphite, Verde Institucional o Dorado UABC.

## Do's and Don'ts

### Do
- Configura todos los CTAs primarios a 9999px de border-radius con relleno #00723F y texto Bone White en Azeret Mono peso 500, 16px.
- Usa Azeret Mono peso 300 para todo encabezado a 24px, 32px y 72px — nunca lo pongas en negrita.
- Escribe el copy de cuerpo en Azeret Mono peso 300 a 14–16px con line-height 1.63–1.83.
- Separa secciones con 64px de padding vertical, no con divisores ni solo cambios de color de fondo.
- Aplica bordes 1px sólidos #e5e7eb a todas las tarjetas e imágenes — nunca uses drop shadows para elevación.
- Usa #fffefb para lienzos claros y #000000 para bandas oscuras; deja que la fotografía llene las bandas oscuras a sangre completa.
- Reserva el Verde Institucional (#00723F) como el único color con función de acción primaria — el resto de la paleta (verde claro, dorado, amarillo, azul) es soporte cromático secundario, nunca compite con él en un mismo CTA.

### Don't
- No uses pesos negrita (600–700) en encabezados Azeret Mono — el peso 300 es la firma del sistema.
- No introduzcas drop shadows para elevar tarjetas; usa el color de superficie Linen (#f3f2ee) y bordes hairline en su lugar.
- No mezcles otra familia tipográfica proporcional o serif en ningún rol — la unificación en una sola mono es la decisión que define el sistema.
- No apliques el Verde Institucional a fondos, bandas de sección o elementos decorativos — es solo de acción.
- No uses valores de radio fuera de los cuatro tokens: 8px (tags), 12px (cards), 30px (nav), 9999px (buttons).
- No rompas el ritmo de lienzo de dos tonos — no insertes un tercer color de fondo de sección (además de Bone White y Negro Institucional).
- No uses fotografía de stock, ilustraciones o renders 3D — la imaginería debe ser documental y candid.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Bone Canvas | `#fffefb` | Secciones claras de lectura, fondo de página por defecto |
| 2 | Linen Card | `#f3f2ee` | Bloques de contenido elevados, paneles secundarios |
| 3 | Dorado Nav | `#B08208` | Superficie de navegación flotante translúcida |
| 4 | Negro Institucional | `#000000` | Secciones documentales oscuras, lienzos de banda de imagen |

## Elevation

El sistema evita deliberadamente los drop shadows. La elevación se expresa mediante cambios de color de superficie (Bone White → Linen) y bordes hairline (#e5e7eb a 1px). El único valor cercano a sombra es un box-shadow tenue teñido con #f3f2ee en botones — apenas perceptible. La interfaz debe sentirse impresa, no flotando.

## Imagery

Fotografía documental y candid: espacios universitarios, actividad académica real en lugar de stock corporativo escenificado. Las imágenes corren a sangre completa como bandas de sección, a menudo con un scrim oscuro para superposición de texto. Llevan un grado de color apagado y ligeramente desaturado que combina con la paleta institucional. Sin ilustraciones, sin renders 3D, sin capturas de producto — la fotografía ES el contenido visual. La iconografía es mínima: íconos de línea de peso mono en Graphite o Verde Institucional, nunca decorativos.

## Layout

La página alterna entre dos estados de lienzo: bandas documentales oscuras a sangre completa (Negro Institucional #000000 con foto) y secciones claras de lectura (Bone White #fffefb). El contenido está centrado a 1200px de max-width. El hero es una imagen oscura a pantalla completa con encabezado Azeret Mono centrado y CTA verde. Las secciones siguientes usan un split editorial de dos columnas — encabezado izquierda, cuerpo mono derecha — con gaps generosos de 64px. Las etiquetas verticales de sidebar se ubican en el margen izquierdo de la página como marcadores de sección. La navegación es una cápsula pill flotante, no una barra de ancho completo. La densidad general es espaciosa; la página está dominada por texto y fotografía, no por grillas de tarjetas.

## Agent Prompt Guide

Quick Color Reference:\n- text: #333833 (light) / #fffefb (dark)\n- background: #fffefb (light) / #000000 (dark)\n- border: #e5e7eb (hairline) / #B08208 (medium)\n- accent primario: #00723F (Verde Institucional — CTAs, enlaces, estados activos)\n- accent secundario: #DD971A (Dorado UABC — tags, highlights)\n- primary action: #00723F (acción rellena)

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-verde-institucional: #00723F;
  --color-verde-claro: #50B848;
  --color-dorado-uabc: #DD971A;
  --color-amarillo-dorado: #FEBE10;
  --color-verde-jardin: #024731;
  --color-dorado-oscuro: #B08208;
  --color-azul-institucional: #20419A;
  --color-bone-white: #fffefb;
  --color-linen: #f3f2ee;
  --color-hairline-gray: #e5e7eb;
  --color-graphite: #333833;
  --color-negro-institucional: #000000;

  /* Typography — Font Family (única) */
  --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-micro: 10px;
  --leading-micro: 1.6;
  --tracking-micro: 0.5px;
  --text-caption: 12px;
  --leading-caption: 1.63;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.63;
  --tracking-body-sm: 0.7px;
  --text-body: 16px;
  --leading-body: 1.57;
  --tracking-body: -0.32px;
  --text-ui: 16px;
  --leading-ui: 1.83;
  --tracking-ui: -0.017em;
  --text-heading: 24px;
  --leading-heading: 1.3;
  --tracking-heading: -0.48px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.3;
  --tracking-heading-lg: -0.64px;
  --text-display: 72px;
  --leading-display: 1.1;
  --tracking-display: -1.44px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-ui: 500;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-64: 64px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-152: 152px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 30px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-nav: 30px;
  --radius-tags: 8px;
  --radius-cards: 12px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-bone-canvas: #fffefb;
  --surface-linen-card: #f3f2ee;
  --surface-dorado-nav: #B08208;
  --surface-negro-institucional: #000000;
}
```

### Fontsource — instalación de Azeret Mono

```bash
npm install @fontsource/azeret-mono
```

```javascript
// Importa los pesos usados por el sistema (300 y 500)
import '@fontsource/azeret-mono/300.css';
import '@fontsource/azeret-mono/500.css';
```

Si el proyecto no usa un bundler con soporte npm, se puede enlazar directamente el CSS servido por Fontsource (`https://cdn.jsdelivr.net/fontsource/fonts/azeret-mono@latest/latin-300-normal.css` y su equivalente `-500-`) en el `<head>` del documento.

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-verde-institucional: #00723F;
  --color-verde-claro: #50B848;
  --color-dorado-uabc: #DD971A;
  --color-amarillo-dorado: #FEBE10;
  --color-verde-jardin: #024731;
  --color-dorado-oscuro: #B08208;
  --color-azul-institucional: #20419A;
  --color-bone-white: #fffefb;
  --color-linen: #f3f2ee;
  --color-hairline-gray: #e5e7eb;
  --color-graphite: #333833;
  --color-negro-institucional: #000000;

  /* Typography */
  --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-micro: 10px;
  --leading-micro: 1.6;
  --tracking-micro: 0.5px;
  --text-caption: 12px;
  --leading-caption: 1.63;
  --tracking-caption: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.63;
  --tracking-body-sm: 0.7px;
  --text-body: 16px;
  --leading-body: 1.57;
  --tracking-body: -0.32px;
  --text-ui: 16px;
  --leading-ui: 1.83;
  --tracking-ui: -0.017em;
  --text-heading: 24px;
  --leading-heading: 1.3;
  --tracking-heading: -0.48px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.3;
  --tracking-heading-lg: -0.64px;
  --text-display: 72px;
  --leading-display: 1.1;
  --tracking-display: -1.44px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-64: 64px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-152: 152px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 30px;
  --radius-full: 9999px;
}
```