113 lines
6.4 KiB
Markdown
113 lines
6.4 KiB
Markdown
# Iqra Times & Falah Research Institute
|
||
## Editorial Visual Data & Credibility Standard (SOP)
|
||
*Document Reference: FRI-SOP-2026-VISUAL-01*
|
||
*Classification: Institutional Best Practice — All Desks & Fellows*
|
||
*Effective Date: October 13, 2026*
|
||
|
||
---
|
||
|
||
### 1. Executive Mandate & Purpose
|
||
Civilizational intelligence, Shariah political economy, and strategic statecraft require more than compelling prose. To establish uncompromising credibility, executive authority, and empirical weight, **every article published on Iqra Times (iqra.falahos.my) must incorporate structured visual intelligence** whenever relevant to the topic.
|
||
|
||
A dispatch without data visualization risks being dismissed as subjective commentary. A dispatch anchored by a rigorous vector chart, an analytical matrix, or a mechanical process flowchart commands the authority of a Tier-1 broadsheet (e.g., *The Financial Times*, *The Economist*, *Foreign Affairs*).
|
||
|
||
---
|
||
|
||
### 2. The 4-Tier Visual Architecture Specification
|
||
|
||
Every publication workflow must deploy at least one (and ideally two to three) of the following visual tiers:
|
||
|
||
```
|
||
+------------------------------------------------------------------------+
|
||
| ARTICLE PROSE PIPELINE |
|
||
+------------------------------------------------------------------------+
|
||
| 1. [FT-STAT-GRID] Macro Metric / KPI Callout Strip |
|
||
| (3-4 high-impact data points at the lead) |
|
||
+------------------------------------------------------------------------+
|
||
| 2. [FT-VECTOR-CHART] Editorial SVG Data Chart |
|
||
| (Empirical trajectories, curves, spreads) |
|
||
+------------------------------------------------------------------------+
|
||
| 3. [FT-PROCESS-FLOW] Mechanism / Workflow Diagram |
|
||
| (Numbered procedural & decision stages) |
|
||
+------------------------------------------------------------------------+
|
||
| 4. [FT-COMPARISON-MATRIX] Analytical Broadsheet Table |
|
||
| (Contrasting models, lipids, legal paradigms)|
|
||
+------------------------------------------------------------------------+
|
||
```
|
||
|
||
#### Tier 1: Macro Metric / KPI Strip (`FT-STAT-GRID`)
|
||
* **Placement**: Immediately after the lead executive takeaway drawer.
|
||
* **Structure**: 3 to 4 columns featuring:
|
||
* Metric Number: `Playfair Display`, Georgia, serif (36px, bold, `#111111`).
|
||
* Metric Label: Uppercase, letter-spacing 1px (12px, bold, `#0E4D36`).
|
||
* Context Description: `Source Serif 4`, Georgia, serif (13–14px, `#4A443E`).
|
||
* **Trigger**: Mandatory whenever epidemiological, macro-financial, demographic, or survey statistics are referenced.
|
||
|
||
#### Tier 2: Handcrafted Vector SVG Data Chart (`FT-VECTOR-CHART`)
|
||
* **Format**: Responsive inline vector graphics (`<svg viewBox="0 0 700 260" style="width: 100%; height: auto;">`).
|
||
* **Palette Strictness**:
|
||
* Canvas Background: Financial Times Salmon Paper (`#FFF1E5`).
|
||
* Card Container: Broadsheet Card Shading (`#F8EBE0`), border `#E2D3C4`, top accent `#0E4D36`.
|
||
* Primary Trajectory / Benchmark: Forest Green (`#0E4D36`, width 3px).
|
||
* Risk / Counter-Trajectory: Broadsheet Burgundy (`#9E2A2B`, width 3px).
|
||
* Baseline & Axes: Deep Ink (`#111111`) and Muted Gridlines (`#E2D3C4` dashed).
|
||
* **Requirements**: Must include distinct axis labels, baseline markings, and clear inline coordinate markers.
|
||
|
||
#### Tier 3: Process Workflow & Mechanism Diagram (`FT-PROCESS-FLOW`)
|
||
* **Format**: Sequential step cards linked with directional indicators (`->`).
|
||
* **Usage**:
|
||
* Clinical protocols (e.g., Vagal nerve de-escalation, 4-stage dietary transitions).
|
||
* Legal procedures (e.g., Wasiyyah execution vs Mareva injunction for estate recovery).
|
||
* Architectural pipelines (e.g., The 5 Layers of Sovereign Istikhlaf Tech).
|
||
|
||
#### Tier 4: Comparative Analytical Matrix (`FT-COMPARISON-MATRIX`)
|
||
* **Format**: Clean broadsheet tables wrapped in `.ft-card` styling:
|
||
* Table Header: `#E7F3EE` green-tinted background with `#0E4D36` bold uppercase text.
|
||
* Cell Borders: Subdued hairline dividers (`#E2D3C4`).
|
||
* Cell Typography: `Source Serif 4`, Georgia, serif (14px, line-height 1.45).
|
||
* **Usage**: Side-by-side paradigm comparisons (e.g., Extractive Venture Debt vs Khadijah Mudarabah, Western Outsourced Nursing Homes vs Multigenerational Shield).
|
||
|
||
---
|
||
|
||
### 3. Scholarly Captioning Standard
|
||
No visual element may be inserted without an explicit, standalone caption. Captions must follow this syntax:
|
||
|
||
> **Figure X.X: [Descriptive Title of the Metric/System]**
|
||
> *[Detailed caption explaining the exact parameters, units, date ranges or sample size, and the primary analytical deduction. Must name the institutional, empirical, or historical source].*
|
||
|
||
**Negative Rule**: Purely decorative stock imagery or generic AI illustrations with zero data content are strictly prohibited within the analytical body prose.
|
||
|
||
---
|
||
|
||
### 4. Technical Implementation in Ghost Lexical AST
|
||
|
||
Visual assets are injected into Ghost 5.x via native Lexical `html` cards:
|
||
|
||
```json
|
||
{
|
||
"type": "html",
|
||
"version": 1,
|
||
"html": "<div style=\"background: #F8EBE0; border: 1px solid #E2D3C4; border-top: 3px solid #0E4D36; padding: 24px; margin: 34px 0; border-radius: 4px;\">...</div>"
|
||
}
|
||
```
|
||
|
||
#### Typography Isolation Guidelines:
|
||
* Outer card container must enforce clean system or serif font-family to avoid font inheritance collisions.
|
||
* All figure headers must use uppercase tracking: `letter-spacing: 1.5px; font-weight: 700; color: #0E4D36;`.
|
||
* Table and card body text must harmonize with the broader publication font (`Source Serif 4` / `Playfair Display`).
|
||
|
||
---
|
||
|
||
### 5. Pre-Publication Quality Checklist
|
||
|
||
Before any dispatch is set to `status: "published"`, the editor/agent must verify:
|
||
|
||
- [ ] **Relevance**: Does the visual asset directly illuminate the core thesis of the article?
|
||
- [ ] **Empirical Rigor**: Are all data points verified against authentic datasets or classical texts?
|
||
- [ ] **Aesthetic Coherence**: Does the visual strictly utilize the FT Broadsheet color palette?
|
||
- [ ] **Caption Completeness**: Is there an explicit Figure number and informative caption?
|
||
- [ ] **Mobile Responsiveness**: Does the `<svg>` or `<table>` scale cleanly on mobile viewports (`overflow-x: auto`)?
|
||
- [ ] **No Raw Artifacts**: Are there zero unparsed markdown asterisks or escaped entities in the card?
|
||
|
||
---
|
||
*Maintained by the Visual Intelligence & Graphics Desk, Falah Research Institute.* |