Volver a la wiki

Design Guidelines - CreaRack Pro

Design Guidelines - CreaRack Pro

Documento maestro de directrices de diseño UI/UX Este documento es de lectura obligatoria para cualquier agente IA que trabaje en el proyecto.

Reglas de Oro (OBLIGATORIAS)

1. Botones: Solo Texto, Nunca Iconos

PROHIBIDO: Añadir iconos dentro de botones.

<!-- INCORRECTO -->
<button><i class="fas fa-save"></i> Save</button>
<button><i class="fas fa-trash"></i> Delete</button>

<!-- CORRECTO -->
<button>Save</button>
<button>Delete</button>

Razón: Consistencia visual, limpieza del diseño, mejor legibilidad en pantallas pequeñas.

Aplica a:

JavaScript dinámico:

// INCORRECTO
btn.innerHTML = '<i class="fas fa-spinner"></i> Loading...';

// CORRECTO
btn.textContent = 'Loading...';

2. Modales: Títulos Limpios

Los títulos de modales (<h3>, <h4>) no deben contener iconos.

<!-- INCORRECTO -->
<h3><i class="fas fa-cog"></i> Settings</h3>

<!-- CORRECTO -->
<h3>Settings</h3>

3. Iconos Permitidos

Los iconos SÍ están permitidos en:

4. Feedback Visual en Botones

Para estados de carga, usar solo texto:

5. Tooltips Obligatorios en Botones

OBLIGATORIO: Todo botón debe incluir el atributo title con una descripción clara de su función.

<!-- INCORRECTO -->
<button class="btn btn-action">Save</button>

<!-- CORRECTO -->
<button class="btn btn-action" title="Save changes">Save</button>

Razón: Mejora la accesibilidad y proporciona contexto adicional al usuario sobre la acción del botón.

Aplica a:

Convenciones para el texto del tooltip:

Nota: Los botones con aria-label también deben tener title para usuarios sin lectores de pantalla.

6. Clases Semánticas de Botones (OBLIGATORIO)

Archivo fuente: static/css/components.css (sección SEMANTIC BUTTON ALIASES)

PROHIBIDO crear estilos de botón custom en CSS de páginas. Usar SIEMPRE las clases centralizadas.

Clases Semánticas por Intención

ClaseColorUsoEjemplo
btn-actionAzulAcciones principales: Save, Create, Confirm, Apply<button class="btn btn-sm btn-action">Save</button>
btn-dangerRojoAcciones destructivas: Delete, Remove, Disconnect<button class="btn btn-sm btn-danger">Delete</button>
btn-warningNaranjaPrecaución: Edit, Modify, Reset Zoom<button class="btn btn-sm btn-warning">Reset</button>
btn-successVerdeConfirmación positiva: Login, Connect, Accept<button class="btn btn-sm btn-success">Connect</button>
btn-exportAmarilloExportación: Export, Print, Download<button class="btn btn-sm btn-export">Export PNG</button>
btn-infoCyanInformativo: Status, Info, Expert Charts<button class="btn btn-sm btn-info">Expert Charts</button>
btn-neutralBlancoNavegación: View, Close, Cancel, Toggle<button class="btn btn-sm btn-neutral">Cancel</button>

Modificadores de Tamaño

ClaseAltoUso
(sin modifier)~38pxBotones principales (modales, formularios)
btn-module-nav~34pxBotones de navegación a módulos (Maps, Terminal, Observatory, etc.) — 14px font, font-weight 600
btn-sm28pxBotones en toolbars, paneles, headers
btn-xs22pxBotones compactos, badges interactivos

Composición Correcta

<!-- Patrón estándar: btn + tamaño + semántica -->
<button class="btn btn-sm btn-action" title="Save changes">Save</button>
<button class="btn btn-sm btn-danger" title="Delete item">Delete</button>
<button class="btn btn-xs btn-warning" title="Reset zoom">Reset Zoom</button>
<!-- Navegación a módulos: btn + semántica + btn-module-nav -->
<a class="btn btn-action btn-module-nav" data-href="/terminal/" title="SSH Terminal Hub">Terminal</a>

PROHIBICIONES

/* ❌ NUNCA crear estilos de botón custom en CSS de página */
.my-page .my-custom-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid #3b82f6;
    color: #82B1FF;
}

/* ❌ NUNCA duplicar colores de btn-action/btn-danger/etc */
.btn-obs-blue { ... }    /* Usar btn-action */
.btn-edit { ... }         /* Usar btn-action */
.btn-delete { ... }       /* Usar btn-danger */
// ❌ NUNCA usar clases custom para toggle de estado
btn.classList.toggle('btn-obs-blue', isActive);
btn.classList.toggle('btn-obs-orange', !isActive);

// ✅ Usar clases semánticas centralizadas
btn.classList.toggle('btn-action', isActive);
btn.classList.toggle('btn-warning', !isActive);

Cuándo Añadir Estilos Extra en CSS de Página

Solo para propiedades de layout que NO son parte del sistema de botones:

/* ✅ OK: Solo layout, sin colores/bordes/fondo */
.my-toolbar .btn {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

Auditoría Completada (05-03-2026)

Se eliminaron ~158 líneas de CSS duplicado en 12 archivos:

7. Guide Modal & Floating Guide Button

Modal: guide-overlay + guide-modal-content (custom, not standard modal system — uses Alpine.js slideshow with fixed-height body).

CSS: static/css/pages/guide.css — 9 slides, fixed body height (496px), decorative banners per module.

JS: static/js/utils/GuideService.js — openGuideModal(slideNumber) auto-detects correct slide from URL.

Floating Guide button: btn-action btn-sm, position: fixed; top: 12px; right: 20px, visible only on module pages (Maps, Editor, Terminal, Observatory, Wireless, UPS, DSM). Auto-detected via URL path matching in base.html inline script.

Slide mapping: 1=Overview, 2=Dashboard, 3=Maps, 4=Rack Editor, 5=Terminal, 6=Observatory, 7=Wireless, 8=UPS, 9=DSM.

Terminal clearance: #layout-controls has margin-right: 70px to avoid overlapping with the floating Guide button.

Paleta de Colores

Definida en static/css/variables.css:

Tipografía

Responsive

Última actualización: 02-04-2026 Mantenido por: Equipo CreaRack

Véase también

Subir