01 —
Lo que encontramos
Extracción automatizada de assets y tokens visuales desde onnodo.com
Paleta detectada
#009BEC
Primario
#E9F7FF
Surface
#3E5057
Texto
#0D6EFD
Link
#020F21
Dark
5 colores principales · scoring por relevancia visual en DOM
Tipografía detectada
Gestión de flotas
Plataforma B2B
Control en tiempo real
Poppins
Componentes capturados
Navegación
Header bar
Captura directa desde onnodo.com · elementos reales en producción
↓
02 —
Hacia dónde puede ir
Los assets que ya tienen, organizados en un sistema documentado y escalable — para que cualquier pieza nueva sea consistente sin depender de memoria o criterio individual
Colores como tokens documentados
--color-primary
#009BEC · CTA, links, accents
--color-surface
#E9F7FF · fondos de cards, inputs
--color-text
#3E5057 · body, labels
--color-bg-dark
#020F21 · header, dark sections
--color-white
#FFFFFF · cards, modals, overlays
Tipografía como escala documentada
Disp.
Fleet
H1
Gestión de flotas
Body
Control en tiempo real de tu flota
Label
ESTADO ACTIVO
Data
VIN-2024-MX-001
Componente: Fleet Status Card
Un ejemplo de lo que pasa cuando los tokens se aplican: un componente reutilizable, consistente, que cualquier diseñador o dev puede replicar sin adivinar
Unidad
#047
En ruta
Toyota Hilux 2022 · Placa MX-4729
87 km/h
Velocidad
68%
Combustible
2 min
Última pos.
Un componente de ejemplo · el sistema cubre cards, tablas, botones, CTAs, diagramas e iconografía propia