Design System

A comprehensive visual language for the Mutabaah Amal progressive web application. Grounded in calm, reverent minimalism with Islamic warmth.

Typography Colors Spacing Iconography Components Form Controls Tasks Navigation Empty States Motion & Tone Avatar Overlays Breadcrumb
Version
1.6.2
April 2026
01

Typography

Display / Headings
Inter Tight
Weights: 400 / 500 / 600 / 700 / 800
Used for: App title, section headers, card headings, large numerics
Aa Bb Cc Dd Ee Ff
1 2 3 4 5 6 7 8 9 0
Body / UI Labels
Inter
Weights: 300 / 400 / 500 / 600
Used for: Body text, descriptions, captions, tags, inputs
Aa Bb Cc Dd Ee Ff
1 2 3 4 5 6 7 8 9 0
Type Scale
NameSizeWeightLine Ht.Preview
Display32px80036pxAlhamdulillah
Heading 124px70030pxToday's Ibadah
Heading 220px60026pxWorship Activities
Body Large16px40024pxTrack your daily prayers and acts of worship
Body14px40020pxFajr — completed at 5:42 AM · 2 Ramadan 1447
Label12px50016pxCATEGORY · WORSHIP
Caption11px40014pxTap to mark as complete
02

Color Palette

Primary
Forest Green
#1C3D2E
Primary action, brand
Sage
#46725B
Secondary, hover states
Gold
#AC8636
Accent, streaks, stars
Parchment
#F5F1EA
App background
Surface
#FFFFFF
Cards, bottom sheet
Surface Alt
#EDE8DF
Input bg, inactive
Text & Borders
Text Primary
#1A1816
Text Secondary
#635E56
Text Tertiary
#6C6861
Border
#DDD8CF
Border Light
#F0EDE7
Dividers, subtle lines
Success
#2D7A5A
Error
#B84040
Category Colors
Worship
#2D6E4E / #E8F2EC
Salah, Dua, Dhikr
Quran
#2E5D8C / #E6EEF7
Reading, Memorisation
Charity
#AC8636 / #FBF3E3
Sadaqah, Zakat
Personal
#6E4A8C / #EFE9F7
Reflection, Goals
Dark Mode
Void
#18180F
App background
Surface Dark
#222219
Cards, bottom sheet
Surface Alt Dark
#2D2D22
Input bg, inactive
Forest Green
#4A9B70
Primary — lightened
Gold
#C9993D
Accent — saturated
Ivory
#F0EDE6
Text primary
Worship
#5DBB8A / #1A2E22
Quran
#6B9ED4 / #1A2230
Charity
#C9993D / #2A2416
Personal
#A87ED4 / #221830
Live preview
Use the Dark toggle in the top nav to preview the full design system in dark mode. All CSS custom properties update automatically. Your preference is saved across visits and respects your system setting by default.
03

Spacing System

Base Unit: 4px
4xs
8sm
12—
16md
20—
24lg
32xl
402xl
483xl
644xl
805xl
Element Spacing
Icon → label8px
Label → value4px
List item rows1px separator
Card padding16–20px
Section Spacing
Between sections32–40px
Page horizontal pad20px
Bottom nav height64px + safe area
Status bar offset48px
Border Radius
Chips / Tags--radius-pill · 100px
Buttons--radius-md · 12px
Cards--radius-lg · 16px
Large cards--radius-xl · 20px
Bottom sheet--radius-2xl · 24px
Grid Spacing Explorer
Grid Gap (Space between)
Container Padding
Elevation
--shadow-0
Flat — default surfaces, inline cards
--shadow-1
Subtle — lists, resting cards
--shadow-2
Raised — bottom sheets, modals
--shadow-3
Elevated — overlapping panels
--shadow-fab
FAB — floating action button
04

Iconography

Library
Lucide v0.460.0
Stroke-based, 24×24px grid, 1.5px stroke weight
Usage
<i data-lucide="icon-name"></i>
Icons render via the Lucide CDN script on page load
Sizing
24px default
Use 16px for inline labels, 20px for compact UI, 40px+ for empty states
Navigation & Actions
Tasks & Status
Calendar
Analytics
Categories
System
05

Components

Buttons
Copied!
Primary
Copied!
Secondary
Copied!
Outline
Copied!
Destructive
Copied!
Ghost
Copied!
FAB
Button States
VariantDefaultHoverDisabledLoading
Primary
Secondary—
Outline—
Destructive—
Ghost—
Category Chips
Copied!
Copied!
Copied!
Worship Copied!
Quran Copied!
↑ Small inline tags used on task items
↑ Disabled — 35% opacity, not-allowed cursor
Input Field
Add an ibadah activity…
Copied!
Default / Placeholder
Fajr Prayer
Copied!
Activity name already exists
Error
Select
Copied!
Default
Textarea
Copied!
Default
Progress & Completion
Daily ring
Worship4/5
Quran2/3
Charity1/2
Category progress bars
14 Day Streak
Streak badge
Skeleton Loaders
Task list
Dashboard card
Profile header
Input form
Alerts
Copied!
Copied!
06

Form Controls

Checkbox
Copied!
Copied!
Radio
Copied!
Copied!
Toggle
Copied!
Copied!
07

Task Items

Fajr Prayer
Worship
Copied!
Dhuhr Prayer
Worship1:14 PM
Copied!
Read 1 Juz
Quran
Give Sadaqah
Charity9:30 AM
Evening Reflection
Personal
States
Pending — unchecked circle
Completed — filled checkmark
Interactions
TapToggle complete
Swipe leftReveal delete action
Long pressEdit task details
ChevronOpen detail view
09

Empty States

Variants
Start your ibadah
Add an activity above to begin tracking your day.
Today — No Tasks
No activities found
Try a different search term.
Search — No Results
Nothing to show yet
Complete some ibadah to see your progress here.
Analytics — No Data
Design Principle
Empty states use a gentle floating illustration with encouraging copy. Never present zero as failure — reframe it as an invitation to begin. Illustrations animate with a slow 3s vertical float to feel alive without being distracting.
10

Motion & Tone

Animation Principles
Ease Out — 280ms
Default for entrances and confirmations. Items settle gently into place — never bouncy or urgent.
Fajr Prayer
--duration-enter · 280ms cubic-bezier(0, 0, 0.2, 1)
Ease In — 200ms
For exits and dismissals. Elements leave quickly, cleanly — no lingering.
Activity saved
--duration-exit · 200ms cubic-bezier(0.4, 0, 1, 1)
Task Complete — 360ms
Checkmark draws in with a gentle spring. Subtle gold sparkle. A moment of quiet satisfaction.
Fajr Prayer
--duration-complete · 360ms spring(1, 0.6, 0, 0)
Voice & Tone
Do
"MashaAllah! 7 ibadah completed today."
"Your 14-day streak — keep going."
"Ramadan begins in 4 days, inshallah."
Calm, warm, never preachy. Gently encouraging.
Don't
"You haven't prayed today!"
"Your streak is broken. Start over."
Guilt-driven language or spiritual lecturing.
Aggressive gamification or excessive badges.
11

Avatar

Sizes
SI
Copied!
Small · 24px
SI
Copied!
Medium · 32px
SI
Copied!
Large · 48px
SI
XLarge · 64px
SI
2XLarge · 80px
Variants
SI
Initials
Image
Fallback
SI
Online
AF
Away
MR
Offline
Avatar Group
SI
AF
MR
Copied!

Stacked with 2px ring separation. Overflow count uses +N pattern.

12

Modal & Tooltip

Modal / Dialog — Anatomy
Add Ibadah Activity
Activity name
Fajr Prayer
Category
Backdrop: rgba(0,0,0,.45) · blur 0
Copied!
Confirmation Dialog
Delete activity?
This will permanently remove "Fajr Prayer" and all its history. This cannot be undone.
Copied!
Live Demo
Full-form overlay
Alertdialog overlay
Tooltip — Positions

Tooltips use CSS :hover / :focus-within — no JS required. Add role="tooltip" and link via aria-describedby on the trigger.

Bottom Sheet — Mobile Pattern
Activity Options
Edit Activity
Save to Favorites
Delete Permanently
Copied!

Standard mobile-first pattern for PWA environments. Use for supplementary actions, filters, or quick inputs. Desktop view is capped at 520px.