Design System Demo

Phase B1.2 — Components showcase with Light/Dark theme switcher

1. Brand Colors

Deep Violet #4B00B2
Vibrant Purple #9A29E2
Soft Lavender #DDACDD
Light Periwinkle #E6EEFA
Pure White #FFFFFF

2. Status Colors

Green / OK #3DD68C
Amber / Warning #F0A429
Red / Critical #F06060
Info Blue #4A90E2

3. Logo Variants

Default size
Small / Large / XL
Mark only (no text)
Stacked (mark on top)

4. Buttons

Primary / Secondary / Ghost / Danger
Sizes (Small / Default / Large)

5. Form Inputs

We'll never share your email.
Password must be at least 8 characters

6. Chips (Selectable Tags)

Selectable (click to toggle)
Technician Receptionist Manager Senior Tech + Add new
Dismissable
Morning shift × Senior Tech ×

7. Badges (Status Pills)

Active Pending Needs review W-2 1099 Premium

8. Avatars

Sizes
TR
TR
TR
TR
Color variants (for employee differentiation)
AN
BI
CH
DA
EV
FR
GI

9. Cards

Default card

Active

This is a basic card with a header and content area.

Elevated card

Card with shadow for emphasis.

Interactive card

Hover me — I'm clickable!

10. Progress Bar (Wizard Steps)

✓ Account
2 Business details
3 Configure
4 First staff

11. Alerts / Banners

✓
Saved successfully!
Your changes have been recorded.
⚠
3 time entries need review
These were auto-clocked-out after 12 hours. Please verify.
✕
Cannot save
Tip percentages must sum to 100% (currently 87%).
ℹ
Reminder
Owner verifies final calculations.

12. Modal