Style Guide
Dark mode is the default theme. Tokens live in globals.css.
Surface depth
Background
Card
Elevated
Colours
Background
--background
Card
--card
Elevated
--elevated
Primary
--primary
Muted foreground
--muted-foreground
Success
--success
Warning
--warning
Destructive
--destructive
Chart 1
--chart-1
Chart 2
--chart-2
Chart 3
--chart-3
Chart 4
--chart-4
Chart 5
--chart-5
Fund types
Zakat
Sadaqah
Lillah
Zakat al-Fitr
Fidya
Kaffarah
Waqf
General
Uncategorised
Typography
Heading 1 — Fund Dashboard
Heading 2 — Section title
Heading 3 — Card title
Body text — Roboto for readable treasurer workflows.
Label — uppercase tracking
£1,234.56
Spacing & Radius
xs — 0.25rem
sm — 0.5rem
md — 1rem
lg — 1.5rem
xl — 2rem
2xl — 2.5rem
3xl — 3rem
sm
md
lg
xl
Components
DefaultSecondaryOutlineDestructive
Charts
Donut chart
Fund composition sample
£130.00Total
- Zakat£100.00(77%)
- Sadaqah£20.00(15%)
- Zakat al-Fitr£10.00(8%)
Line chart
Cumulative trend sample
Cause progress bars
Fundraising % toward target
Roof Repair
Ramadan Iftar
Hardship Fund
0%10%20%30%40%50%60%70%80%90%100%
Pie chart
Cause breakdown sample
- Roof Repair£3,500.00(64%)
- Ramadan Iftar£1,200.00(22%)
- Hardship Fund£800.00(15%)