Volaria · Sistema de diseño
Tokens, componentes y patrones
Esta página documenta el sistema visual de Volaria. Todo lo que aparece en los mockups vive aquí: superficies, tipografía, componentes y reglas de copy en español de Costa Rica.
01
Color
Sistema OKLCH tintado hacia la marca. Coral es la energía primaria; los estados solo se usan para comunicar significado.
Superficies
paper
Fondo principal
raised
Cards sobre paper
sunken
Inputs, áreas hundidas
ink-deep
Surface oscura
Coral · marca
Estados
Éxito
success
Atención
attention
Peligro
danger
Información
info
Gradientes
02
Tipografía
Bricolage Grotesque para display, Geist para body. Escala fija, no fluida.
Display 60
Volaria
Display 40
Encabezado
Display 24
Título de sección
Display 18
Título de card
Body 14
Texto general. Geist a 14 px es el tamaño de párrafo estándar.
Body 12
Texto secundario. Usado en metadatos y descripciones.
Eyebrow
Etiqueta superior
Tabular
₡158.500 · 12 / 32
03
Botones
Primario: acción principal por pantalla (máximo uno). Secundario: acciones de soporte. Danger y success solo cuando comunica intención.
Primary
Secondary
Success
Danger
Ghost
Glass
Icon
04
Pills
Etiquetas de estado, filtros y badges. Variant soft por defecto. Gradient solo para acciones claras.
Soft
Outline
Gradient
Glass
05
Cards
Cuatro superficies según el peso visual. Sunrise y dark solo para momentos hero (1 por pantalla).
White
Default
Paper gradient
Apoyo cálido
Raised
Cremosa
Sunken
Inputs, time blocks
Dark
Hero admin live
Sunrise
Hero estudiante
06
Avatares
Iniciales, no fotos genéricas. Cuatro tonos.
Tamaños
Tonos
Con anillo
Stack
07
IconBox
Contenedor coloreado para íconos de contexto.
Tones
08
Stats
Para KPIs y bloques de datos clave.
Hora
6:00p. m.
Sala
A
Cupos
5/10
Hora
6:00p. m.
Sala
A
Cupos
5/10
09
Estados
Empty, loading y error. Diseñados con el mismo cuidado que el happy path.
Empty
Loading
Error
10
Toasts
Feedback breve de sistema. Siempre con acción de deshacer cuando aplique.
Pago aprobado
₡45.000 acreditados a Laura Pérez.
Reserva confirmada
Telas Intermedio · jueves 6:00 p. m.
Estás cancelando tarde
Esta acción consume el crédito de la clase.
No pudimos conectar
Vuelve a intentarlo en unos segundos.
11
Banners de sistema
Avisos persistentes en el tope o pie de la pantalla. Tonos según urgencia.
Estás sin conexión
Las acciones se sincronizarán cuando vuelvas en línea.
Tu plan vence en 3 días
Renuévalo para no perder tus reservas.
Hay 4 pagos sin aprobar
Algunos llegaron hace más de 2 horas.
Marcela tomó una decisión por ti
Aprobó manualmente tu reserva fuera de horario.
12
Onboarding
Primer uso del estudiante. Tres pasos: intereses, waiver, clase de prueba.
Paso 1 de 3
¿Qué tipo de clases buscas?
Esto nos sirve para mostrarte solo lo que va contigo. Puedes cambiarlo después.
Paso 2 de 3
Firma el consentimiento
Es un trámite rápido y necesario antes de tu primera clase.
13
Diálogos de confirmación
Solo para acciones con consecuencias. Siempre muestran el costo de la acción.
¿Cancelar tu reserva?
Faltan menos de 4 horas para que comience la clase.
Esta cancelación consume el crédito de la clase.
¿Rechazar el pago?
Le avisaremos a Laura Pérez por correo.
Esta acción no se puede deshacer.
14
Pantallas de éxito
Momento de celebración tras una acción importante. Auto-desaparecen tras 2 s o tap.
Reserva confirmada
Telas Intermedio · jueves 6:00 p. m.
Pago aprobado
₡45.000
Acreditados a Laura Pérez
15
Accesibilidad
Reglas WCAG AA aplicadas. AAA donde el costo es bajo.
Contraste de texto
Texto principal ≥ 7:1 sobre fondos claros · ≥ 4.5:1 sobre gradientes (con text-shadow de refuerzo)
Texto blanco sobre amber sin sombra · gris claro sobre gradiente
Touch targets
≥ 44 × 44 px en cualquier elemento interactivo en mobile
Chips < 32 px · botones < 40 px de alto
Focus visible
Outline coral 2 px con offset 2 px en todos los elementos interactivos
outline: none sin reemplazo
Roles semánticos
<nav>, <main>, <header>, <section>, role='status', aria-live en updates
Solo <div> con onClick
Aria labels en iconos
Cada IconButton tiene aria-label descriptivo en es-CR
Iconos sin label, dependen solo de imagen
Movimiento
Todas las animaciones respetan prefers-reduced-motion: reduce
Animaciones forzadas, autoplay sin opt-out
Idioma raíz
<html lang="es-CR"> en root
lang faltante o genérico 'es'
Escala de texto
Diseño funciona hasta 200 % de zoom sin pérdida de contenido
Tamaños en px sin testear escala
16
Copy en español
Tratamiento de tú en toda la app (nunca vos). Profesional, conciso, español neutro con localismos CR solo en formato de moneda, hora y nombre del país.
Marcar entrada
Check-in
Por qué: Castellanizado, profesional
Reservar
Book / Reservation
Por qué: Verbo claro
Sustituye a Celeste
Suplente · cubre a Celeste
Por qué: Verbo activo, más claro
Comienza pronto
En vivo pronto
Por qué: Sin contradicción semántica
Últimos cupos
Pocos cupos
Por qué: Más urgencia, menos vago
Cancela sin costo antes de las 2:00 p. m.
Cancela gratis hasta las 2:00 pm
Por qué: Tuteo + formato CR de hora
Te quedan 4 clases
4 clases restantes
Por qué: Cercano y directo
₡158.500
₡158,500 / 158500 CRC
Por qué: Punto como separador de miles, símbolo antes
6:00 p. m.
6:00 PM / 18:00
Por qué: Formato CR con espacios
Lleva contigo
Necesitás llevar / Llevá con vos
Por qué: Tuteo, sin voseo
Buenos días, Marcela
Hola, Marcela
Por qué: Sensible al momento del día en admin
+18 % vs ayer
+18% vs ayer
Por qué: Espacio antes de %
Tú · te · tu · contigo
Vos · tenés · podés · con vos
Por qué: Tratamiento de tuteo en toda la app