sdd-es 2.0.0 → 2.5.0

package/craft/color.md

@@ -0,0 +1,160 @@
+# Color Rules — FORGE Craft
+
+Adoptado de open-design (nexu-io). Referencia para agentes de diseño.
+
+---
+
+## Principio fundamental
+
+**Un color de acento. Un color de fondo. Un color de texto. Todo lo demás es variante.**
+
+La mayoría de diseños de IA generada fallan porque usan demasiados colores. La restricción genera identidad.
+
+---
+
+## Sistema de roles de color
+
+Todo color en un UI tiene un **rol**, no un valor arbitrario. Define los roles primero, los valores después.
+
+| Variable CSS | Rol | Descripción |
+|--------------|-----|-------------|
+| `--bg-base` | Fondo base | La superficie más grande de la pantalla |
+| `--bg-surface` | Superficie elevada | Cards, modales, sidebars |
+| `--bg-surface2` | Superficie doble elevada | Inputs, tooltips, dropdowns |
+| `--text-primary` | Texto principal | Headings, labels importantes |
+| `--text-secondary` | Texto secundario | Body text, descripciones |
+| `--text-muted` | Texto atenuado | Metadata, placeholders, timestamps |
+| `--text-inverse` | Texto invertido | Texto sobre fondos de acento |
+| `--accent` | Color de acento | CTAs, links, indicadores de progreso |
+| `--accent-hover` | Acento al hover | Versión más clara/oscura del acento |
+| `--accent-subtle` | Acento sutil | Fondos de badges, highlights |
+| `--border` | Bordes | Líneas divisorias, bordes de inputs |
+| `--error` | Error | Mensajes de error, validación fallida |
+| `--success` | Éxito | Confirmaciones, validación exitosa |
+| `--warning` | Advertencia | Alertas no críticas |
+
+---
+
+## Paletas por dirección visual
+
+### Neutral Modern (light)
+```css
+:root {
+  --bg-base:      #FAFAFA;
+  --bg-surface:   #FFFFFF;
+  --bg-surface2:  #F4F4F5;
+  --text-primary: #111111;
+  --text-secondary: #374151;
+  --text-muted:   #6B7280;
+  --text-inverse: #FFFFFF;
+  --accent:       #2563EB;
+  --accent-hover: #1D4ED8;
+  --accent-subtle:#DBEAFE;
+  --border:       #E5E7EB;
+  --error:        #DC2626;
+  --success:      #16A34A;
+  --warning:      #D97706;
+}
+```
+
+### Warm Editorial (light)
+```css
+:root {
+  --bg-base:      #FAF8F4;
+  --bg-surface:   #FFFFFF;
+  --bg-surface2:  #F5F0E8;
+  --text-primary: #2C2416;
+  --text-secondary: #4A3728;
+  --text-muted:   #7C6B5A;
+  --text-inverse: #FAF8F4;
+  --accent:       #C0392B;
+  --accent-hover: #A93226;
+  --accent-subtle:#FADBD8;
+  --border:       #DDD5C8;
+  --error:        #C0392B;
+  --success:      #1E8449;
+  --warning:      #B7770D;
+}
+```
+
+### Bold Brutalist (dark)
+```css
+:root {
+  --bg-base:      #0A0A0A;
+  --bg-surface:   #141414;
+  --bg-surface2:  #1E1E1E;
+  --text-primary: #F5F5F5;
+  --text-secondary: #D0D0D0;
+  --text-muted:   #888888;
+  --text-inverse: #0A0A0A;
+  --accent:       #F0E040;
+  --accent-hover: #F5E860;
+  --accent-subtle:#2A2800;
+  --border:       #2E2E2E;
+  --error:        #FF4444;
+  --success:      #44FF88;
+  --warning:      #FFAA00;
+}
+```
+
+---
+
+## Reglas de contraste (WCAG AA mínimo)
+
+| Combinación | Ratio mínimo | Test |
+|-------------|-------------|------|
+| Texto sobre fondo base | 4.5:1 | `--text-primary` sobre `--bg-base` |
+| Texto grande (> 18px bold) | 3:1 | `--text-secondary` sobre `--bg-surface` |
+| Texto sobre acento | 4.5:1 | `--text-inverse` sobre `--accent` |
+| Iconos / bordes | 3:1 | `--border` sobre `--bg-base` |
+
+**Herramientas de verificación**: coolors.co/contrast-checker, webaim.org/resources/contrastchecker
+
+### Ratios comprobados de las paletas FORGE
+
+| Paleta | text-primary / bg-base | text-inverse / accent |
+|--------|----------------------|-----------------------|
+| Neutral Modern | #111111 / #FAFAFA → **19.6:1** ✅ | #FFFFFF / #2563EB → **4.7:1** ✅ |
+| Warm Editorial | #2C2416 / #FAF8F4 → **14.2:1** ✅ | #FAF8F4 / #C0392B → **4.6:1** ✅ |
+| Bold Brutalist | #F5F5F5 / #0A0A0A → **18.9:1** ✅ | #0A0A0A / #F0E040 → **14.3:1** ✅ |
+
+---
+
+## Anti-patrones de color (no hacer)
+
+❌ **Gradiente de 2 colores en diagonal sobre hero** — cliché de IA generada (regla P0 de anti-ai-slop)
+❌ **Indigo #6366F1 como acento** — el azul Tailwind por defecto (regla P0 de anti-ai-slop)
+❌ **Más de 1 color de acento** — si necesitas un segundo acento, usa una variante del primero
+❌ **Texto de color sobre fondo de color** — solo si el contraste es ≥ 4.5:1
+❌ **Usar colores semánticos fuera de su rol** — `--error` no se usa para decoración
+❌ **Sombras de color saturado** (glow effects, colored box-shadows) — en B2B y herramientas parece poco serio
+❌ **Fondos blancos puros #FFFFFF en dark mode** — usar `--bg-surface` no `#FFFFFF`
+
+---
+
+## Cómo aplicar sombras (depth)
+
+Las sombras deben ser casi negras, nunca de color. La opacidad define la profundidad.
+
+```css
+/* Nivel 1 — Cards, dropdowns */
+box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+
+/* Nivel 2 — Modales, sidebars elevados */
+box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
+
+/* Bold Brutalist — offset shadow sin difuminado */
+box-shadow: 4px 4px 0 var(--accent);
+```
+
+---
+
+## Referencia rápida para agentes
+
+Cuando generes un wireframe:
+1. Lee el DESIGN.md activo — copia las variables CSS exactas de la paleta
+2. Define todas las variables en `:root { }` al inicio del `<style>`
+3. Nunca uses colores hex directos en los componentes — usa las variables
+4. Verifica mentalmente el contraste antes de finalizar (texto sobre fondo)
+5. Si el DESIGN.md es bold-brutalist, las sombras son offset `4px 4px 0` sin blur
+6. Nunca uses gradientes en diagonal como fondo de hero

package/craft/typography.md

@@ -0,0 +1,121 @@
+# Typography Rules — FORGE Craft
+
+Adoptado de open-design (nexu-io). Referencia para agentes de diseño.
+
+---
+
+## Principio fundamental
+
+**La tipografía no es decoración — es jerarquía.**
+
+El lector debe saber en 0.3 segundos dónde está el título, el cuerpo y la acción. Si hay duda, la tipografía falló.
+
+---
+
+## Escala tipográfica base
+
+Usa una escala con ratio 1.25 (Major Third) o 1.333 (Perfect Fourth). No inventes tamaños arbitrarios.
+
+### Perfect Fourth (ratio 1.333) — recomendada para productos web
+
+| Rol | Tamaño | Uso |
+|-----|--------|-----|
+| `--text-xs` | 10px | Labels, captions, badges |
+| `--text-sm` | 12px | Texto auxiliar, metadata |
+| `--text-base` | 14px | Cuerpo de texto principal |
+| `--text-md` | 16px | Párrafos largos, descripciones |
+| `--text-lg` | 18px | Lead text, subtítulos |
+| `--text-xl` | 24px | Títulos de sección (h3) |
+| `--text-2xl` | 32px | Títulos de página (h2) |
+| `--text-3xl` | 48px | Hero titles (h1) |
+| `--text-4xl` | 64px | Display (hero grande, landing) |
+
+---
+
+## Familias tipográficas por dirección visual
+
+### Neutral Modern
+- **Display/Headings**: Inter (Google Fonts) — `font-weight: 700`
+- **Body**: Inter — `font-weight: 400`
+- **Code**: `'Cascadia Code', 'Fira Code', monospace`
+- **Característica**: sin serifa, geométrica, alta legibilidad
+
+### Warm Editorial
+- **Display**: Playfair Display (Google Fonts) — `font-weight: 700, 900`
+- **Subheadings**: Source Serif 4 — `font-weight: 600`
+- **Body**: Source Serif 4 — `font-weight: 400`
+- **Labels/UI**: Inter — `font-weight: 500`
+- **Característica**: contraste serif/sans para jerarquía editorial
+
+### Bold Brutalist
+- **Display/Headings**: Space Grotesk (Google Fonts) — `font-weight: 900`, UPPERCASE
+- **Body**: Space Grotesk — `font-weight: 400`
+- **Code/Mono accent**: Space Mono — `font-weight: 700`
+- **Característica**: condensado, chocante, todo en mayúsculas para headings
+
+---
+
+## Reglas de composición
+
+### Line height
+- Headings: `line-height: 1.1` — `1.2`
+- Body text: `line-height: 1.6` — `1.7`
+- Labels/captions: `line-height: 1.3`
+
+### Letter spacing
+- Headings grandes (> 32px): `letter-spacing: -0.03em` (óptico)
+- Body: `letter-spacing: 0`
+- UPPERCASE labels: `letter-spacing: 0.08em` — `0.12em`
+- Botones: `letter-spacing: 0.02em`
+
+### Font weight en jerarquía
+- Solo usar 3 pesos máximo por pantalla: `400` (body) + `600` (subheadings) + `700/900` (titles)
+- No usar `font-weight: 300` — en pantallas oscuras parece roto
+- No usar `font-weight: 500` como heading — es demasiado sutil para crear jerarquía
+
+### Medida de línea (measure)
+- Cuerpo de texto: **60–75 caracteres por línea** (óptimo de lectura)
+- En CSS: `max-width: 65ch` para párrafos de texto largo
+- Títulos: sin restricción de measure — llenan el contenedor
+
+---
+
+## Anti-patrones tipográficos (no hacer)
+
+❌ **Mezclar más de 2 familias tipográficas** en la misma pantalla
+❌ **Usar todas las variantes de peso** (100, 200, 300... 900) en una sola UI
+❌ **Texto body menor a 13px** — ilegible en mobile y pantallas de alta densidad
+❌ **Itálica en cuerpo largo** — reduce velocidad de lectura un 15%
+❌ **Centrar texto de más de 3 líneas** — el ojo pierde el inicio de cada línea
+❌ **Texto en mayúsculas para párrafos** — solo para labels cortos (< 4 palabras)
+❌ **Combinar dos fuentes de la misma categoría** (dos sans-serif diferentes sin contraste suficiente)
+
+---
+
+## Cómo cargar fuentes (Google Fonts)
+
+```html
+<!-- Neutral Modern: Inter -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+
+<!-- Warm Editorial: Playfair Display + Source Serif 4 -->
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">
+
+<!-- Bold Brutalist: Space Grotesk + Space Mono -->
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+```
+
+**Siempre incluir `display=swap`** para evitar FOIT (flash of invisible text).
+
+---
+
+## Referencia rápida para agentes
+
+Cuando generes un wireframe:
+1. Lee el DESIGN.md activo para saber qué familia tipográfica usar
+2. Usa `<link>` de Google Fonts con `display=swap`
+3. Define variables CSS: `--font-display`, `--font-body`, `--font-mono`
+4. Aplica la escala: heading principal → `--text-3xl` o `--text-2xl`, body → `--text-base`
+5. Letter-spacing negativo en headings grandes, positivo en UPPERCASE labels
+6. Nunca mezclar más de 2 familias en la misma pantalla

package/design-systems/bold-brutalist/DESIGN.md

@@ -0,0 +1,239 @@
+# DESIGN SYSTEM: Bold Brutalist
+
+> **Dirección**: Impactante, directo, sin adornos. Colores saturados, tipografía masiva, estructura visible. Honesto sobre lo que es.
+
+---
+
+## 1. Visual Theme & Atmosphere
+
+El diseño no esconde nada. Estructura visible, bordes duros, peso tipográfico máximo.
+No busca gustar — busca impactar. Funcional y agresivamente visual.
+
+**Palabras clave**: impactante · directo · audaz · sin excusas · estructural · honesto
+
+---
+
+## 2. Color Palette & Roles
+
+```css
+/* Fondos */
+--bg-base:       #0A0A0A;   /* casi negro */
+--bg-surface:    #141414;   /* negro algo más claro */
+--bg-subtle:     #1F1F1F;   /* superficies elevadas */
+--bg-emphasis:   #2A2A2A;   /* hover */
+
+/* Texto */
+--text-primary:  #F5F5F5;   /* casi blanco */
+--text-secondary:#A0A0A0;   /* gris medio */
+--text-muted:    #5A5A5A;   /* deshabilitados */
+--text-inverse:  #0A0A0A;   /* sobre fondos claros */
+
+/* Acento — uno solo, saturado */
+--accent:        #F0E040;   /* amarillo brillante — el único color */
+--accent-hover:  #D4C400;
+--accent-subtle: #2A2800;   /* fondo de chips con acento */
+
+/* Estado */
+--success:       #39FF14;   /* verde neón */
+--warning:       #FF6B00;   /* naranja */
+--error:         #FF2D2D;   /* rojo */
+--info:          #00BFFF;   /* azul cielo */
+
+/* Bordes — el alma del brutalismo */
+--border:        #333333;
+--border-strong: #F5F5F5;   /* borde blanco para énfasis */
+--border-accent: #F0E040;   /* borde amarillo para acción */
+```
+
+---
+
+## 3. Typography Rules
+
+```css
+/* Fuentes — pesadas, directas */
+--font-display: 'Space Grotesk', 'Arial Black', sans-serif;
+--font-body:    'Space Grotesk', 'Arial', sans-serif;
+--font-mono:    'Space Mono', 'Courier New', monospace;
+
+/* Escala — extremos */
+--text-xs:   11px / 1.3;
+--text-sm:   13px / 1.4;
+--text-base: 16px / 1.5;
+--text-lg:   20px / 1.4;
+--text-xl:   28px / 1.2;
+--text-2xl:  40px / 1.1;
+--text-3xl:  56px / 1.0;
+--text-4xl:  80px / 0.95;   /* headings héroe masivos */
+
+/* Pesos */
+--weight-bold:     700;
+--weight-black:    900;   /* para headings principales */
+```
+
+**Reglas específicas**:
+- H1: Space Grotesk, 56–80px, weight 900, uppercase, tracking -0.02em
+- H2: Space Grotesk, 40px, weight 700, uppercase
+- Body: Space Grotesk, 16px, weight 400, line-height 1.6
+- Labels/UI: Space Mono, 12px, uppercase, letter-spacing 0.1em
+- Nunca itálica (el brutalismo es recto)
+
+---
+
+## 4. Component Stylings
+
+### Botones — el elemento más característico
+```css
+/* Primario — el brutalismo signature */
+.btn-primary {
+  background: var(--accent);
+  color: var(--text-inverse);
+  padding: 14px 32px;
+  border-radius: 0;              /* cuadrado perfecto */
+  border: 2px solid var(--accent);
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 13px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  /* El shadow offset es el sello del brutalismo */
+  box-shadow: 4px 4px 0 var(--border-strong);
+  transition: box-shadow 0.1s, transform 0.1s;
+}
+.btn-primary:hover {
+  box-shadow: 2px 2px 0 var(--border-strong);
+  transform: translate(2px, 2px);
+}
+.btn-primary:active {
+  box-shadow: 0 0 0 var(--border-strong);
+  transform: translate(4px, 4px);
+}
+
+/* Outline */
+.btn-outline {
+  background: transparent;
+  color: var(--text-primary);
+  border: 2px solid var(--border-strong);
+  padding: 14px 32px;
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  box-shadow: 4px 4px 0 var(--border-strong);
+}
+```
+
+### Cards
+```css
+.card {
+  background: var(--bg-surface);
+  border: 2px solid var(--border-strong);
+  border-radius: 0;
+  padding: 24px 28px;
+  box-shadow: 6px 6px 0 var(--border-accent);  /* shadow offset amarillo */
+}
+
+.card:hover {
+  box-shadow: 3px 3px 0 var(--border-accent);
+  transform: translate(3px, 3px);
+  transition: all 0.1s;
+}
+```
+
+### Inputs
+```css
+.input {
+  background: var(--bg-subtle);
+  border: 2px solid var(--border-strong);
+  border-radius: 0;
+  padding: 12px 16px;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--text-primary);
+}
+.input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+```
+
+### Tags / Badges
+```css
+.badge {
+  display: inline-flex;
+  padding: 3px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.badge-accent {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-subtle);
+}
+```
+
+---
+
+## 5. Layout Principles
+
+- **Grid**: 12 columnas, gutter 20px, max-width 1280px (más amplio que lo usual)
+- **Bordes como estructura**: los contenedores usan `border: 2px solid` para delimitar secciones, no padding ni colores de fondo
+- **Asimetría intencional**: hero con texto gigante izquierda + elemento visual derecha sin margen entre ellos
+- **Espaciado**: mínimo 32px entre secciones, máximo 80px — no tan generoso como editorial
+- **Columnas de texto**: max 60 caracteres por línea (legibilidad en texto masivo)
+
+---
+
+## 6. Depth & Elevation
+
+```css
+/* El offset shadow ES la profundidad en brutalismo */
+--shadow-offset-sm: 3px 3px 0;    /* elementos pequeños */
+--shadow-offset-md: 6px 6px 0;    /* cards, modales */
+--shadow-offset-lg: 8px 8px 0;    /* elementos hero */
+
+/* Color del shadow: blanco sobre negro, amarillo para accent */
+/* Nunca sombras difusas (box-shadow blur > 0 es raro) */
+```
+
+---
+
+## 7. Do's and Don'ts
+
+**✅ Hacer:**
+- Headings en UPPERCASE masivos (56px+)
+- Offset shadows en botones y cards (4–8px)
+- Bordes `border: 2px solid` visibles como estructura
+- Tipografía monospace para etiquetas y código
+- Un solo color de acento (amarillo) — nunca dos
+- Hover states con `transform: translate()` para simular presión
+
+**❌ No hacer:**
+- Gradientes (ninguno)
+- Bordes redondeados (máximo 0–2px)
+- Más de 1 color de acento
+- Sombras difusas (box-shadow con blur)
+- Itálica
+- Imágenes de stock genéricas (mejor sin imagen que con una mala)
+- Fondos claros (este sistema es dark-first)
+
+---
+
+## 8. Responsive Behavior
+
+```
+Desktop  (≥1024px): layout full-width, headings masivos, offset shadows completos
+Tablet   (640–1023px): headings reducidos (max 40px), shadows más pequeños
+Mobile   (<640px): 1 col, headings 28–32px, sin offset shadow (tap targets), padding lateral 16px
+```
+
+---
+
+## 9. Agent Prompt Guide
+
+> Usa el sistema Bold Brutalist: fondo casi negro (#0A0A0A), texto casi blanco (#F5F5F5), acento amarillo brillante (#F0E040) solo en 1–2 elementos. Space Grotesk para headings (700–900 weight, UPPERCASE), Space Mono para UI y labels. Bordes duros (border-radius: 0), offset shadows en botones y cards (4–8px sin blur). Sin gradientes. Sin bordes redondeados. Sin fuentes serif. El diseño se siente como un cartel de propaganda bien ejecutado: impactante, directo, sin decoración innecesaria.