Madrasa

Overview

Madrasa is a free, Arabic-language educational platform that democratizes access to high-quality video content in science, mathematics, and languages for students from kindergarten through grade 12. The design system embraces a "Playful Accessibility" aesthetic—combining vibrant, energetic accent colors (cyan #33bee5, purple #775297, gold #e4bc59) with a clean, light-dominant interface that prioritizes clarity and ease of navigation for young learners and educators across the Arab world. The visual language is intentionally approachable and non-intimidating, using rounded corners (0.25rem to 1.5rem), generous whitespace, and category-based color coding to guide users intuitively through educational content.

The brand voice is encouraging, clear, and culturally respectful—speaking directly to students and parents in Modern Standard Arabic with warmth and precision. Madrasa avoids jargon, uses concrete examples, and celebrates learning as a journey. Example sentence in brand voice: "اكتشفوا معنا عالم اللغة العربية" (Discover with us the world of Arabic language)—inviting, inclusive, action-oriented.

Colors

The color system is built on a light, accessible foundation (surface #ffffff, on-surface #484848) with three primary accent roles that each serve distinct functions. Primary purple (#775297) is the brand's signature accent, used for interactive elements, hover states, and brand identity—it conveys trust and intellectual rigor appropriate to an educational platform. Secondary cyan (#33bee5) is the action accent, deployed on category badges, focus buttons, and key CTAs to create visual energy and draw attention to learning pathways. Tertiary gold (#e4bc59) is the achievement accent, used for gamification elements like points badges and success states to celebrate student progress. Error red (#dc3545) signals warnings and destructive actions with high contrast (rgba(220, 53, 69, 1)). The surf

Typography

The type system pairs Montserrat (geometric, modern, used for headlines and labels) with system fonts for body text (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto), creating a hierarchy that balances personality with legibility. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) introduces page sections; Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) ensure comfortable reading for long-form educational content. Label-md (14px, 600 weight, 0.01em letter-spacing) and Label-sm (12px, 500 weight, 0.05em letter-spacing) are used for buttons, badges, and metadata. On small labels over busy bac

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1190px, centered on the viewport. The design prioritizes mobile-first responsiveness: at breakpoints below 770px, the sidebar navigation collapses into a full-width overlay, and spacing scales down proportionally (lg: 40px on desktop → 24px on mobile). The gutter spacing is consistently 24px, applied between grid columns and around container edges. Section separation uses lg spacing (40px) to create breathing room between major content blocks; internal card padding uses md spacing (24px). The header is fixed at 80px height with a white background (#ffffff) and subtle bottom border (1px solid #e7e7e7), ensuring persistent navigation. Hero sections and category grids use generous whitespace (40px+ margins) to avo

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle background color shifts rather than dramatic drop shadows. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), background: #ffffff. Level 2 (Elevated/Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background: #f8f9fa. Level 3 (Floating/Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background: #ffffff. The sidebar navigation uses a left border shadow (-1px 0 0 0 #e2e2e296) to create a subtle vertical separation without heaviness. Hover states on cards transition the shadow from Level 1 to Level 2 over

Shapes

The shape philosophy is "Soft-Technical Accessibility"—combining rounded corners with geometric precision to create an interface that feels modern yet approachable for young learners. Buttons use rounded: DEFAULT (0.5rem / 8px) for standard actions, creating a subtle softness without appearing childish. Category badges use rounded: full (9999px) to create pill-shaped containers that feel friendly and game-like, reinforcing the platform's educational-yet-playful tone. Cards use rounded: md (0.75rem / 12px) for a balanced middle ground—softer than sharp corners but more structured than full pill

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants. Button-primary (purple #775297, 48px height, 20px 60px padding, rounded 0.5rem, label-md typography, 700 weight) is used for main CTAs like "Start Learning" or form submissions. On hover, the background darkens to #5d4575 with a 0.2s ease-in-out transition, and the cursor changes to pointer. Button-secondary (transparent background, purple text, 2px solid purple border, same dimensions) is used for alternative actions like "Learn More" or "Cancel." Button-accent-cyan (cyan #33bee5, 40px height, 12px 24px padding, rounded full, 700 weight) is deployed on category badges and focus buttons; on hover, it darkens to #1a9fb5 with transition: linear all 0.1s. All buttons use font-weight: 700 and letter-s

Do's and Don'ts

**Do**

• Do use primary purple (#775297) exclusively for brand identity, hover states, and primary CTAs—never mix it with secondary cyan or tertiary gold on the same element.
• Do apply rounded: full (9999px) to badges, pills, and search inputs to reinforce the playful, accessible tone; use rounded: md (0.75rem) for cards and rounded: DEFAULT (0.5rem) for standard buttons.
• Do maintain the 1190px container max-width and 24px gutter spacing on all screen sizes above 770px; scale down proportionally on mobile to preserve visual hierarchy.
• Do use Montserrat for all headlines, labels, and brand-forward text; reserve system fonts for body content to balance personality with legibility.
• Do apply box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) to cards at rest and elevate to 0 4px 12px rgba(0, 0, 0, 0.08) on hover to create subtle depth without heaviness.

**Don't**

• Don't use primary purple (#775297) for body text, backgrounds, or non-interactive elements—it is reserved for accents and interactive states only.
• Don't mix rounded corners inconsistently; use the graduated scale (sm → DEFAULT → md → lg → xl → full) to create visual coherence and signal element hierarchy.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12) to any element; excessive shadows create visual clutter and reduce accessibility for low-vision users.
• Don't use secondary cyan (#33bee5) or tertiary gold (#e4bc59) as primary brand colors; they are supporting accents and should appear less frequently than purple.
• Don't override the 0.2s ease-in-out transition timing on hover states unless explicitly required for snappy feedback (e.g., focus-menu icons use 0.1s linear); consistency in motion creates a polished, professional feel.