Aljamiat Design System - Premium SaaS Educational ERP UI Kit

Interactive ERP Modules

Fully interactive SaaS simulation pages designed for various institutional actors, including admins, employees, and parents.

Setup Wizard

1. Onboarding Setup

Institutional setup wizard, terminology configuration, custom branding upload, and logo crop modules.

Launch Module

Auth Portal

2. Auth Portal Simulator

Simulation page for logins, registrations, MFA challenges, security questions, and verification codes.

Launch Module

Dashboard

3. Admin Mission Control

Interactive admin control center featuring widgets, sparkline trends, calendar views, and drag-and-drop metrics.

Launch Module

Layout Shell

4. Global ERP Layout Shell

Generic responsive page container layout, collapse sidebar, search results dropdown, and theme simulator.

Launch Module

Users & Roles

5. User & Roles Manager

Granular permissions matrix editor, active user directories, role clone operations, and operation audit trails.

Launch Module

Academics

6. Academic Structure

Institutional academic level re-ordering, sections cohorts capacities, subjects, and terminology setting overrides.

Launch Module

Students

7. Student Management

Student directories, 10-tab profile hub journals (medical, tuition financial ledger, attendance logs), and card generation.

Launch Module

Parents

8. Parent Management

Parent directory records, linked students cards, communications threads, tuition receipts, and report card sheets.

Launch Module

Employees

9. Employee Management

Staff registers, hiring logs, digital document checklist tracks, timeline event logs, and bulk CSV uploads.

Launch Module

Attendance

10. Attendance Management

Daily/period registers, student color calendars, check-in punch log simulator, leave pipelines, and biometric hardware streams.

Launch Module

Communication

11. Communication & Messaging

WhatsApp/Slack style messaging, group channels, targeted broadcasts, template notices, calendar schedules, audit logs, and portal simulations.

Launch Module

Finance

13. Finance & Fee Management

Invoices ledger, payment collection receipts, sibling/merit discounts, scholarship waiver trackers, refunds approval stepper, parent balance portal, expense claims, teacher payroll net payslips, and tax policies settings.

Launch Module

Analytics

14. Reports & Analytics

Executive dashboard KPIs, student growth demographics, employee leave analyses, visual attendance heat maps, grade averages, P&L summaries, no-code custom report builder, export center, calendar event analytics, and school operations health scores.

Launch Module

Platform HQ

15. Super Admin Panel

Multi-tenant control center, subscriptions and billing registries, interactive plan quotas, secure tenant impersonation (Login As), system announcements, global audit logs, real-time database and cache telemetry.

Launch Module

1. Color Tokens

Consistent, branding-specific CSS variable swatches. Click on any card to copy its variable name.

Brand & Accent Shades

Primary

--color-primary

#613DDF

Dark Primary

--color-dark-primary

#241655

Accent

--color-accent

#FFDE59

Surface Soft

--color-surface-soft

#DDDDF9

Semantic States

Success

--color-success

#10B981

Warning

--color-warning

#F59E0B

Danger

--color-danger

#EF4444

Info

--color-info

#3B82F6

2. Typography Scale

Type sizes mapped for extreme readability. Headings use Poppins, body uses Nunito.

Token	Visual Preview	CSS Properties
`H1 - Title`	Student Enrollment Dashboard	font-size: 2.25rem (36px) font-weight: 700
`H2 - Heading`	Manage Classroom Schedules	font-size: 1.75rem (28px) font-weight: 600
`H3 - Subheading`	Academic Year 2026	font-size: 1.25rem (20px) font-weight: 600
`Body Regular`	This system allows university staff to compile exam scores, print reports, and email parents.	font-size: 0.875rem (14px) line-height: 1.5
`Caption Small`	Last updated 2 hours ago by System Admin.	font-size: 0.75rem (12px) color: --color-text-secondary

3. Spacing System

Strict 8px layout spacing rules for responsive alignment.

Token	Pixel Value	Rem Value
`--space-1`	4px	0.25rem
`--space-2`	8px	0.5rem
`--space-4`	16px	1rem
`--space-8`	32px	2rem
`--space-16`	64px	4rem

4. Border Radius

Standardized curvature rules. Default ERP elements use 16px (radius-lg) corners.

XS (4px)
Pill components/tags

SM (8px)
Buttons / Inputs

MD (12px)
Table cells / Small cards

LG (16px)
Default SaaS Cards

XL (24px)
Modals / Main Panels

5. Shadow System

Harmonized elevations using subtle ambient shadows overlayed on light and dark surfaces.

Shadow SM
var(--shadow-sm)

Shadow MD
var(--shadow-md)

Shadow LG
var(--shadow-lg)

Shadow XL
var(--shadow-xl)

6. Buttons

Interactive triggers for user navigation, actions, and form submissions.

Code Spec

<!-- Primary Button -->
<button class="btn btn-primary">
  <i data-lucide="plus"></i> Primary Action
</button>

<!-- Secondary Button -->
<button class="btn btn-secondary">Secondary Option</button>

<!-- Ghost Button -->
<button class="btn btn-ghost">Ghost Mode</button>

<!-- Danger Button -->
<button class="btn btn-danger">Delete Entry</button>

<!-- Loading State -->
<button class="btn btn-primary">
  <div class="btn-spinner"></div> Loading...
</button>

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

7. Form Elements

Accessible, interactive input elements for recording class details, student names, and dates.

Student Full Name Ensure name matches passport/national ID.

Floating Label Field

Parent Registration Code

Classroom / Grade

Special Medical Notes

Enroll in Bus Services

Male Student

Female Student

Enable Maintenance Mode

School Email Address Invalid email format. Must contain "@" symbol.

Code Spec

<!-- Input Group -->
<div class="form-group">
  <label class="form-label" for="std-name">Student Full Name</label>
  <input type="text" id="std-name" class="form-input" placeholder="e.g. John">
  <span class="form-helper">Ensure name matches passport/national ID.</span>
</div>

<!-- Toggle Switch -->
<label class="switch-wrapper">
  <input type="checkbox" class="switch-input">
  <div class="switch-rail">
    <div class="switch-knob"></div>
  </div>
  <span class="form-label">Toggle Setting</span>
</label>

<!-- Custom Checkbox -->
<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox-input" checked>
  <div class="checkbox-box">
    <i data-lucide="check"></i>
  </div>
  <span class="form-label">Label Text</span>
</label>

.form-input {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  outline: none;
}
.form-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(97, 61, 223, 0.15);
}

8. Cards

Interactive, elevation-layered card structures containing user profiles, metrics, or details.

Active

Advanced Calculus II

Mon, Wed 10:00 AM Room 404

Limits, integrals, derivatives, sequence boundaries, and vector coordinates introduction.

Dr. Jennifer Aniston

48 Students enrolled

Code Spec

<div class="card card-interactive">
  <div class="card-header">
    <span class="badge badge-success"><span class="badge-dot"></span> Active</span>
  </div>
  <div class="card-body">
    <div class="class-card-subject">Advanced Calculus II</div>
    <p>Limits, integrals, derivatives and vector coordinates introduction.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-secondary btn-sm">Enter Dashboard</button>
  </div>
</div>

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}
.card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

9. Tables

Responsive, tabular grids. Headers with the class sortable can be clicked to sort rows natively.

Student Details ⇅	Roll ID ⇅	Average Score ⇅	Status
Albert Einstein albert.e@Aljamiat.edu	`#M-8809`	98.5	Honors
Nikola Tesla nikola.t@Aljamiat.edu	`#M-8802`	94.2	Honors
Isaac Newton isaac.n@Aljamiat.edu	`#M-8804`	78.1	Pending
Marie Curie marie.c@Aljamiat.edu	`#M-8807`	99.1	Honors

Showing 1 to 4 of 240 Students

Code Spec

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th class="sortable" data-type="string">Student Details</th>
        <th>Roll ID</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="table-student-cell">
            <img src="avatar.jpg" class="table-student-avatar">
            <div>
              <div class="table-student-name">Albert Einstein</div>
              <div class="table-student-email">albert@Aljamiat.edu</div>
            </div>
          </div>
        </td>
        <td><code>#M-8809</code></td>
        <td><span class="badge badge-success">Honors</span></td>
      </tr>
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  background-color: var(--color-surface-hover);
  padding: var(--space-4) var(--space-6);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.table td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

10. Badges

Color-coded status indicators with small dots representing enrollment categories, fees, or class schedules.

Primary Brand Fees Paid Delayed Payment Expelled Registered / Pending Verification

Code Spec

<!-- Success Badge -->
<span class="badge badge-success">
  <span class="badge-dot"></span> Fees Paid
</span>

<!-- Warning Badge -->
<span class="badge badge-warning">
  <span class="badge-dot"></span> Delayed Payment
</span>

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-full);
}
.badge-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

11. Alerts

Inline warnings, successes, or details designed to announce academic notices or invoice updates.

ERP Database Synced Successfully

All student test schedules, teacher reports, and classroom mappings for Term 3 have been backed up.

Important System Error

Student grade sync with the Ministry of Education API has failed. Please verify API Credentials.

Upcoming System Update scheduled

Aljamiat platform will go down for scheduled maintenance tonight between 2:00 AM and 4:00 AM UTC.

Code Spec

<div class="alert alert-success">
  <div class="alert-icon"><i data-lucide="check-circle"></i></div>
  <div class="alert-content">
    <div class="alert-title">Database Synced</div>
    <div class="alert-desc">All student test schedules are backed up.</div>
  </div>
  <button class="alert-close"><i data-lucide="x"></i></button>
</div>

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3.5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.alert-success {
  background-color: var(--color-success-bg);
  border-color: rgba(16, 185, 129, 0.2);
  color: #065F46;
}
.alert-title {
  font-size: 0.875rem;
  font-weight: 700;
}

12. Modals

Overlay dialogues centered on screen, featuring smooth scale-up transitions and background glassmorphic blur.

Click button above to open modal, overlay, or press Esc to close.

Code Spec

<!-- Overlay -->
<div class="modal-overlay" id="modal-id">
  <div class="modal">
    <div class="modal-header">
      <h3 class="modal-title">Modal Title</h3>
      <button class="modal-close"><i data-lucide="x"></i></button>
    </div>
    <div class="modal-body">
      <p>Context body goes here...</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost">Cancel</button>
      <button class="btn btn-primary">Confirm</button>
    </div>
  </div>
</div>

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(12, 8, 29, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  max-width: 500px;
  width: 100%;
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

13. Drawers

Slide-out sheets aligned to the right, ideal for managing details or editing entities without leaving the main dashboard page.

Click button above to slide-out drawer, overlay, or press Esc to close.

Modify student enrollment records, details, and permissions below.

Student Full Name

Roll/ID Code

Enrollment Status

Confidential Administration Notes

Code Spec

<!-- Overlay -->
<div class="drawer-overlay" id="drawer-overlay-id"></div>

<!-- Sheet -->
<div class="drawer" id="drawer-id">
  <div class="drawer-header">
    <h3 class="drawer-title">Drawer Sheet Title</h3>
    <button class="drawer-close"><i data-lucide="x"></i></button>
  </div>
  <div class="drawer-body">
    <p>Input forms, text, or profile widgets.</p>
  </div>
  <div class="drawer-footer">
    <button class="btn btn-ghost">Discard</button>
    <button class="btn btn-primary">Save</button>
  </div>
</div>

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 420px;
  background-color: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  z-index: 1001;
}
.drawer.active {
  transform: translateX(0);
}

14. Tabs

Interactive tab bars for switching views or configuration contexts in the dashboard page.

Mon, Wed, Fri Routine

Your class calendar lists 4 active schedules today: Physics, Calculus II, English Composition, and History.

Core Semester Curriculum

Curriculum is compiled following state guidelines: 6 distinct units with accompanying quizzes, midterms, and project portfolios.

Default Grading System

Academic honors thresholds: A+ (≥95%), A (≥90%), B+ (≥85%), B (≥80%), C (≥70%), D (≥60%), F (<60%).

Code Spec

<div class="tabs-container">
  <ul class="tabs-list">
    <li><button class="tab-btn active" data-target="p1">Classes</button></li>
    <li><button class="tab-btn" data-target="p2">Curriculum</button></li>
  </ul>
  
  <div class="tab-panel active" id="p1">
    <p>Active schedules details...</p>
  </div>
  <div class="tab-panel" id="p2">
    <p>Curriculum details...</p>
  </div>
</div>

.tabs-list {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}
.tab-btn {
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

15. Breadcrumbs

Hierarchy links showing location within classroom channels, parent settings, or grading dashboards.

Code Spec

<ul class="breadcrumbs">
  <li class="breadcrumb-item"><a href="#"><i data-lucide="home"></i> Home</a></li>
  <span class="breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
  <li class="breadcrumb-item"><a href="#">Classrooms</a></li>
  <span class="breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
  <li class="breadcrumb-item">Grade A - English Core</li>
</ul>

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.breadcrumb-item a:hover {
  color: var(--color-primary);
}

16. Empty States

Placeholder screens shown when student lists are empty, schedules are missing, or billing reports are uncompiled.

No Active Classrooms Configured

You have not created any educational classrooms or semesters for Academic Year 2026. Create your first classroom configuration below.

Code Spec

<div class="empty-state">
  <div class="empty-state-icon-box">
    <i data-lucide="book-open"></i>
  </div>
  <h4 class="empty-state-title">No Classrooms Configured</h4>
  <p class="empty-state-desc">You have not created classrooms for Academic Year 2026.</p>
  <button class="btn btn-primary">Configure Classroom</button>
</div>

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}
.empty-state-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-surface-hover);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

17. Loading States

Skeleton shimmers and custom circular loaders to enhance UI performance feel.

Fetching student reports...

Code Spec

<!-- Circular Loader -->
<div class="loading-spinner"></div>

<!-- Skeleton Card Shimmer -->
<div class="skeleton-card">
  <div class="skeleton skeleton-avatar"></div>
  <div class="skeleton skeleton-text" style="width: 80%"></div>
  <div class="skeleton skeleton-text skeleton-text-sm" style="width: 50%"></div>
</div>

.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--color-surface-soft);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spinner-spin 0.8s linear infinite;
}
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-surface-active) 50%, var(--color-surface-hover) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

18. Notification Styles

Toast indicators flying in from screen edges. Click triggers below to preview live animated toasts.

Code Spec

<!-- Toast container (Fixed on screen top right) -->
<div class="toast-container">
  <div class="toast toast-success">
    <div class="toast-icon"><i data-lucide="check-circle"></i></div>
    <div class="toast-body">
      <div class="toast-title">Fee Payment Success!</div>
      <div class="toast-desc">Invoice #INV-2026-8801 has been sent.</div>
    </div>
    <button class="toast-close"><i data-lucide="x"></i></button>
  </div>
</div>

.toast-container {
  position: fixed;
  top: 24px; right: 24px;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  z-index: 2000;
  max-width: 360px;
}
.toast {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: var(--space-3.5);
  animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

19. KPI Cards

Strategic executive key performance metrics featuring sparkline outlines and HSL indicators.

Active Enrollments 4,892 +12% this term

Monthly Revenue $28.4K +8.4% fee collection

Average Attendance 94.8% -0.6% sick absences

Code Spec

<div class="kpi-card accent-indicator">
  <div class="kpi-info">
    <span class="kpi-label">Active Enrollments</span>
    <span class="kpi-value">4,892</span>
    <span class="kpi-trend up">+12% this term</span>
  </div>
  <div class="kpi-icon-box"><i data-lucide="users"></i></div>
</div>

.kpi-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.kpi-card.accent-indicator::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background-color: var(--color-primary);
}

20. Chart Styles

Custom CSS/SVG-based data charts styled to showcase monthly enrollment data and attendance ratios.

Monthly Registration Analysis

Total number of student registrations completed each month.

Jan

Feb

Mar

Apr

May

Overall Class Attendance Rate

Total attendance percentage achieved for Term 2.

75% Present

25% Absent / Leave

Code Spec

<!-- Column Chart -->
<div class="chart-bar-container">
  <div class="chart-bar-wrapper">
    <div class="chart-bar" style="height: 120px;">
      <div class="chart-bar-tooltip">Jan: 120 std</div>
    </div>
    <span class="chart-label">Jan</span>
  </div>
</div>

<!-- Circle Ring Chart -->
<svg width="100" height="100" class="chart-ring-svg">
  <circle cx="50" cy="50" r="40" class="chart-ring-track"></circle>
  <circle cx="50" cy="50" r="40" class="chart-ring-fill"></circle>
</svg>

.chart-bar-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 200px;
}
.chart-bar {
  width: 28px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: linear-gradient(180deg, var(--color-primary) 0%, rgba(97, 61, 223, 0.4) 100%);
  position: relative;
}
.chart-ring-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 62.8; /* 75% present */
}

Aljamiat Platform

Interactive ERP Modules

1. Onboarding Setup

2. Auth Portal Simulator

3. Admin Mission Control

4. Global ERP Layout Shell

5. User & Roles Manager

6. Academic Structure

7. Student Management

8. Parent Management

9. Employee Management

10. Attendance Management

11. Communication & Messaging

13. Finance & Fee Management

14. Reports & Analytics

15. Super Admin Panel

1. Color Tokens

Brand & Accent Shades

Semantic States

2. Typography Scale

Student Enrollment Dashboard

Manage Classroom Schedules

Academic Year 2026

3. Spacing System

4. Border Radius

5. Shadow System

6. Buttons

7. Form Elements

8. Cards

Sarah Connor

9. Tables

10. Badges

11. Alerts

12. Modals

Record Student Dismissal

13. Drawers

Edit Student Profile

14. Tabs

Mon, Wed, Fri Routine

Core Semester Curriculum

Default Grading System

15. Breadcrumbs

16. Empty States

No Active Classrooms Configured

17. Loading States

18. Notification Styles

19. KPI Cards

20. Chart Styles

Monthly Registration Analysis

Overall Class Attendance Rate