Create a complete modern SaaS design system and UI layout for a School PPDB (Student Admission System).

The design should look like a premium SaaS dashboard similar to modern fintech or analytics dashboards.

STYLE
Clean
Modern
Minimal
Professional
Soft shadows
Rounded cards
Spacious layout
Card-based interface
Light theme
Startup SaaS style

TARGET USERS
School administrators
Students registering
Parents checking admission status

DESIGN LANGUAGE
Friendly but professional
Clear information hierarchy
High readability
Accessible UI

--------------------------------------------------

COLOR SYSTEM

Primary Color
#4F6EF7

Primary Hover
#3F5FE0

Secondary
#6C8BFF

Accent
#22C1C3

Success
#22C55E

Warning
#F59E0B

Danger
#EF4444

Background
#F7F9FC

Card Background
#FFFFFF

Border Color
#E6EAF2

Text Primary
#1F2937

Text Secondary
#6B7280

Muted Text
#9CA3AF

Gradient Background
linear-gradient(135deg, #4F6EF7, #22C1C3)

--------------------------------------------------

TYPOGRAPHY

Primary Font
Poppins

Secondary Font
Inter

Heading Styles

H1
Poppins Bold
40px

H2
Poppins Bold
32px

H3
Poppins SemiBold
24px

H4
Poppins SemiBold
20px

Body Text
Inter Regular
16px

Small Text
Inter Regular
14px

Table Text
Inter Medium
14px

Button Text
Inter Medium
14px

--------------------------------------------------

SPACING SYSTEM

4px
8px
16px
24px
32px
48px
64px

Section Padding
64px

Card Padding
24px

--------------------------------------------------

BORDER RADIUS

Cards
16px

Buttons
10px

Inputs
10px

Badges
8px

--------------------------------------------------

SHADOW SYSTEM

Card Shadow
0 10px 30px rgba(0,0,0,0.05)

Hover Shadow
0 15px 40px rgba(0,0,0,0.08)

Modal Shadow
0 25px 60px rgba(0,0,0,0.15)

--------------------------------------------------

ICONS

Use modern outline icons.

Preferred icon libraries
Lucide
Heroicons
Tabler Icons

Icons should be minimal and consistent.

--------------------------------------------------

BUTTON DESIGN

Primary Button
Background #4F6EF7
Text White
Radius 10px

Secondary Button
Border #E6EAF2
Text #1F2937

Ghost Button
Transparent
Text #4F6EF7

Hover Effect
Slight shadow and color darkening

--------------------------------------------------

INPUT FIELD

Rounded input
Radius 10px

Border
#E6EAF2

Focus
Border #4F6EF7

Padding
12px 16px

--------------------------------------------------

CARD COMPONENT

White background
Radius 16px
Soft shadow

Card sections
Header
Content
Footer

Padding
24px

--------------------------------------------------

BADGE STATUS COLORS

Accepted
Green #22C55E

Pending
Yellow #F59E0B

Rejected
Red #EF4444

Verified
Blue #4F6EF7

--------------------------------------------------

LAYOUT STRUCTURE

Use a SaaS dashboard layout.

LEFT SIDEBAR
Width 260px
Logo at top
Navigation menu with icons

Menu Items
Dashboard
Student Registration
Applicant Data
Document Verification
Payment
Entrance Test
Announcement
Reports
Settings

--------------------------------------------------

TOP NAVBAR

Search bar
Notification icon
User profile dropdown

--------------------------------------------------

MAIN DASHBOARD PAGE

Show statistics cards:

Total Applicants
Accepted Students
Pending Verification
Rejected Applicants

Each card includes
Icon
Large number
Short label
Small trend indicator

--------------------------------------------------

ANALYTICS SECTION

Charts

Bar chart
Applicants per month

Pie chart
Acceptance ratio

Line chart
Daily registrations

--------------------------------------------------

DATA TABLE

Table for applicant list.

Columns

Registration ID
Student Name
School Origin
Registration Date
Status
Action

Features

Search
Filter
Sorting
Pagination

--------------------------------------------------

STUDENT REGISTRATION PAGE

Form sections:

Personal Data
Student Name
Birth Date
Gender
Address

Parent Information
Father Name
Mother Name
Phone Number

School Information
Previous School
Graduation Year

Upload Documents
Birth Certificate
Family Card
Report Card

Submit Button

--------------------------------------------------

ADMIN VERIFICATION PAGE

Admin can:

View documents
Approve or reject applicant
Add notes
Change status

--------------------------------------------------

PAYMENT PAGE

Display payment status.

Payment methods:

Bank Transfer
Cash

Show:

Payment ID
Student
Amount
Status

--------------------------------------------------

ANNOUNCEMENT PAGE

Students can check admission result.

Status cards:

Accepted
Pending
Rejected

--------------------------------------------------

MICRO INTERACTIONS

Card hover lift
Button hover animation
Smooth dropdown
Loading skeleton
Success animation

--------------------------------------------------

RESPONSIVE DESIGN

Desktop
Tablet
Mobile

Sidebar collapses on mobile.

Tables become scrollable.

Cards stack vertically.

--------------------------------------------------

UI STYLE GOAL

Premium
Modern
Clean
Easy to use
Professional school system

Inspired by modern SaaS dashboards.

The project is already 60% completed and functional.

Important rules:
Do NOT rebuild the application.
Do NOT modify backend logic.

The goal is ONLY to redesign the UI style.

Keep existing:

Laravel controllers
routes
models
database structure
form logic
validation
APIs

Only update:

Blade views
layout files
CSS / Tailwind styling
UI components

Implement the following modern SaaS design system across the existing UI.