Design System
Este es el sistema de diseño para la aplicación. Se utiliza para garantizar la consistencia en toda la aplicación.
Colors
Display color palette here (using variables from SCSS).
Base
Primary
Secondary / Backgrounds
Gradient Backgrounds
Special
Typography
Show different font styles, sizes, and weights (using variables from SCSS).
Default / Basier Square ($font-BasierSquare)
The quick brown fox jumps over the lazy dog. 1234567890
Bold: The quick brown fox jumps over the lazy dog.
Italic: The quick brown fox jumps over the lazy dog.
Gotham ($font-Gotham)
The quick brown fox jumps over the lazy dog. 1234567890
Bold: The quick brown fox jumps over the lazy dog.
Heavitas ($font-Heavitas)
The quick brown fox jumps over the lazy dog. 1234567890
Font Sizes
Base size ($font-size-base: 1rem / 16px)
Large size ($font-size-lg: 1.25rem / 20px)
Small size ($font-size-sm: 0.875rem / 14px)
Icons
List available icons. (Using automatic component import)
Buttons
Showcase different button types and states. (Component: ButtonsMainButton)
Forms / Inputs
Display various form elements. (Component: FormsInputsDefaultInput)
Cards
Show different card styles. (Example using CardsTrainingCard)
Placeholder: Add generic card examples here.
Badges
Display badge variations. (Component: BadgesSquareBadge, BadgesCommonBadge)
Square Badge Label
Tags
Display tag variations. (Component: TagsSquareWithIcon)
Titles
Showcase different title components. (Component: TitlesPageHeaderTitle)
Page Header Title Example
Common Components
Reusable common elements like Layouts, Dividers, Separators.
Inner Section Title
Inner section description.
Content inside SectionLayout
1,250 puntos
0 puntos
(Current Page: 1)
UI Utilities
Generic UI components like Dialogs, Menus, Alerts.
Loaders / Spinners
Loading indicators.
If a dedicated Loader component exists, use it here.
