Al-Eman International School

Overview

Al-Eman International School's design system embodies 'Heritage Minimalism'—a contemporary aesthetic that honors Islamic architectural traditions while maintaining modern clarity. The brand serves faith-centered families seeking rigorous academic excellence paired with spiritual development. The visual language evokes warmth through an earthy, golden-brown primary palette (#b8995a) anchored by deep forest greens (#0d2a22) and institutional blues (#2778c4), creating an atmosphere of trust, wisdom, and timeless values. The interface prioritizes legibility and accessibility, using generous whitespace and a restrained color application to guide users through educational pathways without visual overwhelm.

The brand voice is authoritative yet approachable, speaking to parents and students with clarity and conviction. Vocabulary emphasizes faith, knowledge, character, and holistic development—never corporate jargon. The tone is warm but formal, reflecting the institution's commitment to both spiritual and academic rigor. Example sentence in brand voice: 'At Al-Eman, we nurture not just minds, but souls—preparing students to lead with wisdom and integrity.'

Colors

The color system is rooted in Islamic heritage and natural earth tones, creating a palette that feels both timeless and contemporary. Primary (#b8995a, rgb(184, 153, 90)) is the signature accent used on all call-to-action buttons, interactive elements, and key brand moments—it evokes gold leaf, parchment, and scholarly tradition. Secondary (#0d2a22, rgb(13, 42, 34)) is a deep forest green representing growth, renewal, and the natural world; it anchors navigation, headers, and foundational UI elements. Tertiary (#2778c4, rgb(39, 120, 196)) provides institutional authority and is reserved for links, status indicators, and secondary actions. The surface stack uses pure white (#ffffff) as the primary canvas with carefully calibrated grays (surface-container-low at #f0f0f0, surface-container at

Typography

The type system pairs Poppins (geometric, confident, modern) for display and headlines with Inter (neutral, highly legible, technical) for body copy and UI labels. This pairing communicates both heritage (Poppins's rounded forms evoke contemporary Islamic design) and accessibility (Inter's clarity ensures readability across devices). Display (64px, 800 weight, -0.04em tracking) commands attention on hero sections; Headline-lg (40px, 700 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at 16px base font size. Labels use 15.2px at 600 weight with 0.02em tracking to create visual distinction on buttons and form controls without appearing cramped. All type scales maintain a 1.5x ratio between sizes, creating harmonic rhythm. Apply text-sh

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1280px, ensuring responsive scaling from mobile (100vw) through tablet (768px breakpoint) to desktop. The gutter spacing is consistently 24px (md spacing token), creating rhythm and breathing room. Hero sections use full-width backgrounds with 40px (lg spacing) padding on left/right and 64px (xl spacing) for top/bottom, establishing generous margins that respect the eye's natural resting points. Content sections follow a 3-column card layout on desktop, 2-column on tablet, and 1-column on mobile, with 24px gaps between cards. The container-max-width of 1280px prevents line-length from exceeding 75 characters on body text, optimizing readability. Whitespace is treated as a first-class design element: sections ar

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows of skeuomorphic design. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Cards, Input Fields): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)—a subtle 1px lift that defines the card boundary without visual drama. Level 3 (Modals, Popovers, Hover States): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)—a 4px blur radius and 12px spread create perceived depth of ~8px elevation. Level 4 (Dropdowns, Tooltips): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)—reserved for the most promine

Shapes

The shape philosophy is 'Approachable Precision'—combining soft, rounded corners with geometric clarity. Buttons use full-radius (100px border-radius) to create pill-shaped affordances that feel inviting and modern, softening the institutional nature of the school brand. Cards and containers use lg radius (1rem / 16px) to balance approachability with structure—not so rounded as to feel playful, not so sharp as to feel cold. Input fields use DEFAULT radius (0.5rem / 8px) for a subtle, professional appearance that doesn't compete with button affordances. The full-radius treatment on buttons is t

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (Apply for Admission, Learn More) use backgroundColor: #b8995a, textColor: #ffffff, padding: 14px 30px, borderRadius: 100px, fontSize: 15.2px, fontWeight: 600. On hover, the background darkens to #a0845a (a 20% shade reduction) with a 0.2s ease transition. On active/pressed, it darkens further to #8b7548. Secondary buttons (Contact Us, Learn More variants) use transparent background with a 2px solid border in #b8995a, maintaining the same text color and padding. On hover, the background fills with surface-container-low (#f0f0f0) while the border remains primary, creating a 'fill' effect. All buttons have a minimum height of 48px to meet touch-target accessibility standards (WCAG 2.5.5).

Containers & Surfa

Do's and Don'ts

**Do**

• Do use the primary gold (#b8995a) exclusively on CTAs and high-priority interactive elements—never as a background fill for large content areas.
• Do maintain 24px (md spacing) gutters between sections and 40px (lg spacing) between major content blocks to create visual rest.
• Do apply Poppins 800 weight for display headings (64px+) to command attention; reserve 600–700 weights for secondary headings.
• Do use the full-radius (100px) border-radius only on buttons; use 1rem on cards and 0.5rem on inputs to create a clear visual hierarchy.
• Do test all interactive elements at 48px minimum height to meet touch-target accessibility standards.
• Do apply 0.2s ease transitions on all state changes (hover, focus, active) to signal interactivity without feeling sluggish.

**Don't**

• Don't use the secondary green (#0d2a22) or tertiary blue (#2778c4) as primary button colors—reserve them for navigation and secondary actions.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12); the aesthetic is light and airy, not dramatic.
• Don't mix Poppins and Inter within a single heading or body paragraph; use Poppins for display/headlines, Inter for body/labels.
• Don't exceed 15% of page visual weight with accent colors; the design should feel content-first, not decoration-heavy.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii fragment the system.
• Don't apply text-shadow or text-stroke on dark text over light backgrounds; reserve these techniques for white text on photographic overlays only.