Guía de estilo
Tokens, tipografía, formas y los componentes compartidos sobre los que se construye cada superficie de Logix.
Color
Tokens de la especificación §4.1, disponibles como bg-*, text-*, border-*, fill-* y stroke-*.
Superficies y texto
- canvas#F4F3EFFondo de la app
- card#FFFFFFTarjetas
- ink#1A1A17Texto
- ink-muted#6F6E69Texto secundario
- ink-subtle#9B9A94Solo decorativo
- line#ECEBE6Líneas finas
- input#8D8C85Bordes de campos, 3:1+
Marca
- forest#1B5E3BNavegación activa, principal
- forest-deep#174D31Tarjetas destacadas
- gold#F5C419Aplicar, resuelto
- gold-soft#FBEBB0Puntos de incidencias
- ask-gradient#F7CB45 → #7DB54BPregúntale a Logix
Estados y rutas
- danger#E5484DRetraso, crítico
- traffic#F04A23Congestión
- danger-tint#FDE8E3Insignias de incidencias
- danger-ink#BE3C26Texto sobre danger-tint
- route-blue#2554E8Ruta alternativa
- route-blue-soft#BFD0FAEsta semana
Temperatura
- temp-ok#1F8A5BEn rango
- temp-warn#E8A317Deriva
- temp-bad#E5484DDesviación
- frost#E3EEFBEtiqueta de congelado
- frost-ink#2B5FA8Texto de congelado
- dry#F1ECE2Etiqueta de seco
- dry-ink#77674DTexto de seco
Mapas
- map-ground#F1F1EETierra
- map-road#FFFFFFCarreteras, fronteras
- map-park#D9EBD6Parques
- map-water#CFE0F7Agua
- map-served#E4EFE6Estados atendidos
Móvil
- pine#27493BTarjetas oscuras
- lime#C9EE8ETarjetas de acento, +
- lime-tint#EAF7D6Etiqueta de fresco
- lime-ink#2F6B2FTexto sobre lime-tint
- tangerine#FF8B4DRequiere atención, pines
- lilac#E6A8ECAvatares, notas de crédito
- sky#C3D8F5Avatares, pasos
- jet#111111Píldoras negras, barra de pestañas
Pares de texto (WCAG AA, 4.5:1 o más)
- blanco sobre forest7.7:1
- blanco sobre forest-deep9.8:1
- danger-ink sobre danger-tint4.6:1
- lime-ink sobre lime-tint5.8:1
- frost-ink sobre frost5.4:1
- dry-ink sobre dry4.7:1
- ink sobre gold10.6:1
- lime sobre pine7.7:1
- ink-muted sobre card5.1:1
danger, traffic, temp-* e ink-subtle son para marcas, líneas y puntos. Acompáñelos de una etiqueta de texto para que el estado nunca dependa solo del color.
Tipografía
Inter para el texto de la interfaz, Inter Tight para títulos y cifras grandes. Todas las métricas usan cifras tabulares.
- Título de la consolaInter Tight · 40px
- Macon → Jacksonville
- IndicadorInter Tight · 52px
- $182K
- Cifra principal móvilInter Tight · 48px
- 4,827
- Titular móvilInter Tight · 34px
- Andre recoge de 3:10 a 3:30 p. m.
- Título de tarjetaInter Tight · 20px
- Tendencias de incidencias
- CuerpoInter · 15px
- La caja refrigerada RU-114 sube +2.5°F/h cerca de Tifton. Cambiarla en Waycross protege $86K de producto.
- MetadatosInter · 13px
- Actualizado hace 12 s · 1,069 cargas este año
Forma
Radios de la especificación §4.3.
- Botones de la consola12px
- Tarjetas24px
- Tarjetas móviles28px
- Marco de la consola32px
- Etiquetas, píldorasCompleto
Profundidad y utilidades
Tarjetas casi planas, etiquetas flotantes suaves y un brillo cálido para Pregúntale a Logix.
- shadow-cardTarjetas: línea fina y una sombra sutil
- shadow-floatEtiquetas flotantes, barra de pestañas
- shadow-glow-goldPregúntale a Logix
Marca
Un cuadro verde bosque con una “L” cuyo pie se convierte en una ruta; una marca redonda verde pino para móvil.
Etiquetas de estado
StatusBadge en todos los tonos, con y sin punto; etiquetas de clase de temperatura y de gravedad.
Las etiquetas largas se recortan con puntos suspensivos dentro de un contenedor estrecho.
Tarjetas de indicadores
- Cargas en tránsito
- 24
- 16 este · 8 oeste
- A tiempo (7 días)
- 94.2%
- 1.3 pts más que la semana pasada
- Cumplimiento de temperatura (7 días)
- 99.1%
- Tasa de prevención estimada
- 53%
- Era del 41% el trimestre pasado
Con align="foot", la etiqueta y la línea secundaria comparten la línea base en toda la fila, sin importar cómo se ajusten las etiquetas.
- Cargas en tránsito
- 24
- 16 este · 8 oeste
- Cumplimiento de temperatura dentro del rango seguro
- 99.1%
- 7 días
- A tiempo
- 94.2%
- 7 días
- Prevenidas
- 53%
- Este trimestre
Carga
DetailRow dentro de una SectionCard
Estado vacío
Tarjeta vacía
EmptyCard reemplaza una lista o el cuerpo de una página; headingLevel coloca su título en el esquema de la página.
Ningún lote coincide con “MCN-999999-Z”
Avatares con iniciales
Siete tonos, tres tamaños.
Hora local
Con el formato de la zona horaria de la instalación; idéntica en el servidor y en el cliente.
Controles
shadcn/ui con los tokens de Logix: el color principal es verde bosque, los anillos de foco también y el radio es de 12px.