Alhamdian International School and College

Overview

Alhamdian International School and College is a Pakistani educational institution brand system rooted in 'Institutional Heritage Modernism'—a design philosophy that honors traditional academic authority while embracing contemporary clarity and accessibility. The aesthetic combines warm, deep burgundy accents (#870b0b) with clean, light surfaces (#f7f8fb) to create an environment that feels both authoritative and welcoming. The UI evokes trust, academic rigor, and student-centered care through deliberate color contrast, generous whitespace, and purposeful typography hierarchy. The brand personality is earnest, professional, and community-focused: precise in communication, warm in tone, never corporate or distant. Example sentence in brand voice: 'Alhamdian develops minds through hands-on learning—your child's growth is our mission.'

Colors

The color system centers on a deep burgundy primary (#870b0b) that commands attention on CTAs, headings, and interactive elements—this is the institutional signature, appearing on the 'Apply for admission' button and throughout the interface as a marker of importance and action. The secondary accent (#b02b3c) provides a slightly lighter variation for pagination and supporting UI elements. A warm tertiary accent (#ff9a3c) introduces energy and optimism, used sparingly for highlights and gradient overlays in the hero section. The surface stack is deliberately light: background #f7f8fb (a soft blue-gray), surface #ffffff (pure white for cards and containers), with container variants ranging from #f0f9fa (lowest) to #fafbfc (highest) to create subtle depth without darkness. Text hierarchy uses

Typography

The type system employs a dual-family approach: Raleway (serif-influenced, Georgia fallback) for all headings (h1–h3) to convey institutional gravitas and heritage, and Inter/Nunito (sans-serif system stack) for body, labels, and UI text to ensure digital legibility and modernity. Display and headline scales use Raleway at 50–60px with 500 weight and tight line-height (66–72px) to create commanding presence; body text uses Inter at 16px with 400 weight and 24px line-height for comfortable reading. Labels and buttons employ 14px at 600 weight with 0.01em letter-spacing to add precision and visual weight. All headings over busy backgrounds (hero section) receive a subtle text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility against photographic backdrops. The type pairing communica

Layout

The page uses a fixed-width container model with max-width: 1100px and 20px horizontal padding (gutter), creating a 12-column grid structure. Sections employ 90px vertical margins (lg spacing) for rhythm and breathing room, with the hero section extending to full viewport height (min-height: 800px) to establish visual dominance. The navbar is positioned absolutely at the top (z-index: 99) with 100px height, transitioning to fixed with backdrop-filter: blur(10px) and rgba(255, 255, 255, 0.75) background on scroll (nav-sticky state). Cards and feature blocks use md spacing (24px) for internal padding and sm spacing (12px) for gaps between elements. The news banner marquee animates horizontally with CSS animation: scroll (duration varies, typically 31.625s) to create continuous visual interes

Elevation & Depth

Depth is achieved through a three-tier shadow system that reinforces visual hierarchy without introducing darkness. Level 1 (Base/Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to standard cards and form inputs, creating subtle separation from the light background. Level 2 (Elevated/Hover): box-shadow: 0 6px 18px rgba(35, 36, 54, 0.08) used on button hover states and nav-sticky, providing a gentle lift and focus indication. Level 3 (Modal/Overlay): box-shadow: 0 10px 30px rgba(35, 36, 54, 0.12) reserved for modals and high-priority overlays. The hero section uses a dark overlay grad

Shapes

The shape philosophy is 'Institutional Precision'—rounded corners are used strategically to soften institutional formality without sacrificing clarity. Buttons and form inputs use 10px border-radius (rounded.md) to feel approachable and modern while maintaining professional proportion. Cards and containers use 14–16px (rounded.lg to rounded.xl) for a slightly softer appearance that invites engagement. The navbar and hero section use sharp corners (border-radius: 0) to anchor the page and establish authority. Badge elements use border-radius: 9999px (rounded.full) to create pill-shaped labels t

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing: 45px height with 20px horizontal padding (min-width: 145px) for primary and outline variants, 40px height with 15px padding for ghost buttons. The primary button (btn-filled.btn-primary) uses background-color: #870b0b with color: #ffffff, border-radius: 10px, and applies a transform: translateY(-1px) on hover with box-shadow: 0 6px 18px rgba(35, 36, 54, 0.08) for tactile feedback. Active state applies filter: brightness(0.8) for immediate visual confirmation. The outline button (btn-outline) uses transparent background with border: 1px solid #870b0b and reverses colors on hover. Ghost buttons (ghost-btn) use background-color: rgba(255, 255, 255, 0.2) with white text, transitioning to solid white ba

Do's and Don'ts

**Do**

• Do use the primary burgundy (#870b0b) exclusively for CTAs, focus states, and key interactive elements—never dilute its impact with overuse.
• Do apply the three-tier shadow system (0 3px 8px, 0 6px 18px, 0 10px 30px) consistently to maintain visual hierarchy and depth perception.
• Do pair Raleway headings with Inter body text to communicate 'heritage institution meets modern accessibility'—never reverse or mix within a single section.
• Do use the light surface stack (#f7f8fb background, #ffffff cards) as the default, reserving dark overlays only for hero sections and high-contrast needs.
• Do maintain 20px gutter padding and 90px section margins to create breathing room and prevent visual fatigue on long pages.
• Do apply transform: translateY(-1px) and shadow elevation on all interactive hover states to provide tactile feedback without color-only indicators.

**Don't**

• Don't use the primary burgundy (#870b0b) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and emphasis.
• Don't apply multiple shadow layers simultaneously; use only one tier from the elevation scale per component state.
• Don't mix serif and sans-serif fonts within a single heading or body paragraph; maintain clear family separation between display (Raleway) and UI (Inter/Nunito).
• Don't reduce border-radius below 4px (rounded.sm) on interactive elements; sharp corners are reserved for structural elements like the navbar.
• Don't use custom colors outside the defined palette; all UI elements must reference the color token system to maintain consistency and accessibility.
• Don't apply focus rings, shadows, or transforms simultaneously on hover; prioritize one feedback mechanism per interaction to avoid visual noise.