# Design System

<!-- Este archivo define cómo se ve y se siente el sitio.
     No es un Figma — es el criterio de diseño en palabras.
     Lo usan el agente de diseño, el dev, y tú para tomar decisiones. -->

---

## Visual Direction

<!-- Una descripción en 1-2 oraciones de la dirección visual general.
     Debe ser específica — no "moderno y limpio". -->

- **Overall vibe**: [ej. "Personal-premium — humano pero con peso. No corporativo, no startup genérica."]
- **Closest reference in one sentence**: [ej. "Sitio A con el acento de color B y las animaciones de C"]

---

## What This Site Is NOT

<!-- Igual de importante que saber qué quieres es saber qué NO quieres.
     Sé específico — menciona referencias reales si puedes. -->

- No [patrón o estética que quieres evitar — ej. glassmorphism]
- No [ej. gradientes purple/lavanda AI-genéricos]
- No [ej. hero centrado con blob detrás]
- No [ej. card grids uniformes con sombra idéntica]
- No [ej. información densa estilo SaaS]
- No [ej. botones que desaparecen al hacer scroll]
- No [ej. imagen de fondo con corte abrupto]

---

## Layout Principles

<!-- Define las reglas de estructura antes de pensar en componentes. -->

- **Grid**: [ej. Asimétrico con respiro / Centrado con columnas definidas]
- **Max width**: [ej. 1280px container, 680px para prose/bio]
- **Spacing system**: [ej. Base 8px, secciones con 80–120px de padding vertical]
- **Section rhythm**: [ej. Cada sección varía entre full-bleed, contenida, imagen-primero, texto-primero]

---

## Hero

<!-- La primera sección que ve el usuario. Define el patrón exacto. -->

- **Patron**: [ej. Foto profesional + headline + bio corta + CTA / Solo texto / Ilustración + texto]
- **Foto / Visual**: [Si hay foto: cómo se integra al fondo — blend, gradiente, sin corte]
- **Texto**: [Qué elementos aparecen: headline, subtítulo, CTA primario, CTA secundario]
- **Mood**: [ej. Directo, rápido de cargar, sin animaciones de entrada excesivas]

---

## Animation & Scroll

<!-- Define la filosofía de animación primero, luego los casos específicos. -->

- **Filosofia**: [ej. Animaciones con propósito — que guíen, no que decoren]
- **Scroll effects**: [ej. Scroll horizontal forzado en sección de proyectos / fade entre secciones]
- **Transiciones**: [ej. Suaves con overlap / fade — sin saltos abruptos]
- **Hover states**: [ej. Escala ligera + color shift al acento]
- **Page load**: [ej. Sin splash screen — carga directa]

### Interacciones especiales

<!-- Si hay un easter egg, animación custom, o comportamiento inusual, descríbelo aquí
     con suficiente detalle para que un dev lo pueda construir. -->

#### [Nombre de la interacción — ej. Hero Photo Easter Egg]

**Default**: [Estado inicial — cómo se ve sin interacción]

**Hover**: [Qué pasa al pasar el cursor]

**Click**: [Qué pasa al hacer click]

**Referencia**: [Site o interacción que tiene algo similar]

---

## Typography Rules

<!-- Basado en la fuente definida en BRAND.md.
     Define la escala y las reglas de uso — no solo los tamaños. -->

- **Heading scale**: [ej. 64px / 48px / 32px / 24px / 18px]
- **Line height**: [ej. 1.05 para display, 1.65 para body]
- **Letter spacing**: [ej. -0.02em en headings grandes, normal en body]
- **Weight**: [ej. Headings en 700–800, body en 400–500]
- **Acento tipográfico**: [ej. Una palabra clave en color acento por sección — no abusarlo]

---

## Component Patterns

<!-- Cómo se ven los elementos reutilizables. Uno por línea, con el comportamiento de hover. -->

- **Botones**: [ej. Sin border-radius exagerado. Hover: fill acento, texto negro]
- **Links**: [ej. Sin subrayado por defecto. Hover: subrayado animado desde izquierda]
- **Imágenes**: [ej. Integradas al diseño, sin sombra drop genérica]
- **Dividers**: [ej. Espacio en lugar de líneas. Si hay línea: 1px, color borde]
- **Cards**: [ej. Superficie elevada, sin sombra agresiva, borde sutil]
- **Timeline**: [ej. Línea vertical izquierda, años en acento, descripción a la derecha]
- **Skills / tags**: [ej. Chips con animación horizontal al hacer scroll]

---

## Contact & Footer

- **Formulario**: [Campos que incluye. Tono del CTA. Referencia de diseño si tienes una.]
- **Footer**: [Altura — ej. full viewport / normal. Contenido. Mood visual.]
- **Footer content**: [Qué elementos aparecen: tagline, email, redes, copyright]

---

## Iconografía

- **Estilo**: [ej. Línea limpia / Filled / Custom — no mezclar sets]
- **Uso**: [Para qué se usan — ilustrar servicios, no decorar]
- **Fuente**: [ej. Lucide, Heroicons, custom SVG]

---

## What Makes This Feel Premium

<!-- Lista los detalles que elevan el sitio por encima de un template genérico.
     Estos son los puntos de control de calidad antes de hacer deploy. -->

- [ej. La foto del hero se integra al fondo sin corte visible]
- [ej. El acento aparece máximo 2-3 veces por página, siempre con propósito]
- [ej. El scroll horizontal en una sección sorprende pero no molesta]
- [ej. El footer de pantalla completa da cierre al sitio]
- [ej. Las transiciones de sección hacen que el scroll se sienta fluido]
- [Agrega los tuyos]