Brand Guidelines

دليل الهوية البصرية

Comprehensive visual identity standards for Israa University digital platforms including colors, typography, components, and responsive design.

Color Palette

Our color palette reflects innovation, trust, and academic excellence. Use these colors consistently across all university platforms.

Primary Colors

#0885C8
Israa Blue
RGB: 8, 133, 200
HSL: 201°, 92%, 41%
#1A365D
Dark Navy
RGB: 26, 54, 93
HSL: 215°, 56%, 23%
#805AD5
Royal Purple
RGB: 128, 90, 213
HSL: 259°, 59%, 59%

Background Colors

#E8F4FC
Light Blue
For blue-tinted backgrounds
#FAF5FF
Light Purple
For purple-tinted backgrounds
#F7FAFC
Gray 100
For neutral backgrounds

Neutral Colors

Gray 900
#1A202C
Gray 800
#2D3748
Gray 700
#4A5568
Gray 600
#718096
Gray 500
#A0AEC0
Gray 400
#CBD5E0
Gray 300
#E2E8F0
Gray 200
#EDF2F7
Gray 100
#F7FAFC
White
#FFFFFF

Typography

We use Poppins for English and Cairo for Arabic to ensure readability and a modern appearance across all platforms.

Poppins

English
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Aa
Light (300)
Aa
Regular (400)
Aa
Medium (500)
Aa
SemiBold (600)
Aa
Bold (700)

Cairo

العربية
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومُغلف بجلد أزرق
جامعة الإسراء - التميز والإبداع
٠١٢٣٤٥٦٧٨٩
أب
عادي (400)
أب
متوسط (500)
أب
شبه عريض (600)
أب
عريض (700)

Type Scale

Element Size Weight Line Height
Display / Hero 48-64px 700 1.1
H1 36-40px 600 1.2
H2 28-32px 600 1.3
H3 22-26px 600 1.4
Body 16px 400 1.6
Small / Caption 14px 400 1.5

Buttons

Consistent button styles for actions across all university platforms.

Button Variants

Button Sizes

Arabic Buttons

Cards

Card components for displaying grouped content with consistent styling.

Academic Programs

البرامج الأكاديمية

Explore our diverse range of undergraduate and graduate programs designed for academic excellence.

Student Services

خدمات الطلاب

Access comprehensive support services including registration, financial aid, and career guidance.

Forms

Form elements with consistent styling and proper focus states.

Alerts & Badges

Feedback components for user notifications and status indicators.

Alert Variants

ℹ️
Information: Classes begin on September 15, 2025.
✓
Success: Your application has been submitted successfully.
⚠️
Warning: Registration deadline is approaching.
✗
Error: Please correct the highlighted fields.

Badges

New Featured Active Pending

CSS Variables

Copy these CSS custom properties to implement the Israa University brand in your projects.

variables.css 
:root {
    /* Primary Colors */
    --israa-blue: #0885C8;
    --israa-blue-rgb: 8, 133, 200;
    --israa-navy: #1A365D;
    --israa-purple: #805AD5;
    
    /* Background Colors */
    --israa-blue-light: #E8F4FC;
    --israa-purple-bg: #FAF5FF;
    
    /* Neutral Colors */
    --gray-900: #1A202C;
    --gray-800: #2D3748;
    --gray-700: #4A5568;
    --gray-600: #718096;
    --gray-500: #A0AEC0;
    --gray-400: #CBD5E0;
    --gray-200: #EDF2F7;
    --gray-100: #F7FAFC;
    
    /* Typography */
    --font-english: 'Poppins', sans-serif;
    --font-arabic: 'Cairo', sans-serif;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

Responsive Design

Guidelines for creating responsive layouts that work across all devices and screen sizes.

Breakpoints

Use these standard breakpoints for consistent responsive behavior:

Breakpoint Width Devices CSS Media Query
Desktop XL ≥1280px Large desktops @media (min-width: 1280px)
Desktop ≥1024px Desktops, laptops @media (min-width: 1024px)
Tablet ≥768px Tablets, small laptops @media (min-width: 768px)
Mobile L ≥480px Large phones @media (min-width: 480px)
Mobile <480px Small phones @media (max-width: 479px)

Device Preview

Desktop
Desktop
≥1024px
Tablet
Tablet
768-1023px
Mobile
Mobile
<768px

Responsive Guidelines

✓

Mobile-First Approach

Start with mobile styles, then add complexity for larger screens

✓

Flexible Grids

Use CSS Grid or Flexbox for responsive layouts

✓

Touch-Friendly Targets

Minimum 44×44px touch targets on mobile

✓

Readable Typography

Minimum 16px body text to prevent zoom on mobile

✗

Don't Hide Critical Content

Essential info should be visible on all devices

✗

Avoid Fixed Widths

Use percentages or max-width instead of fixed pixels

Responsive Typography Scale

Element Mobile (<768px) Tablet (768-1023px) Desktop (≥1024px)
H1 / Hero 1.5-2rem 2-2.5rem 2.5-3rem
H2 1.3rem 1.5rem 1.8rem
H3 1.1rem 1.2rem 1.3rem
Body 1rem (16px) 1rem (16px) 1rem (16px)

Responsive CSS Example

responsive.css 
/* Mobile First - Base Styles */
.container {
    padding: 16px;
    width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .container {
        padding: 24px;
        max-width: 768px;
        margin: 0 auto;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .container {
        padding: 40px;
        max-width: 1200px;
    }
    
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
💡
Pro Tip: Test your designs on real devices whenever possible. Emulators don't always reflect actual touch interactions and performance.

Accessibility

Our designs meet WCAG 2.1 AA standards to ensure accessibility for all users.

Color Contrast

Combination Preview Ratio WCAG
Navy on White Sample Text 12.6:1 AAA
Blue on White Sample Text 4.7:1 AA
Purple on White Sample Text 4.5:1 AA
White on Blue Sample Text 4.7:1 AA
White on Navy Sample Text 12.6:1 AAA

Accessibility Checklist

✓

Keyboard Navigation

All interactive elements must be keyboard accessible

✓

Focus Indicators

Visible focus states with 2px outline minimum

✓

Alt Text

Descriptive alt text for all meaningful images

✓

RTL Support

Full right-to-left support for Arabic content