DSPC Design System · Fase 1

Component
Library.

Componentes críticos para construir App (B2C) y Cloud (B2B) sin improvisar. Cada componente está documentado con sus estados, variantes y reglas de uso.

11 componentes WCAG 2.2 AA
01 — Primitivo

Botones.

Un CTA rojo por pantalla. El resto en negro o ghost. Nunca dos botones primarios en el mismo nivel de jerarquía.

Variantes
Primary (negro) · Secondary (borde) · Signal/destructive (rojo) · Ghost
Tamaños
Estados
Sobre fondo oscuro
Reglas de uso
— SÍ

Un solo btn-signal (rojo) por pantalla, únicamente en acciones destructivas. btn-primary para el CTA principal.

— NO

Nunca dos botones primarios en el mismo formulario. Nunca usar rojo para CTAs positivos.

03 — Overlay

Toast / Snackbar.

Feedback no-bloqueante. Auto-dismiss en 4 s. Aparece en esquina inferior-derecha (App) o superior-derecha (Cloud). Un solo toast visible a la vez.

Variantes
✓ Pedido confirmado. Entrega hoy 14:00–17:00.
! Error de pago. Verifica tu método de pago.
→ Pedido actualizado. 3 cortes en camino.
→ Elemento eliminado.
POSICIÓN

Bottom-right: App
Top-right: Cloud

DURACIÓN

4 000ms auto-dismiss
Pausar en hover

Z-INDEX

--z-toast (400)

04 — Formularios

Form Fields.

Todos los campos usan border-radius: 4px, altura 44px mínima y estado de foco con el anillo --signal. Labels siempre fuera y arriba del campo.

Text input — estados
Aparece en la guía de entrega.
Formato inválido. Ejemplo: XAXX010101000
Select + Textarea + Checkbox + Radio
Método de facturación
Notificaciones
05 — Formularios

Validacion inline.

Validar en onBlur, no en tiempo real. El error aparece debajo del campo con icono y texto. Nunca solo color — siempre texto.

— Cantidad inválida. Mínimo 0.5 kg.
— Temperatura límite. Recomendado ≤4 °C para res.
✓ RFC válido.
Verificando...
06 — Feedback

Skeleton loaders.

Usar skeleton cuando el tiempo de carga es >300ms y la estructura del contenido es predecible. Spinner para acciones puntuales (submit). Nunca ambos juntos.

Card skeleton
List item skeleton
Table row skeleton
— SKELETON cuando

Carga de lista, página o datos de API. La estructura es conocida de antemano.

— SPINNER cuando

Acción puntual: submit de form, upload de archivo, operación en progreso sin estructura predecible.

07 — Feedback

Empty states.

Cada empty state tiene: número de sección, título en Lastica, descripción en Inter, y un CTA opcional. Nunca ilustración decorativa — la tipografía es el visual.

6 variantes canónicas
00
Sin pedidos.

Aún no has realizado ningún pedido. Tu historial aparecerá aquí.

00
Sin resultados.

No hay cortes que coincidan con "Wagyu A5". Prueba con otro término.

!
Error al cargar.

No pudimos obtener la información. Revisa tu conexión e intenta de nuevo.

—
Sin conexion.

Estás sin internet. Los datos que ves pueden estar desactualizados.

01
Bienvenido.

Tu cuenta está lista. Configura tu perfil y realiza tu primer pedido.

✕
Sin acceso.

No tienes permisos para ver esta sección. Contacta al administrador de tu cuenta.

08 — Feedback

Error pages.

Páginas de error completas. El código de error es el elemento visual principal — en Lastica, enorme. La acción siempre es clara: volver, reintentar o contactar.

404 · 500 · Mantenimiento
404
Pagina no encontrada.

La URL que buscas no existe o fue movida. Revisa que esté escrita correctamente.

Error 404 · distribuidoracholula.com
500
Error del servidor.

Algo falló en nuestros sistemas. Estamos trabajando en resolverlo. Tu pedido no fue afectado.

Error 500 · ID: e8a3f1
—
Mantenimiento.

Estamos actualizando el sistema. Regresa en aproximadamente 30 minutos.

Vuelta estimada: 11:30 hrs
DSPC Cloud · Mantenimiento programado
09 — Navegación

Tabs.

Para alternar vistas dentro de la misma pantalla. Máximo 6 tabs visibles. El tab activo lleva un borde inferior negro de 2px — sin background, sin pill.

Line tabs (estándar)

Contenido del tab Activos. Aquí van las órdenes en proceso.

— SÍ

Máximo 6 tabs. Siempre con borde inferior de 2px para el activo. Badge solo para contadores relevantes.

— NO

No usar tabs para navegación entre páginas (usa el nav). No usar pill/background en el activo. No anidar tabs.

11 — Datos

Table.

Para Cloud B2B. Header sticky, columnas ordenables, selección de filas, paginación. Numerales tabulares en todas las celdas de datos. Máximo 7-8 columnas visibles.

Tabla de pedidos (Cloud)
# Pedido ↓ Cliente ↕ Cortes ↕ Total ↕ Entrega ↕ Estado ↕
PED-08431
Hotel Camino Real
Puebla · HORECA
 14 cortes · 32.6 kg $ 8,240.00 Hoy · 14:00–17:00 ● En ruta
PED-08430
Restaurante Ambrosia
CDMX · HORECA
 6 cortes · 18.0 kg $ 3,960.00 Hoy · 11:00–13:00 ○ Preparando
PED-08428
Colegio Americano
Puebla · Comedor
 22 cortes · 68.4 kg $ 14,120.00 Mañana · 07:00–09:00 ○ Confirmado
PED-08425
Banquetes Morelia
Michoacán · Eventual
 8 cortes · 24.0 kg $ 5,280.00 08/05 · 10:00–12:00 ✕ Incidencia
4 de 248 pedidos · 1 seleccionado
12 — Sistema · Accesibilidad

Contrast matrix.

Todos los pares de color foreground/background del sistema con su ratio WCAG 2.2. Verde = pasa AA (≥4.5:1 texto normal, ≥3:1 texto grande). Rojo = falla.

Pares canónicos
Foreground Background Muestra Ratio AA Normal AA Grande AAA
--ink #0A0A0A --paper #FFF Texto 19.7 : 1 ✓ Pasa ✓ Pasa ✓ Pasa
--paper #FFF --ink #0A0A0A Texto 19.7 : 1 ✓ Pasa ✓ Pasa ✓ Pasa
--ink #0A0A0A --bone #FAFAF8 Texto 19.1 : 1 ✓ Pasa ✓ Pasa ✓ Pasa
--graphite #5A5A55 --paper #FFF Texto 7.0 : 1 ✓ Pasa ✓ Pasa ✓ Pasa
--steel #A8A8A2 --paper #FFF Texto 2.7 : 1 ✕ Falla ✕ Falla ✕ Falla
--signal #C41D1D --paper #FFF Error 5.1 : 1 ✓ Pasa ✓ Pasa ✕ Falla
--signal #C41D1D --ink #0A0A0A Error 3.9 : 1 ✕ Falla ✓ Pasa ✕ Falla
--success #1F8A5B --paper #FFF OK 4.5 : 1 ✓ Pasa ✓ Pasa ✕ Falla
rgba(255,255,255,0.78) --ink #0A0A0A Body on dark 13.8 : 1 ✓ Pasa ✓ Pasa ✓ Pasa
rgba(255,255,255,0.50) --ink #0A0A0A Secondary 7.0 : 1 ✓ Pasa ✓ Pasa ✓ Pasa
rgba(255,255,255,0.35) --ink #0A0A0A Tertiary 4.2 : 1 ✕ Falla ✓ Pasa ✕ Falla

ATENCIÓN: --steel sobre --paper (2.7:1) falla WCAG — úsalo solo para texto decorativo, íconos grandes ≥24px, o metadatos que no sean content esencial.
rgba(255,255,255,0.35) sobre --ink (4.2:1) falla para texto normal pero pasa para texto grande (≥18px / ≥14px bold) — solo para eyebrows y meta en secciones invertidas.

13 — Sistema · Iconografía

Icon set curado.

Subconjunto canónico de Phosphor Icons (Regular, 24px, stroke 1.5px). Estos son los únicos iconos aprobados. Para conceptos no cubiertos aquí, proponer antes de agregar.

Navegación & layout
list
squares-four
caret-right
caret-left
arrow-down
arrow-up
arrow-right
arrow-left
Acciones
plus
minus
x
check
warning
info
magnifying-glass
pencil
DSPC específicos
clipboard · pedido
seal · certificado
barbell · peso
lock · TIF
thermometer · cadena frío
table · Cloud data
globe · origen
receipt · factura

Fuente: Phosphor Icons — Regular weight, 24×24px, stroke-width 1.5px.
Color: --ink en superficies claras · --paper en superficies oscuras · --signal solo en estados de error/destructivos.
Prohibido: FontAwesome, Material Icons, Heroicons, Feather, emojis en UI.

14 — Overlays

Drawer / Sheet.

Panel lateral para filtros, carrito y detalles sin salir de la vista actual. Desde la derecha en desktop (360px), full-width en mobile. Backdrop + Escape para cerrar.

Desktop (360px desde la derecha)
Filtros.
Categoria
Certificacion
15 — Layout

Accordion.

Para FAQ, detalles de pedido, y secciones colapsables. Solo uno abierto a la vez (opcion). Chevron rota 180 grados al abrir.

FAQ de entrega
Los pedidos confirmados antes de las 12:00 hrs se entregan el mismo dia en un rango de 3 horas. Los pedidos posteriores se programan para el dia siguiente.
Si el pedido aun no esta en ruta, puedes modificar la direccion desde "Ver pedido" → "Editar entrega". Una vez en ruta, contacta a soporte.
Agrega tus datos fiscales (RFC) en tu perfil. La factura se genera automaticamente con cada pedido y esta disponible en la seccion "Facturacion" dentro de 24 horas.
16 — Datos

Badge / Tag.

Para categorias de producto, estados, contadores y metadata. Siempre en mono, siempre compactos. No usar como botones.

Variantes
Res nacional HORECA USDA Prime Activo Incidencia Inactivo 3 TIF Halal
17 — Datos

Avatar.

Para listas de clientes en Cloud. Circulo con iniciales en Inter 600. 3 tamanos: 32px (tabla), 40px (lista), 48px (perfil). Sin imagenes — solo iniciales.

Tamanos
HC
RA
BM
CA
JL
DS
Avatar group (overlap)
HC
RA
BM
+4