Ruy May — Astro Design System
Showroom Interactivo
01
Tokens Foundation
CSS custom properties — la fuente de verdad de todo el sistema visual
Colores de Marca
Paleta oficial Ruy May, derivada del Manual de Identidad Visual
--brand-primary
#3B8E91 — Teal Ruy May
--brand-secondary
#C9E8DA — Verde Menta
--brand-dark
#0D1F20 — Teal Oscuro
--brand-white
#FFFFFF — Blanco
--brand-text
#2D2D2D — Texto principal
--brand-primary:   #3B8E91;
--brand-secondary: #C9E8DA;
--brand-dark:      #0D1F20;
Status de Cirugía (Estados)
Tokens cromáticos para el ciclo de vida de una cirugía
--status-pending
#9E9E9E — Pendiente
--status-confirmed
#3B8E91 — Confirmada
--status-completed
#2E7D32 — Completada
--status-cancelled
#C62828 — Cancelada
02
Tipografía
Poppins (títulos) · Inter (cuerpo)
h1 · 36px

Ruy May

h2 · 30px

Implantes de Traumatología

p · 16px

Texto estándar de la interfaz para entradas de formulario y tablas

03
Botones
Variantes × Tamaños × Estados
04
Formularios
Inputs, selects, checkboxes y toggles
$
05
Badges y Etiquetas
Estados de cirugía y etiquetas informativas
CONFIRMADA COMPLETADA CANCELADA Pagado Pendiente Urgente AH
07
Cards
Contenedores de información y KPIs
24
Cirugías del mes
+5%
24 Mar 2026
Laparoscopía Colecistectomía
CONFIRMADA
Hospital Ángeles
Dr. Alejandro Hatchett
08
Tablas
Visualización de datos estructurados
Cirugía Estado Acciones
S-742Elena RodríguezLaparoscopíaConfirmada
S-743Mario BrosFontaneríaCompletada
09
Overlays y Feedback
Modales, Diálogos y Alertas