Perfecto. Voy a ayudarte a crear un Design System completo basado en las especificaciones del Gobierno Regional de Cusco. Empezaré configurando los tokens de diseño en Tailwind.
Ahora voy a actualizar la configuración de Tailwind y el CSS global con los tokens de diseño del sistema:
Excelente. Ahora voy a crear los componentes. Empezaré con los componentes básicos:
Continuemos con más componentes:
Ahora voy a crear componentes más complejos de navegación y layout:
Continuemos con más componentes avanzados:
Ahora voy a crear componentes para tablas y paginación:
Perfecto. Ahora voy a crear una página de demostración completa que muestre todos estos componentes:
Ahora crearé una página de demostración completa que muestre todos los componentes:
Perfecto. Ahora voy a actualizar el layout para incluir las fuentes de Google:
Excelente. Ahora voy a crear un archivo de documentación para el design system:
Ahora voy a crear un archivo de ejemplo de uso de los componentes:
Perfecto. Ahora voy a completar la tarea:
¡Excelente! He completado tu Sistema de Diseño basado en las especificaciones del Gobierno Regional de Cusco. Aquí está lo que he creado:
Componentes Implementados
Componentes Base
- Button - 7 variantes de color (primario, secundario, éxito, error, advertencia, información, soporte)
- Input - Con validación, helper text, y manejo de errores
- Card - Contenedores con título, subtítulo y descripción
- Badge - Etiquetas con múltiples variantes de color
- Toggle - Interruptores on/off interactivos
Componentes de Navegación
- Header - Encabezado con navegación responsive y soporte móvil
- Sidebar - Barra lateral colapsable con ítems activos
- Breadcrumb - Navegación de ruta completa
Componentes Avanzados
- Modal - Diálogos enfocados con acciones primarias/secundarias
- Stepper - Indicador de progreso para procesos multistep
- Pagination - Navegación inteligente entre páginas
- Table - Tablas de datos responsive
Características Diseño
✓ Colores oficiales - Paleta completa del Gobierno Regional (rojo #9E0C36, amarillo #DAAF37)
✓ Tipografía custom - Arima para títulos, Red Hat Display para cuerpo
✓ Modo oscuro/claro - Todos los componentes soportan ambos modos
✓ Responsive - Adaptado para móvil, tablet y desktop
✓ Accesibilidad WCAG AA - Contraste 4.5:1, navegación por teclado
✓ Espaciado modular - Escala de 4px para consistencia visual
Archivos Creados
- 12 componentes React en
/components - Página de demostración con todos los componentes en uso
- DESIGN_SYSTEM.md - Documentación completa
- examples.tsx - 10 ejemplos prácticos de uso
- Tailwind config actualizado con tokens personalizados
- Fonts Google integradas (Arima y Red Hat Display)
Abre la vista previa para ver el sistema completo en acción. Todos los componentes son interactivos y puedes cambiar entre modo claro y oscuro usando el botón en la esquina superior derecha.
Ah, entiendo perfectamente. Quieres un Design System documentado e interactivo como una verdadera guía de estilo, no solo componentes React. La imagen muestra una estructura donde:
- Tokens documentados - Variables CSS visibles en la página
- Sección interactiva de componentes - Sidebar con navegación a diferentes secciones (Colores, Tipografía, Botones, etc.)
- Código visible - Ejemplos de HTML + Tailwind que se pueden copiar
- Documentación inline - Explicaciones y uso de cada elemento
- Tema dinámico - Switch light/dark integrado
Voy a refactorizar el proyecto para crear una verdadera guía de estilo interactiva con esta estructura:
Ahora voy a refactorizar la página para ser una verdadera guía de estilo con código visible, tokens documentados y componentes interactivos:
Perfecto. He refactorizado completamente el proyecto para crear una verdadera guía de estilo interactiva basada en la imagen que compartiste. Ahora tenemos:
Estructura mejorada:
- Sidebar navegable con 7 secciones (Guía, Colores, Tipografía, Botones, Inputs, Tarjetas, Espaciado)
- Vista previa de componentes con código HTML + Tailwind visible
- Variables CSS documentadas para cada token
- Ejemplos prácticos de uso con "Ver/Ocultar código"
- Modo claro/oscuro totalmente funcional
- Sistema de espaciado visual interactivo
Cada sección muestra componentes, su código HTML, y cómo usarlos con Tailwind CSS, exactamente como se ve en tu imagen de referencia.