sdd-es 2.0.0 → 2.5.0

package/design-systems/editorial-minimal/DESIGN.md

@@ -0,0 +1,205 @@
+# Editorial Minimal — DESIGN.md
+
+**Tagline**: Silencio tipográfico. El diseño que se quita de en medio.
+
+Un sistema austero donde solo existe lo necesario. Más espacio en blanco que contenido visible. Cada elemento justifica su presencia.
+
+---
+
+## 1. Visual Theme & Atmosphere
+
+Editorial Minimal es la reducción máxima. Sin color de acento visible en el estado de reposo. La tipografía es el único ornamento. Inspirado en la arquitectura japonesa (ma — el valor del espacio vacío) y en las mejores publicaciones tipográficas europeas.
+
+**Sensación**: quietud, autoridad, precisión.
+**Anti-sensación**: caos, ruido, urgencia.
+
+Productos ideales: firmas de abogados, consultoras de alto nivel, estudios de fotografía, galerías, portfolios de diseño, plataformas editoriales premium.
+
+---
+
+## 2. Color Palette & Roles
+
+```css
+:root {
+  /* Fondos */
+  --bg-base:       #FFFFFF;
+  --bg-surface:    #FAFAFA;
+  --bg-surface2:   #F5F5F5;
+
+  /* Texto */
+  --text-primary:  #0A0A0A;
+  --text-secondary:#2A2A2A;
+  --text-muted:    #767676;
+  --text-inverse:  #FFFFFF;
+
+  /* Acento — solo aparece en acciones, no en decoración */
+  --accent:        #0A0A0A;
+  --accent-hover:  #2A2A2A;
+  --accent-subtle: #F0F0F0;
+
+  /* Bordes */
+  --border:        #E0E0E0;
+  --border-strong: #0A0A0A;
+
+  /* Semánticos */
+  --error:         #CC0000;
+  --success:       #006600;
+  --warning:       #AA6600;
+}
+```
+
+**Regla de color**: casi monocromático. El "acento" es negro sobre blanco. El único color permitido es uno de semántica (error/success), y solo cuando hay un mensaje que mostrar.
+
+---
+
+## 3. Typography Rules
+
+**Display**: Freight Display Pro (si disponible) o **Cormorant Garamond** (Google Fonts) — `font-weight: 300, 600`
+**Body**: **IBM Plex Serif** o **Lora** (Google Fonts) — `font-weight: 400`
+**UI labels**: **IBM Plex Sans** — `font-weight: 400, 500`
+**Code**: IBM Plex Mono
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;600&family=Lora:wght@400&family=IBM+Plex+Sans:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+:root {
+  --font-display: 'Cormorant Garamond', Georgia, serif;
+  --font-body:    'Lora', Georgia, serif;
+  --font-ui:      'IBM Plex Sans', system-ui, sans-serif;
+  --font-mono:    'IBM Plex Mono', monospace;
+}
+```
+
+**Escala**:
+- Hero h1: `clamp(48px, 8vw, 96px)`, weight 300, letter-spacing -0.02em
+- Section h2: 32px, weight 600
+- Body: 17px, line-height 1.75
+- UI labels: 13px, weight 500, letter-spacing 0.04em, UPPERCASE
+
+---
+
+## 4. Component Stylings
+
+### Botones
+```css
+.btn-primary {
+  background: var(--accent);
+  color: var(--text-inverse);
+  padding: 12px 32px;
+  border: 1px solid var(--accent);
+  border-radius: 0;                  /* sin border-radius */
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--border-strong);
+  /* mismas propiedades de tipografía */
+}
+```
+
+### Cards
+```css
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  padding: 40px;
+}
+```
+
+### Inputs
+```css
+input, textarea {
+  border: none;
+  border-bottom: 1px solid var(--border-strong);
+  border-radius: 0;
+  padding: 12px 0;
+  background: transparent;
+  font-family: var(--font-ui);
+  font-size: 15px;
+}
+input:focus { border-bottom-color: var(--accent); outline: none; }
+```
+
+### Divisores
+```css
+hr { border: none; border-top: 1px solid var(--border); margin: 64px 0; }
+```
+
+---
+
+## 5. Layout Principles
+
+- **Máximo ancho de contenido**: 720px (texto), 1100px (layout completo)
+- **Grid**: 12 columnas con gutter de 32px
+- **Espaciado**: múltiplos de 8px (8, 16, 24, 32, 48, 64, 96, 128)
+- **Margen vertical entre secciones**: mínimo 96px — el espacio es parte del diseño
+- El espacio vacío no es "espacio perdido" — es el diseño
+
+---
+
+## 6. Depth & Elevation
+
+Sin sombras. La elevación se comunica con bordes y diferencia de color de fondo.
+
+```css
+/* Sin box-shadow — usar separación cromática */
+.elevated { background: var(--bg-surface); border: 1px solid var(--border); }
+```
+
+---
+
+## 7. Do's and Don'ts
+
+**Do**:
+- Usa el espacio vacío como elemento de diseño activo
+- Un elemento centrado, mucho espacio alrededor — máxima elegancia
+- Tipografía de display condensada y ligera para títulos grandes
+- Líneas horizontales finas como únicos separadores decorativos
+- Texto en mayúsculas solo para labels de 1–3 palabras
+
+**Don't**:
+- Colores de fondo en secciones (no alternar gris/blanco en secciones)
+- Sombras de ningún tipo
+- Más de 2 familias tipográficas
+- Botones con border-radius redondeado
+- Emojis o iconos decorativos de ningún tipo
+
+---
+
+## 8. Responsive Behavior
+
+```css
+/* Mobile first */
+body { font-size: 16px; padding: 24px; }
+h1 { font-size: clamp(32px, 7vw, 96px); }
+.container { max-width: 720px; margin: 0 auto; padding: 0 24px; }
+
+@media (min-width: 768px) {
+  body { padding: 40px; }
+  .container { padding: 0 40px; }
+}
+```
+
+---
+
+## 9. Agent Prompt Guide
+
+Cuando generes wireframes con Editorial Minimal:
+
+- **Espacio blanco**: la pantalla debe tener más espacio vacío que contenido — si parece "llena", elimina elementos
+- **Tipografía como jerarquía**: el título principal debe ser grande (≥ 48px), ligero (weight 300), y tener mucho espacio alrededor
+- **Sin color de acento visible**: el negro es el acento. No añadir color decorativo
+- **Inputs underline**: los campos de formulario solo tienen borde inferior, sin caja
+- **Botones con borde cuadrado**: `border-radius: 0`, tipografía en mayúsculas pequeñas
+- **Sin sombras**: la elevación es con borde y fondo diferenciado
+- **Centrar con propósito**: elementos importantes centrados en página, no en columna lateral
+- **La regla de oro**: si puedes eliminar un elemento y la pantalla mejora, elimínalo

package/design-systems/neutral-modern/DESIGN.md

@@ -0,0 +1,227 @@
+# DESIGN SYSTEM: Neutral Modern
+
+> **Dirección**: Minimal, funcional, sobrio. Confiable sin ser frío. El diseño no compite con el contenido.
+
+---
+
+## 1. Visual Theme & Atmosphere
+
+Calm, functional, quietly confident. Espacios amplios. Tipografía clara. Acciones obvias.
+El producto desaparece — solo queda la tarea del usuario.
+
+**Palabras clave**: limpio · espacioso · legible · confiable · sin adornos
+
+---
+
+## 2. Color Palette & Roles
+
+```css
+/* Fondos */
+--bg-base:       #FAFAFA;   /* fondo principal */
+--bg-surface:    #FFFFFF;   /* tarjetas, modales */
+--bg-subtle:     #F4F4F5;   /* inputs, secciones alternadas */
+--bg-emphasis:   #E4E4E7;   /* hover states */
+
+/* Texto */
+--text-primary:  #111111;   /* texto principal */
+--text-secondary:#52525B;   /* texto de soporte, labels */
+--text-muted:    #A1A1AA;   /* placeholders, deshabilitados */
+--text-inverse:  #FFFFFF;   /* texto sobre fondos oscuros */
+
+/* Acento */
+--accent:        #2563EB;   /* acciones primarias, links, focus */
+--accent-hover:  #1D4ED8;   /* hover del acento */
+--accent-subtle: #EFF6FF;   /* fondos de chips, badges de acento */
+
+/* Estado */
+--success:       #16A34A;
+--warning:       #D97706;
+--error:         #DC2626;
+--info:          #0284C7;
+
+/* Bordes */
+--border:        #E4E4E7;   /* separadores, inputs */
+--border-strong: #A1A1AA;   /* bordes con más énfasis */
+```
+
+**Regla de uso**: El acento aparece máximo en 2 elementos por pantalla. Nunca decorativo — solo en acciones.
+
+---
+
+## 3. Typography Rules
+
+```css
+/* Fuentes */
+--font-display: 'Inter', system-ui, sans-serif;
+--font-body:    'Inter', system-ui, sans-serif;
+--font-mono:    'JetBrains Mono', 'Fira Code', monospace;
+
+/* Escala (8 pasos) */
+--text-xs:   12px / 1.4;
+--text-sm:   14px / 1.5;
+--text-base: 16px / 1.6;   /* body default */
+--text-lg:   18px / 1.5;
+--text-xl:   20px / 1.4;
+--text-2xl:  24px / 1.3;
+--text-3xl:  30px / 1.2;
+--text-4xl:  36px / 1.1;
+
+/* Pesos */
+--weight-normal:   400;
+--weight-medium:   500;
+--weight-semibold: 600;
+--weight-bold:     700;
+
+/* Tracking */
+--tracking-tight:  -0.02em;   /* headings grandes */
+--tracking-normal:  0em;
+--tracking-wide:    0.05em;   /* labels, caps pequeñas */
+```
+
+**Reglas**:
+- H1: 30–36px, weight 700, tracking -0.02em
+- H2: 24px, weight 600
+- Body: 16px, weight 400, line-height 1.6
+- Labels: 12–14px, weight 500, UPPERCASE solo para etiquetas de categoría
+
+---
+
+## 4. Component Stylings
+
+### Botones
+```css
+/* Primario */
+.btn-primary {
+  background: var(--accent);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 14px;
+}
+.btn-primary:hover { background: var(--accent-hover); }
+
+/* Secundario */
+.btn-secondary {
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--text-primary);
+  padding: 10px 20px;
+  border-radius: 6px;
+}
+
+/* Ghost */
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  padding: 8px 16px;
+}
+.btn-ghost:hover { background: var(--bg-subtle); }
+```
+
+### Cards
+```css
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px 24px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+```
+
+### Inputs
+```css
+.input {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 14px;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+.input:focus {
+  border-color: var(--accent);
+  outline: 2px solid var(--accent-subtle);
+  outline-offset: 0;
+}
+```
+
+### Badges / Tags
+```css
+.badge {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+}
+```
+
+---
+
+## 5. Layout Principles
+
+- **Grid**: 12 columnas, gutter 24px, max-width 1200px
+- **Contenedor principal**: `max-width: 1200px; margin: 0 auto; padding: 0 24px`
+- **Sidebar**: 240–280px fijo, contenido: el resto
+- **Espaciado base**: múltiplos de 4px (4, 8, 12, 16, 24, 32, 48, 64, 96)
+- **Sección vertical**: `padding-top: 64px; padding-bottom: 64px`
+
+---
+
+## 6. Depth & Elevation
+
+Solo 2 niveles:
+```css
+--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);  /* cards */
+--shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); /* modales, dropdowns */
+```
+
+Sin `box-shadow` de colores. Sin sombras de 4+ capas. La elevación se comunica con el color de fondo, no con sombras.
+
+---
+
+## 7. Do's and Don'ts
+
+**✅ Hacer:**
+- Espacios amplios entre secciones (mínimo 48px)
+- Labels cortos y directos
+- Un CTA primario por pantalla
+- Alineación consistente (izquierda para texto, centro para CTAs standalone)
+- Feedback visual claro (loading, success, error)
+
+**❌ No hacer:**
+- Gradientes en botones o fondos de hero
+- Más de 2 colores de acento en la misma pantalla
+- Bordes redondeados > 12px (excepto avatares/círculos)
+- Texto en mayúsculas excepto labels de categoría ≤ 12px
+- Iconos decorativos sin función
+- Métricas inventadas ("10x más rápido")
+- Lorem ipsum o copy de relleno
+
+---
+
+## 8. Responsive Behavior
+
+```
+Desktop  (≥1024px): 12 columnas, sidebar visible, navbar horizontal
+Tablet   (640–1023px): 8 columnas, sidebar colapsable, navbar comprimido
+Mobile   (<640px): 4 columnas (1 col layout), navegación bottom bar o hamburger
+```
+
+**Breakpoints**:
+```css
+@media (max-width: 1023px) { /* tablet */ }
+@media (max-width: 639px)  { /* mobile */ }
+```
+
+---
+
+## 9. Agent Prompt Guide
+
+Cuando un agente genere UI con este sistema:
+
+> Usa el sistema Neutral Modern: fondos claros (#FAFAFA, #FFFFFF), texto oscuro (#111111), acento azul (#2563EB) solo en acciones primarias. Inter para todo el texto. Bordes sutiles (#E4E4E7), sombras mínimas. Espaciado generoso (mínimo 24px entre secciones). Sin gradientes. Sin emojis como iconos. Un solo CTA primario por pantalla. Cuando en duda, quita elementos en lugar de agregar.

package/design-systems/vibrant-consumer/DESIGN.md

@@ -0,0 +1,257 @@
+# Vibrant Consumer — DESIGN.md
+
+**Tagline**: Energía en cada píxel. Para productos que quieren ser amados.
+
+Un sistema de diseño de alta energía para productos B2C que compiten por atención. Color saturado, tipografía expresiva, interacciones que se sienten vivas.
+
+---
+
+## 1. Visual Theme & Atmosphere
+
+Vibrant Consumer lleva el color al máximo sin cruzar la línea hacia lo ruidoso. Inspirado en apps como Duolingo, Notion, Linear y los mejores productos de consumo actuales. El color no es decoración — es el lenguaje.
+
+**Sensación**: energía, accesibilidad, diversión, momentum.
+**Anti-sensación**: aburrimiento, austeridad, frialdad.
+
+Productos ideales: apps de fitness, educación, marketplace B2C, redes sociales, fintech para consumidores, apps de entretenimiento, onboarding de herramientas.
+
+---
+
+## 2. Color Palette & Roles
+
+```css
+:root {
+  /* Fondos */
+  --bg-base:       #F8F7FF;       /* blanco con tinte violeta muy sutil */
+  --bg-surface:    #FFFFFF;
+  --bg-surface2:   #F0EEFF;
+
+  /* Texto */
+  --text-primary:  #1A1535;       /* casi negro con tinte violeta */
+  --text-secondary:#3D3660;
+  --text-muted:    #7B74A8;
+  --text-inverse:  #FFFFFF;
+
+  /* Acento principal — violeta vibrante */
+  --accent:        #6C3FF5;
+  --accent-hover:  #5A32D0;
+  --accent-subtle: #EDE8FF;
+
+  /* Acento secundario — coral/naranja para CTAs secundarios */
+  --accent2:       #FF6B35;
+  --accent2-hover: #E55A24;
+  --accent2-subtle:#FFF0EB;
+
+  /* Bordes */
+  --border:        #E2DCFF;
+  --border-strong: #6C3FF5;
+
+  /* Semánticos */
+  --error:         #E53E3E;
+  --success:       #38A169;
+  --warning:       #DD6B20;
+}
+```
+
+**Regla de color**: dos acentos (primario + secundario) usados con intención. El primario para acciones principales y navegación, el secundario para urgencia/promoción. Nunca mezclarlos en el mismo componente.
+
+---
+
+## 3. Typography Rules
+
+**Display**: **Nunito** (Google Fonts) — `font-weight: 800, 900` — redondeada, amigable
+**Body**: Nunito — `font-weight: 400, 600`
+**UI alternativa**: **Plus Jakarta Sans** — más neutra para dashboards
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap" rel="stylesheet">
+```
+
+```css
+:root {
+  --font-display: 'Nunito', system-ui, sans-serif;
+  --font-body:    'Nunito', system-ui, sans-serif;
+  --font-mono:    'Fira Code', monospace;
+}
+```
+
+**Escala**:
+- Hero h1: 48–64px, weight 900, letter-spacing -0.02em
+- Section h2: 28px, weight 800
+- Body: 15px, line-height 1.65
+- Labels: 13px, weight 600
+
+---
+
+## 4. Component Stylings
+
+### Botones
+```css
+.btn-primary {
+  background: var(--accent);
+  color: var(--text-inverse);
+  padding: 14px 28px;
+  border-radius: 12px;
+  font-family: var(--font-body);
+  font-size: 15px;
+  font-weight: 700;
+  box-shadow: 0 4px 14px rgba(108, 63, 245, 0.35);
+  transition: all 0.15s;
+}
+.btn-primary:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(108, 63, 245, 0.45);
+}
+
+.btn-secondary {
+  background: var(--accent-subtle);
+  color: var(--accent);
+  border: none;
+  padding: 14px 28px;
+  border-radius: 12px;
+  font-weight: 700;
+}
+
+.btn-cta {        /* para CTAs de conversión urgente */
+  background: var(--accent2);
+  color: var(--text-inverse);
+  border-radius: 12px;
+  font-weight: 800;
+  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
+}
+```
+
+### Cards
+```css
+.card {
+  background: var(--bg-surface);
+  border: 1.5px solid var(--border);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(108, 63, 245, 0.06);
+}
+.card:hover {
+  border-color: var(--border-strong);
+  box-shadow: 0 4px 16px rgba(108, 63, 245, 0.12);
+}
+```
+
+### Inputs
+```css
+input, textarea, select {
+  background: var(--bg-surface);
+  border: 1.5px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 16px;
+  font-family: var(--font-body);
+  font-size: 15px;
+  transition: border-color 0.15s;
+}
+input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-subtle);
+  outline: none;
+}
+```
+
+### Badges / Pills
+```css
+.badge {
+  display: inline-flex;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+.badge-success { background: #E6FFEE; color: #38A169; }
+.badge-warning { background: #FFFBE6; color: #DD6B20; }
+```
+
+### Progress bars
+```css
+.progress { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
+.progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.5s; }
+```
+
+---
+
+## 5. Layout Principles
+
+- **Máximo ancho**: 1200px con padding lateral de 24px en mobile, 48px en desktop
+- **Grid**: 12 columnas, gutter 24px
+- **Spacing**: escala de 4px: 4, 8, 12, 16, 24, 32, 48, 64, 96
+- **Cards en grid**: 2–3 columnas en desktop, 1 en mobile
+- **Secciones con fondo alternado**: usar `--bg-surface2` (violeta muy claro) para secciones importantes
+
+---
+
+## 6. Depth & Elevation
+
+```css
+/* Nivel 1 — base elevation */
+.shadow-sm { box-shadow: 0 1px 4px rgba(108,63,245,0.06); }
+
+/* Nivel 2 — cards interactivas */
+.shadow-md { box-shadow: 0 4px 16px rgba(108,63,245,0.10); }
+
+/* Nivel 3 — modales, dropdowns */
+.shadow-lg { box-shadow: 0 8px 32px rgba(108,63,245,0.16); }
+
+/* Botones CTA — sombra de color */
+.shadow-accent { box-shadow: 0 4px 14px rgba(108,63,245,0.35); }
+```
+
+---
+
+## 7. Do's and Don'ts
+
+**Do**:
+- Usa el color de acento en las acciones principales — que sea obvio qué hacer
+- Gradientes sutiles en elementos de display (de `--accent` a `--accent-hover` horizontal — nunca diagonal)
+- Micro-animaciones en hover de botones (`transform: translateY(-1px)`)
+- Emojis solo en onboarding o estados vacíos (no como iconos de feature)
+- `border-radius: 12–16px` en cards y botones — redondeado pero no excesivo
+
+**Don't**:
+- Gradiente en diagonal sobre el hero (regla P0 de anti-ai-slop)
+- Usar los dos acentos juntos en el mismo componente
+- Texto blanco sobre color claro (verificar contraste siempre)
+- Más de 3 colores diferentes en la misma pantalla
+- Sombras de color negro — en este sistema las sombras son del color del acento
+
+---
+
+## 8. Responsive Behavior
+
+```css
+body { font-size: 15px; background: var(--bg-base); }
+.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
+
+@media (min-width: 768px) {
+  .container { padding: 0 48px; }
+  .grid-cards { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (min-width: 1024px) {
+  .grid-cards { grid-template-columns: repeat(3, 1fr); }
+}
+```
+
+---
+
+## 9. Agent Prompt Guide
+
+Cuando generes wireframes con Vibrant Consumer:
+
+- **El color es protagonista**: el acento violeta `#6C3FF5` en botones, links, indicadores activos — que sea visible desde lejos
+- **Botones con sombra de color**: `box-shadow: 0 4px 14px rgba(108,63,245,0.35)` en el botón primario
+- **Emojis permitidos** (solo en): estados vacíos, ilustraciones de onboarding, celebraciones de logro
+- **Cards con border-radius 16px**: redondeadas pero no burbujas
+- **Sin iconos de emoji para features** — los features usan SVG o texto, no 🚀📊✨
+- **CTA secundario con color 2** (`--accent2`): coral/naranja para urgencia (ofertas, límites de tiempo)
+- **Progress y gamificación**: este sistema es el adecuado para streaks, puntos, barras de progreso
+- **Hover animado**: los botones suben 1px al hacer hover — `transform: translateY(-1px)`
+- **Gradiente permitido** (solo): de `--accent` a `--accent-hover` en dirección horizontal, solo en elementos de display grande, nunca en el hero completo