This design system documents the visual language and component patterns used throughout the Vitality Medical website to ensure consistency and quality.
Our color system is designed to create a consistent visual language across the Vitality Medical website. The palette is organized into functional categories to ensure appropriate usage and accessibility.
Used for primary actions, links, and brand elements
50
primary-50
100
primary-100
200
primary-200
300
primary-300
400
primary-400
500
primary
600
primary-600
700
primary-700
800
primary-800
900
primary-900
Used for secondary actions and accents
50
secondary-50
100
secondary-100
200
secondary-200
300
secondary-300
400
secondary-400
500
secondary
600
secondary-600
700
secondary-700
800
secondary-800
900
secondary-900
Used for system feedback and status indicators
Success
success
Warning
warning
Error
destructive
Info
info
Used for text, backgrounds, and borders
Background
background
Foreground
foreground
Muted
muted
Muted Text
muted-foreground
Card
card
Card Text
card-foreground
Border
border