/
para buscarIntro
Colección de clases listas para usar que aplican estilos comunes (espaciado, color, tipografía, alineación, display, etc.). Siguen la escala del sistema de diseño, así que mantienen consistencia visual y facilitan ajustes rápidos en el layout o los componentes.
Border radius
| HTML | SCSS |  |
Valor final |
| .brs-xs | $brs-xs | xs | 3.2px |
| .brs-sm | $brs-sm | sm | 4px |
| .brs-md | $brs-md | md | 8px |
| .brs-lg | $brs-lg | lg | 11.2px |
| .brs-xl | $brs-xl | xl | 16px |
| .brs-xxl | $brs-xxl | xxl | 20px |
Color
Clases CSS utilitarias para colores de texto y fondo.
| Color | css | Token |
| .bg-primary-500 | 50 - 800 | |
| .bg-gray-500 | 50 - 800(Negro) | |
| .bg-white | Blanco |
Visibility
Formas de ocultar elementos de forma directa en el breakpoints.
| HTML | Valor final |
| .hidden:mobile | Oculta elementos en mobile |
| .hidden:tablet | Oculta elementos en tablet y desktop |
| .hidden:desktop | Oculta elementos en desktop |
A diferencia de Bootstrap, aquí no es necesario declarar todos los breakpoints. Solo el que quieres ocultar, de esta forma evitamos tener que asignar un display a los elementos en los otros breakpoints.
Espaciados
Tenemos una sección completa dedicada a los espaciados en la guía de estilos. También puedes consultar las métricas (unidades y tokens) en las que se basan los espaciados.
Interacción
| Clase CSS | Función |
| .pointer-events-none | Quita la interacción del puntero, desactiva al clic/tap en el elemento y no propaga eventos. |
| .user-select-none | Deshabilita la selección de texto en el elemento. |
| .disable-interaction | Deshabilita la interacción total del elemento. Quitamos touch actions, pointer events y user selection. |
| .disabled | Estilo estándar para desactivar elementos. Aplica pointer events none y opacidad. |
| .cursor-pointer | Establece el cursor como un puntero () al pasar sobre el elemento. |
Opacidad
| HTML | Valor final |
| .opacity:0 | 0 |
| .opacity:1 | 1 |
| .opacity:5 | 5 |
| .opacity:10 | 10 |
| .opacity:20 | 20 |
| .opacity:30 | 30 |
| .opacity:40 | 40 |
| .opacity:50 | 50 |
| .opacity:60 | 60 |
| .opacity:70 | 70 |
| .opacity:80 | 80 |
| .opacity:90 | 90 |
| .opacity:100 | 100 |
Sombras
| Sombra | CSS | SCSS |
| .shadow-sm | $shadow-sm | |
| .shadow-md | $shadow-md | |
| .shadow-lg | $shadow-lg |
Note Las variables scss se pueden concatenar en css hacer combinaciones de elevación.