JefeSystemIniciar sesión
Design System · Caribe Operativo

Sistema visual para operar la operación diaria del hotel.

Tokens, componentes y patrones para las mini apps de la suite: animación, mantenimiento, ama de llaves, objetos perdidos, incidencias, transportación, botones de pánico, spa y control de acceso. Tema claro, turquesa Caribe + azul marino + arena.

v1Solo lecturaTurquesa primarioNavy secundarioArena highlight

01 · Tokens

Paleta de color

Escalas 50–900 (primario, secundario y sand) + 50–900 semánticos. Cada variable existe como CSS var (en :root) y como utility de Tailwind v4 (en @theme).

primary

Caribe · identidad de marca
50
primary-50
100
primary-100
200
primary-200
300
primary-300
400
primary-400
500
primary-500
600
primary-600
700
primary-700
800
primary-800
900
primary-900

secondary

Azul marino · tipografía, autoridad
50
secondary-50
100
secondary-100
200
secondary-200
300
secondary-300
400
secondary-400
500
secondary-500
600
secondary-600
700
secondary-700
800
secondary-800
900
secondary-900
950
secondary-950

sand

Arena · premios y highlights cálidos
50
sand-50
100
sand-100
200
sand-200
300
sand-300
400
sand-400
500
sand-500
600
sand-600
700
sand-700
800
sand-800
900
sand-900

success

Éxito · confirmación y completado
50
success-50
100
success-100
200
success-200
300
success-300
400
success-400
500
success-500
600
success-600
700
success-700
800
success-800
900
success-900

warning

Aviso · atención preventiva
50
warning-50
100
warning-100
200
warning-200
300
warning-300
400
warning-400
500
warning-500
600
warning-600
700
warning-700
800
warning-800
900
warning-900

danger

Bloqueo · detener la operación
50
danger-50
100
danger-100
200
danger-200
300
danger-300
400
danger-400
500
danger-500
600
danger-600
700
danger-700
800
danger-800
900
danger-900

info

Información · datos del sistema
50
info-50
100
info-100
200
info-200
300
info-300
400
info-400
500
info-500
600
info-600
700
info-700
800
info-800
900
info-900
backgroundvar(--background)
surfacevar(--surface)
surface-2var(--surface-2)
surface-3var(--surface-3)
foregroundTinta sobre superficies claras

02 · Tipografía

Geist · escala 1.25

Tracking ligeramente negativo en titulares (text-wrap: balance). Mayúsculas con tracking abierto para eyebrows de sección.

  • Display — 36 / 700Operaciones Riviera Maya
  • Heading 1 — 28 / 700Operaciones Riviera Maya
  • Heading 2 — 22 / 600Operaciones Riviera Maya
  • Heading 3 — 18 / 600Operaciones Riviera Maya
  • Heading 4 — 16 / 600Operaciones Riviera Maya
  • Body — 14 / 400Operaciones Riviera Maya
  • Small — 12 / 400Operaciones Riviera Maya
  • Caption — 11 / 500 uppercase 1.5Operaciones Riviera Maya

03 · Botones

Acción del operador

Cinco alturas estándar, hit-area 40 px mínimo. Soporte para iconos a la izquierda y derecha. Estados: default, hover, focus, active, disabled.

Variantes (con ícono + label)

Outlines (border, fondo transparente)

Tamaños (xs → xl)

04 · Formularios

Inputs del operador

Inputs con fondo inset (surface-2), borde sutil y ring primario de 2 px en focus. Soportan helper text y mensaje de error.

Llega como aparece en la cartelera del hotel.

Formato 24 h. (Hora local del hotel)

Aplica a cualquier módulo: spa, botones, transporte.

Edición rápida. Se agrega a la captación del día.

Auto-completado desde geocerca del hotel.

Esta incidencia detiene la actividad hasta que mantenimiento la cierre.

Mínimo 30 caracteres. Visible en la cartelera del huesped.

JPG / PNG · máximo 5 MB por archivo.

Turno de la actividad

Tarjetas segmentadas nativas — foco por teclado y flechas del navegador.

Estado (con error)

Este campo es requerido

05 · Cards

Superficies del sistema

Radius-lg de 16 px, borde hairline y sombra apilada de 3 capas. Sirven como contenedor de cualquier módulo de la suite.

Actividades

31 / 38 hoy

Realizadas

25

Pendientes

6

Incidencia abierta

Filtro de piscina obstruido

Alta
Reportada hace 38 min · Mantenimiento

Podio del mes

Horacio

#1

Pax

1,600

%

100

Activ.

8/8

06 · Badges

Estados y categorías

Pastilla compacta para estados, podio y semántica. Bordes hairline 1 px del mismo color, foreground a juego del fondo.

PrimarySecondaryHuespedRealizadoPendienteBloqueoNeutro
#1 Oro#2 Plata#3 Bronce

07 · Alerts

Mensajes del sistema

Borde izquierdo de 4 px sobre tinte semántico 50. Cierre opcional (X) con botón que hereda el color del estado.

08 · Modal & Spinner

Confirmaciones y carga

Modal con overlay tinted (rgba navy 0.5) y blur. Spinner SVG nativo del sistema, sector turquesa primario.

size

xs

size

sm

size

md

size

lg

size

xl

09 · Patrones operativos

Los flujos del hotel — en vivo

Composiciones reales para los módulos de la suite. Pendiente vs completado, prioridades, objetos perdidos, acceso autorizado/denegado, todo en el mismo idioma visual.

Mantenimiento · Pendiente vs Completado

Cambio de filtro — piscina

Piscina principal

Pendiente
Hace 38 min · Carlos M.

Limpieza profunda — spa

Spa — cuarto de vapor

Completado
Cerrada hace 12 min · Lucía R.

Foco quemado — pasillo 3B

Habitaciones piso 3

Completado
Cerrada hace 1 h · Equipo nocturno

Mobiliario de playa — reposición

Playa norte

Pendiente
En curso · pendiente reabastecer

Incidencias · prioridad marcada por el sistema

Derrame en cocina principal

Cocina · restaurante buffet

Reportada por Sandra · hace 6 min

Prioridad Alta

Aire acondicionado no enfría

Hab. 1208

Reportada por huesped · hace 22 min

Prioridad Media

Toalla rota en habitación

Hab. 745

Detectada por ama de llaves · hace 1 h

Prioridad Baja

Objetos perdidos · pendiente de entrega

  • Aretes de plata

    Restaurante Marella · Reportado 14 ago · caja fuerte 04

    Pendiente

  • Bolso beige

    Spa · Entregado a titular 13 ago · sábanas blancas

    Entregado

  • Llave con lanyard turquesa

    Recepción · Reportado 12 ago · caja fuerte 02

    Pendiente

  • Gafas de sol Ray-Ban

    Piscina · Reportado 11 ago · sin descripción

    Sin ubicar

Control de acceso · autorizado vs denegado

Puerta norte · 18:04

Acceso autorizado

OK
  • Ricardo P. (Hab. 2093)
  • Entrada con tarjeta vigente
  • Check-in registrado 14 ago

Spa (puerta 2) · 18:11

Acceso denegado

Bloqueado
  • Tarjeta 4128 — extraviada
  • Acceso a spa requiere habitación registrada
  • Notificación enviada a seguridad

Spa

Reserva, cancelación y aviso al huesped.

Botón de pánico

Escala directa al jefe de turno y a seguridad.

Transportación

Traslados al aeropuerto y tours locales.

10 · Progress

Cumplimiento y avance

Barra con track surface-3 y relleno turquesa por defecto. Aliases semánticos (success / warning / danger) sin variantes dark:.

Captación diaria78%
Cumplimiento de actividades100%
Incidencias abiertas42%
Capacidad del spa95%