Qira: Designing a Quiet Quran App
"The content of the Quran is already profound. The job of the interface is to get out of the way and let it breathe."
Qira is a Quran reading and listening app built with Expo and React Native. It runs on iOS, Android, and the web from a single codebase. This post walks through the design choices behind it: the vertical carousel, the card flip, the color system, the typography, and why every one of those choices points back to the same goal of quiet focus.
Start With Nothing
The best place to start when designing an app for focused reading is to resist the urge to add things. No gradients, no decorative patterns, no hero banners. The home screen is almost entirely empty: a search bar at the top, a single chapter card below it. That is the whole thing. The goal was to communicate that this is a calm space.
Almost empty
A search bar and a single chapter card. Nothing else competes for attention. The content is the UI.
One accent, everywhere
Green appears on active icons, interactive elements, and the audio progress ring. Nowhere else. That scarcity gives it meaning.
Solar BoldDuotone
Every icon in the app comes from the same set. Weighted, present, consistent. No visual friction from mixing families.
The Vertical Carousel
Rather than a flat list of 114 chapters, you scroll through them one at a time. Each card snaps into place with a spring animation. Cards that are slightly off-screen scale down and fade. The active card is crisp and full-size. Adjacent ones recede. It creates a sense of physical depth, like flipping through cards in your hand rather than scanning a spreadsheet.
Cards off-screen scale down and fade with interpolated opacity and transform values
Spring animation snaps each card into place with a soft, physical feel
A haptic pulse fires on each snap: a soft impact on iOS, a brief vibration on Android
Reanimated runs the whole thing on the UI thread, so gesture response is immediate
The Card Itself
Each chapter card is a self-contained world. The surah name renders in a custom Arabic calligraphy font at a large size. Below it, the English transliteration and translation in a lighter weight. Pill badges show the verse count and whether the chapter was revealed in Mecca or Medina. Actions live along the bottom: favorites, notes, description, read, and audio.
The flip animation
Tapping the description icon triggers a 3D perspective rotation that reveals the chapter introduction on the back. The flip uses a cubic easing curve over 500ms: fast enough to feel responsive, slow enough to feel deliberate. It is one of those small interactions that makes the app feel finished.
Design note: The easing curve was tuned by feel, not by formula. 500ms with a cubic ease-in-out landed right. Faster felt cheap. Slower felt sluggish.
Tech Stack
Every dependency earned its place.
Typography as Hierarchy
Three text sizes do the meaningful work: a large display size for chapter names, a standard body size for descriptive text, and a small size for labels and metadata. For Arabic, the app loads Amiri, a classical typeface designed for digital use. For the surah name glyphs, a separate custom font renders them at 70px or larger. These are glyphs, not images, which means they scale cleanly and respond to accessibility settings.
Amiri loads for Arabic body text: classical, historically informed, readable at any size
Surah name glyphs are a separate custom font rendered at 70px or larger, not images
Three scale levels with matching weights: medium body, semibold titles, bold emphasis
Maximum content width on tablets and web keeps lines from stretching too wide
What I Learned
Quiet by design.
The hardest thing to design is restraint. Every decision to not add something, not animate something, not reach for a color: those are the choices that accumulate into a feeling. The feeling Qira is going for is quiet focus. A place to read, to listen, to reflect.
Qira is still being built. The features that exist are polished; there is more to come. But the foundation, the visual language, the interaction model, the quiet tone, those are set. Everything that gets added will have to earn its place in that space. That is the constraint, and it is the right one.