Identidad visual
La aplicación y esta documentación comparten ahora un lenguaje de producto: azul como acción principal, superficies slate, jerarquía tipográfica fuerte, bordes discretos y radios amplios.
Paleta principal
| Token | Valor | Uso |
|---|---|---|
| Acción principal | #2563EB | Botones, navegación activa y foco. |
| Acción fuerte | #1D4ED8 | Hover y énfasis. |
| Cian | #06B6D4 | Acentos y estados complementarios. |
| Slate 950 | #020617 | Títulos y fondo oscuro. |
| Slate 900 | #0F172A | Texto principal y superficies oscuras. |
| Slate 500 | #64748B | Texto secundario. |
| Slate 200 | #E2E8F0 | Bordes claros. |
| Slate 50 | #F8FAFC | Fondo de página claro. |
Colores de estado
Los estados usan naranja, ámbar, cian, azul, índigo, esmeralda, teal, rosa, violeta y slate. La asignación exacta está en Estados, pagos y entrega.
Superficies y forma
- Contenedores principales: radios de 20 a 24 px.
- Campos y botones: radios de 12 a 16 px.
- Badges: píldoras con color suave y contraste de texto.
- Bordes: slate de baja intensidad.
- Sombras: cortas en tablas y más amplias solo en modales o capturas.
Tipografía
La interfaz usa la pila sans-serif del sistema para cargar rápido y mantener buena legibilidad. Los títulos emplean peso 800–900 y tracking ligeramente cerrado; el cuerpo se mantiene entre 400 y 650.
Claro y oscuro
El modo claro usa superficies blancas sobre slate 50. El oscuro usa slate 950 y slate 900, con azul 400 para conservar contraste. Ningún significado depende únicamente del color: estados y acciones incluyen texto o icono.
Componentes compartidos
El rediseño se apoya en primitivas reutilizables para página, cabecera, superficie, toolbar, búsqueda, botón, badge, aviso, paginación, modal, confirmación y drawer. Esto evita que cada módulo invente su propia interfaz.