Palet Warna

Warna Utama

Sistem warna yang digunakan di seluruh platform KamilEdu

Warna Aksen

Blue --blue

Cyan --cyan

Orange --orange

Green #27C93F

Gold --gold

Warna Latar & Surface

Navy --navy

Navy Light --navy-light

Surface --surface

Glass --glass

Warna Teks

Aa

Text Primary --text

Aa

Text Body --text-body

Aa

Text Dim --text-dim

Tipografi

Font & Ukuran

Heading — Outfit

H1 — 42px / 800

Heading Satu

H2 — 32px / 700

Heading Dua

H3 — 22px / 700

Heading Tiga

H4 — 18px / 600

Heading Empat

Body — DM Sans

Body — 15px / 400

Sistem manajemen sekolah terpadu untuk era digital. Membantu sekolah, guru, dan orang tua bekerja sama.

Small — 13px / 500

Teks kecil untuk label, caption, dan metadata.

XS — 11px / 600

Label extra kecil

Teks Spesial

Gradient Text Teks Gradien

Section Label

Label Bagian

Komponen

Glass Cards

Kartu dengan efek glassmorphism yang digunakan di seluruh platform

.p-glass

Glass Card

Kartu dasar dengan efek glassmorphism dan backdrop blur.

.p-glass .p-glass-hover

Hover Card

Kartu dengan efek hover — angkat dan bayangan.

.p-glass-strong

Strong Glass

Kartu glass dengan latar lebih tebal dan blur lebih kuat.

Ikon

Icon Containers

Ukuran

40px

48px

64px

Varian Warna

Blue

Cyan

Orange

Green

Red

Label

Badges & Pills

Badge Varian

Admin Guru Orang Tua Aktif

Aksi

Tombol & Tautan

Tombol Utama

Tombol Primer Tombol Sekunder

Tabs / Filter

Data

Stat Bar & Angka

50+

Sekolah

10K+

Pengguna

99.9%

Uptime

Daftar

Checklists & Numbered

Checklist

Manajemen data siswa lengkap
Laporan akademik otomatis
Pembayaran SPP digital
Komunikasi real-time

Numbered Items

01 Registrasi sekolah

02 Setup dan konfigurasi

03 Pelatihan pengguna

04 Go live!

Dekorasi

Background Patterns

Pola latar dekoratif untuk menambah kedalaman visual

.p-bg-glow

Radial gradient glow biru & cyan

.p-bg-grid

Grid lines halus 80px

.p-bg-dots

Dot pattern 24px

Layout

Spacing & Radius

Gap Scale

4px

8px

12px

16px

24px

32px