Dashboard web · mockup 12 mayo 2026 · actual vs manual
Cómo se ve el dashboard hoy en desktop, y cómo se vería aplicando el manual.
El layout del repo: sidebar colapsable a íconos a la izquierda (64px) + navbar fijo full-width arriba (60px) con business switcher, location chip, agent state, bell y CTA "Nuevo turno". Contenido max-w-5xl centered. Tokens y fonts reales del styles.css. Abajo, el mismo layout con el manual v3 aplicado.
Estado actual del repoWeb dashboard tal como está hoySidebarProvider + AppNavbar + AppSidebar reales. Fondo bg-brand-pattern (textura warm). Navbar glass 40 % blur 14px. Sidebar transparente sobre el pattern. Tokens Instrument Sans + DM Serif Display + Instrument Serif + Geist Mono.
Con manual aplicadoWeb dashboard con sistema v3Cambio estructural: la sidebar deja de ser chrome y se convierte en card G2 flotante — mismo material que las cards de hero y lista. Coherencia total. Navbar liquid glass full-width. Geist único sans + Fraunces italic en wordmark p del sidebar y nombre del saludo. Cards blancas G2 smoothing 80 %. Mini orb iridiscente en el navbar al lado del agent state. Orb full handle bottom-right.
El layout estructural se preserva — sidebar + navbar + content. Lo que cambia es el material del chrome y la presencia del agente.
Elemento
Hoy en el repo
Con manual v3
Wordmark sidebar
"P" DM Serif Display italic dentro de cuadrado oscuro 32 px radius 9 px.
"p" Fraunces italic 300 SOFT 100 dentro de squircle gradient tinta 40 px radius 12 px. Único lugar serif del chrome.
Sidebar (chrome)
Columna vertical transparente 64 px pegada al borde izquierdo, sobre el pattern. Híbrida con el navbar — sin separación, parte del chrome continuo del dashboard.
Card blanca G2 flotante 76 px de ancho con márgenes (20 px izq, 24 px abajo, 16 px debajo del navbar). Mismo material y radius que las cards de hero/lista — coherencia total. El chrome deja de ser chrome y pasa a ser componente.