PrimoTech Design System
Primo UI
Un lenguaje visual único para todo PrimoTech.
Componentes reutilizables, accesibles y preparados para interfaces administrativas oscuras. Esta galería no contiene lógica de negocio.
Fundamentos
Tokens visuales
Colores, tipografías, radios, sombras y espacios comparten variables CSS globales.
Graphite
#080B0A
Panel
#101412
Neon
#B6F52A
Success
#34D399
Warning
#FBBF24
Danger
#F87171
Tipografía
Space Grotesk
Inter para lectura y controles
Radios
Espaciado
Acciones
Button y Badge
Acciones jerarquizadas con estados reales de hover, foco, deshabilitado y carga.
Superficies
Card y StatCard
Superficies homogéneas para información, métricas y agrupaciones.
Equipos activos
24
Ingresaron hoy
Finalizados
8
Sincronización visual
Demorados
5
Requieren atención
Ingresos
Carga simulada
Card normal
Hover disponible sobre toda la superficie.
El contenido mantiene padding, contraste y jerarquía consistentes.
Operación completada
Estado positivo con borde y fondo semánticos.
Acción irreversible
Estado crítico reservado para confirmaciones importantes.
Formularios
Input, Select y SearchBar
Controles con dimensiones compartidas, ayuda contextual y estados semánticos.
Navegación y datos
Tabs y Table
Navegación local y tablas responsivas para pantallas administrativas.
| ID | Componente | Categoría | Estado |
|---|---|---|---|
| UI-001 | Button | Acciones | Estable |
| UI-002 | Input | Formularios | Estable |
| UI-003 | Modal | Capas | Nuevo |
| UI-004 | Table | Datos | Revisión |
Estados
EmptyState y LoadingState
Patrones consistentes para ausencia de datos y procesos en curso.
Sin resultados
Utilizá este estado cuando una lista todavía no tenga resultados.
Feedback
Modal, Drawer, Toast y ConfirmDialog
Capas y mensajes temporales sin relación con datos reales del taller.
Operación completada
La interfaz confirmó la acción visual.
Atención requerida
Hay información que conviene revisar.
Ocurrió un error
La operación no pudo completarse.