Harmony Design System

A comprehensive guide to Harmony's design language, ensuring consistency across our financial wellness platform.

Primary Colors

Purple 500

#A855F7

Primary buttons, key actions

Purple 400

#C084FC

Hover states, secondary elements

Purple 300

#D8B4FE

Icons, decorative elements

Purple 200

#E9D5FF

Subtle backgrounds, disabled states

Gradients

Background Gradient

Main app background

Card Gradient

Modal and card backgrounds

Semantic Colors

Success

#10B981

Positive actions, confirmations

Warning

#F59E0B

Alerts, warnings

Error

#EF4444

Error states, destructive actions

Info

#3B82F6

Information, help text