Brand Colors
Our color palette defines the visual identity of LEAD UTEC.
White
#FFFFFF
--color-white
Background
#010B3D
--color-background
Primary
#DF3124
--color-primary
Secondary
#921EA2
--color-secondary
Accent
#C72A49
--color-accent
Signature Gradient
background: linear-gradient(to bottom, #df3124, #921ea2)Typography
Clear hierarchy and readable text styles.
Heading 1
3rem / 48px
Heading 2
2.25rem / 36px
Heading 3
1.875rem / 30px
Heading 4
1.5rem / 24px
Heading 5
1.25rem / 20px
Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1rem / 16px
Buttons
Interactive elements with multiple variants and sizes.
Variants
Sizes
States
Cards
Container components for grouping content.
Default Card
Standard card with subtle border.
Gradient Border
Card with gradient border effect.
Gradient Background
Card with full gradient background.
Form Elements
Input fields and form controls.
This field is required
Badges
Small status indicators and labels.
Decorative Elements
Brand elements and visual accents.
Example Implementation
See the design system in action.
New Team Member
Welcome to LEAD UTEC! Our design system showcases the organization's visual identity, combining a bold gradient palette with modern UI components.