--- name: bauman-design-system description: Sistema de diseño para el ERP SIBA (Sistema Bauman). Debe usarse SIEMPRE al crear o modificar componentes UI, páginas, formularios, o cualquier elemento visual. Garantiza consistencia en colores, tipografía, componentes, responsive y patrones de la aplicación. --- # Sistema de Diseño SIBA (Bauman) Referencia obligatoria al desarrollar UI para Sistema SIBA. **Estilo: Corporate Premium** | **Dark Mode + Light Mode** | **Responsive: Desktop-first** --- ## ⚠️ Reglas Críticas 1. **SIEMPRE responsive** - Desktop-first, debe funcionar en 375px+ 2. **SIEMPRE ambos modos** - Light y Dark mode con `dark:` prefix 3. **NUNCA emojis** - Solo iconos Material Symbols 4. **NUNCA colores hardcodeados** - Usar CSS variables o tokens Tailwind 5. **SIEMPRE usar la paleta Gold** para acciones principales y estados activos --- ## Identidad Visual ### Estética - **Corporate Premium**: Elegante, minimalista, sofisticado - **Influencia geométrica**: Inspirado en el logo Bauman (formas cuadradas) - **Sensación de lujo**: Uso estratégico del dorado sobre fondos neutros ### Tipografía | Propiedad | Valor | | ----------- | ---------------------------------------------------------------------------------------- | | Font Family | **Manrope** (Google Fonts) | | Weights | 400, 500, 600, 700, 800 | | Import | `https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap` | ```tsx // Clase Tailwind className = 'font-sans'; // Manrope configurado como default ``` ### Iconografía | Librería | Import | | ---------------- | --------------------------------------------------------------------------------------------------------- | | Material Symbols | `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap` | ```tsx dashboard ``` --- ## Paleta de Colores ### 🥇 Gold Accent (Protagonista) | Token | HEX | Uso | | ----------------------- | --------- | --------------------------------- | | `gold` / `gold-DEFAULT` | `#bd8e3d` | CTAs, estados activos, highlights | | `gold-light` | `#e6c489` | Hover states, fondos suaves | | `gold-muted` | `#C5A36A` | Bordes, elementos secundarios | ```tsx // Botón primario (CTA) className = 'bg-gold text-white hover:bg-gold-light'; // Estado activo sidebar className = 'bg-gold/10 text-gold border-l-2 border-gold'; ``` ### Light Mode | Token | HEX / Tailwind | Uso | | -------------- | ------------------------------ | ---------------- | | background | `#f8f8f7` / `bg-[#f8f8f7]` | Fondo principal | | surface | `#ffffff` / `bg-white` | Cards, modales | | border | `#e5e5e3` / `border-[#e5e5e3]` | Bordes | | text-primary | `#18181B` / `text-slate-900` | Texto principal | | text-secondary | `#52525B` / `text-slate-500` | Texto secundario | | text-muted | `#a1a1aa` / `text-slate-400` | Placeholders | ### Dark Mode | Token | HEX / Tailwind | Uso | | -------------- | ----------------------------------- | -------------------- | | background | `#121416` / `dark:bg-[#121416]` | Fondo principal | | surface | `#1a1c1e` / `dark:bg-[#1a1c1e]` | Cards, sidebar | | border | `#37322a` / `dark:border-[#37322a]` | Bordes | | text-primary | `#fafafa` / `dark:text-slate-100` | Texto principal | | text-secondary | `#a1a1aa` / `dark:text-slate-400` | Texto secundario | | charcoal | `#2F3136` | Superficies elevadas | ### Semánticos | Token | Light | Dark | | ------- | --------- | --------- | | success | `#10b981` | `#34d399` | | warning | `#f59e0b` | `#fbbf24` | | error | `#ef4444` | `#f87171` | | info | `#3b82f6` | `#60a5fa` | --- ## CSS Variables ```css :root { /* Gold Accent */ --gold-primary: #bd8e3d; --gold-light: #e6c489; --gold-muted: #c5a36a; /* Backgrounds */ --background: #f8f8f7; --surface: #ffffff; --border: #e5e5e3; /* Text */ --foreground: #18181b; --muted: #52525b; } .dark { --background: #121416; --surface: #1a1c1e; --border: #37322a; --foreground: #fafafa; --muted: #a1a1aa; } ``` --- ## Tailwind Config ```javascript // tailwind.config.js export default { darkMode: 'class', theme: { extend: { colors: { gold: { DEFAULT: '#bd8e3d', light: '#e6c489', muted: '#C5A36A', }, charcoal: '#2F3136', luxury: '#35322c', }, fontFamily: { sans: ['Manrope', 'system-ui', 'sans-serif'], }, }, }, }; ``` --- ## Responsive Breakpoints ``` Mobile: < 768px (default) Tablet: md: 768px Desktop: lg: 1024px Wide: xl: 1280px ``` ### Layout por Breakpoint | Elemento | Mobile | Tablet | Desktop | | --------- | -------------- | -------------- | --------------- | | Sidebar | Drawer (Sheet) | Colapsado 64px | Expandido 260px | | Header | Hamburger | Full | Full | | Grid cols | 1 | 2 | 3-4 | --- ## Componentes Core ### Sidebar ```tsx // Desktop expandido: 260px