This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Ummah Falahos — Unified Design System

A convergence of Fiverr's marketplace energy, Coursera's educational clarity, and Falahos's sovereign Islamic aesthetic.

1. Product DNA

Dimension	Decision
Product Type	Marketplace + Education Platform for the Ummah
Audience	Global Muslim community — freelancers, students, entrepreneurs, educators
Primary Modes	Dark Mode (primary) + Light Mode (optional toggle)
Design Philosophy	Sovereign, Trustworthy, Generous, Precise
Design Voice	Authoritative but warm. Knowledgeable but humble.
Tone	Confident, clear, aspirational — never hype-y

What We're Borrowing

Source	Best Elements
Fiverr	Search-first hero, category grid navigation, seller profile trust signals, card-based service listings, review/rating system, order progress tracking, vibrant accent energy
Coursera	Structured learning paths, course card design, progress indicators, professional certification badges, clean typography hierarchy, video-first content, enrollment CTAs, syllabus accordion
Falahos (existing)	Dark sovereign background, gold/green accent system, Islamic geometric patterns, Cinzel serif display, JetBrains Mono for UI labels, glassmorphism surfaces, premium feel

2. Color System

Core Palette (Dark Mode Primary)

Token	Hex	Role	Usage
`--color-bg`	`#070A0D`	Background	Main page background
`--color-bg-elevated`	`#0C1117`	Elevated Surface	Cards, sidebars, sections
`--color-bg-raised`	`#111820`	Raised Surface	Hover states, active cards
`--color-surface`	`#141C24`	Interactive Surface	Inputs, buttons, dropdowns
`--color-gold`	`#C9A84C`	Primary Accent	CTAs, highlights, headings
`--color-gold-light`	`#E8C97A`	Gold Hover	Gold hover/enhanced states
`--color-gold-dim`	`rgba(201,168,76,0.15)`	Gold Wash	Subtle gold backgrounds
`--color-green`	`#2ECC71`	Success Accent	Active, verified, progress, online
`--color-green-neon`	`#00FF88`	Green Glow	Pulsing indicators, badge dots
`--color-green-dim`	`rgba(46,204,113,0.12)`	Green Wash	Subtle green backgrounds
`--color-text`	`#E8E4DC`	Primary Text	Headings, body paragraphs
`--color-text-dim`	`rgba(232,228,220,0.55)`	Secondary Text	Supporting text, metadata
`--color-text-muted`	`rgba(232,228,220,0.3)`	Muted Text	Labels, placeholder, disabled
`--color-border`	`rgba(201,168,76,0.2)`	Border Gold	Cards, dividers, grid lines
`--color-border-green`	`rgba(46,204,113,0.2)`	Border Green	Active states, success borders
`--color-destructive`	`#EF4444`	Error	Destructive actions, errors

Light Mode Palette (Future)

Token	Light Mode Equivalent
`--color-bg`	`#FAFAF7`
`--color-bg-elevated`	`#F5F4F0`
`--color-bg-raised`	`#EFEEE8`
`--color-surface`	`#FFFFFF`
`--color-text`	`#1A1A1A`
`--color-text-dim`	`#6B6B6B`
`--color-border`	`rgba(201,168,76,0.3)`

Semantic Color Mapping

Use	Token	Dark Value
Primary CTA background	`--color-cta-bg`	`var(--color-gold)`
Primary CTA text	`--color-cta-text`	`var(--color-bg)`
Secondary CTA border	`--color-cta-secondary-border`	`var(--color-text)` opacity 0.2
Success indicator	`--color-success`	`var(--color-green)`
Verified badge	`--color-verified`	`var(--color-green)`
Rating stars	`--color-star`	`var(--color-gold)`
Error	`--color-error`	`#EF4444`
Warning	`--color-warning`	`#F59E0B`
Info	`--color-info`	`#3B82F6`
Link	`--color-link`	`var(--color-gold)`
Link hover	`--color-link-hover`	`var(--color-gold-light)`

Contrast Compliance

Gold #C9A84C on bg #070A0D → 7.2:1 ✓ AAA
Green #2ECC71 on bg #070A0D → 9.1:1 ✓ AAA
Text #E8E4DC on bg #070A0D → 15.3:1 ✓ AAA
Text-dim on bg → 6.5:1 ✓ AA

3. Typography System

Font Stack

Role	Font	Weight	Notes
Display / Hero	Cinzel (serif)	400, 600, 900	Decorative serif for sovereign authority. Use sparingly — hero, section titles, logo. From Falahos.
Body / UI	DM Sans (sans-serif)	300, 400, 500	Clean humanist sans for paragraphs, descriptions, content. From Falahos.
Label / Code / Data	JetBrains Mono (mono)	300, 400	Technical precision for navigation, badges, metrics, tags, data. From Falahos.
Subtitle / Display Alt	Playfair Display (serif)	400, 600, 700	For pull quotes, editorial sections, course descriptions. Borrowed from premium education UX (Coursera-style).

Font Loading Strategy:

Preload Cinzel (critical display)
font-display: swap for all others
Reserve space to prevent CLS

Type Scale

:root {
  --text-xs: 0.625rem;    /* 10px — tags, badges */
  --text-sm: 0.75rem;     /* 12px — labels, meta */
  --text-base: 0.875rem;  /* 14px — body, UI text */
  --text-lg: 1rem;        /* 16px — large body */
  --text-xl: 1.125rem;    /* 18px — lead paragraphs */
  --text-2xl: 1.5rem;     /* 24px — section subtitles */
  --text-3xl: 2rem;       /* 32px — H2, card titles */
  --text-4xl: 2.5rem;     /* 40px — H1 / hero */
  --text-5xl: 3.5rem;     /* 56px — hero emphasis */
  --text-6xl: 5rem;       /* 80px — large hero number */
}

Typography Token Usage

Token	Font	Size	Weight	Letter-spacing	Line-height
`.display-hero`	Cinzel	var(--text-6xl)	900	-0.01em	0.95
`.display-large`	Cinzel	var(--text-5xl)	900	-0.01em	0.95
`.display-title`	Cinzel	var(--text-4xl)	600	0	1.05
`.heading-1`	Cinzel	var(--text-3xl)	600	0	1.1
`.heading-2`	Playfair Display	var(--text-2xl)	600	0	1.2
`.heading-3`	Cinzel	var(--text-xl)	600	0.02em	1.3
`.body`	DM Sans	var(--text-base)	300	0	1.7
`.body-large`	DM Sans	var(--text-lg)	300	0	1.7
`.ui-label`	JetBrains Mono	var(--text-xs)	400	0.18em	1.4
`.ui-label-sm`	JetBrains Mono	var(--text-sm)	400	0.12em	1.4
`.badge`	JetBrains Mono	var(--text-xs)	400	0.15em	1
`.data-value`	Cinzel	var(--text-3xl)	900	0	1
`.data-label`	JetBrains Mono	var(--text-xs)	400	0.18em	1
`.nav-link`	JetBrains Mono	var(--text-sm)	400	0.12em	1
`.eyebrow`	JetBrains Mono	var(--text-xs)	400	0.3em	1

4. Spacing & Layout

Scale

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
}

Section Spacing

Section padding (desktop): var(--space-16) var(--space-16)
Section padding (mobile): var(--space-10) var(--space-6)
Max content width: 1400px
Gutters (desktop): var(--space-16)
Gutters (mobile): var(--space-6)

Grid System

Feature grid: 3 columns (desktop) → 1 column (mobile) — borrowed from Falahos's arch grid
Category grid: 4 columns (desktop) → 2 (tablet) → 1 (mobile) — from Fiverr's category UX
Course/seller card grid: 4 columns → 2 → 1
Metrics bar: flex row with equal items, wrapped on mobile

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

Element	Radius
Cards	`--radius-lg` (12px)
Buttons (primary)	`clip-path: polygon(...)` for geometric cut — signature Falahos detail
Buttons (secondary)	`--radius-none` — sharp, technical
Inputs	`--radius-md`
Badges	`--radius-full`
Modal	`--radius-xl`
Avatar	`--radius-full`

5. Key Effects & Visual Details

Surface Treatment

Cards: var(--color-bg-elevated) base, 1px solid var(--color-border), subtle top highlight via pseudo-element
Hover: BG shifts to var(--color-bg-raised), top border gradient line reveals (gold or green)
Nav: backdrop-filter: blur(20px) with rgba(7,10,13,0.85) background — Falahos signature
Glassmorphism: For modals, overlays, sticky headers — blur + transparency

Geometric Borders

┌─────── Islamic geometric corner accent ──┐  ← 2px gold gradient line
│                                            │
│  Cards get top-border accent on hover:     │
│  linear-gradient(90deg, gold, transparent)  │
│                                            │
└──────────────────────────────────────────┘

Key Geometric Effects

Corner accents: Pseudo elements with gold border frames (top-left + bottom-right corners only) — signature detail from Falahos
Clip path on primary CTA: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) — distinctive Islamic geometric cut
Golden top border line across page: linear-gradient(90deg, transparent, gold, green, gold, transparent)

Noise & Pattern

Subtle SVG noise overlay at opacity: 0.04 over entire page
Radial gradient orbs in background: gold at top, green at bottom-right — gives depth without distraction

6. Iconography

System

Rule	Standard
Icon Library	Lucide (consistent stroke, geometric, clean)
Stroke Width	1.5px (consistent across all icons)
Icon Sizes	16px (inline), 20px (UI), 24px (standard), 32px (feature), 48px (hero)
Color	Inherit from text color or use `var(--color-gold)` / `var(--color-green)`
No Emoji as Icons	❌ Never use emoji for navigation, actions, or structural icons

Icon Set Convention

Purpose	Icon	Size
Search	`Search`	20px
Cart/Order	`ShoppingCart`	24px
Profile	`User`	24px
Course/Book	`BookOpen`	24px
Certification	`Award`	24px
Verified	`BadgeCheck`	20px (green)
Rating	`Star`	16px (gold fill)
Arrow/Next	`ChevronRight`	16px
External	`ExternalLink`	14px
Menu	`Menu`	24px
Close	`X`	20px
Download	`Download`	20px
Clock	`Clock`	16px
Users	`Users`	24px

7. Component Architecture

Desktop: Fixed top nav, backdrop-filter: blur(20px), left logo (Cinzel gold/green), center links (JetBrains Mono), right CTA button
Mobile: Hamburger menu, bottom tab bar for core actions (Fiverr-inspired mobile UX)
Logo format: Falah<span style="color:var(--color-green)">OS</span> — Cinzel 900

7.2 Hero (Search-First — Fiverr Inspired)

┌──────────────────────────────────────────────┐
│  [BADGE]  ●  SOVEREIGN DIGITAL ECONOMY        │
│                                                │
│          Hire. Learn. Build.                   │
│       The Ummah's Freelance & Education Hub    │
│                                                │
│  ┌────────────────────────────────────────┐    │
│  │ 🔍  Find a service, course, or expert… │    │
│  └────────────────────────────────────────┘    │
│                                                │
│  Popular:  Web Dev  ·  Quran  ·  Graphic       │
│  Design  ·  Arabic  ·  AI & Tech               │
│                                                │
│  [Explore Services]  [Browse Courses]          │
└──────────────────────────────────────────────┘

Search bar is the primary CTA (from Fiverr's conversion strategy)
Category pills/chips below search for quick discovery
Dual CTAs: "Explore Services" (gold primary) + "Browse Courses" (secondary)

7.3 Metric Bar (From Falahos)

Horizontal row of key stats — three or four items with Cinzel numbers + JetBrains labels:

  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐
  │   12K+   │  │   500+   │  │  98%     │  │  50+     │
  │ Freelancers│  │ Courses  │  │ Satisfaction│  │ Countries│
  └──────────┘  └──────────┘  └──────────┘  └──────────┘

7.4 Service / Course Cards (Fiverr + Coursera Hybrid)

┌───────────────────────────┐
│ [IMAGE / THUMBNAIL]        │  ← 16:9 ratio
│                            │
│  ★ ★ ★ ★ ☆  (4.8)  ·  124  │  ← Rating + reviews
│                            │
│  Professional Web         │  ← DM Sans 500
│  Development & Design      │
│                            │
│  from  ص. 250             │  ← Price (gold emphasis)
│                            │
│  ┌──┐  ┌──┐  ┌──┐       │
│  │HTML│  │CSS│  │React│   │  ← JetBrains Mono tags
│  └──┘  └──┘  └──┘       │
└───────────────────────────┘

Card Anatomy:

Thumbnail/image (16:9 ratio)
Rating row: Star + score + review count
Title (DM Sans 500, 2 lines max)
Price (Cinzel or gold-weighted number)
Tags (JetBrains Mono pill badges)

7.5 Course Details (Coursera Inspired)

┌──────────────────────────────────────────────┐
│  UI/UX Design Masterclass                     │  ← Cinzel H1
│  ────────────────────────────────────────      │
│                                                │
│  ★ 4.8  ·  2,400+ students  ·  12 weeks       │  ← JetBrains meta
│                                                │
│  Learn modern UI/UX design from industry        │
│  professionals with hands-on projects.          │  ← DM Sans body
│                                                │
│  ┌──────────────────────────────────┐          │
│  │  📘  Enroll for Free             │          │  ← Gold primary CTA
│  └──────────────────────────────────┘          │
│                                                │
│  Skills you'll gain:                           │
│  [Figma]  [Design Systems]  [Prototyping]      │  ← Tag pills
│                                                │
│  ─── Syllabus ───                              │  ← Accordion sections
│  ▶  Week 1: Design Thinking                     │
│  ▶  Week 2: Visual Hierarchy                    │
│  ▶  Week 3: Color & Typography                  │
└──────────────────────────────────────────────┘

7.6 Review/Rating Block (Fiverr Inspired)

┌──────────────────────────────────┐
│  ⭐ 4.8  ·  Excellent             │
│                                  │
│  ┌──────────────────────────┐    │
│  │ 5 ★  ━━━━━━━━━━━━ 75%   │    │  ← Rating distribution
│  │ 4 ★  ━━━━━━━━━  20%     │    │
│  │ 3 ★  ━━━━  4%           │    │
│  │ 2 ★  ━━  1%             │    │
│  │ 1 ★  ━  0%              │    │
│  └──────────────────────────┘    │
│                                  │
│  ┌──────────────────────┐        │
│  │ "Amazing service!    │        │  ← Review card
│  │ Delivered before     │        │
│  │ deadline. Great      │        │
│  │ communication."      │        │
│  │ — Ahmad R.           │        │
│  │ Verified Purchase ✓  │        │  ← Green verified badge
│  └──────────────────────┘        │
└──────────────────────────────────┘

7.7 Progress Indicator (Coursera Inspired)

  ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐
  │ 1 │→│ 2 │→│ 3 │→│ 4 │→│ 5 │    ← Active step gold, done steps green
  └───┘ └───┘ └───┘ └───┘ └───┘

  Lesson 3 of 12
  ━━━━━━━━━━━━━━░░░░░░  42% Complete

7.8 CTA Section

┌──────────────────────────────────────┐
│                                      │
│  [GREEN LABEL]  READY TO BEGIN?      │
│                                      │
│   Start Your Sovereign Journey       │  ← Cinzel 900
│        Today                        │
│                                      │
│  Join 12,000+ members of the         │
│  Ummah building and learning.        │
│                                      │
│  ┌────────────────────┐              │
│  │  Join the Ummah    │              │  ← Geometric cut gold button
│  └────────────────────┘              │
└──────────────────────────────────────┘

8. Interaction & Motion

Timing

Action	Duration	Easing	Notes
Micro-interactions	150-200ms	ease-out	Hover, press, toggle
Page transitions	300-400ms	ease-out	Route changes
Modal enter/exit	250ms enter / 200ms exit	ease-out / ease-in	Exit faster
Scroll reveals	700ms	ease	Opacity + translateY
Stagger (list)	50ms per item	ease-out	Sequential entrance

Motion Principles

Transform/opacity only — never animate width, height, top, left
Exit < Enter — exit animations are 60-70% of enter duration
Reduce motion respected — @media (prefers-reduced-motion: reduce)
Meaningful movement — every animation expresses a relationship
Gold/green direction — gold = forward action, green = completion/confirmation

Key Interactions

Element	Hover	Active/Press	Transition
Gold CTA	translateY(-2px), box-shadow gold glow	scale(0.97)	200ms
Card	bg shift, top border reveals	—	300ms
Nav link	color → gold	—	200ms
Tag pill	border-color → gold	—	200ms
Input	border-color → gold	focus ring gold	200ms

9. Accessibility

Requirement	Standard
Color contrast	AAA (7:1) minimum for text
Touch targets	44×44px minimum
Focus rings	3px gold border on :focus-visible
Keyboard nav	Full tab order, skip-to-content link
Screen readers	aria-labels on all icon-only buttons
Reduced motion	`prefers-reduced-motion` respected
Text scaling	Supports browser zoom up to 200%
Color-independent	Never use color alone to convey info

10. Responsive Breakpoints

Device	Width	Layout Changes
Small phone	<375px	Single column, stacked
Large phone	375-767px	Single column, expanded touch
Tablet	768-1023px	2-column grids
Desktop	1024-1439px	3-4 column grids
Wide	1440px+	Max 1400px centered

11. Anti-Patterns (Must Avoid)

❌ Anti-Pattern	✅ Instead
Emoji as icons / structural elements	Lucide SVG icons
Pure #000000 black	`#070A0D` — deep but not pure black
Playful/kid fonts (Baloo, Comic Neue)	Cinzel + DM Sans + JetBrains Mono
Random hex values in components	Semantic CSS custom properties
Low-contrast gray text	Gold-accessible `text-dim` (#A09580 equivalent)
Hover-only interactions	Tap + keyboard alternatives
Layout-shifting transforms	Use transform only
Inconsistent border radius	Stick to system scale
Mixing icon families	Lucide only

12. Page Architecture (Landing Page)

Section Order

Nav — Fixed, blurred, gold border bottom
Hero — Search-first with category pills
Metrics Bar — Stats row
Categories / Browse — Grid of service/course categories
Featured Services — Fiverr-style card grid
Featured Courses — Coursera-style card grid
How It Works — 3-step pipeline (borrowed from Falahos stack section)
Testimonials / Reviews — Social proof with rating distribution
Trust Signals — Certifications, verified badges, security
CTA Section — Join the Ummah
Footer — Logo + links + copyright

13. Implementation Quick Reference

CSS Variable Setup

:root {
  /* Backgrounds */
  --color-bg: #070A0D;
  --color-bg-elevated: #0C1117;
  --color-bg-raised: #111820;
  --color-surface: #141C24;

  /* Accents */
  --color-gold: #C9A84C;
  --color-gold-light: #E8C97A;
  --color-gold-dim: rgba(201, 168, 76, 0.15);
  --color-green: #2ECC71;
  --color-green-neon: #00FF88;
  --color-green-dim: rgba(46, 204, 113, 0.12);

  /* Text */
  --color-text: #E8E4DC;
  --color-text-dim: rgba(232, 228, 220, 0.55);
  --color-text-muted: rgba(232, 228, 220, 0.3);

  /* Borders */
  --color-border: rgba(201, 168, 76, 0.2);
  --color-border-green: rgba(46, 204, 113, 0.2);

  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-editorial: 'Playfair Display', serif;
}

Google Fonts Import

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=JetBrains+Mono:wght@300;400&family=Playfair+Display:wght@400;600;700&display=swap');

14. Design Decisions Record

Decision	Rationale
Dark mode as default	Falahos already uses it; sovereign/premium feel; better for OLED; reduces eye strain
Cinzel for headings	Decorative serif conveys authority, tradition, and craftsmanship — fits "sovereign" ethos
DM Sans for body	Highly readable at small sizes; humanist warmth balances Cinzel's formality
JetBrains Mono for labels	Technical precision for marketplace/education metadata; consistent with Falahos identity
Gold + green accent system	Gold = value, quality, Islamic tradition. Green = paradise, growth, success. Culturally resonant.
Geometric card hover effect	Islamic geometric heritage expressed through modern UI — distinctive, not decorative
Search-first hero	Borrowed from Fiverr's proven marketplace conversion pattern
Rating distribution widget	Borrowed from Fiverr's trust-building UX
Syllabus accordion + progress	Borrowed from Coursera's education UX
Clip-path CTA corners	Islamic geometric motif — signature element that makes the UI unmistakable

15. Pre-Delivery Checklist

All colors use semantic CSS variables (no hardcoded hex in components)
Primary text contrast ≥ 7:1 in dark mode
Touch targets ≥ 44×44px
Focus rings visible on all interactive elements
No emoji used as structural icons (Lucide only)
SVG icons in consistent stroke weight (1.5px)
Hover states with smooth transitions (150-200ms)
prefers-reduced-motion respected
Responsive down to 375px
Safe areas respected (notch, gesture bar)
Verified on small phone, tablet, desktop
JetBrains Mono for all labels/badges (not random fonts)
Geometric corner accents on cards where specified
No layout-shifting transforms
Search bar is the primary hero CTA
All copy in active voice, clear, no filler