ComandeskHelp Inicio

Design System Contract — OPS Premium

Estado: en ejecucion

Scope: Dashboard/Queue (fase piloto)

Objetivo

Definir un sistema modular de tokens + componentes para implementar una UI premium, limpia y legible, con soporte light/dark, sin ruido visual.

Principios visuales

  1. Legibilidad por encima de decoracion.
  2. Espaciado generoso y consistente.
  3. Colores neutros con un acento principal.
  4. Sombras minimas, sin gradientes innecesarios.
  5. Componentes desacoplados y reutilizables.

Tokens globales

Tipografia

  • --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
  • --font-display: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif

Nota: fuente reemplazable por token (p. ej. Manrope/Satoshi) sin tocar componentes.

Escala tipografica

  • --text-xs: 12px
  • --text-sm: 14px
  • --text-md: 16px
  • --text-lg: 20px
  • --text-xl: 28px
  • --text-stat: 56px (numeros grandes, peso fino)

Espaciado

  • Base 4px
  • --space-1: 4px
  • --space-2: 8px
  • --space-3: 12px
  • --space-4: 16px
  • --space-5: 20px
  • --space-6: 24px
  • --space-8: 32px
  • --space-10: 40px

Bordes/radios

  • --radius-sm: 10px
  • --radius-md: 14px
  • --radius-lg: 18px
  • --border-1: 1px solid var(--c-border)

Sombras (muy bajas)

  • --shadow-1: 0 1px 2px rgba(16,18,20,.05)
  • --shadow-2: 0 6px 18px rgba(16,18,20,.06)

Color (light)

  • --c-bg: #f5f6f8
  • --c-surface: #ffffff
  • --c-surface-alt: #f8fafc
  • --c-text: #101214
  • --c-text-muted: #6b7280
  • --c-border: #e6e8ec
  • --c-accent: #1f6fff
  • --c-success: #1ea672
  • --c-warning: #d28a1e
  • --c-danger: #d14343

Color (dark)

  • --c-bg: #0f1115
  • --c-surface: #151922
  • --c-surface-alt: #1a1f2a
  • --c-text: #e8edf5
  • --c-text-muted: #a8b0bf
  • --c-border: #2a3240
  • --c-accent: #69a0ff
  • --c-success: #36c98b
  • --c-warning: #f3b447
  • --c-danger: #ff6d6d

Estados GTD (semantica)

Mapeo semantico (sin colorines):

  • inbox: neutral
  • next: accent soft
  • doing: accent medium
  • waiting: warning soft
  • review: cyan-neutral
  • done: success soft
  • blocked(flag): danger soft + badge

Contrato de componentes

C-01 Sidebar

  • Layout vertical, espaciado amplio.
  • Indicador de item activo discreto (border/accent).
  • Iconos livianos y consistentes.

C-02 Top Bar/Filtros

  • Botones secundarios neutros.
  • Filtro blocked y toggle columna blocked visibles.
  • Búsqueda con ancho amplio.

C-03 Queue Section Card

  • Header con label + count.
  • Body con borde fino y fondo surface.
  • Separadores suaves.

C-04 Task Row

  • Titulo con prioridad tipografica.
  • Meta secundaria compacta y legible.
  • Badge BLOCKED cuando blocked=true.

C-05 Kanban Column/Card

  • Columnas con ancho consistente.
  • Card con sombra mínima y borde claro.
  • Drag states discretos.

C-06 Stats Panel

  • Numeros grandes (--text-stat), peso 400/500.
  • Labels pequeñas y limpias.
  • Espacios generosos entre bloques.

Dark Mode contract

  • Implementacion con data-theme="minimal|classic|contrast|dark|catalyst|catalyst-warm" en html.
  • Solo cambia tokens; componentes no deben hardcodear colores.
  • La preferencia primaria vive en app_users.metadata.preferences.theme.

Criterios de aceptacion

  1. Legibilidad correcta en desktop y mobile.
  2. Contraste WCAG AA en texto funcional.
  3. No degradados decorativos.
  4. Sombras casi imperceptibles.
  5. Consistencia visual entre queue y kanban.

Proximo paso tecnico

  1. Crear archivo de tokens CSS (public/ops-premium-tokens.css).
  2. Integrarlo en public/index.html.
  3. Migrar bloques de estilos inline clave a tokens.
  4. Activar toggle dark mode basico.