Madar brand book

Story & meaning

Madar (مدار) means 'orbit' — the path a star travels. For centuries Arabs navigated desert and sea by the stars, and Suhail (Canopus) was the most famous: its rising over Arabia signalled the end of summer heat and a new season. Madar is a Saudi career-simulation platform where trainees step into a realistic workplace and practise before they begin.

The visual idea is 'Star Navigation': the trainee is the star, the orbit is their career path, and the weave (Sadu) is the community and craft around them. Premium and national in spirit — never governmental in appearance.

«Madar by Day» moves from the night sky into daylight: the first day at the office is the hero, the product itself is the image, and the Suhail star stays the guide at the trainee's side.

• Guidance: we point the way, we don't dictate.
• Authenticity: Saudi roots, contemporary language.
• Precision: clear measurement, honest reports.
• Warmth: human companionship at every step.

AMeem-orbit + Suhail starPrimary

The letter م drawn geometrically as a closed orbit whose tail descends like a launch trajectory; a four-point Suhail star travels on it. The star is the trainee, the orbit is their career journey. Registrable as a composite mark (symbol + «مدار»).

BSadu rings

Concentric orbits framing a woven band of alternating Sadu 'teeth', with a golden eye (diamond) at the centre. Rich and warm; ideal for seals, readiness reports and print.

CMonoline orbit

A single tilted elliptical orbit wrapping a hollow planet, the star at its leading edge. Minimal and technical; suits tiny icons and motion.

DWordmark

«مدار» in a hand-drawn soft-Kufi monoline with the Suhail star rising above the alif, paired with a Latin «MADAR» of the same stroke.

Logo & construction

The primary symbol (concept A) is a geometric «م»: a closed orbit circle (radius 27 on a 100-unit grid) with a tail that leaves tangentially from the south point and bends downward. Stroke 8.5 units, round caps. The four-point Suhail star (vertical ray longer than horizontal, 1 : 0.62) sits on the orbit at 38° north of east, with a 4.2-unit halo knocked out so it never touches the line.

Symbol and word are drawn, not typeset, so the logo owns no third-party font outline and is ready to file as a composite mark with SAIP. A final review by an Arabic type designer is recommended before filing.

The UI is light by default, so the on-light files are the standard; on-dark files are for dark mode and ink panels. Arabic order: symbol on the right, word to its left (reading direction). English: symbol on the left.

Clearspace & minimum size

Clearspace unit = the height of the Suhail star in the logo (x). Keep at least x clear on every side — no text, image or edge may enter.

Below 24px use the symbol alone in its icon cut — favicon.svg.

Misuse

Colour system «Madar by Day»

The identity is light-first: a calm white page, deep indigo ink for text and the primary button, Atlas blue for links, selection and saturated panels, and the Suhail gold star for graphics only. Four soft pastels (butter, blush, mint, sky) set apart cards and moments of the experience. Dark mode is opt-in from the header toggle, remembered per user, and never follows the device setting.

Components never use these values directly; they use semantic roles that flip with the theme. Classes such as bg-canvas, text-ink, border-line and bg-accent are generated from tokens.ts into tailwind.css. The contrast columns show each role's weakest ratio in each theme.

Every text role is checked automatically (WCAG AA ≥ 4.5:1) on all four surfaces in both themes, and strong lines and the focus ring at ≥ 3:1, in packages/brand/src/tokens.test.ts. The old night palette (night indigo, sand gold, teal) stays in @madar/brand for the 3D office, emails and PDFs only.

Typography

Two families only. Alexandria for headings, numbers and the clock: a wide geometric face with the spirit of contemporary signage that gives numbers presence. IBM Plex Sans Arabic for body and interface: clear at small sizes, with legible digits. Both are OFL and self-hosted in /brand/fonts with their licences.

• Never letter-space Arabic, never justify with kashida. Negative tracking (-0.01em) is for Latin headings only.
• Weights: Alexandria 400, 500, 700 (500 for headings); Plex 400, 500, 600.
• Times and changing numbers use tabular figures (.tabular) so they don't jitter.
• Keep body lines to about 65 characters.
• Never: italics, recolouring one word of a headline, small eyebrow labels above every heading, or an arrow appended to button text.
• The Ministry of Culture 'Saudi Font' forbids hosting and redistribution without written approval, so it is not used on the web.

Shape & elevation

Roundness grows with the size of the surface: panels are rounder than cards, cards rounder than inputs. Buttons, badges and the floating header are full pills.

One shadow only, for floating things: small floating chips, popovers and dialogs. Regular cards stay flat — raised with a line border, no shadow. In dark mode it gains a crisp outline.

Button sizes: sm 36px, md 44px, lg 52px tall; touch targets on mobile are at least 44px. The focus ring is always visible.

Sadu pattern

The pattern is generated from authentic Sadu motifs — teeth (alternating triangles), eyes (diamonds), chevrons, dots, stripes and ladder — bent into orbital rings or laid straight as a seamless strip.

Iconography

• 24px grid, 1.75px monoline, round caps and joins — the same logic as the orbit stroke.
• Simple geometry, outline by default; fill only for the active state or the star.
• Directional icons (arrows, progress, back) mirror in RTL; clocks and logos never mirror.
• Library: lucide-react at 1.75 stroke; decorative icons carry aria-hidden. Hand-drawn paths are for the logo and the Suhail star only.
• 3D objects are illustration, never a substitute for icons.

Motion principles

Motion is orbital: things don't jump, they travel and settle. The default 'orbit' easing is cubic-bezier(.2,.7,.2,1) — decisive start, soft landing. Entering elements use 'rise' (a star clearing the horizon), exiting ones use 'set'.

• One orchestrated entrance per page, 1.2 seconds or less.
• Scroll-linked motion in CSS (animation-timeline) inside @supports, with no motion libraries.
• A calm bob for floating chips (6s, ±6px); pointer parallax up to 12px on fine pointers only.
• No fade-up on every section, no hover effect on every card.
• Loader: the star circles the meem orbit at constant speed.
• Respect prefers-reduced-motion: non-essential motion stops, video shows its still poster, and no content stays hidden.

Voice & tone

We write in professional 'white' Saudi Arabic: clear, warm, respectful — neither stiff nor heavy dialect. Characters inside the simulation speak the professional register of Riyadh offices. Legal text and policies are in Modern Standard Arabic.

Gendered address: we never ask for or infer gender. Default to neutral constructions (verbal nouns, plural, 'let's begin', 'you can'). Settings offer an optional 'form of address' preference (masculine / feminine / neutral) that changes wording only and is never used in scoring or reports.

Digits: Latin digits (0-9) across the digital UI, data and reports for legibility and system/search compatibility (Intl: ar-SA-u-nu-latn). Arabic-Indic digits (٠-٩) are allowed only in ceremonial print and literary text. Never mix both systems on one screen.

Dates: Gregorian is primary in the UI; Hijri (Umm al-Qura) appears alongside in reports and formal documents (Intl: ar-SA-u-ca-islamic-umalqura).

• AI: always disclose when a speaker is an AI character.
• No hiring promises; say 'readiness', never 'guarantee'.
• Short sentences, verb first, one primary action per screen.

Co-branding 'Madar × Partner'

When Madar appears with a partner (university, employer, training body) we use a fixed lockup: Madar logo, thin vertical divider, partner logo — at equal optical height.

Imagery & characters

Imagery is daylight: soft 3D objects in sunlight, a miniature Saudi office crossed by palm-frond shadows, and the tools of a workday (calendar, microphone, finjan, document). The palette is Atlas blue, Suhail gold and white only. No text, letters, logos or flags inside images.

'Madar Guide': two fictional mentor characters (a man in thobe and shemagh, a woman in abaya and hijab), modest, professional and friendly. They are fictional and always disclosed as AI.

• Stills are generated with codex and short motion loops with Veo on Google Cloud; every asset's source, tool and prompt is recorded in provenance.json.
• 3D office characters: refined stylised look, never caricatured, varied ages and skin tones.
• Attire modest and professional: thobe with shemagh/ghutra, abaya with hijab, business suits.
• No real people without documented consent; generated images are labelled 'AI-generated'.
• The first mood board and character concepts in docs/brand/imagery remain the character reference; landing assets live in /brand/landing.

Assets

• Logos: /brand/logo/*.svg (+ PNG)
• Icons: /brand/favicon.svg, favicon-32.png, apple-touch-icon.png (180), icon-192.png, icon-512.png, icon-maskable-512.png
• Share image: /brand/og-image.png (1200×630)
• Landing imagery and loops: /brand/landing/* (AVIF and WebP at two widths + provenance.json)
• Patterns: /brand/pattern/*.svg
• Fonts: /brand/fonts/*.woff2 (Alexandria, IBM Plex Sans Arabic) + fonts.css + licences
• Code: @madar/brand — ui, day, floatShadow, typeScale (UI roles), the generated tailwind.css, madarMark(), lockupSvg(), orbitLoaderSvg(), saduSvg()