Iqra (iqra.falahos.my) — Homepage UI/UX Overhaul & Design Review

Author: Principal Editorial UI/UX Design Director
Review Status: Awaiting Publishing Board Approval
Branch: design/homepage-ui-overhaul
Live Site Under Audit: https://iqra.falahos.my

Executive Summary & Design Audit

Iqra is a premier intellectual publication operating at the intersection of Islamic Family Office, Halal Wealth & Succession, Tibb & Shifa (Integrative Medicine), Geopolitical Intelligence, and Classical Islamic Philosophy.

A rigorous audit of the current live homepage revealed that while the editorial contributors (Jauhari Che Wan, Dr. Tariq Al-Amiri, Dr. Hakim Zainur Rahman, Maryam Al-Andalusi, Farhan Idris, and Darul Falah Research Desk) bring immense institutional authority, the visual packaging is immature, cluttered, and fragmented:

The 4x Loop Clutter: The identical post is duplicated across the top hero, FastFT stream, topic hubs, and the default calendar post feed.
Chromatic Dissonance: Uncoordinated teals (#0d7680), bright emeralds (#007A4D), raw burgundy (#990f3d), stark cold grey borders (#e0e0e0), and harsh white surfaces feel like an unfinished developer dashboard rather than an authoritative paper broadsheet.
Immature Component Styling: Heavy generic box-shadows, theatrical font pairings, and cartoon DiceBear avatar cutouts undermine editorial gravitas.
Flattened Hierarchy: Market intelligence playbooks, proprietary mathematical engines (Faraid, Nisab), and 5-minute morning routine articles are styled with identical 3-column cards.

The Three High-Fidelity UI Design Directions

We have developed three distinct, fully realized design directions. Each prototype is self-contained and viewable directly in your browser or through Gitea:

+---------------------------------------------------------------------------------------------------+
|                                  THREE EDITORIAL DIRECTIONS                                        |
+------------------------------------+----------------------------------+---------------------------+
| 1. THE FALAH GAZETTE & MONOCLE     | 2. AL-QALAM REVIEW               | 3. SUKUK & SOVEREIGN RAIL |
| Financial Times / Monocle Heritage | Foreign Affairs / Atlantic / LRB | Bloomberg / Nikkei / Semafor
| High-density, warm salmon-linen    | Cerebral, ivory paper, generous  | Executive terminal, dark-accent
| hairline borders, Scotch serif     | literary whitespace, book serif  | telemetry, high-cadence cards
+------------------------------------+----------------------------------+---------------------------+

Direction 1: The Falah Gazette (FT & Monocle Heritage)

Design Philosophy: The hallmark of institutional sovereign authority. High information density, warm salmon-linen ground (#FFF1E5), Ottoman spruce green (#0E4D36), crisp 1px hairline rules, and refined Scotch Roman serif typography.
Key Components:
- The Suq & Nisab Real-Time Ticker: Ultra-compact charcoal header tracking Islamic Date, Gold Nisab (RM 32,450 / 85g Au), Silver Nisab, and Tokenised Sukuk Yields.
- Formal Centered Broadsheet Masthead: Framed dual-line masthead with subtle Arabic watermark glyph « إقرأ ».
- Asymmetric 3-Column Lead Investigation: 55% lead monograph + 25% analytical essays with fellow portrait medallions + 20% FastFT / The Iqra Wire rolling intelligence stream.
- Voices of Iqra 5-Fellow Rail: Dignified monochrome engraved fellow portraits with individual column titles (Wealth, Waqf & Succession, The Shifa Desk, Corridors of Power).
- Quantitative Tools Strip: Inset parchment modules for the Interactive Faraid Estate Solver and Zakat Calculation Engine.

Direction 2: Al-Qalam Review (Cerebral Intellectual Journal)

Design Philosophy: Inspired by Foreign Affairs, The Atlantic, and London Review of Books. Unhurried, contemplative reading cadence on natural book-stock ivory paper (#FAFAF7) with Andalusian forest green accents (#165B33) and generous, rhythmic whitespace.
Key Components:
- The Scholarly Masthead: Clean small-caps typography with formal issue dateline (Autumn 2026 Issue · Volume IV · Kuala Lumpur & London).
- Lead Essay Monograph: Full-width contemplation card with drop-caps, scholarly pull-quotes, and zero distracting advertising widgets.
- Quad Triptych Matrix: 4 elegant vertical columns dividing Geopolitics, Juridical Wealth, Shifa, and Philosophy.
- Fellowships of Darul Falah: Author profiles framed as Senior Academic Fellows with research areas and collected paper archives.

Direction 3: Sukuk & Sovereign Rail (Financial Intelligence Terminal)

Design Philosophy: Built for modern Islamic Family Offices, institutional sovereign wealth managers, and founders. Inspired by Bloomberg Markets, Nikkei Asia, and Semafor. Prioritizes data density, live intelligence signals, and modular grid structures.
Key Components:
- The Executive Market Ribbon: Dynamic live status bar with monetary telemetry and quick command palette (⌘K).
- Semafor-Style Structured Takeaway Hero: Major investigation card with instant analytical breakdown drawers (The Signal, The Fiqh, The Exposure).
- Quantitative Suite Dock: 3 interactive calculators on the front page (PE/Crypto Zakat, Faraid Estate Simulator, Nisab Index).
- Executive Intelligence Rail: Compact category pill badges and time-stamped market dispatches.

Comparison Matrix

Feature / Criteria	Direction 1: The Falah Gazette	Direction 2: Al-Qalam Review	Direction 3: Sovereign Rail
Aesthetic Inspiration	Financial Times, Monocle	Foreign Affairs, Atlantic, LRB	Bloomberg Markets, Semafor
Primary Paper Tone	Warm Salmon-Linen (`#FFF1E5`)	Book-Stock Ivory (`#FAFAF7`)	Modern Slate/Canvas (`#F7F8FA`)
Brand Accent	Ottoman Spruce (`#0E4D36`)	Andalusian Green (`#165B33`)	Treasury Emerald (`#026E54`)
Information Density	High (Executive & Broadsheet)	Medium (Scholarly & Literary)	Very High (Data & Intelligence)
Author Presentation	Broadsheet Columnists Rail	Senior Academic Fellows	Sector Analysts & Desks
Brand Fit for Iqra	98% (Recommended)	92%	88%

Implementation Plan in Ghost Theme

Once the Publishing Board selects a preferred direction:

De-duplicate Queries in index.hbs: Replace uncurated post feeds with tagged {{#get}} queries matching the selected layout.
Refactor Theme Components: Move all inline styles into clean, modular SCSS files in assets/css/components/.
Elevate Typography & Assets: Host Google Fonts (Source Serif 4, Newsreader, Cinzel, IBM Plex Mono) locally for sub-50ms render times.
Deploy & Verify: Merge design/homepage-ui-overhaul into main, test across desktop and mobile, and deploy to live Ghost production.

7.0 KiB Raw Blame History