Design System Showcase
Hysan School Management System Theme
Primary Colors (Brand Red)
50
primary-50
100
primary-100
200
primary-200
300
primary-300
400
primary-400
500
primary-500
600
primary-600
700
primary-700
800
primary-800
900
primary-900
Neutral Colors
white
neutral-white
pale
neutral-pale
light
neutral-light
bg
neutral-bg
medium
neutral-medium
Grey Scale
pale
grey-pale
light
grey-light
medium
grey-medium
normal
grey-normal
strong
grey-strong
Accent Colors
Success
strong
success-strong
default
success
medium
success-medium
light
success-light
pale
success-pale
Danger
strong
danger-strong
default
danger
medium
danger-medium
light
danger-light
pale
danger-pale
Caution
dark
caution-dark
default
caution
medium
caution-medium
pale
caution-pale
Link
default
link
medium
link-medium
light
link-light
pale
link-pale
Purple
default
purple
medium
purple-medium
light
purple-light
pale
purple-pale
Example Components
Buttons
Badges
ActiveErrorWarningInfo
Dark Mode
Add the dark class to the <html> element to see dark mode colors.