Creative direction
The point of view, in one paragraph and six rules.
Baseerah should feel like a sequence of quiet rooms rather than a website that is trying to persuade. The visitor moves from a dark, atmospheric threshold into warm cream rooms, each holding one thought, then into a deep espresso room where the standard is stated. Architecture, light and geometry do the visual work; the typography is spacious and editorial; the interface is understated enough to leave the argument to the words.
Concept: a contemporary Islamic study, held in stone, paper and light. Large display serif headlines set against generous negative space communicate conviction without volume. Full bleed architectural imagery creates scale and stillness; cream scenes create room to think; olive appears only as a mark of emphasis. The palette is the locked brand palette, never borrowed from mood led personal development design. The experience should read as a serious academy, not a campaign.
Six rules that resolve design decisions
- One idea per scene. A scene has one claim, one supporting sentence, and at most two actions. This prevents the page from becoming a catalogue of promises.
- Depth before decoration. Contrasting dark and light sections carry the rhythm. There are no ornamental gradients, floating shapes, glass cards or auto moving carousels.
- Scholarship is visible. The fatwa, the review agreement and the boundaries are designed as content, not fine print tucked into a footer.
- No manufactured urgency. Dates and fees are presented as facts. There is no countdown, flashing availability, testimonial pressure or result claim.
- Faith before aesthetics. Arabic is always correctly typeset, translated and referenced. Imagery excludes living beings. No music, no party visual language.
- Quiet interaction. Motion is small, slow and always optional. Reduced motion is a first class state.
The audience is alert to anything that feels like a repackaged secular promise. Restraint, visible scholarship and slower pacing build trust before aspiration; visible urgency or wealth signals would undermine the same trust.
“Clarity that honours your deen.”
Homepage threshold · the single promise the system must support
Architecture and navigation
How the site is organised, how the visitor moves, and what the navigation deliberately leaves out.
Site structure
| Level | Page | Purpose | Primary action |
|---|---|---|---|
| 01 | Home | The need, the foundation, the Method, the three tiers, scholarship, questions and enquiry in one narrative. | Explore the Method / Enquire |
| 02 | The Method | The seven characteristics and how they are held within the limits of the academy. | Read the programme |
| 02 | Programme | Free framework, self study, live certification, one to one places, funded places, intake dates and fees. | Enquire about a tier |
| 02 | Scholarship | Founding fatwa, Scholarly Review Agreement, curriculum boundaries and referral process. | Ask about the review |
| 02 | About | Why the academy exists, who it serves, what it refuses, and the limits of its work. | Begin an enquiry |
| 02 | Enrolment and contact | Dates, format, fees, funding, the enquiry form and contact route. | Send an enquiry |
| Utility | Design specification | Stage 1 reference for the team. | No visitor action required |
| Utility | Brand guidelines | Stage 2 operating manual for collaborators and vendors. | Download or print |
Navigation model
The homepage is a single narrative with anchor sections. The primary header is fixed and has three layers: a narrow utility strip with Cohort One dates, the brand lockup, and five text links with one pill shaped enquiry action. Main links are The need, The Method, Programme, Scholarship, Questions. The enquiry action is Enrolment enquiry. There is no search, account, basket or social row in the header.
- Desktop: fixed header, 31px utility strip plus 82px navigation row. At the top of the page the nav is transparent over the hero and the type is cream. Past 26px of scroll it becomes cream at 97% opacity, espresso type, a 1px bottom rule, and a soft shadow.
- Mobile, 1024px and below: the primary link list and header pill are hidden. A 44px circular menu control opens a full screen espresso drawer. The drawer uses display serif links at 32 to 50px, numbered 01 to 06, with the next intake and one cream enquiry button at the base.
- Focus and escape: opening the drawer moves focus to the close control. Escape closes it. Focus returns to the menu button. The body is locked while open.
- Footer: logo, one sentence descriptor, five explore links, next intake summary and utility links. The specification and guidelines live in the footer, not the visitor navigation.
- Anchors: native smooth scrolling with 120px scroll margin at desktop and 98px on mobile, so fixed headers never cover a heading.
A small, confident navigation model keeps the site focused on one path: understand the basis, understand the Method, choose a depth, enquire. The utility strip gives the closest deadline without turning it into a sales device.
Page layouts, scene by scene
Every scene on the homepage, followed by the programme, about and enrolment pages.
Shared layout rules apply throughout: maximum content width 1320px; outer gutters clamp(20px, 4vw, 56px); major section padding clamp(88px, 10vw, 152px) vertical; mobile major padding 76px 0; body measure 540 to 570px; headline measure 650 to 830px. The grid is 12 columns conceptually but implemented with CSS grid pairs and thirds. No layout uses more than two visual ideas at once.
| Scene | Canvas | Composition and content | Intent |
|---|---|---|---|
| 01 · Threshold The hero | Full bleed mosque interior, espresso overlay | Minimum height max(760px, 100svh); inner starts with eyebrow and paired Arabic at opposite edges; H1 at 3 lines beside a 340px introduction; a four item rail below. Primary cream button plus outline button. Image at object-position 50% 54%, desaturated and sepia treated, no people. | State the audience, the promise and the standard in under ten seconds. |
| 02 · The need About the tension | Cream | Two columns 1.12fr / 0.78fr, gap up to 126px. Left: eyebrow, 3 line H2, two short paragraphs, and a 1.45 to 1.85rem display pull line with an olive left border. Right: a 0.77 ratio arched architectural image, caption rail, and a vertical side note. | Name the tension without mocking the sister or naming rival methods. |
| 03 · Foundation The definition | Espresso with geometric pattern | Two columns 1.02fr / 0.72fr. Left: H2, a short paragraph, then one Qur'aanic passage in Arabic, paraphrased English, source, then application. Right: arched architectural image that disappears under 1024px, followed by three principle rows with hairline rules. Pattern sits at 26% opacity. | Establish the epistemic standard first. Beauty supports the claim, not the reverse. |
| 04 · The Method Seven characteristics | Cream, tan explorer, espresso stage | Heading grid 0.9fr / 0.66fr. Below, a two column component with a 7 item tab list and a 488px minimum stage. Stage shows count, paired Arabic, transliteration with meaning, H3, description and a practice note. Tabs are numbered 01 to 07; selected state inverts to espresso with a 2px olive left edge. | Make the Method tangible without turning character into a technique. |
| 05 · Programme Three depths | Cream, tan and espresso cards | Header left, 300px note right. Three equal cards, padding up to 38px, minimum height 555px, no radius except none; free is tan, self study cream with a rule, live certification espresso. Facts use hairline rows. Funding strip is tan, full width, 100px minimum. A single fee note closes the scene. | Compare without competition language, ranking or artificial highlight pressure. |
| 06 · The year Certification detail | Espresso with pattern | Two columns 0.8fr / 1.2fr. Left column is sticky at 130px from the top: H2, intro, four meta rows. Right: three levels as numbered rows, then a bordered one to one panel, then a scope footnote. CTA is a text link style. | Explain the commitment and its limits, not a transformation promise. |
| 07 · Our hope Cinematic interlude | Full bleed architectural courtyard, espresso overlay | Minimum height 490px. Text stack left: eyebrow, large four word statement, one attribution sentence. Arabic phrase with English meaning sits at lower right; mobile positions it in flow. Directional overlay only, never decorative gradient. | Offer a faith centred definition of success: clarity, barakah, alignment, trust. |
| 08 · Scholarship The basis | Tan | Two columns 0.79fr / 1.21fr. Left: 0.84 ratio arched geometric image, caption and offset hairline corner. Right: H2, fatwa summary, a founding review card, three basis rows, CTA opening the scholarly basis dialog. | Make review and accountability legible, not decorative fine print. |
| 09 · FAQ Questions | Cream | Two columns 0.72fr / 1.28fr. Left is sticky at 130px with heading and direct email link. Right uses seven native detail rows, 22px vertical summary padding, 25px circular plus/minus control. | Remove practical uncertainty without sales handles or false objections. |
| 10 · Enquiry Beginning | Espresso with pattern | Two columns 0.92fr / 0.78fr. Left: heading, 410px intro, four date rows, contact. Right: cream form card with 2px olive top accent, 2 column fields, full width select and textarea, consent, 50px submit. Success state replaces the form, not the whole page. | Make the first step low pressure, clear and human. |
| Footer | Espresso | Three columns 1.25fr / 0.75fr / 0.65fr, then a very large low contrast wordmark as texture. Bottom row separates the copyright from utility documents and contact. | Close with identity and dates, not a final sales push. |
Programme and tiers page
Scene 1, threshold: 70svh minimum, architectural image right or full bleed with a cream reading plane, H1 “Three ways to study. One foundation.” and a 2 sentence introduction. Scene 2, tier comparison: three full cards with price, format, access, dates, funding and one enquiry action. Use the exact values in the visual mock. No “most popular” badge, no crossed out fee, no savings claim. Scene 3, year plan: the three levels with dates and a note that certification is completion, not authority. Scene 4, funding: two fully funded and two half funded places per intake, trust based, with no documentation; offer a request in the enquiry rather than a separate hardship form. Scene 5, practical questions: 6 to 8 accordion items. Scene 6, enquiry: same form component, preselected tier. Spacing: 96 to 152px between scenes, 1320px max, 15px card gaps.
About page
Scene 1, a stated reason: a 70svh arched image or architectural full bleed, H1 “An academy built on what is sound.” and the one paragraph purpose. Scene 2, the tension and answer: reuse the homepage need copy, with a 2 column editorial statement and a short list of what the academy refuses without naming rival frameworks. Scene 3, who it serves: three plain audience statements, no demographic status signalling. Scene 4, founding basis: a cream page with a 2 column scholarship treatment and a link to the full scholarly basis. Scene 5, the Method in one paragraph: link to the Method. Scene 6, boundaries and care: a tan panel listing that the academy does not issue religious verdicts and refers beyond its scope. Scene 7, enquiry. Use portrait imagery of geometric detail or architecture; no founder portrait, no stock smiling women, no “team” photography of living beings.
Enrolment and contact page
Scene 1, facts first: H1 “Begin with a question.”, 90px intro, and a date block. Scene 2, tiers in brief: a 3 row table on cream with fee and format and an inline link to the full programme page. Scene 3, enquiry: two columns 55/45: the form beside a calm espresso panel containing the email, the funded place note and the response expectation. Scene 4, what happens next: three numbered plain steps: enquiry reviewed, eligibility or fit discussed, enrolment agreement and payment only if proceeding. Scene 5, policies: refunds and cancellation only once approved policy text exists; never invent. Success state: replace form with a 3 sentence confirmation and a way to send another question. No urgency: no countdown, modal, queue, scarcity meter or auto follow up promise.
Each page uses the same few scene recipes so the brand remains coherent as the site grows. The programme and about pages are built as reading experiences rather than corporate sales pages because the visitor is evaluating trust before she evaluates format.
Colour system
Five locked colours, each with one job. Accessibility wins when the locked roles compete.
Meaning and assignment
- Cream pearl is the room you can think in. It is used for the default page, quiet scenes, input surfaces and any passage that asks for attention. Cream on espresso is the preferred high contrast pairing.
- Soft tan is structure that does not shout: cards, field surfaces, secondary bands, the archival paper behind the Method. It should sit next to cream, not cover the whole site.
- Muted mauve grey is a supporting memory, never a message. It is used for 1px rules, inset outlines, decorative geometry and image captions combined with espresso text where legibility matters. It does not carry meaningful small text on any locked background because it does not meet AA.
- Olive is the single expressive note: a large italic phrase, a left border on a pull quote, the 2px form accent, the focus ring on light, numeration and a tiny seal. It is never used as a small paragraph colour and never on espresso for text.
- Deep espresso is gravity: the hero, the Method stage, the year, scholarship passages and the enquiry. It is also the default button. It should not appear as a generic footer only; it is part of the emotional rhythm.
- Warm white #FCF9F3 is a contingency only for critical text or controls on deep image fields where cream loses legibility. It is not a sixth brand colour.
Contrast pairings and AA decision
primary body and headings11.0:1 · AAA
deep sections and footer11.0:1 · AAA
secondary cards and notes8.9:1 · AAA
#6B5E53 for body and captions5.1:1 · AA
large display and UI rules only3.9:1 · large only
decorative only; never text3.0:1 · no body use
Nonnegotiable: small labels, captions and body copy use espresso or the approved soft espresso #6B5E53 on cream, or cream and #D7CCB9 on espresso. Do not place olive or mauve behind or inside small type. Do not use faint 40 to 60% opacity on 8 to 10px type. Minimum small text contrast at 4.5:1 is checked before release.
State colour
There are no red or green status colours. Error is communicated by a 2px espresso underline, the error sentence and an accessible live region. Success uses an olive outline icon with espresso copy. Selected controls invert to espresso with cream marks. Hover shifts surface, not hue. This keeps the locked palette intact and avoids colour alone communicating meaning.
The palette is earthy and scholarly but can become low contrast if all five tones are treated as equally usable. Assigning mauve and olive to non textual roles preserves the locked identity without compromising accessibility, and gives olive real expressive power because it is rare.
Typography
Licensed faces first. Free fallbacks for the visual mock. Arabic never set in a Latin face.
Font families and loading
- Display, Grown: licensed. Use the licensed WOFF2 webfont first. Free fallback for the mock and prototypes: Cormorant Garamond, then Georgia, then serif. Weights 400 regular and 300 italic accent. Never synthesise bold.
- Subheadings, Roca One: licensed. Use the licensed WOFF2 first. Free fallback for the mock: Montserrat at 500, then Avenir Next, then sans serif. Use for short structural titles and interface statements, never paragraphs.
- Body and UI, Montserrat: use 400 regular, 500 medium and 600 semibold. Do not use 300 in small copy. The mock uses the Google Fonts webfont.
- Arabic, Amiri: classical Naskh, 400 and 700, always loaded as a separate Arabic face. Never use Cormorant, Montserrat or a system Latin font for Arabic glyphs, including the salawat symbol ﷺ, peace and blessings of Allaah be upon him. Set
lang="ar"anddir="rtl". - Loading: preconnect to font hosts, use
font-display: swap, and ensure fallback metrics do not create hidden text. Host licensed files yourself in production; do not expose a font without a web license publicly.
Clarity that
honours your deen.
A clear path begins
with what is sound.
The Baseerah Framework
A quiet, guided study. Held within scholarship.
The Baseerah Method · 03
Full hierarchy, exact values
| Role | Face and weight | Desktop size / line / tracking | Mobile size / line / tracking | Case and use |
|---|---|---|---|---|
| H1 | Grown 400; italic accent Grown 300 | clamp 65 to 128px / 0.88 / −0.045em | 54px / 0.90 / −0.042em | Sentence case. One per page. Max 3 lines on hero. Never all caps. |
| H2 | Grown 400; optional italic Grown 300 | clamp 46 to 84px / 0.98 / −0.040em | 42px / 1.00 / −0.035em | Sentence case. One claim per section. Optional 1 phrase italic in tan or olive. |
| H3 | Grown 400 | 32 to 41px / 1.03 / −0.030em | 26 to 36px / 1.06 / −0.025em | Card, level and dialog titles. The Method name may use 58px display treatment inside its stage. |
| Subhead | Roca One 500 | 22px / 1.30 / −0.005em | 18px / 1.35 / 0 | Short interface and card statements only. Never body copy. |
| Body large | Montserrat 400 | 16px / 1.95 / 0 | 13px / 1.90 / 0 | Intro section passages. Max 62 characters per line. Espresso or soft espresso. |
| Body | Montserrat 400 | 13.5px / 1.90 / 0 | 12px / 1.85 / 0 | Secondary description and lists. Never below 12px for sustained reading. |
| Small | Montserrat 400 or 500 | 10.5 to 11.5px / 1.7 / 0.01em | 10 to 11px / 1.7 / 0 | Metadata, captions, terms. Minimum 4.5:1. |
| Label / eyebrow | Montserrat 600 | 9 to 10px / 1.4 / 0.20em | 8.5px / 1.4 / 0.14em | Uppercase. One short line, max 70 characters. Usually preceded by a 31px rule. |
| Button | Montserrat 600 | 10.5px / 1 / 0.14em | 9 to 9.5px / 1 / 0.13em | Uppercase. Sentence or 3 words. Never bold below 500. |
| Arabic verse | Amiri 400 | 36px / 1.90 / 0; RTL | 28px / 2.00 / 0; RTL | Arabic first, English paraphrase second, source third, application fourth. Never unpaired. |
| Arabic display seal | Amiri 400 or 700 | 22 to 56px / 1.1 / 0; RTL | 17 to 38px / 1.1 | Pair immediately with its English meaning. Never a standalone transliteration. |
قُلْ هَٰذِهِ سَبِيلِي أَدْعُو إِلَى اللَّهِ عَلَىٰ بَصِيرَةٍ
“Say: this is my path. I call to Allaah upon clear insight.”
Qur'aan, Soorat Yoosuf 12:108 · meaning paraphrased
Grown's high contrast display voice gives the site editorial confidence and gravity; Roca One offers a warm structural counterpoint; Montserrat keeps practical content plain. The scale contrast is dramatic but the body remains quiet and readable, which mirrors the argument: strong foundations, gentle accompaniment.
Components
Every repeatable element and its exact specifications.
Buttons and calls to action
Light surface states
Deep surface states
- Primary: espresso fill, cream text, 1px espresso border, minimum height 50px, horizontal padding 26px, 999px radius, 10.5px semibold uppercase, 0.14em tracking. Hover: transparent fill, espresso text on cream surfaces; cream stroke and cream text on deep surfaces. Transition 350ms ease.
- Outline: transparent fill, 1px border in 36% espresso or 46% cream, current text colour. Hover inverts to a full espresso or cream surface as appropriate.
- Text action: 10.5px semibold uppercase with 12px gap and 1px bottom rule. Hover moves the arrow 4px and closes the gap by 5px. It is used inside cards and section footers.
- Navigation pill: minimum height 38px, padding 0 20px, 1px current colour, 999px radius, 9.5px semibold uppercase. Never gradient, shadow or icon only.
- Target size: 44px minimum on touch devices. Inline links are exempt but need at least 24px of non intersecting space.
Section headers and dividers
Each scene begins with a label, then a headline. The label is Montserrat 600 at 10px, uppercase, 0.20em tracking, with a 31px horizontal rule at 60% opacity. The gap from label to headline is 30 to 34px. H2 measure is 650 to 780px. Beneath, a supporting paragraph sits in a separate grid column at 300 to 440px, never centred. Hairline dividers are 1px at rgba(53,45,39,.18) on light and rgba(241,231,212,.22) on deep surfaces. Stronger rules use 36% or 46%. Full width rules sit flush to the container, never with rounded caps.
Programme cards
Frame: 1px border, no radius, padding 26 to 38px, minimum height 555px desktop. Free variant tan with no visible border; self study cream with hairline border; live certification espresso with cream type. Header: 9px label plus 8.5px status, separated from the title by 17px padding and a hairline. Title: H3 display, minimum two lines reserved for rhythm. Price: display 2.35 to 3.1rem on a .9 line, with a 9.5px uppercase cadence and optional 10.5px alternate. Facts: definition rows with 10px vertical padding. Action: pinned to the card base with 30px top padding. Hover: translateY(−4px), shadow 0 22px 52px rgba(53,45,39,.08), 400ms. Hover is suppressed for touch and reduced motion. Never: coloured “best value” ribbons, oversized numerals, crossed out prices or pulsing availability marks.
Card anatomy
A year of study
12 months in three levels. Live accompaniment, held within scholarship.
Field and error
Please enter a valid email address.
Forms
Container: cream card on espresso section, padding 25 to 42px, with a 2px olive top accent 54px wide. Two column grid at 19px row and 15px column gap; single column under 390px. Labels: 8.5px uppercase semibold, 0.13em tracking, 7px above the field. Fields: full width, transparent tan at 42% opacity, no radius, 1px transparent border with a 1px bottom border in espresso at 36%, 12px vertical and 13px horizontal padding. Focus returns cream fill, full espresso border and 1px outer espresso ring. Error uses a 2px espresso underline and an inline sentence with a leading mark. Text area: 94px minimum, vertical resize only. Checkbox: 15px square, espresso check on cream. Submit: full width, 50px, primary style. Success: 42px olive outline circle with espresso check, 37px display title, 3 short sentences, outline reset action. Announce state through a polite live region. Never rely on colour alone.
Method explorer
Frame: tan with 1px espresso 18% border; two columns 0.76fr / 1.24fr desktop; stacked below 760px. Tabs: 16px vertical padding, 22px horizontal; 28px number, 1fr name, auto Arabic; 1px rule between list and stage. Selected: espresso fill, cream text, 2px olive left edge. Hover: cream at 35% over tan. Focus: olive outline. Stage: espresso, 488px minimum, padding up to 56px. Description 13.5px on a 1.9 line, practice note 11px. Keyboard: Up and Down plus Left and Right move focus; Home and End jump to first and last; selection updates the panel and aria-labelledby. Never auto rotate.
Accordions, dialogs and testimonial blocks
- FAQ accordion: native
detailsandsummary; 22px vertical padding; 3 column grid with 30px number, content and 26px circular control; 1px rule. The control rotates its vertical stroke to produce a minus. The answer uses 12px body at 1.9 line with 25px bottom padding. Summary is at least 44px tall and fully keyboard accessible. - Scholarly basis dialog: cream panel, max 710px and 84vh, padding up to 52px, 2px olive top accent, 34px circular close. Backdrop is espresso at 78% with 4px blur. Title display 3.2rem. Body 12px. Modal traps focus, closes on Escape and backdrop click, and returns focus to its trigger. No dialogs for promotional messages.
- Testimonial blocks: permitted only for a named or appropriately anonymised sister with documented permission. Layout is a 600px display quote at 1.3 line, a 1px rule, then name or “a sister in Cohort One” at 10px uppercase. Background cream or espresso alternates with the scene. No star ratings, no before and after claims, no result metrics, no money, no status. If a statement attributes outcomes to the academy, edit it. If it attributes provision to Allaah, retain that language. Do not invent placeholder words that could be mistaken for a real endorsement.
- Images and captions: arch top radius 999px 999px 1px 1px for portrait frames. Image treatment is desaturation to 55 to 62% and a slight sepia, with an 84% brightness ceiling on dark. Captions 8.5 to 9.5px uppercase, tracked 0.13em, separated by a 16px rule. Every non decorative image needs descriptive alt text; decorative images use empty alt.
Almost square cards, pill buttons, fine rules and no drop shadow at rest create calm editorial structure without corporate gloss. The one 4px card lift on hover gives feedback without implying motion or excitement. Native disclosure and focus trapping keep the implementation small and robust.
Interactions and journeys
Subtle, standard, reduced motion always respected. From landing to enquiry without pressure.
Interaction inventory
| Interaction | Behaviour and values | Feedback |
|---|---|---|
| Header state | Scroll threshold 26px; background and type shift over 400ms. Backdrop blur 12px and 97% cream. | Content remains legible; utility dates remain constant. |
| Reveal entrance | IntersectionObserver threshold 0.08; opacity 0 to 1 and translateY 22px to 0 over 850ms with 80ms stagger. Applies once only. | Scenes settle quietly. Under reduced motion all content is visible immediately with no transform. |
| Links and buttons | 250 to 350ms surface and underline transitions. Arrow travels 4px; text action gap opens 5px. | Hover and focus are visible but not animated loops. No magnetic cursors. |
| Mobile drawer | 350ms opacity and 12px translate; visibility toggled after transition. Body lock; Escape closes; focus enters close and returns to trigger. | The menu button reflects state through aria-expanded. |
| Method tabs | Instant content change on click; keyboard arrows as above. 300ms selected surface transition. | Panel labelled by selected tab; live region updates politely. |
| FAQ | Native open and close; 300ms plus sign rotation. | Open state is not conveyed by colour only. |
| Enquiry form | Client validation on submit; inline errors; success state in the same card. No loading spinner beyond 300ms in the mock. | Focus moves to the first error or to success heading; live status announces. |
| Scroll cue | A 28px hairline with a 2.8s loop on the hero only. | Stops under reduced motion. Decorative and hidden from screen readers. |
The visitor's path from landing to enquiry
- First five seconds: the hero states “Clarity that honours your deen”, names the sisters' academy and grounds the work in aqeedah, manhaj and qualified scholarship. The primary action is to explore the Method, not to buy.
- Identification: the need scene names the tension without naming or mocking other frameworks. The visitor should feel understood rather than marketed to.
- Trust: the foundation shows one properly sourced verse with application. Scholarship is stated before the tiers, so the tiers are read as delivery of a reviewed curriculum, not products invented by a coach.
- Understanding: the Method explorer gives real content and has no hidden gate. Each characteristic is framed as responsibility, not technique.
- Choice: programme cards start at free, then self study, then live certification. Fee values are plain. Funding is visible in the same scene. No “popular” badge and no countdown.
- Enquiry: every tier action anchors to the enquiry form and preselects the relevant interest. The visitor can ask instead of committing. The consent language makes the boundary clear; no financial documentation is requested.
- Confirmation: the form card becomes a warm, plain confirmation. In production, the form posts to a server and sends a notification to the academy; in this visual mock, no personal data is transmitted and the success state is local.
- Follow up: a human reply should be within a stated service window once the academy sets it. Do not promise a response time until operations can meet it.
Rejected patterns: countdowns, “only a few places left” banners, waiting list pressure, crossed out prices, automatic motion, video, music, popup lead capture, chat widgets, hovering testimonial carousels, animated numbers, before and after narratives, and any copy that attributes provision or success to the framework rather than Allaah.
Trust is the conversion mechanism for this audience. The journey therefore offers enough substance to evaluate the basis before any commercial detail, and makes the enquiry a question rather than a transaction. That is both more faithful to the brand and more likely to produce a considered applicant.
Accessibility and content integrity
AA as a build requirement, not a later audit. Faith language protected in the interface.
Accessibility requirements
WCAG 2.2 AA contrast for every text and state pairing, including placeholders and captions.
Minimum target size 44px for all primary touch controls; 24px for inline actions.
Visible focus with a 2px outline, 4px offset, olive on light and cream on deep surfaces.
Skip to content link as the first focusable element on the homepage.
One H1 per page; sections in a logical H2 and H3 order; no empty headings.
Semantic landmarks: header, nav, main, sections with accessible labels, footer.
All non decorative images have alt text describing what is visible, not its marketing mood.
Decorative pattern and image fills use empty alt or are CSS backgrounds and are hidden from assistive tech.
Arabic has lang="ar" and dir="rtl"; the English meaning is in a separate readable element.
Form fields have persistent visible labels, not placeholder labels, plus autocomplete tokens.
Validation error is a sentence with an icon and accessible description, not colour alone.
Status messages use a polite live region and focus moves appropriately after submit.
The mobile drawer and dialog trap focus, close on Escape, and return focus.
No keyboard trap other than intentional modal focus containment.
Entrance motion, scroll cue and hovers are removed under reduced motion.
Layout usable at 200% zoom and at 320px width without horizontal page scroll.
Text remains readable without forced justification; no text inside images except decorative editorial crop.
No automatic audio or video anywhere on the site.
Content integrity checks before publish
Allaah is written consistently, never replaced with an interchangeable word.
Arabic appears with its English meaning; no standalone transliteration.
Every Qur'aan or hadith citation is verified by a qualified reviewer before publication.
A Qur'aan passage runs Arabic, paraphrase, source, then application.
A hadith cites collection and narrator. It is never presented as an unworded social graphic.
No description of the academy as a source of independent interpretation or religious verdicts.
No attribution of barakah, provision or outcomes to a method, coach or system.
No performance metrics, income claims, status signalling or numbers used as social proof.
No imported personal development vocabulary, clinical framing or claims about unseen mechanisms.
No imagery of living beings, including people, animals or plants used as main subject.
No invented testimonials, scholar names, approvals or fatwa wording.
Dates and fees show both Hijri and Gregorian where the Hijri date is operationally relevant.
Implementation notes
- Breakpoints: 1180px for nav pressure, 1024px for mobile nav and single column forms, 760px for mobile editorial scale, 390px for the narrowest fields. Content widths cap at 1320px, with a 1240px reading container on documents.
- Tokens: define all colours, type families, section spacing, gutters, radii and easings as CSS custom properties. Never hard code a variant colour in a component.
- Performance: portrait images at no more than 2200px wide for hero, 900 to 950px for arches, served as compressed AVIF or WebP with JPEG fallbacks; lazy load below the fold; no image should exceed 300KB where possible.
- Fonts: preconnect and swap; self host licensed display and subhead files for production with the correct license; fall back as documented. Add Arabic font subset for the characters used.
- Motion: one shared easing
cubic-bezier(.22,.61,.36,1). Do not animate layout properties; reveal only opacity and transform. Reduced motion is a discrete state, not a slower animation. - Form backend: use server side validation mirroring the client, store only necessary fields, send the notification to the academy, respect privacy, and disclose retention. The mock does not transmit data.
- Image licensing: photography in the mock is referenced from Pexels and must be replaced or licensed for production. Never substitute depicting living beings after the fact. Use the credits listed in the site footer until final assets are chosen.
- Logo caveat: this visual system uses a provisional geometric mark and text lockup built from the brand brief. The final logotype and Arabic calligraphy mark must come from the approved brand artwork. Do not approximate Arabic calligraphy in a Latin tool; place the correct vector asset.
Approval of this document confirms the visual direction, palette roles, type scale, scene order, components and accessibility standard. The brand guidelines document and visual mock should then be reviewed against it. If a final asset is missing, keep the placeholder and record it in the asset register rather than inventing a permanent mark.
Build notes and staged delivery
What exists now, what waits for approval and what must be verified before launch.
Stage 1: this specification. Stage 2: the brand guidelines document, also prepared as a styled, downloadable reference. Stage 3: the single file homepage visual mock, using the locked palette and the agreed type fallbacks. The visual mock is intentionally a real responsive page rather than a flat board, because the editorial rhythm, image crops and mobile scale can only be judged in flow.
Approval checklist
- Confirm the Grown and Roca One licensed webfont files and weights; confirm fallback stack for production.
- Provide the approved logotype and Arabic calligraphy mark as SVG with clear space specification.
- Confirm final programme and fee wording, funded place process, enrolment agreement and contact response window.
- Confirm the exact wording used to describe the fatwa and the Scholarly Review Agreement; provide a verified summary or extract for publication.
- Provide approved photography with licensing and image credits, or commission the architectural and geometric still life set.
- Confirm the form handling destination and privacy notice; no fake send can be used in production.
- Name the reviewer for Arabic and citations, and the final sign off process for every published passage.
Working principle for every future page: if a section cannot state her need and the academy's answer in a few strong words, it is not ready. If a beautiful choice makes the deen harder to read, it is not beautiful enough.