The whole app, in the new visual language
Every screen in QuranFlow has been redrawn in one visual language — fifty-eight of them, student and coach. Nothing moved, was renamed, or was taken away: the flows, the copy and the destinations are the ones already reviewed and approved. What changed is how it all looks, and how clearly each screen says what matters on it. Each pair below is the same screen before and after; click either to see it full size.
The language, in five rules
- One dark surface per page, and it belongs to whatever that page is really about — the week you are in, the feedback you were sent, the queue waiting for a coach. Everything else sits on warm paper in whitespace.
- Gold is the single act. One gold thing per screen: record, send, join, book. Corrective or secondary work stays plum, so gold never advertises something already finished.
- Width is state, squares are destinations. A wide featured tile is what is happening now; a slim row is upcoming or ended; a square is a place you can go.
- Colour carries meaning, not decoration. Sage means a circle, plum means a class or a one-to-one, and the dawn wash over a home screen tracks how that week is actually going.
- Whitespace is the brand. The ground exists to let the uncoloured things stand out.
The three screens the language was proven on
Today, Learn and Sessions were rebuilt first and reviewed on their own, because everything after them inherits their decisions: the tile grammar, the dawn wash, the species colours and the glass tab bar.
S17·S19Today
The deck leads with whatever is actually happening now. The dawn wash tracks the week's state, so the screen reads differently when feedback has landed than when nothing is waiting.
S42·S70Learn
Fifteen weeks as a garden rather than a grid of numbers: each week is a plant at its own stage, and the numerals stay live text over the art.
S38Sessions
The day as a timeline, with the term's shape above it and each session wearing its own species colour — sage for circles, plum for class and one-to-ones.
The core loop — watch, recite, hear back
The ten screens a student passes through every week. This is where the delight budget is spent: the recorder as a ceremony surface, and the feedback screen as the payoff.
S50·S69Assignments
The week's state owns the page's one dark surface; everything you have ever sent sits beneath it in the five-state history.
S21The lesson player
No night register: the page stays warm paper and the dark is contained inside the media stage.
S56Before the mic
What this week asks of you, read before you record.
permissionAsking for the microphone
The priming gate, with allow as the one gold act.
S22The recorder
The passage becomes the page's hero, set like a mushaf page, and the mic is the only gold thing on the screen. While recording, a red dot and a tag — nothing else moves.
S23Hear it back
Keep the take or record again; sending is the forward act, so it is gold.
S24Sent
The ceremony beat: the shamsa blooms, the words rise, and the check draws last.
S25With your coach
Waiting, stated plainly — and you can still take it back.
S26Feedback
The payoff. Her voice note is the page's one dark surface, her corrections are anchored into the passage in gold, and each anchor carries its own player.
S60Returned
The take that came back, with both recordings. Re-recording is plum, not gold — corrective work reads as work, not celebration.
Four questions the language had not answered
Each was designed on its own before anything was built on it.
live-classThe night register — the live room
Ruling: the live room is the one legitimate full-frame dark. S21 contains its dark inside the media stage because the page around it is reading material. Here the room is the screen, so the kit's stage recipe (deep dark plus its radial gold warmth) extends to the frame. The lobby shares that dark as the room's threshold rather than going paper. “One dark surface per page” still holds — the page and the surface are one thing.
S45The chat thread — messages
Ruling: her voice is the featured artifact; everyone else stays on paper. A coach voice note carries S26's ink-note DNA — the page's dark surface, gold transport, the rate chip at the transport's trailing edge. Text turns stay quiet: the other person on the warm tile ground, your own in a plum tint, never a saturated bubble pair. The composer's one round act is gold. This ruling also governs the coach's inbox (C15) in Batch 4.
S33The calendar surface — booking
Ruling: a calendar is quiet paper, a sibling of Learn's garden. The month grid sits on the garden's cream panel with a serif month title; day numerals stay ink and tabular; selection and the week rail stay plum because structure is plum. Gold appears only for facts (the semester date rule) and for each screen's one committing act. No dawn, no dark surface — a calendar is not media. One decision covers S62, S63, S64 and S65.
S29The ceremony register — graduation
Ruling: the same register as S24, turned up honestly. Kicker, mark, dots, serif line, quiet facts, one gold action. The medal's face takes the page's one dark surface and its numeral turns gold-leaf serif; the halo breath is a shade wider than the sent-ceremony's. The completion shamsa was deliberately not borrowed — its two sacred jobs stay its own. No new “mastery” asset is needed; the dark-faced medal carries the beat.
Two roots from the approved proof
S57 and S43 were designed and signed off in the canon proof. These are those compositions built as living screens.
S57Appointments — the Year 2 root
Nothing imminent means nothing featured: honest width, date-as-title with the plum with-line, upcoming above past, booking as the one gold act.
S43You — the identity root
The coach card is the page's dark surface — a gateway, not decoration — and the utility rows carry the quiet disc with its plum glyph. Week progress sits under the name.
Entry — nine screens
The calm paper register: serif titles, cream ground, one gold action per screen, forms as paper rows rather than boxy inputs. The four-stage recorder follows the approved S22 grammar exactly, and placement's three states follow the ceremony register.
S01Sign in
The plum brand disc with its gold qaf, fields as paper rows.
S52A few details first
The hard-gate profile form, quiet until it can proceed.
S02Welcome
The arrival beat, in the ceremony's quieter cousin.
S03How placement works
Three calm steps as slim tiles with utility discs.
S04Your first recitation
Four stages, one recording — the overview.
S05The first recorder
S22's recorder grammar: passage panel, the one gold mic, red dot and tag while recording.
S06Your recitation
Four completion marks, then send for placement.
S08·S09·S58Your level — three states
Placed, auto-placed, and returning: the ceremony register with the level arch.
S07·S59Level 0 home
A mini-Today for the pre-placement student, carrying the Today and Sessions patterns.
Orientation — six screens
One chained flow. The titles hold a 34px serif grade rather than the roots' 40px, because every step carries a progress bar above it and a form below.
S53What your level covers
The four skills move inside one featured tile that says whose list it is.
S12Meet your coach
Her welcome audio was rebuilt, not restyled: the app's standard transport with the rate chip at the trailing edge, since the kit's voice card carried none. Her bio facts become utility rows on one card — one person, not three loose facts.
S13What the semester asks of you
Watch, send, feedback as slim tiles. All three discs are plum: sage would say “circle” beside her feedback, and a gold disc mid-page would pull against the page's one gold act.
S14Live circles
The one orientation screen speaking species colour in full — sage for the reading circle, plum for the level class.
S15When are you free
Interaction byte-identical; the 56 loose squares become one warm panel with quiet cells. Selection is plum because selection is state, leaving gold to Continue alone.
S16Reminders are on
Toggles as quiet rows on one tile; the heading joins the chain's serif voice.
Year 2 — five screens
Mastery's arrival and its shape. Today-Y2 mirrors the Batch-1 Today exactly, with appointments in the deck.
S54Welcome to Mastery
The straight-to-Year-2 arrival.
S30Advanced Tajweed Rules
What the semester covers, and the electives not yet chosen.
S31One week, one meeting
The Year 2 rhythm — watch, meet, notes.
S37Your elective
The second-semester rundown, with its own intro player.
S32Today, Year 2
The Batch-1 Today with appointments in the deck; same dawn, same grammar.
Appointments and booking — four more
The rest of the 1:1 chain, on the calendar decision above.
S34Booked
The confirmation in the sent-ceremony's register.
S35·S71One 1:1, whole
Upcoming and past states: facts first, then prepare, then the ways to change it.
S36Teacher's notes
After the 1:1 — her voice note as the dark surface, numbered notes beneath.
S65The booked semester
The same month grid at appointment scope.
Sessions and Learn drills — five screens
Detail and list pages hanging off the two tab roots.
S39Session detail
The meta row becomes tile anatomy, wearing the same species colour and mark the timeline row used, so arriving here feels like the same object opened.
S41Recordings
One slim tile per recording with a gold progress hairline for part-watched rows. No rate chip: these rows carry no player, and a chip would promise a control the row does not own.
S55Full semester syllabus
Fifteen slim tiles carrying Learn's four week-states in list form.
S68Previous levels
Finished levels, their lessons, and the feedback that came back. Her recording here does keep its rate chip — that row genuinely plays.
S61Resources
Split by behaviour rather than by heading: the four handed-you documents open in place; the two rows that navigate become squares wearing the same marks Learn's Library gives them.
You and comms — eight more
Account, history, and the one-way and two-way message surfaces.
S66Subscription
Enrollment and payments on file.
S67Learning history
Every semester you have been enrolled in.
S44Your coach
Her profile, and the way to reach her.
S46Personal details
Account fields; sign out stays quiet, never gold.
S47Notifications
The inbox, with its empty state.
S48Notification settings
Category toggles as quiet rows.
S49Announcements
The one-way board, filtered.
S51Report an issue
The sheet, over whatever you were doing.
The coach app
Thirteen screens. Two rulings govern them: she gets no separate world — same dawn, same tiles, same species colours, no accent of her own — and the dark register belongs to whatever the page hands her, never to what she is still making.
C10Her day
Ruling: the coach gets no separate world. Her dawn is the quiet sibling strength, never the student's: a student's wash is news — has feedback landed — while a coach's home is a working surface she opens many times a day, and weather that sang each time would be noise. The review queue takes the page's one dark surface because the queue is what the page hands her; a coach with no queue correctly gets no dark surface at all.
C02·C03The review
Ruling: the dark belongs to the recording you were given, never the one you are making. On the student's feedback screen the dark is her coach's voice note — the thing handed to her. Mirror the seats and the same rule puts the dark on the student's take here. The coach's own note stays paper while she drafts it, and turns dark later on the student's screen, once it has become the thing she was given. The register travels with the handover, not with the person.
C01The queue
Oldest first, with the promise she has made to students stated at the top.
C11Placement
A level, not feedback — so it borrows the review surface without the anchoring grammar.
C04Students
Her workload, and who has gone quiet.
C05·C06One student
What recurs across her semesters, and the whole record beneath.
C07Schedule
One schedule, filtered two ways — the same species colours the student's Sessions uses, so an event reads the same from both sides.
C08After the one-to-one
Her notes, edited then sent. She is authoring here, so the note stays paper.
C14Every level
The whole curriculum, searchable, level by level.
C15Her inbox
The same chat grammar as the student's thread, seats swapped.
C18Announce
In her own name, to the students she chooses.
C16Her hours
What the app logged for her, and what she corrected.
C09Her corner
What this page hands her is her hours, so that is what takes the dark.
