Designing Calm: The Visual Language of Noor-ul-Quran
Reading the Quran should feel calm, focused, and reverent — never cluttered. Here are the design principles behind every screen in the app.
Most apps are designed to capture attention and hold it. A Quran app should do the opposite: it should get out of the way and let the text breathe. From the first sketch, our design has been guided by one question — does this help the reader focus on the words, or does it distract from them?
Principle 1: The Text Comes First
Everything that is not the Quran is quiet. Controls fade until you reach for them. Colors are muted. The Arabic is given room to breathe, set in a proper Uthmani typeface at a comfortable size, right-aligned so it reads naturally from right to left.
When you open a surah, the first thing you should notice is the verse — not a toolbar, not a banner, not a badge.
Principle 2: Calm Color
We built the reading experience on a deep, near-black background with a single restrained green accent. Dark backgrounds reduce eye strain during long sessions and at night, and they make the text feel like it is resting on a still surface rather than competing with a bright screen.
Color is used sparingly and only with meaning: green when you recite a word correctly, red for a mistake, gold for the markers that have always belonged to the Mushaf.
Principle 3: Honest Typography
The Quran uses a specialized script with marks that stack and connect in ways ordinary fonts cannot handle. We render it in a true Uthmani (Hafs) typeface so that every sukun, every elongation mark, every pause symbol sits exactly where it should. We never simplify or substitute the script for the sake of convenience.
Principle 4: Motion With Restraint
Transitions are gentle and quick. Nothing bounces for attention. When a word lights up during recitation, it does so softly. The aim is a sense of steadiness — the feeling of turning a page, not refreshing a feed.
Why It Matters
Design is not decoration. For a Quran app, design is adab — the manners with which we present something sacred. A calm, focused, reverent interface is itself a small act of respect for the text. That is the standard we hold every screen to.
