Mishkat Brand and Digital Experience Design + Build

Brand Identity · Website Design · Mobile App Design

Mishkat is a Quran-and-Sunnah companion built around everyday life. Someone might arrive with a question about anger, family, work, or a habit they want to change. The product’s purpose is to help them find relevant guidance, understand its source, and take one practical action.

We shaped the brand, website, and mobile experience around that journey, giving Mishkat a visual language that feels thoughtful, welcoming, and easy to return to.

The central design question was how to make guidance approachable while giving its sources the attention they deserve.

A person may know what they are struggling with without knowing which topic or passage to search for. That made the starting point especially important. Mishkat needed to welcome questions in the language of everyday situations, then provide a clear path into learning and practice.

The experience also needed to feel manageable. Reading an answer, saving something meaningful, and returning to practise it should each have an obvious place.

The home screen opens with a greeting and a direct invitation: “What guidance do you need today?”

Search sits at the top, supported by quick topics and categories such as emotions, worship, and family. This gives people room to ask their own question or browse when they need a little direction.

Below that, daily reminders and an active habit bring the experience back to something specific. A prompt such as pausing before responding in anger gives the user a small action to carry into their day.

That relationship between guidance and practice became the organizing idea for the product.

Royal purple leads the identity, with lavender, soft lilac, deep navy, and warm gold supporting it. Pale backgrounds give the content breathing room, while stronger purple draws attention to search, featured guidance, and primary actions.

The typography combines expressive serif headings with simple interface text. It gives the brand warmth while keeping navigation and longer passages straightforward to read.

Islamic arches, geometric patterns, lanterns, and crescent imagery shape the wider visual world. These elements frame the product in the brand applications, with a lighter touch inside the interface where the content needs space.

We extended the visual direction into a UI system covering buttons, search fields, cards, navigation, icons, spacing, and corner styles.

Daily guidance, learning content, saved items, and progress each have recognizable treatments. Repeating those patterns gives users familiar cues as they move through the app and gives future screens a consistent foundation.

Source access is part of that hierarchy. The designs place “View Source” alongside guidance, while saving and habit actions connect what someone has read with what they want to revisit or practise.

The website introduces the product through a simple promise: “Find the Sunnah Way for Today.”

App previews sit close to that message, showing what the experience looks like before asking someone to download it. The page then explains the core sequence: search a real-life question, explore source-backed guidance, and save a daily action.

Sections on learning, the Qari network, and common questions introduce the wider product. Alternating light lavender and deep backgrounds give the page rhythm, with the same typography and imagery carrying through from the app.

The presentation extends into billboard and outdoor mockups, where the phone interface becomes the central visual. Purple, architectural framing, and short messages connect those larger compositions to the quieter experience inside the app.

The resulting design gives Mishkat a consistent identity across product and promotion, built around a practical purpose: helping people bring what they learn into the way they live.