Brand Colors
Teal 800 (Primary)
Seafoam 400 (Accent)
Cream 200 (Background)
Gold 500 (Zakat)
Teal 400
Seafoam 200
Buttons
Standard Buttons
Brand Variants
Animated Buttons (Hover/Tap)
Button Sizes
Inputs
Select
Cards
Standard Card
Basic card using brand colors
This card uses the default styling with our brand CSS variables.
Animated Card
Hover to see lift effect
Uses Framer Motion for subtle hover animation with elevated shadow.
Interactive Card
Click me!
Full interactive card with click feedback. Great for asset category selection.
Tooltips
Zakat Summary Example
Your Zakat Due
$87,432
Zakatable Assets$3,497,280
Less: Liabilities-$50,000
Zakat Rate2.5%
Shadow Utilities
shadow-sm
Default
shadow-elevated
Elevated style
shadow-elevated-lg
Large elevated
Glow Effects
glow-seafoam
For Zakat total highlight
glow-gold
For gold accent