Color Palette

Primary Colors

The color system used throughout the KamilEdu platform

Accent Colors

Blue --blue

Cyan --cyan

Orange --orange

Green #27C93F

Gold --gold

Background & Surface

Navy --navy

Navy Light --navy-light

Surface --surface

Glass --glass

Text Colors

Aa

Text Primary --text

Aa

Text Body --text-body

Aa

Text Dim --text-dim

Typography

Fonts & Sizes

Headings — Outfit

H1 — 42px / 800

Heading One

H2 — 32px / 700

Heading Two

H3 — 22px / 700

Heading Three

H4 — 18px / 600

Heading Four

Body — DM Sans

Body — 15px / 400

Integrated school management system for the digital era. Helping schools, teachers, and parents work together.

Small — 13px / 500

Small text for labels, captions, and metadata.

XS — 11px / 600

Extra small label

Special Text

Gradient Text Gradient Text

Section Label

Components

Glass Cards

Cards with glassmorphism effect used throughout the platform

.p-glass

Glass Card

Base card with glassmorphism effect and backdrop blur.

.p-glass .p-glass-hover

Hover Card

Card with hover effect — lift and shadow.

.p-glass-strong

Strong Glass

Glass card with thicker background and stronger blur.

Icons

Icon Containers

Sizes

40px

48px

64px

Color Variants

Blue

Cyan

Orange

Green

Red

Labels

Badges & Pills

Badge Variants

Admin Teacher Parent Active

Actions

Buttons & Links

Primary Buttons

Primary Button Secondary Button

Tabs / Filters

Data

Stat Bar & Numbers

50+

Schools

10K+

Users

99.9%

Uptime

Lists

Checklists & Numbered

Checklist

Complete student data management
Automated academic reports
Digital tuition payments
Real-time communication

Numbered Items

01 School registration

02 Setup and configuration

03 User training

04 Go live!

Decoration

Background Patterns

Decorative background patterns for visual depth

.p-bg-glow

Radial gradient glow blue & cyan

.p-bg-grid

Subtle 80px grid lines

.p-bg-dots

24px dot pattern

Layout

Spacing & Radius

Gap Scale

4px

8px

12px

16px

24px

32px