UI Components
A reference guide for the Vitara template design system. Use these pre-styled elements to maintain consistency.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Body Text (Large) - The quick brown fox jumps over the lazy dog. Healthcare, delivered digitally. Premium medical template.
Body Text (Base) - The quick brown fox jumps over the lazy dog. Healthcare, delivered digitally. Premium medical template.
Body Text (Small) - The quick brown fox jumps over the lazy dog. Healthcare, delivered digitally. Premium medical template.
#MRN-892014
Color Palette
Brand Colors
Primary
var(--brand-primary)
Secondary
var(--brand-secondary)
Accent
var(--brand-accent)
Light
var(--brand-light)
Sage (Wellness)
var(--brand-sage)
Lavender (Wellness)
var(--brand-lavender)
Status Colors
Success
Warning
Error
Info
Backgrounds
Canvas
Surface
Elevated
Muted
Buttons
Standard Rounded-xl
Pill Rounded-full
Sizes
Form Controls
Badges & Alerts
Status Badges
Alert Boxes
Operation Successful
Your changes have been saved to the database successfully.
Attention Required
Your subscription is about to expire in 3 days.
Payment Failed
We could not process your credit card. Please try again.
Cards
Interactive Card
Hover me to see the border, shadow, and icon color transition.
Solid Card
Used for call to actions or highly emphasized content blocks.