Quran App · Design review mockup
Mockup for designer review

Quran App: screens selected for the final design

This file collects the screens that are staying in the product. Everything here is a working layout, not final visual design. Use it to understand structure, content and hierarchy, then redesign each screen for the full site.

Status
In progress, sections added one at a time
Sections
2 (Home & Feed, Reader)
Updated
25 Sep 2026
01

Home & Feed

Source: Quran App (for Figma).html

The two main entry screens. Flat palette with a five-tab bottom navigation (Home, Feed, Quran, Planner, Settings). Taken from Dashboard concept 3b, which is the working baseline.

10:42
Search surah, juz, page
12 day streak
M
T
W
T
F
S
S
Pick up where you left
Al-Baqarah
Ayah 148 · Juz 2 · 34% 2 min ago
Reading plan
Complete by 16 Jan 2027
42%
254 of 604 pages ~2 pages/day
New in Feed
Why the last two verses of Al-Baqarah are recited at night
10:42
Feed
For you Ayah Watch Tafsir Dua
Verse of the Day
Editorial desk · 2h ago
Ayah
لَا يُكَلِّفُ ٱللَّهُ نَفْسًا إِلَّا وُسْعَهَا
God does not burden a soul beyond what it can bear.
Al-Baqarah 2:286
Alafasy · 0:24
Watch · Tafsir in 3 minutes
Editorial desk · 5h ago
Video placeholder 3:12
Why the last two verses of Al-Baqarah are recited at night
A short reading of the closing du'a of the surah — placeholder summary line for the post.
12.4k watched
Reading notes
Editorial desk · yesterday
Six words in Juz 2 that change how you read the rest
4 min read · Placeholder
You're all caught up · new posts each morning
Palette (current)#EDF2F0 bg · #0E2321 ink · #86D0BF accent
Typography (current)System UI for interface · Amiri for Arabic · Cormorant Garamond for translation
NavigationFive tabs: Home, Feed, Quran, Planner, Settings
02

Reader

Source: Quran Reader (standalone).html Interactive

The reading screen, in two modes: Muṣḥaf (printed page) and Āyah (verse by verse with translation). This one is fully clickable, so try it directly on the phone.

9:41
JUZ 1 سُورَةُ الْفَاتِحَةِ
سُورَةُ الْفَاتِحَةِ
MAKKĪ · 7 ĀYĀT

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ١ الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ٢ الرَّحْمَٰنِ الرَّحِيمِ٣ مَالِكِ يَوْمِ الدِّينِ٤ إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ٥ اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ٦ صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ٧

01
JUZ 1 سُورَةُ الْبَقَرَةِ
سُورَةُ الْبَقَرَةِ
MADANĪ · 286 ĀYĀT
بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ

الم١ ذَٰلِكَ الْكِتَابُ لَا رَيْبَ فِيهِ هُدًى لِّلْمُتَّقِينَ٢ الَّذِينَ يُؤْمِنُونَ بِالْغَيْبِ وَيُقِيمُونَ الصَّلَاةَ وَمِمَّا رَزَقْنَاهُمْ يُنفِقُونَ٣ وَالَّذِينَ يُؤْمِنُونَ بِمَا أُنزِلَ إِلَيْكَ وَمَا أُنزِلَ مِن قَبْلِكَ وَبِالْآخِرَةِ هُمْ يُوقِنُونَ٤ أُولَٰئِكَ عَلَىٰ هُدًى مِّن رَّبِّهِمْ وَأُولَٰئِكَ هُمُ الْمُفْلِحُونَ٥

02
JUZ 1 سُورَةُ الْبَقَرَةِ

إِنَّ الَّذِينَ كَفَرُوا سَوَاءٌ عَلَيْهِمْ أَأَنذَرْتَهُمْ أَمْ لَمْ تُنذِرْهُمْ لَا يُؤْمِنُونَ٦ خَتَمَ اللَّهُ عَلَىٰ قُلُوبِهِمْ وَعَلَىٰ سَمْعِهِمْ وَعَلَىٰ أَبْصَارِهِمْ غِشَاوَةٌ وَلَهُمْ عَذَابٌ عَظِيمٌ٧ وَمِنَ النَّاسِ مَن يَقُولُ آمَنَّا بِاللَّهِ وَبِالْيَوْمِ الْآخِرِ وَمَا هُم بِمُؤْمِنِينَ٨ يُخَادِعُونَ اللَّهَ وَالَّذِينَ آمَنُوا وَمَا يَخْدَعُونَ إِلَّا أَنفُسَهُمْ وَمَا يَشْعُرُونَ٩ فِي قُلُوبِهِم مَّرَضٌ فَزَادَهُمُ اللَّهُ مَرَضًا وَلَهُمْ عَذَابٌ أَلِيمٌ بِمَا كَانُوا يَكْذِبُونَ١٠

03
Muṣḥaf Āyah Aa
ThemesPaper #F3EFE7 · Dusk #242833 · Accent #3A5697
TypographyAlbert Sans for UI · Newsreader for translation · Arabic: Naskh, Amiri, Scheherazade or Uthmānī
ModesMuṣḥaf (page) and Āyah (verse list), switched from the floating bottom bar