wmj/falah-mobile
1
0
Fork 0
Code Issues 3 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add unified design system wiki page (Falahos × Fiverr × Coursera)

wmj
2026-07-03 12:04:02 +08:00
parent f6821c4033
commit d6a6dd9a10
2 changed files with 609 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Design-System.md
+595
@@ -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:** `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:**
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
Home.md
+14
@@ -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.