From d6a6dd9a103fe617f7eee2101b7f2fd8842107d7 Mon Sep 17 00:00:00 2001 From: wmj Date: Fri, 3 Jul 2026 12:04:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20add=20unified=20design=20system=20wiki?= =?UTF-8?q?=20page=20(Falahos=20=C3=97=20Fiverr=20=C3=97=20Coursera)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Design-System.md | 595 +++++++++++++++++++++++++++++++++++++++++++++++ Home.md | 14 ++ 2 files changed, 609 insertions(+) create mode 100644 Design-System.md create mode 100644 Home.md diff --git a/Design-System.md b/Design-System.md new file mode 100644 index 0000000..d6fda3f --- /dev/null +++ b/Design-System.md @@ -0,0 +1,595 @@ +# 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 + +```css +: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 + +```css +: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 + +```css +: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 + +### 7.1 Navigation + +- **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:** `FalahOS` — 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:** +1. Thumbnail/image (16:9 ratio) +2. Rating row: Star + score + review count +3. Title (DM Sans 500, 2 lines max) +4. Price (Cinzel or gold-weighted number) +5. 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 + +1. **Transform/opacity only** — never animate width, height, top, left +2. **Exit < Enter** — exit animations are 60-70% of enter duration +3. **Reduce motion respected** — `@media (prefers-reduced-motion: reduce)` +4. **Meaningful movement** — every animation expresses a relationship +5. **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 + +1. **Nav** — Fixed, blurred, gold border bottom +2. **Hero** — Search-first with category pills +3. **Metrics Bar** — Stats row +4. **Categories / Browse** — Grid of service/course categories +5. **Featured Services** — Fiverr-style card grid +6. **Featured Courses** — Coursera-style card grid +7. **How It Works** — 3-step pipeline (borrowed from Falahos stack section) +8. **Testimonials / Reviews** — Social proof with rating distribution +9. **Trust Signals** — Certifications, verified badges, security +10. **CTA Section** — Join the Ummah +11. **Footer** — Logo + links + copyright + +--- + +## 13. Implementation Quick Reference + +### CSS Variable Setup + +```css +: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 + +```css +@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 diff --git a/Home.md b/Home.md new file mode 100644 index 0000000..00ae1fb --- /dev/null +++ b/Home.md @@ -0,0 +1,14 @@ +# Falah Mobile Wiki + +Welcome to the Falah Mobile wiki. + +## Design + +- **[[Design System]]** — Unified design system combining best of Falahos, Fiverr & Coursera (gold/green dark theme, marketplace + education UX) + +## Development + +- [[Infrastructure-Tool-Log]] + +## Getting Started +See the main repo README for setup instructions.