# Iqra (iqra.falahos.my) — Editorial UI/UX Design Review & Direction Proposals

**Document ID:** `IQRA-UX-AUDIT-2026-10`  
**Author:** Principal Editorial UI/UX Design Director  
**Publication:** Iqra Times (`https://iqra.falahos.my`)  
**Publisher:** Darul Falah / WMJ  
**Target Date:** October 2026  

---

## 1. Executive Summary & Problem Definition

The user feedback regarding Iqra's current homepage was direct and unambiguous:
> *"you need one UI designer, current main page UI looks really ugly and immamture. discuss with your team and come back with a a few UI designs"*

A thorough architectural and visual audit of `https://iqra.falahos.my` confirmed this diagnosis. Despite high-calibre intellectual contributions spanning Islamic Family Office, Halal Wealth, Integrative Tibb, and Civilizational Philosophy, the website was burdened by:
1. **Severe content loop duplication** (the exact same article appearing 4 times consecutively down the page).
2. **Clashing chromatic identities** (uncoordinated teals, bright greens, cold grey borders, and harsh white blocks).
3. **Immature component styles** (generic SaaS drop-shadows, clashing font combinations, uncurated author blocks).
4. **Flattened visual hierarchy** (monographs, 5-minute morning tips, and financial calculations all sharing the same visual weight).

To resolve this, we have created **three distinct, mature, world-class UI design directions**, accompanied by **fully interactive, high-fidelity browser prototypes** committed directly to this repository.

---

## 2. Deep Audit of Current Homepage Flaws

| Problem Area | Current Observation on Server | Root Cause in Codebase | Consequence to Reader |
|---|---|---|---|
| **Content Duplication** | The article *"Islamic Morning & Evening Adhkar Digital Planner ($17.99)"* renders consecutively 4 times. | `default.hbs` and `index.hbs` execute un-filtered `{{#foreach posts}}` loops in `ft-hero.hbs`, `ft-fastft-stream.hbs`, `ft-topic-hubs.hbs`, and the default Ghost post feed. | Severe cognitive fatigue; website looks amateurish and abandoned. |
| **Color Clash** | Header ticker uses `#007A4D` (emerald), `#0d7680` (teal), `#990f3d` (crimson), with `#e0e0e0` borders on stark `#ffffff`. | Incoherent CSS tokens in `screen.css` mixing raw hex colors without a defined paper-to-ink architectural system. | Feels like a fragmented Bootstrap mockup rather than an elite broadsheet. |
| **Typography Dissonance** | Titles jump between `Playfair Display`, `Source Serif 4`, and system sans-serif with loose leading. | Lack of typographic rhythm in CSS tokens; headings rendered with uncalibrated letter-spacing. | Reading experience is jarring and visually noisy. |
| **Author Board Styling** | Authors sit in an inline `<style>` card with circular avatars, raw arrows (`1 article →`), and beige panels. | Tacked-on inline CSS in `ft-editorial.hbs` rather than an integrated editorial board layout. | Degrades the dignity of institutional contributors (Dr. Tariq, Dr. Hakim, Maryam). |
| **Hierarchy Collapse** | Deep investigative essays on Sukuk rails share the same 3-column card style as micro-posts. | Flat card grid component applied indiscriminately across all tags. | Readers cannot distinguish major investigations from daily briefs. |

---

## 3. The Three New Editorial UI Directions

```
+---------------------------------------------------------------------------------------------------+
|                                  THE THREE PROPOSED VISUAL PARADIGMS                               |
+------------------------------------+----------------------------------+---------------------------+
| 1. THE FALAH GAZETTE & MONOCLE     | 2. AL-QALAM REVIEW               | 3. SUKUK & SOVEREIGN RAIL |
| Financial Times / Monocle Heritage | Foreign Affairs / Atlantic / LRB | Bloomberg / Nikkei / Semafor
| Salmon-linen paper, razor hairline | Meditative ivory, book serif,    | Executive terminal, dark-accent
| borders, dense broadsheet gravitas | generous intellectual whitespace | telemetry, structured breakdown
+------------------------------------+----------------------------------+---------------------------+
```

---

### Direction 1: "The Falah Gazette" (Financial Times & Monocle Heritage)
*The High-Density Intellectual Sovereign Broadsheet*

* **Prototype File:** [`design-proposals/direction-1-falah-gazette.html`](direction-1-falah-gazette.html)
* **Core Philosophy:** Uncompromising editorial gravitas, high information density, razor-sharp hairline borders, and warm tactile paper. Communicates civilizational statecraft, financial rigor, and broadsheet permanence.
* **Palette Architecture:**
  * Paper Ground: `#FFF1E5` (FT warm salmon)
  * Surface Backplate: `#F6E6D8`
  * Inset Card: `#FCF5EE`
  * Carbon Ink: `#111111` / Body Ink: `#242220`
  * Brand Accent: `#0E4D36` (Imperial Ottoman Spruce Green)
  * Wax Seal Accent: `#9E2A2B` (Archival Crimson)
  * Hairline Rules: `1px solid #E4D5C7` and `#C9B8A7`
* **Typography Hierarchy:**
  * Masthead: *Cinzel*, 64px, uppercase, tracking `0.14em` with Arabic calligraphy glyph `« إقرأ »`.
  * Display Headlines: *Newsreader* / *Source Serif 4*, 40px, leading `1.15`, weight 700.
  * Eyebrow / Kickers: *Inter*, 11px, weight 700, tracking `0.12em` (`#0E4D36`).
  * Body Prose: *Newsreader*, 17.5px, line-height `1.55`.
  * Data Telemetry: *JetBrains Mono*, 10.5px.
* **Homepage Wireframe Structure:**
  1. *Live Suq Ticker:* 28 Rabi' al-Awwal 1448 | Gold Nisab (RM 32,450 / 85g) | Silver Nisab | Sukuk 5Y Yield.
  2. *Double-Bordered Centered Masthead:* Formal subtitle and bullet-separated navigation rail.
  3. *Lead Asymmetric Trio:*
     - Col 1 (55%): Major Investigation with 16:9 photography, lead excerpt, and dateline.
     - Col 2 (25%): Two stacked analytical monographs with author metadata.
     - Col 3 (20%): *The Iqra Wire* in a shaded linen box with pulsing live indicator.
  4. *Voices of Iqra (Editorial Board):* 5-column panel framed in hairline rules. Each fellow features a portrait, distinct column tag (*The Jauhari Column*, *Wealth & Succession*, *The Shifa Desk*), and their latest treatise.
  5. *Quantitative Engines Strip:* High-contrast black backplate showcasing the Faraid Estate Solver, Zakat Engine, and Waqf Registry.
  6. *Curated Topic Dossiers:* 3-column structured matrix by core disciplines.

---

### Direction 2: "Al-Qalam Review" (The Intellectual Journal)
*Foreign Affairs, The Atlantic & London Review of Books Dignity*

* **Prototype File:** [`design-proposals/direction-2-al-qalam-review.html`](direction-2-al-qalam-review.html)
* **Core Philosophy:** Serene, contemplative, and literary. Strips away modern noise in favor of generous whitespace, delicate ivory book-stock paper, and profound scholarly weight.
* **Palette Architecture:**
  * Page Ground: `#FBFBFA` (Natural book stock ivory)
  * Surface Fill: `#FFFFFF` / Inset: `#F4F2EC`
  * Archival Carbon Ink: `#1B1E21` / Reading Ink: `#4D5156`
  * Brand Accent: `#185A37` (Andalusian Deep Olive Forest Green)
  * Leather / Parchment Ochre: `#8D5B28` (Tuscan Ochre for pull-quotes)
  * Delicate Hairline: `1px solid #E8E6DE`
* **Typography Hierarchy:**
  * Masthead: *Cormorant Garamond*, 72px, weight 500, letter-spacing `0.08em` with ornament `— ✦ —`.
  * Display Headlines: *Cormorant Garamond*, 52px, leading `1.14`, weight 600.
  * Pull-Quotes: *Cormorant Garamond Italic*, 23px, leading `1.45` with ochre left-rule.
  * Body Prose: *Eczar* / *Source Serif 4*, 17px, line-height `1.7`.
* **Homepage Wireframe Structure:**
  1. *Volume & Dateline Header:* Volume IV, Autumn 2026 Issue.
  2. *Single-Focus Lead Monograph:* Full-width intellectual feature without stock photo distractions, featuring an authoritative pull-quote from the Ihya.
  3. *The Dispatch Rail:* Right-hand rail highlighting deep juristic and historical treatises.
  4. *Quad Triptych:* 4 tall editorial columns divided by subtle vertical rules (Fiqh & Succession, Shifa & Tibb, Statecraft & Corridors, Classical Polymath).
  5. *The Fellowships of Darul Falah:* Academic Fellow cards showcasing chairs and specialized monographs.

---

### Direction 3: "Sukuk & Sovereign Rail" (The Financial Intelligence Terminal)
*Bloomberg Markets, Nikkei Asia & Semafor Modernity*

* **Prototype File:** [`design-proposals/direction-3-sovereign-rail.html`](direction-3-sovereign-rail.html)
* **Core Philosophy:** Engineered for Islamic Family Offices, wealth managers, and tech leaders. Focuses on structured data density, live market signals, and executive-summary clarity.
* **Palette Architecture:**
  * Workspace Ground: `#F4F5F7` (Crisp executive grey)
  * Card Surface: `#FFFFFF`
  * Obsidian Top Header: `#0D1117`
  * High-Contrast Ink: `#111827` / Subtle: `#4B5563`
  * Treasury Emerald: `#056A4E` (Light: `#ECFDF5`)
  * Telemetry Amber: `#D97706` / Bond Blue: `#1E40AF`
  * Grid Border: `1px solid #E5E7EB`
* **Typography Hierarchy:**
  * UI & Metadata: *Inter*, 13px - 15px, weights 500/600/700.
  * Analytical Headlines: *Newsreader*, 34px, weight 700.
  * Telemetry / Engine Code: *JetBrains Mono*, 11px - 13px.
* **Homepage Wireframe Structure:**
  1. *Live Telemetry Strip:* Black status bar with live Nisab, Sukuk benchmark yield, and API indicators.
  2. *Executive Navigation Bar:* Quick search command palette (`⌘K`), category switches, and subscriber access.
  3. *Lead Executive Investigation (Semafor-Style Breakdown):*
     - Lead card featuring a structured 3-part breakdown directly on the card (*THE SIGNAL*, *THE EXPOSURE*, *JURISTIC VIEW*).
  4. *Live Interactive Calculator Dock:* On-homepage interactive Zakat and Nisab estimator with instant numerical output.
  5. *Intelligence Desks Terminal:* Modular 4-column cards with status badges and contributor monograph counts.

---

## 4. Author Board & Personas: Dignified Presentation

The existing site reduced distinguished scholars to small circular avatars with brief text snippets. The redesign establishes them as permanent institutional authorities:

| Persona | Official Role / Pillar | Visual Treatment in Redesign |
|---|---|---|
| **Jauhari Che Wan** | *Editor-in-Chief & Publisher* | Featured in a dedicated broadsheet "Warkah Pengarang" / Publisher's Desk with monogram seal and editorial manifesto on Nusantara istikhlaf. |
| **Dr. Tariq Al-Amiri** | *Senior Jurist & Estate Counsel* | Institutional badge `ESTATE & JURISPRUDENCE`, highlighting legal treatises on cross-border Faraid, Hibah, and Family Office structuring. |
| **Dr. Hakim Zainur Rahman** | *Integrative Physician & Tibb Researcher* | Institutional badge `INTEGRATIVE TIBB`, highlighting clinical research on chronobiology, prophetic medicine, and Fiqh an-Nafs. |
| **Maryam Al-Andalusi** | *Intellectual Historian* | Institutional badge `MANUSCRIPT FELLOW`, featuring archival monographs on Ibn Khaldun, Andalusian governance, and classical Malay manuscripts. |
| **Farhan Idris** | *Geopolitical Risk Analyst* | Institutional badge `GEOPOLITICAL RISK`, featuring strategic briefs on maritime straits, de-dollarization, and trade corridors. |
| **Darul Falah Research Desk** | *Quantitative Research Group* | Institutional crest, featuring live algorithmic Nisab tracking and Faraid calculation engines. |

---

## 5. Technical Implementation Plan in Ghost / Handlebars

To implement the winning design direction on `iqra.falahos.my`, the following technical refactoring will be executed:

### Step 1: De-Duplicate Content Loops in `index.hbs`
* Replace repetitive loops with scoped Ghost queries:
  ```handlebars
  {{!-- 1. Lead Investigation Hero (Exactly 1 post) --}}
  {{#get "posts" filter="featured:true" limit="1" include="authors,tags"}}
      {{#foreach posts}}
          {{> "ft-hero-lead"}}
      {{/foreach}}
  {{/get}}

  {{!-- 2. Secondary Analysis & Wire (Excludes featured lead) --}}
  {{#get "posts" filter="featured:false+tag:-products" limit="5" include="authors,tags"}}
      {{> "ft-asymmetric-stream"}}
  {{/get}}

  {{!-- 3. Remove redundant default post feed from index.hbs --}}
  ```

### Step 2: Extract Inline CSS to Standardized Tokens
* Remove the inline `<style>` tags currently present in `default.hbs`, `index.hbs`, and `ft-editorial.hbs`.
* Add CSS design tokens into `assets/built/screen.css` matching the selected palette (paper, ink, hairline, accent).

### Step 3: Integrate Quantitative Calculators as Server-Side Partials
* Convert the calculator tabs into high-performance, responsive partials (`ft-calculator-strip.hbs`), removing layout shifts and JavaScript delays.

---

## 6. Verification and Review Instructions

1. **Local Browser Testing:**
   Open any of the three HTML files in a browser to review typography, color harmony, and responsive layout:
   - `direction-1-falah-gazette.html`
   - `direction-2-al-qalam-review.html`
   - `direction-3-sovereign-rail.html`
2. **Gitea Repository:**
   These designs and documentation are version-controlled in repository `wmj/falah-ft-theme` (and `falahos/falah-ft-theme`).