Stint · Sistema de UI

01 · Marca

Logo e isotipo

El isotipo es un punto de control (locator): anillo + crosshair + núcleo coral. Es el activo principal en la UI — favicon, splash, encabezado de la app.

Isotipo · positivo

Isotipo · reverse

stint

Reglas: mantener el área de resguardo igual al diámetro del núcleo; no rotar, no rellenar el anillo, no cambiar el coral del núcleo. El núcleo coral es el único elemento que nunca cambia de color. No confundir con el app-icon (tile redondeado) — ese es solo para el ícono de aplicación.

02 · Color

Paleta y tokens de color

INK como base de chrome y texto; coral como acento de marca y acción primaria; teal como acento secundario. La rampa fría de neutros sostiene superficies y bordes.

Core

Ink

#0E2A3B

--stint-ink

Chrome, texto, fondos oscuros

Coral

#FF6B5B

--stint-coral

Acción primaria · acento de marca

Teal

#1C7293

--stint-teal

Acento secundario · enlaces

Teal eléctrico

#15B3C7

--amplab-teal-electric

Acento de Amplab (uso puntual)

Neutros (rampa fría)

White

#FFFFFF

--stint-white

Tarjetas / superficies

Base

#F4F6F7

--stint-base

Fondo de página / canvas

Border

#D9DEE2

--stint-border

Hairlines · inputs

Mist

#9FB4BD

--stint-mist

Texto terciario · íconos

Muted

#5B6B73

--stint-muted

Texto secundario

Slate

#33505E

--stint-slate

Divisores sobre oscuro

Estados (TMS)

Success

#1E9E6A

--stint-success

A tiempo · entregado

Info

#1C7293

--stint-info

En tránsito · informativo

Warning

#E0A030

--stint-warning

Retraso · atención

Danger

#E5484D

--stint-danger

Alerta · quiebre de frío

Regla clave: el coral está reservado para marca y acción primaria, no para error. Los estados críticos usan el rojo --stint-danger (#E5484D), distinto del coral, para evitar confusión.

03 · Tipografía

Sistema tipográfico

Tres voces: Archivo para titulares (carácter), Hanken Grotesk para cuerpo y UI (legibilidad), JetBrains Mono para etiquetas, datos e IDs (precisión técnica).

Display · Archivo

Cada embarque, bajo control

Titulares, KPIs grandes, encabezados de pantalla. Pesos 700–800.

Texto / UI · Hanken Grotesk

Visibilidad total de su carga, de planta a destino.

Cuerpo, botones, inputs, descripciones. Pesos 400–600.

Mono · JetBrains Mono

EMB-2026-0142 · 03:42 · −0.5°C

Etiquetas (mayúsculas tracked), IDs de embarque, fechas, temperaturas, métricas.

Display / 44Aa Stint

H1 / 32Encabezado de pantalla

H2 / 24Sección

Body / 15Texto base de interfaz para descripciones y contenido.

Label / 11 monoESTADO DEL EMBARQUE

04 · Espaciado, radio y elevación

Escala y profundidad

Escala base de 4 px. Radios redondeados (UI amable, no infantil). Sombras suaves y frías sobre el INK.

Espaciado (4pt)

4 · s1

8 · s2

16 · s4

24 · s5

32 · s6

48 · s7

Radio

6 · sm

10 · md

16 · lg

pill

Elevación

05 · Botones

Acciones

Primaria coral para la acción principal de cada vista (una sola por pantalla). Secundaria INK, fantasma para acciones terciarias, teal para acciones de navegación/filtro.

06 · Formularios

Inputs

Etiquetas en mono (mayúsculas tracked), foco teal con halo. Bordes en --stint-border.

ID de embarque

Formato EMB-AAAA-NNNN

Modalidad

Destino

07 · Estados

Pills y alertas

Estados del embarque en mono. Las alertas de quiebre de frío usan danger, nunca coral.

Entregado A tiempo En tránsito Retraso Alerta · frío Pendiente

Quiebre de cadena de frío — EMB-2026-0142 registró −0.5 °C fuera de rango en el tramo aéreo. Revisar respaldo.

▲

Retraso estimado — conexión en Atlanta reprogramada; nueva ETA 14:20.

✓

Entregado — confirmación de recepción cargada por el cliente.

Documentación — faltan 2 documentos para cerrar el cumplimiento del contrato.

08 · Datos

KPIs y tablas

El corazón de un TMS. Cifras grandes en Archivo, datos tabulares e IDs en mono.

Embarques activos

142

▲ 12 esta semana

A tiempo

94%

▲ 3 pts

Incidencias

▲ 1 hoy

Horas ahorradas

▲ 40%

Embarque	Destino	Modalidad	ETA	Temp.	Estado
EMB-2026-0142	Miami, US	Fresco · aéreo	06 JUL 14:20	2.1°C	Retraso
EMB-2026-0141	Tel Aviv, IL	Fresco · aéreo	06 JUL 09:05	−0.5°C	Alerta · frío
EMB-2026-0139	Shanghái, CN	Congelado · mar	19 JUL 00:00	−18.2°C	En tránsito
EMB-2026-0136	Los Ángeles, US	Fresco · aéreo	05 JUL 11:40	1.8°C	Entregado

09 · Tracker

Línea de tiempo del embarque

El motivo locator hecho componente: cada hito es un punto de control. El punto activo lleva el núcleo coral.

Planta

02 JUL 08:10

Frigorífico

02 JUL 15:30

Aeropuerto

03 JUL 06:00

En tránsito

en vuelo

Aduana

—

Destino

ETA 06 JUL

10 · Navegación

Tabs

Vista general del embarque: ruta, hitos y estado de cumplimiento.

Historial de registro de temperatura por punto de control (respaldo auditable).

Documentos atados a las condiciones del contrato de venta.

11 · Para desarrollo

Tokens

Mismos valores como variables CSS (drop-in) y como tema de Tailwind. El archivo stint-tokens.css acompaña a esta guía.

CSS · variables

/* stint-tokens.css */
:root {
  --stint-ink:    #0E2A3B;
  --stint-coral:  #FF6B5B;
  --stint-teal:   #1C7293;
  --stint-base:   #F4F6F7;
  --stint-border: #D9DEE2;
  --stint-muted:  #5B6B73;
  --stint-danger: #E5484D;
  --stint-font-display: "Archivo";
  --stint-font-text:    "Hanken Grotesk";
  --stint-font-mono:    "JetBrains Mono";
}

Tailwind · theme.extend

// tailwind.config.js
colors: {
  ink:    '#0E2A3B',
  coral:  '#FF6B5B',
  teal:   '#1C7293',
  base:   '#F4F6F7',
  border: '#D9DEE2',
  muted:  '#5B6B73',
  danger: '#E5484D',
},
fontFamily: {
  display: ['Archivo'],
  sans:    ['Hanken Grotesk'],
  mono:    ['JetBrains Mono'],
}

Fuentes: cargar Archivo, Hanken Grotesk y JetBrains Mono (Google Fonts / self-host). Íconos: estilo de línea, grosor ~2px, esquinas redondeadas, para acompañar al isotipo. Voz: directa y serena — "Cada embarque, bajo control"; nunca sobreprometer (la temperatura se comunica como registro y respaldo, no como monitoreo en tiempo real).

Stint UI

Logo e isotipo

Paleta y tokens de color

Sistema tipográfico

Escala y profundidad

Acciones

Inputs

Pills y alertas

KPIs y tablas

Línea de tiempo del embarque

Tabs

Tokens