Shiko Design System
Documentación y guía de estilos para el desarrollo.
Fundamentos y Componentes
Colores
Paleta de colores oficial, semanticos y estados veterinarios.
Tipografia y Logo
Fuentes, tamanos de texto, encabezados y uso del logo.
Botones
Variantes de botones, tamanos y estados de interaccion.
Iconos
Libreria de iconos del sistema y emojis.
Formularios
Inputs, selects, checkboxes, radios y textareas.
Feedback
Alertas, notificaciones (toasts) y modales.
Cards
Contenedores y tarjetas genericas.
Badges
Etiquetas, badges y elementos compactos.
Tarjetas de Paciente
Componentes especificos de negocio para pacientes.
Data Display
Skeletons, estados vacios y tarjetas de estadisticas.
Navegacion
Enlaces, wizard progress y drawer movil.
Media
Zoom de imagenes y lightbox a pantalla completa.
Secciones de Landing
Header y Footer
Navegacion principal sticky y pie de pagina del sitio.
Hero y Secciones
Hero principal, perfiles, como funciona, CTA y tipos de mascota.
Buscador
Barra de busqueda con ubicacion, categorias y filtros de precio.
WalkingPetCTA
Botón flotante con mascota animada. Gradiente naranja + GSAP walking.
Componentes de Negocio
Clinicas
Tarjetas de directorio y estados de disponibilidad.
Mapas
MapLibre GL con marcadores, busqueda y modo seleccion.
Agenda
Selector de dias y horarios para agendar citas.
Autenticacion
Flujo de login, registro, OAuth y gestion de sesion.
Dashboard
Layout del dashboard, navegacion por roles y secciones principales.