Átomos

Estos son los elementos básicos de la UI que forman el núcleo del sistema de diseño.

Paleta de Colores

Colores base del sistema disponibles para componentes.

Primary

Secondary

Light

Dark

HTML

Tipografía

Escala tipográfica optimizada para legibilidad.

Encabezado H1 (32px)

Encabezado H2 (24px)

Encabezado H3 (20px)

Encabezado H4 (16px)

Encabezado H5 (15px)

Texto normal de párrafo (Inter Regular 16px).

HTML

Botones

Acciones principales y secundarias con estados interactivos.

HTML

Dropdowns

HTML

Badges de Sistema

Etiquetas especializadas para roles de usuario y estados de registros.

Roles de Usuario

Administrador RRHH Proyectos Ventas

Estados de Registro

Activo Inactivo Pendiente

HTML

Botones de Acción

Pequeños botones circulares/cuadrados para operaciones rápidas en tablas.

HTML

Campos de texto

Email address

Example textarea

Input deshabilitado

HTML

Checkboxes y Radios

Checkboxes

Default checkbox

Checked checkbox

Radio buttons

Default radio

Default checked radio

Switches

Default switch

Checked switch

HTML

Barras de Progreso

HTML

Alertas

Esta es una alerta primaria - ¡Revísala!

¡Éxito! La operación se completó correctamente.

¡Advertencia! Por favor revisa tu información.

¡Error! Algo salió mal. Por favor intenta de nuevo.

HTML

Iconos Font Awesome

fa-house

fa-user

fa-envelope

fa-cart-shopping

fa-heart

fa-gear

fa-bell

fa-search

fa-trash

fa-check

fa-times

fa-download

HTML

Enlaces

Enlace estándar con hover

HTML

Spinners de Carga

HTML

Shimmer Loading (Esqueletos)

Efectos de carga animados para mejorar la percepción de velocidad (UX) mientras se obtienen datos.

HTML

Avatares y Fotos (Premium)

Estilos para fotos de perfil utilizados en el Dashboard y testimonios del POS.

Emmanuel Jarquin

Administrador Principal

HTML

Mapa Interactivo (Puntos Pulsantes)

Puntos de ubicación animados utilizados en el home de Mecsa OPS.

HTML