UniSIRAJ Academic

Overview

UniSIRAJ Academic represents an 'Institutional Clarity' aesthetic—a design system that projects academic authority and trustworthiness while remaining approachable and digitally modern. The brand serves a diverse audience: prospective students seeking Islamic and professional education, current learners navigating academic resources, faculty managing institutional operations, and international applicants evaluating program offerings. The visual language combines deep institutional blues (#0170B9 primary, #002147 header accent) with clean white surfaces and warm supporting accents, evoking both scholarly rigor and welcoming accessibility.

The brand voice is formal yet conversational, precise yet encouraging. Tone vocabulary emphasizes clarity ('Faculty of Islamic Studies'), accessibility ('Apply Now'), and institutional pride. The UI avoids jargon-heavy language in favor of direct, action-oriented copy. Example sentence in brand voice: 'Explore our four faculties and three centres—each designed to advance your Islamic and professional expertise.'

Colors

The color system anchors on a professional primary blue (#0170B9) used exclusively for interactive elements: call-to-action buttons, navigation links, and focus states. This primary is supported by a secondary institutional blue (#1976D2) for secondary actions and a tertiary cyan (#0288D1) for status indicators and accent highlights. The surface stack progresses from pure white (#FFFFFF) for primary content areas through a carefully calibrated gray scale—surface-container-low (#F0F0F0), surface-container (#EEEEEE), and surface-container-high (#E6E6E6)—enabling subtle visual hierarchy without introducing competing colors. The on-surface text color (#3A3A3A) provides 7.5:1 contrast against white, meeting WCAG AAA standards. Error states use a warm red (#D32F2F) reserved exclusively for valid

Typography

The type system employs a two-family strategy: Roboto Slab (serif, 700 weight) for all display and headline levels, projecting institutional authority and visual distinction; Open Sans (sans-serif, 400–600 weights) for body and interface text, ensuring legibility at small sizes and across devices. Montserrat (sans-serif, 600 weight) is reserved for labels and micro-copy, adding visual weight to interactive elements. Display (60px, 700 weight, -0.04em letter-spacing) anchors major page sections; headline-lg (40px, 700 weight) introduces primary content blocks; headline-md (28px, 700 weight) breaks sections into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and hero text; body-md (16px, 400 weight, 24px line-height) serves as the default

Layout

The layout system uses a 12-column responsive grid with a maximum container width of 1240px, maintaining consistent horizontal rhythm across desktop (1240px), tablet (921px), and mobile (100% fluid) breakpoints. The gutter width is 24px (md spacing), creating breathing room between grid columns. Page sections are separated by lg spacing (40px) vertically, establishing a clear visual rhythm that guides users through content hierarchies. The hero section spans full-width with a 40px top margin, followed by faculty cards arranged in a 4-column grid on desktop (3 columns on tablet, 1 column on mobile). Container padding uses md spacing (24px) on desktop, reducing to sm spacing (12px) on mobile to maximize content area. White-space is treated as a first-class design element: section breaks use

Elevation & Depth

Visual hierarchy is conveyed through a three-level shadow system combined with subtle background color shifts. Level 1 (Base Surface) uses no shadow and white background (#FFFFFF) for primary content containers. Level 2 (Elevated Card) applies elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) with a 1px solid border at #D0D0D0 and a light gray background (#F5F5F5 or #EEEEEE), creating gentle separation from the base. Level 3 (Modal/Overlay) applies elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) with a 1px border and surface-container-high background (#E6E6E6), reserved for modals, dropdowns, and flo

Shapes

The shape philosophy is 'Institutional Precision'—using minimal, purposeful border-radius values that convey professionalism without softness. Buttons and primary interactive elements use DEFAULT radius (4px), a subtle rounding that feels modern without appearing playful. Cards and containers use lg radius (10px), providing slightly more visual warmth while maintaining formal appearance. Input fields use DEFAULT radius (4px) to align with button styling, creating a cohesive input ecosystem. Badges and status indicators use full radius (9999px), signaling their role as distinct, self-contained

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses #0170B9 background with white text, 18px vertical padding, 30px horizontal padding, and 4px border-radius. On hover, the background darkens to #1565C0 and elevation.md shadow appears (0 3px 8px rgba(0, 0, 0, 0.15)), with a 200ms linear transition. Focus state adds a 2px outline at rgba(1, 112, 185, 0.3) positioned 2px outside the button boundary. Button-secondary uses a transparent background with a 2px solid border at #0170B9 and #0170B9 text; on hover, the background fills with #E3F2FD (primary-container) while the border remains. Button-tertiary uses #0288D1 (tertiary) background for secondary actions like 'Application Status'; hover state darkens to #0277BD. All buttons use Montserrat 600

Do's and Don'ts

**Do**

• Do use primary blue (#0170B9) exclusively for interactive elements—buttons, links, and focus states—to create a consistent, predictable interaction model.
• Do maintain 24px (md spacing) gutters between grid columns and 40px (lg spacing) between major sections to create visual breathing room and guide user attention.
• Do apply 200ms linear transitions on all hover and focus state changes to provide smooth, predictable feedback without feeling sluggish.
• Do use Roboto Slab (serif) for headlines and Montserrat (sans-serif) for labels to create clear visual hierarchy and institutional authority.
• Do ensure all interactive elements (buttons, inputs, links) meet 48px minimum height and width to support touch accessibility on mobile devices.

**Don't**

• Don't use secondary or tertiary colors for primary call-to-action buttons; reserve #0170B9 for the most important user actions to avoid confusion.
• Don't apply border-radius greater than 10px on cards or containers; excessive rounding undermines the institutional, professional aesthetic.
• Don't use shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) on any element; deeper shadows create visual clutter and reduce clarity.
• Don't mix serif and sans-serif fonts within a single headline or label; maintain Roboto Slab for all display/headline text and Open Sans/Montserrat for body/interface text.
• Don't apply text-transform: uppercase to body text or paragraphs; reserve uppercase styling for labels, badges, and button text only.