roi-theme/_planificacion/01-design-system

🎨 ADMIN COMPONENTS - DESIGN SYSTEM (MODULARIZADO)

Manual de Diseño para Componentes de Administración Versión 1.0 | APU México

---

📑 ÍNDICE DE DOCUMENTACIÓN

Este design system ha sido modularizado en archivos independientes para facilitar su consulta y mantenimiento.

📐 FUNDAMENTOS DEL SISTEMA

• 01-ESPECIFICACIONES-DEL-SISTEMA.md

  • Requerimientos generales
  • Stack tecnológico
  • Estructura de archivos

• 02-FILOSOFIA-DE-DISENO.md

  • Principios clave
  • Características comunes

🎨 SISTEMA DE DISEÑO VISUAL

• 03-PALETA-DE-COLORES.md

  • Colores principales (Navy, Orange, Neutral)
  • Uso de colores por elemento

• 04-TIPOGRAFIA.md

  • Font stack (Poppins)
  • Pesos y tamaños
  • Jerarquía visual

• 05-SISTEMA-GRID-ESPACIADO.md

  • Grid de Bootstrap
  • Breakpoints responsive
  • Sistema de espaciado (margin/padding)

🏗️ ESTRUCTURA Y COMPONENTES

• 06-ESTRUCTURA-LAYOUT.md

  • Container principal
  • Header del tab (obligatorio)
  • Sistema de grid 2 columnas

• 07-COMPONENTES-REUTILIZABLES.md

  • Botones (primario, secundario, reset)
  • Inputs (text, color, textarea, select)
  • Cards (estándar, vista previa)

• 08-PATRONES-FORMULARIOS.md

  • Form switches
  • Color pickers
  • Text inputs con contador
  • Badges y links de ayuda

🔄 FUNCIONALIDAD Y COMPORTAMIENTO

• 09-VISTA-PREVIA-TIEMPO-REAL.md

  • Estructura HTML del preview
  • Reglas críticas
  • CSS para vista previa

• 10-RESPONSIVE-DESIGN.md

  • Breakpoints
  • Patrones responsive
  • Media queries

• 11-JAVASCRIPT-PATTERNS.md

  • Inicialización
  • Event listeners
  • updatePreview()
  • Guardar/cargar configuración

• 12-PERSISTENCIA-JSON.md

  • Estructura del config.json
  • Funciones de persistencia
  • Sistema de notificaciones

🎛️ PANEL Y ADMINISTRACIÓN

• 13-PANEL-ADMINISTRACION.md

  • Estructura del panel principal
  • Grid de componentes
  • Patrón para nuevos componentes

• 14-CONFLICTOS-WORDPRESS.md

  • Conflicto con .card
  • Conflicto con form switches
  • Conflicto con alineación vertical
  • Checklist anti-conflictos

📚 RECURSOS Y EJEMPLOS

• 15-EJEMPLOS-COMPLETOS.md
  • Ejemplos de campos completos
  • Template básico
  • Checklist de implementación
  • Troubleshooting

🎨 TOKENS DE DISEÑO

• design-tokens-apus-admin.scss
  • Variables SCSS para colores
  • Espaciado
  • Tipografía
  • Sombras y bordes

---

🚀 QUICK START

1. Lee primero: 01-ESPECIFICACIONES-DEL-SISTEMA.md
2. Consulta el diseño: 03-PALETA-DE-COLORES.md y 04-TIPOGRAFIA.md
3. Usa los componentes: 07-COMPONENTES-REUTILIZABLES.md
4. Implementa JavaScript: 11-JAVASCRIPT-PATTERNS.md
5. Resuelve conflictos WP: 14-CONFLICTOS-WORDPRESS.md

---

📝 NOTAS IMPORTANTES

1. ✅ Usar la librería de componentes HTML como referencia (../componentes-html-bootstrap/)
2. ❌ NUNCA modificar el HTML del front-end desde el admin panel
3. ✅ La vista previa debe ser 100% idéntica al componente real
4. ✅ Guardar configuración en archivos JSON (NO localStorage)
5. ✅ Responsive es obligatorio, no opcional
6. ✅ Todos los iconos deben ser orange (#FF8600)
7. ✅ Todos los títulos de card deben ser navy (#1e3a5f)

---

Documento creado: 2025 Versión: 1.0 Proyecto: APU México - Sistema de Administración Autor: Design System Team