System Requirements Document for ya-habibti

1. Introduction

ya-habibti is a personal devotional storytelling experience. It presents "PART 2 — After Maghrib": a husband and wife retelling the night of a missed prayer, the story of a missed Zohar prayer during an engineering semester, reflections on the Names of Allah, a du'a made before sleep, and the account of waking for Tahajjud at 2:41 AM without an alarm.

The product is an interactive, beautiful, and colourful dashboard that holds this narrative as its content. The audience is the Story Author (Jafar), who wrote the narrative and needs a workspace to view and grow it, and the Reader, who engages with the story, its dialogue, its Arabic supplications, and its devotional passages in a clean, colourful, interactive presentation.

The intent is not a generic admin panel or a chat application. It is a hand-set poster of gratitude: words as the image, colour blocks as the structure, and the narrative itself as the interface.

2. System Overview

ya-habibti is delivered as a first-party web application with two pages: a public Landing page that introduces the narrative experience, and a Dashboard that presents the story content with navigable sections. Both pages are anonymously accessible; no account, sign-in, or identity establishment is required or provided.

The current delivery covers:

• The full Ya Qalbi narrative content: the conversation between the author and his wife, the missed Zohar prayer story from the second semester of engineering, the reflections on the Names of Allah, the du'a and durood, and the Tahajjud account.
• An interactive, beautiful, and colourful dashboard presentation with navigable story sections.
• A public entry surface that explains the narrative experience and invites visitors into the story.

Actors are the Story Author and the Reader. Both are active human personas. There are no system, provider, or external actors in the current scope; all content is first-party and statically authored.

Narrow exclusions: no authentication, no account management, no multi-user collaboration, no content editing or authoring tools, no chat-bubble dialogue UI, no blue/indigo/violet palette, no rounded corners or soft shadows, no gradient blobs or glassmorphism, no full-colour photographic hero imagery, and no decorative ornament that carries no type or story.

2a. Product Interpretation and Delivery Boundary

The product is a first-party, anonymously accessible web experience. Delivery is headless in the sense that no backend service, database, or user account is required: the narrative content is authored into the application and rendered by the client. Both the Landing page and the Dashboard are public; there is no protected state, no private ownership, and no session continuity requirement.

The current horizon is the presentation of the supplied "PART 2 — After Maghrib" narrative. Future horizons (additional parts, authoring tools, or expanded content) are not part of current acceptance and are not represented in current pages.

2b. Source Content Inventory

The following content is supplied by the authoritative content_source directive ("Ya Qalbi narrative (PART 2) supplied in the prompt") and must be preserved as the dashboard's presented content.

Opening exchange

• Me: "Ya Qalbi what made you cry? What happened?"
• Her: "Today I missed asr prayer due to the sleep. The moment my eyes opened it was a magrib time"
• Me: "Don't worry Al Khabeer saw your intention. He is Al Ghafurul Wadood and Seeing you reminds me of my college day where I missed zohar prayer and cried for it"
• Her: "Would you tell me what actually happened after magrib"
• Me: "Ok"

After Maghrib

• Me:\x20\xd9\xb1لسَّلَامُ عَلَيْكُمْ
• Her: وعليكم السلام
• Stage direction: (Comes and hugs me after that I kissed her on forehead)
• Me: "Shall I start?"
• Her: "Ok start with\x20\xef\xb7\xbd and durood upon beloved of Allah\x20\xef\xb7\xba" -\x20\xef\xb7\xbd
• اللَّهُمَّ صَلِّ عَلَى مُحَمَّدٍ وَعَلَى آلِ مُحَمَّدٍ كَمَا صَلَّيْتَ عَلَى إِبْرَاهِيمَ وَعَلَى آلِ إِبْرَاهِيمَ إِنَّكَ حَمِيدٌ مَجِيدٌاللَّهُمَّ بَارِكْ عَلَى مُحَمَّدٍ وَعَلَى آلِ مُحَمَّدٍ كَمَا بَارَكْتَ عَلَى إِبْرَاهِيمَ وَعَلَى آلِ إِبْرَاهِيمَ إِنَّكَ حَمِيدٌ مَجِيدٌ

The incident

• Me: "The incident which I mentioned you earlier happened in 2nd sem of engineering"
• Her: "I think you remembered the date would you tell me"
• Me: "Yes Alhamdulillah I remembered it. It's 12 June 2025. On that day I had one or two classes rest of the classes were cancelled So my friends said let's explore new place"
• Her: "How many friends you have?"
• Me: "I had a group of 12 and the place was lake firstly I refused because i would miss Zohar prayer but one of them convinced me saying I will leave you to masjid so that you can pray namaz"
• Her: "Did you had any backup plan for shaitan uses this type of trick"
• Me: "Yes indeed I had a plan but it failed"
• Her: "Then what happened?"
• Me: "I felt uneasy and I was holding back my tears this was the first time in my whole life I cried for missing one namaz"
• Her: "You said this was the first time you cried. What changed your life?"
• Me: "It's the mercy of Ar Rahman who placed regret for missing one namaz / It's generosity of Al Khaliq who sent his beloved\x20\xef\xb7\xba to us / It's a gift of Al Wahaab gave the gift of Tahajjud / It's love of Al Wadood who placed love of best of creation\x20\xef\xb7\xba / It's At Tawwab who is waiting for repentance of his servant / It's the guidance of Ar Rashid who guided me to straight path / It's the love of best of creation\x20\xef\xb7\xba who used to cry in the night saying Ya Rabbi Ummati Ummati"
• Stage direction: (Both recited two words Subhanallahi wa bi-hamdihi" and "Subhanallahil-Azhim which are beloved to Ar Rahim and durood upon Taha\x20\xef\xb7\xba)

The du'a

• Her: "Then what did you do?"
• Me: "firstly I cried a lot and before sleeping I asked Al Ghafur saying:Ya Alim if you had forgiven me then wake me for Tahajjud without alarm (as a personal sign) And if not please wake me through alarm and give the tawfiq of tawbah"
• Her: "Wait I will guess what happened next. He is Ar Rahman Ar Rahim Al Ghafur Al Ghaffar Al Wadood At Tawwab Al Rauf so the answer is Al Malik woke you without alarm"
• Me: "Exactly my alarm was at 2:50 AM I woke up at 2:41 AM"
• Her: "Subhanallah how generous and merciful is Al Ali. This incident reminds me of Tahajjud's Hadith :Who is seeking My forgiveness so that I may forgive him"
• Me: "For me it reminds another Hadith: And if he comes to Me walking, I go to him running"
• Her: "I will make the same dua as you did and I will wake you for tahajjud"
• Me: "In sha Allah. I was praying for this moment where you will wake me for Tahajjud"
• Her: "If you don't wake up for tahajjud I will sprinkle water upon you"
• Me: "I will act as I am in deep sleep so that you revive the sunnah of Mustafa\x20\xef\xb7\xba. And I will take revenge on you doing the same"
• Her: "Remember our goal is to be among those who remember Al Aziz often"
• Me: "ALL PRAISES ARE DUE TO ALLAH who blessed me with the best provision of this world"
• Stage direction: (After saying this he performs sajdah al shukr for Al Mujeeb answered his Tahajjud dua)
• Attribution: WRITTEN WITH THE HELP OF AL WAHAAB

2c. Page Content and Component Coverage

Landing

• Information and state: The public entry surface. Presents the narrative experience as a full-viewport poster: the wordmark "YA HABIBTI", the chapter label "PART 2 · AFTER MAGHRIB", and the invitation to enter the story. No user-specific state; no loading, empty, or error states beyond static render.
• Primary action: "Enter the night" — navigates to the Dashboard.
• Supporting actions: None required; the page is a single-commitment entry.
• Domain entities: Narrative title, chapter label, marquee line "يَا رَبِّ أُمَّتِي أُمَّتِي".
• Component responsibilities:
  • Hero poster block: solid red (#E4321B) field occupying the left 62% of the viewport on desktop; stacked "YA HABIBTI" wordmark in Anton at 176px desktop / 44px mobile, bleeding off the red block onto the paper ground and inverting from paper-white to ink black at the seam.
  • Ink band: full-width ink-black band beneath the wordmark carrying the Amiri marquee line "يَا رَبِّ أُمَّتِي أُمَّتِي", scrolling slowly right to left.
  • Label block: small ink label block at the bottom-left of the red block reading "PART 2 · AFTER MAGHRIB".
  • Entry control: outlined paper-coloured button "Enter the night" with a hard 2px ink border and no radius.
• States: Loading — not applicable (static render). Empty — not applicable. Success — poster renders fully. Error — not applicable. Recovery — not applicable.

Dashboard

• Information and state: The interactive, beautiful, colourful workspace presenting the Ya Qalbi narrative. Displays the conversation between the author and his wife, the missed Zohar prayer story, the reflections on the Names of Allah, the du'a and durood, and the Tahajjud account, organized into navigable story sections. No user-specific state; no persistence.
• Primary actions: Navigate between story chapters via the chapter index rail; scroll through the narrative; interact with the Names of Allah wall and the tahajjud timeline.
• Supporting actions: Read dialogue in the two-voice column; read Arabic devotional lines; read hadith cards.
• Domain entities: Chapter (I. After Maghrib, II. The Lake, III. Seven Names, IV. The Du'a, V. 2:41 AM, VI. Sajdah al-Shukr); dialogue line (speaker, text); Names of Allah entry (Name, gloss); hadith card (text); timeline mark (time, label); du'a text; durood text; stage direction.
• Component responsibilities:
  • Chapter index rail: narrow 3-column ink rail on the left carrying the chapter index (I. After Maghrib, II. The Lake, III. Seven Names, IV. The Du'a, V. 2:41 AM, VI. Sajdah al-Shukr).
  • Chapter composition field: wide content field where each chapter is a full-bleed type composition rather than a card.
  • Dialogue column: two-voice poster column — his lines flush left in ink, her lines flush right in red, separated by a hairline rule, never in chat bubbles.
  • Names of Allah wall: 7-block colour grid (red, yellow, ink, teal, red, yellow, ink) with each Name set enormous and its gloss set small beneath.
  • Tahajjud timeline: vertical ink rail with tick marks at 2:00, 2:30, 2:41, 2:50; the 2:41 mark is a red block that slams down; the 2:50 alarm mark is struck through with a red rule.
  • Hadith cards: teal-accented cards carrying the two hadith lines.
  • Arabic devotional blocks:\x20\xef\xb7\xbd and the durood set in Amiri at 1.4 leading, right-aligned, at 60% of the display size.
  • Section transition band: diagonal red band (-6deg) wiping across the viewport from the left edge, carrying the next chapter's numeral in paper-white Anton.
• States: Loading — not applicable (static render). Empty — not applicable. Success — all chapters render with their content. Error — not applicable. Recovery — not applicable.

3. Functional Requirements

FR-1 — Interactive dashboard presentation As a Story Author, I should have an interactive dashboard that is beautiful and colourful, so that the Ya Qalbi narrative is presented as a living, navigable experience rather than a static document.

• Provenance: explicit
• Lifecycle: Trigger — the Story Author or Reader opens the Dashboard. Input — none beyond navigation. Observable result — the dashboard renders the narrative with its colour blocks, typography, and interactive sections. Access state — anonymous, no identity required. Failure/recovery — not applicable (static render). Continuation — the user navigates between chapters.
• Acceptance: The Dashboard renders with the specified palette, typography, and layout; all six chapters are reachable; the page is interactive (chapter navigation, scroll-triggered transitions, timeline interaction).

FR-2 — Narrative content presentation As a Reader, I should see the full Ya Qalbi narrative — the conversation between the author and his wife, the story of the missed Zohar prayer in engineering college, the reflections on the Names of Allah, the du'a and durood, and the Tahajjud account — so that I can engage with the story in its complete form.

• Provenance: explicit
• Lifecycle: Trigger — the Reader opens the Dashboard. Input — none. Observable result — all narrative content from the Source Content Inventory is displayed across the six chapters. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader moves through chapters in order or via the index rail.
• Acceptance: Every dialogue line, Arabic supplication, Names of Allah reflection, hadith, du'a, and stage direction listed in the Source Content Inventory is present in the Dashboard.

FR-3 — Public entry surface As a Reader, I should encounter a public entry surface that explains the Ya Qalbi narrative experience and invites me into the colourful interactive story presentation, so that I understand what the experience is before entering.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader arrives at the Landing page. Input — none. Observable result — the poster hero renders with the wordmark, chapter label, marquee, and "Enter the night" control. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader activates "Enter the night" and arrives at the Dashboard.
• Acceptance: The Landing page renders the hero poster; "Enter the night" navigates to the Dashboard.

FR-4 — Chapter navigation As a Reader, I should navigate between the story chapters (I. After Maghrib, II. The Lake, III. Seven Names, IV. The Du'a, V. 2:41 AM, VI. Sajdah al-Shukr) via the chapter index rail, so that I can move through the narrative at my own pace.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader selects a chapter in the index rail. Input — chapter selection. Observable result — the content field scrolls or transitions to the selected chapter. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader continues reading or selects another chapter.
• Acceptance: All six chapters are listed in the index rail; selecting a chapter brings its content into view.

FR-5 — Names of Allah wall As a Reader, I should see the seven Names of Allah reflections (Ar Rahman, Al Khaliq, Al Wahaab, Al Wadood, At Tawwab, Ar Rashid, and the love of the best of creation\x20\xef\xb7\xba) presented as a colour-block wall with each Name set enormous and its gloss set small beneath, so that the reflections are experienced as a visual devotional composition.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader reaches chapter III. Seven Names. Input — none. Observable result — the 7-block colour grid renders with each Name and gloss. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader continues to chapter IV.
• Acceptance: Seven blocks render in the specified colour sequence (red, yellow, ink, teal, red, yellow, ink); each Name is set at 72–96px; each gloss is an 11px uppercase label pinned to the block's bottom-left corner.

FR-6 — Tahajjud timeline As a Reader, I should see the tahajjud timeline as a vertical ink rail with tick marks at 2:00, 2:30, 2:41, and 2:50, where the 2:41 mark is a red block that slams down and the 2:50 alarm mark is struck through with a red rule, so that the moment of waking without an alarm is felt as the narrative's turning point.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader reaches chapter V. 2:41 AM. Input — none. Observable result — the timeline renders with its tick marks and the red 2:41 block. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader continues to chapter VI.
• Acceptance: The timeline renders with all four tick marks; the 2:41 mark is a red block; the 2:50 mark is struck through with a red rule.

FR-7 — Dialogue as two-voice poster column As a Reader, I should read the dialogue as a two-voice poster column — his lines flush left in ink, her lines flush right in red, separated by a hairline rule — so that the conversation reads as a composed poster rather than a chat log.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader reads any chapter containing dialogue. Input — none. Observable result — dialogue lines render in the two-voice column format. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader continues reading.
• Acceptance: His lines are flush left in ink; her lines are flush right in red; a hairline rule separates them; no chat bubbles are used.

FR-8 — Arabic devotional blocks As a Reader, I should see\x20\xef\xb7\xbd and the durood set in Amiri at 1.4 leading, right-aligned, at 60% of the display size, so that the Arabic script breathes as a display block in its own right.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader reaches the Arabic devotional content. Input — none. Observable result — the Arabic lines render in Amiri at the specified scale and alignment. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader continues reading.
• Acceptance:\x20\xef\xb7\xbd and the durood render in Amiri, right-aligned, at 1.4 leading, at 60% of the display size.

FR-9 — Hadith cards As a Reader, I should see the two hadith lines ("Who is seeking My forgiveness so that I may forgive him" and "And if he comes to Me walking, I go to him running") presented as teal-accented cards, so that they are distinguished as the narrative's scriptural anchors.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader reaches the hadith content in chapter IV. The Du'a. Input — none. Observable result — the hadith cards render with teal accent. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader continues reading.
• Acceptance: Both hadith lines render as teal-accented cards.

FR-10 — Section transitions As a Reader, I should experience section transitions as a diagonal red band (-6deg) wiping across the viewport from the left edge, carrying the next chapter's numeral in paper-white Anton as it passes, so that moving between chapters feels like turning a poster.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader scrolls into a new chapter. Input — scroll. Observable result — the diagonal red band wipes across with the chapter numeral. Access state — anonymous. Failure/recovery — under prefers-reduced-motion, the transition is suppressed and the chapter content appears directly. Continuation — the Reader continues into the new chapter.
• Acceptance: The diagonal red band renders at -6deg; the chapter numeral appears in paper-white Anton; under prefers-reduced-motion the transition is suppressed.

FR-11 — Hero marquee As a Reader, I should see the line "يَا رَبِّ أُمَّتِي أُمَّتِي" run as a slow horizontal marquee across an ink band on the Landing page, so that the beloved\x20\xef\xb7\xba's cry is present from the first screen.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader arrives at the Landing page. Input — none. Observable result — the marquee scrolls slowly right to left. Access state — anonymous. Failure/recovery — under prefers-reduced-motion, the marquee stops and shows whole items. Continuation — the Reader activates "Enter the night".
• Acceptance: The marquee renders in Amiri on an ink band; it scrolls right to left; under prefers-reduced-motion it stops and shows whole items.

FR-12 — Hero wordmark As a Reader, I should see the "YA HABIBTI" wordmark set in Anton at 176px desktop / 44px mobile, stacked in three lines that bleed off the right edge of the red block and overlap onto the paper ground where the letters turn ink black, so that the entry screen is a poster of the story's title.

• Provenance: required_inference
• Lifecycle: Trigger — the Reader arrives at the Landing page. Input — none. Observable result — the wordmark renders with its bleed and inversion. Access state — anonymous. Failure/recovery — not applicable. Continuation — the Reader activates "Enter the night".
• Acceptance: The wordmark renders in Anton at the specified sizes; it bleeds from the red block onto the paper ground; the letters invert from paper-white to ink black at the seam.

4. User Personas

Story Author

The Story Author is Jafar, the writer of the Ya Qalbi narrative. He authored "PART 2 — After Maghrib" and asks for an interactive dashboard to hold it. His product context is personal and devotional: the narrative is a record of a missed prayer, a du'a, and a Tahajjud waking, and he wants it presented beautifully and colourfully as an interactive dashboard rather than as plain text.

His primary goal is to have a workspace where the story content — the dialogue, the Names of Allah reflections, the du'a and durood — is presented as a living, navigable experience. His distinct accepted responsibility is to view and grow the story content within the dashboard. His relevant inputs are the narrative text itself and his judgment about how it should be organized into chapters. He interacts with the Reader by providing the story the Reader engages with. His observable success is that the dashboard renders the full narrative with the specified palette, typography, and layout, and that all six chapters are reachable.

Reader

The Reader is a loved one who engages with the Ya Qalbi narrative. The narrative is written as a story to be read, with dialogue, Arabic supplications, and reflections on the Names of Allah. The Reader's product context is intimate and reverent: they arrive at the Landing page, understand the experience, and enter the Dashboard to move through the narrative and its devotional passages.

Their primary goal is to read the story in a clean, colourful, interactive presentation. Their distinct accepted responsibility is to engage with the story content — reading the dialogue, the missed-prayer story, the Names of Allah reflections, the du'a and durood, and the Tahajjud account — and to navigate between chapters at their own pace. Their relevant inputs are their reading choices: which chapter to select, how long to dwell on each passage. They interact with the Story Author by receiving the narrative the author has composed. Their observable success is that every narrative element is present and readable, that the chapter index rail lets them move through the story, and that the Names of Allah wall and tahajjud timeline render as specified.

5. Core User Flows

Flow 1 — Story Author views the narrative in the dashboard

1. The Story Author opens the ya-habibti application.
2. The Landing page renders: the red hero block with the "YA HABIBTI" wordmark bleeding onto the paper ground, the ink band with the "يَا رَبِّ أُمَّتِي أُمَّتِي" marquee, the "PART 2 · AFTER MAGHRIB" label, and the "Enter the night" button.
3. The Story Author activates "Enter the night".
4. The Dashboard renders with the chapter index rail (I. After Maghrib, II. The Lake, III. Seven Names, IV. The Du'a, V. 2:41 AM, VI. Sajdah al-Shukr) and the content field showing chapter I.
5. The Story Author selects chapter III. Seven Names from the index rail.
6. The content field transitions to chapter III; the diagonal red band wipes across carrying the numeral III; the Names of Allah wall renders as a 7-block colour grid with each Name set enormous and its gloss set small beneath.
7. The Story Author selects chapter V. 2:41 AM.
8. The content field transitions to chapter V; the tahajjud timeline renders with tick marks at 2:00, 2:30, 2:41, and 2:50; the 2:41 mark is a red block that slams down; the 2:50 alarm mark is struck through with a red rule.
9. The Story Author continues to chapter VI. Sajdah al-Shukr and reads the closing stage direction.
10. The Story Author's observable result: the full narrative is present and presented as specified. Continuation: the Story Author can revisit any chapter via the index rail.

Flow 2 — Reader enters and reads the narrative

1. The Reader arrives at the Landing page.
2. The Reader sees the full-viewport poster: the red block occupying the left 62% of the viewport, the "YA HABIBTI" wordmark stacked in three lines bleeding off the red block onto the paper ground, the ink band with the marquee line "يَا رَبِّ أُمَّتِي أُمَّتِي" scrolling slowly right to left, the "PART 2 · AFTER MAGHRIB" label, and the "Enter the night" button.
3. The Reader activates "Enter the night".
4. The Dashboard renders with chapter I. After Maghrib in view.
5. The Reader reads the opening exchange: "Ya Qalbi what made you cry? What happened?" and her reply about missing asr prayer.
6. The Reader scrolls into chapter II. The Lake; the diagonal red band wipes across carrying the numeral II.
7. The Reader reads the dialogue as a two-voice poster column: his lines flush left in ink, her lines flush right in red, separated by a hairline rule.
8. The Reader reads the Arabic devotional blocks:\x20\xef\xb7\xbd and the durood in Amiri, right-aligned, at 60% of the display size.
9. The Reader scrolls into chapter III. Seven Names; the Names of Allah wall renders as a 7-block colour grid.
10. The Reader scrolls into chapter IV. The Du'a; the hadith cards render with teal accent.
11. The Reader scrolls into chapter V. 2:41 AM; the tahajjud timeline renders with the red 2:41 block and the struck-through 2:50 mark.
12. The Reader scrolls into chapter VI. Sajdah al-Shukr and reads the closing stage direction.
13. The Reader's observable result: the full narrative has been read in the specified presentation. Continuation: the Reader can return to any chapter via the index rail.

Flow 3 — Reader navigates by chapter index

1. The Reader is on the Dashboard, having entered from the Landing page.
2. The Reader selects chapter IV. The Du'a from the chapter index rail.
3. The content field transitions to chapter IV; the diagonal red band wipes across carrying the numeral IV.
4. The Reader reads the du'a and the two hadith cards.
5. The Reader selects chapter II. The Lake from the index rail.
6. The content field transitions to chapter II; the diagonal red band wipes across carrying the numeral II.
7. The Reader's observable result: the selected chapter is in view. Continuation: the Reader continues selecting chapters or reading sequentially.

Flow 4 — Reader with reduced motion

1. The Reader arrives at the Landing page with prefers-reduced-motion enabled.
2. The marquee line "يَا رَبِّ أُمَّتِي أُمَّتِي" stops and shows whole items; it wraps into rows or sits in a horizontally scrollable row.
3. The Reader activates "Enter the night".
4. The Dashboard renders with chapter I in view.
5. The Reader scrolls into chapter II; the diagonal red band transition is suppressed and the chapter content appears directly.
6. The Reader's observable result: all content is readable without motion. Continuation: the Reader continues through the chapters.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Paula Scher; the headline is "Typography as architecture for a night of remembrance."

Colour tokens (light mode)

Proportion: roughly 60% paper, 22% ink, 12% red, 4% yellow, 2% teal.

Typography

• Headings: Anton at 400 weight, all-caps, tracking -0.01em, leading 0.86 — wood-type poster scale, stacked in tight lines that fill their column edge to edge.
• Arabic devotional lines: Amiri at 1.4 leading, right-aligned, at 60% of the display size.
• Body: Archivo 400/500 with 1.6 leading.
• Labels: Archivo 600 uppercase 11px with 0.14em tracking.
• Scale: 1.5 modular poster scale — display 44px mobile / 96px tablet / 176px desktop (clamp(2.75rem, 11vw, 11rem)); section head 28/48/72; subhead 20/28/36; body 16/17/18; label 11/11/12.

Shape language

Hard edges only — zero border-radius on blocks, cards, and buttons. Full-bleed colour fields that butt against each other with 2px ink rules as the only separation. Diagonal red bands cut across the page at -6deg to break the grid between story chapters. Type is cropped and overlapped by colour blocks on purpose; nothing is soft, nothing floats.

Layout

A dense poster grid: 12 columns on desktop, 6 on tablet, 4 on mobile, with an asymmetric split — a narrow 3-column ink rail on the left carrying the chapter index (I. After Maghrib, II. The Lake, III. Seven Names, IV. The Du'a, V. 2:41 AM, VI. Sajdah al-Shukr) and a wide content field where each chapter is a full-bleed type composition rather than a card. The Names of Allah wall is a 7-block colour grid (red, yellow, ink, teal, red, yellow, ink) with each Name set enormous and its gloss set small beneath. Dialogue is set as a two-voice column: his lines flush left in ink, her lines flush right in red, separated by a hairline rule, never in chat bubbles.

Imagery

Typography is the image. Where a picture is needed, use one high-contrast monochrome cutout per chapter — a lake at dusk, an empty prayer rug, a window before fajr — duotoned into ink and red so it reads as a poster panel, never as a stock photo. Arabic calligraphy of\x20\xef\xb7\xbd and the durood functions as a display block in its own right. No illustrations, no 3D props, no gradient blobs.

Avoid

Rounded corners, soft shadows and floating card grids; chat-bubble dialogue UI in any form; blue, indigo or violet anywhere in the palette — including buttons, links and focus rings; gradient blobs, glassmorphism, or blurred luminous panels; Inter, Roboto, Poppins, Montserrat or any neutral geometric sans as the display face; centred hero with headline, subtext and a pill CTA; photographic hero imagery in full colour; decorative ornament that carries no type or story.

Readable text and controls

Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut exactly as the direction asks, as long as it covers no readable text or control. Moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design; with prefers-reduced-motion it stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling.

7. Signature Design Concept

The public entry is a full-viewport poster. A solid red (#E4321B) field occupies the left 62% of the viewport. "YA HABIBTI" is set in Anton at 176px desktop / 44px mobile, stacked in three lines that bleed off the right edge of the red block and overlap onto the paper ground where the letters turn ink black. Beneath the wordmark, a single ink-black band runs the full width of the viewport carrying the marquee line "يَا رَبِّ أُمَّتِي أُمَّتِي" in Amiri, scrolling slowly right to left. The bottom-left of the red block holds a small ink label block — "PART 2 · AFTER MAGHRIB" — and an outlined paper-coloured button "Enter the night" with a hard 2px ink border and no radius.

The signature move is the wordmark crossing the colour boundary: the type bleeds from the red block onto the paper ground and inverts from paper-white to ink black at the seam. This is the story's title as a physical poster, not a centred hero with a subheading paragraph. No blue button, no gradient, no pill CTA.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: the "YA HABIBTI" wordmark bleeding from the red block onto the paper ground, with the "يَا رَبِّ أُمَّتِي أُمَّتِي" marquee running beneath it.
• Input → transformation → outcome thesis: On load, the hero headline lines slide up from behind an ink mask one line at a time (140ms apart), so the wordmark assembles itself as a stacked poster; the marquee line then runs as a slow horizontal scroll across the ink band, so the beloved\x20\xef\xb7\xba's cry is present from the first screen. The outcome is a composed first frame that reads as a hand-set poster of gratitude.
• Motion vocabulary: type marquees and staggered word reveals; colour blocks wipe in from the left edge on scroll into a new chapter; the tahajjud clock counts from 2:50 to 2:41 with a red block slamming down on the final number. No bounce, no blur, no lift.
• Composed first frame: the red block occupying the left 62% of the viewport, the wordmark stacked in three lines crossing the colour boundary, the ink band with the marquee beneath, the "PART 2 · AFTER MAGHRIB" label and "Enter the night" button at the bottom-left of the red block.
• Reduced-motion state: the marquee stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row; the staggered word reveals resolve immediately to their final positions; the diagonal red band transitions are suppressed and chapter content appears directly.

9. Non-Functional Requirements

NFR-1 — Visual constraint: beautiful and colourful The dashboard must be beautiful and colourful. Provenance: explicit. Rationale: explicit hard constraint in the authoritative user evidence. Acceptance: the specified palette, typography, and layout are applied; the page reads as a colourful poster, not a neutral admin panel.

NFR-2 — Palette constraint The palette is fixed: background #F4EFE4, surface #FFFDF7, text #12100E, primary #E4321B, accent #F2B705, muted #6B655C, teal #0E7C7B. Blue, indigo, and violet are forbidden anywhere in the palette, including buttons, links, and focus rings. Provenance: creative direction. Rationale: the direction's palette is authoritative.

NFR-3 — Typography constraint Headings use Anton at 400 weight, all-caps, tracking -0.01em, leading 0.86. Arabic devotional lines use Amiri at 1.4 leading, right-aligned, at 60% of the display size. Body uses Archivo 400/500 with 1.6 leading. Labels use Archivo 600 uppercase 11px with 0.14em tracking. Inter, Roboto, Poppins, Montserrat, and any neutral geometric sans are forbidden as the display face. Provenance: creative direction.

NFR-4 — Shape constraint Hard edges only — zero border-radius on blocks, cards, and buttons. Full-bleed colour fields butt against each other with 2px ink rules as the only separation. Diagonal red bands cut across the page at -6deg. Provenance: creative direction.

NFR-5 — Readable text and controls Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit; no other element covers any part of them. Provenance: creative direction. Rationale: readability and accessibility at all viewports.

NFR-6 — Reduced motion With prefers-reduced-motion, moving and scrollable content stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. Provenance: creative direction.

NFR-7 — Anonymous access Both the Landing page and the Dashboard are anonymously accessible. No account, sign-in, or identity establishment is required or provided. Provenance: planning scope access contract. Rationale: the narrative is a public story with no private state.

NFR-8 — No chat-bubble dialogue UI Dialogue is rendered as a two-voice poster column, never as chat bubbles. Provenance: creative direction.

NFR-9 — No gradient blobs, glassmorphism, or blurred luminous panels Provenance: creative direction.

NFR-10 — No full-colour photographic hero imagery Where imagery is used, it is a high-contrast monochrome cutout duotoned into ink and red. Provenance: creative direction.

10. Tech Stack

• Frontend: React (web application). Rationale: the product is a first-party web experience with interactive, animated presentation; React supports the component structure (chapter index rail, dialogue column, Names of Allah wall, tahajjud timeline) and the motion requirements.
• Styling: CSS with the specified palette, typography, and shape tokens. Rationale: the creative direction's hard edges, full-bleed colour fields, and diagonal bands are directly expressible in CSS.
• Content: The narrative content is authored into the application as static data. Rationale: no backend service, database, or user account is required; the content is supplied by the authoritative content_source directive.
• No backend, database, or authentication service. Rationale: both pages are anonymously accessible and the content is static.

11. Assumptions and Constraints

Assumptions

• The narrative content supplied in the authoritative content_source directive is complete for the current horizon and is presented as-is.
• The Story Author and Reader are the only active human personas; no additional roles are introduced.
• Both pages are anonymously accessible; no identity establishment is required.
• The creative direction's palette, typography, shape language, layout, motion, and imagery rules are authoritative for the visual presentation.
• The dashboard is a presentation surface, not an authoring tool; content editing is out of current scope.

Constraints

• The dashboard must be beautiful and colourful (explicit).
• The palette is fixed and blue/indigo/violet are forbidden (creative direction).
• Headings use Anton; Arabic uses Amiri; body uses Archivo; neutral geometric sans display faces are forbidden (creative direction).
• Hard edges only; zero border-radius; 2px ink rules as the only separation; diagonal red bands at -6deg (creative direction).
• Dialogue is never rendered as chat bubbles (creative direction).
• No gradient blobs, glassmorphism, or blurred luminous panels (creative direction).
• No full-colour photographic hero imagery (creative direction).
• Readable text and controls stay whole at 375px, 768px, and 1280px (creative direction).
• With prefers-reduced-motion, moving content stops and shows whole items (creative direction).
• No authentication, account management, multi-user collaboration, or content authoring tools are in current scope.

12. Glossary

• Ya Qalbi — "O my heart"; the term of address used by the author to his wife in the narrative.
• Ya Habibti — "O my beloved"; the project name.
• After Maghrib — the chapter label for the narrative's setting: the evening after the maghrib prayer.
• Zohar — the midday prayer (Zuhr); the prayer the author missed during his engineering semester.
• Asr — the afternoon prayer; the prayer the wife missed due to sleep.
• Tahajjud — the voluntary night prayer; the prayer the author was woken for at 2:41 AM.
• Du'a — supplication; the author's pre-sleep request for a sign.
• Durood — the salutation upon the Prophet\x20\xef\xb7\xba.
• Sajdah al-Shukr — the prostration of gratitude; the author's closing act.
• Names of Allah — the divine names referenced in the narrative: Ar Rahman, Al Khaliq, Al Wahaab, Al Wadood, At Tawwab, Ar Rashid, Al Ghafur, Al Ghaffar, Al Rauf, Al Malik, Al Ali, Al Aziz, Al Mujeeb, Al Khabeer, Al Ghafurul Wadood, Ar Rahim, Al Alim.
• Chapter index rail — the narrow 3-column ink rail on the left of the Dashboard carrying the six chapter numerals and titles.
• Two-voice poster column — the dialogue layout: his lines flush left in ink, her lines flush right in red, separated by a hairline rule.
• Names of Allah wall — the 7-block colour grid presenting the divine names and their glosses.
• Tahajjud timeline — the vertical ink rail with tick marks at 2:00, 2:30, 2:41, and 2:50.
• Marquee — the slow horizontal scroll of the line "يَا رَبِّ أُمَّتِي أُمَّتِي" across the ink band.