Design System › Pendahuluan
Eduparx LMS · Draft

Pendahuluan

Foundation visual untuk seluruh antarmuka Eduparx LMS. Token di sini konsisten dengan brand Eduparx e-commerce namun memiliki identitas LMS tersendiri — fokus pada keterbacaan, hierarki konten, dan pengalaman belajar yang tenang.

Prinsip Desain

Konsistensi

Satu token untuk satu keputusan visual. Tidak ada nilai hard-coded di luar token yang terdefinisi.

Keterbacaan

Tipografi berbasis skala proporsional dengan kontras tinggi, optimal untuk konten pembelajaran panjang.

Aksesibilitas

Semua kombinasi warna memenuhi standar WCAG 2.1 AA — kontras minimum 4.5:1 untuk teks body.

Skalabilitas

Token dirancang CSS-ready, kompatibel dengan Style Dictionary, Figma Variables, dan Tailwind config.

Scope Dokumen

Color Tokens Typography Scale Spacing 4px Grid Elevation Shadows Border Radius CSS Variables

Color Tokens

Tiga skala warna utama (primary, accent, neutral) dan empat warna semantik. Setiap skala memiliki 10 stop dari yang paling terang (50) hingga paling gelap (900).

Primary Blue Scale

Primary
Accent Teal
Neutral Gray

Semantic Colors

Success
--color-success-500
Warning
--color-warning-500
Error
--color-error-500
Info
--color-info-500

Contoh Penggunaan

Primary CTA Secondary Button Accent ✓ Selesai ⏳ Proses ✕ Overdue New Disabled

Typography Tokens

Skala tipografi berbasis rem dengan base 16px. Font stack mengutamakan Plus Jakarta Sans dengan fallback ke system-ui untuk performa optimal.

Font Stack

CSS
font-family: 'Plus Jakarta Sans', system-ui, -apple-system,
             BlinkMacSystemFont, 'Segoe UI', sans-serif;

Type Scale

Spacing Tokens

Semua nilai merupakan kelipatan 4px, konsisten dengan 4-point grid system di Figma. Gunakan token ini untuk margin, padding, dan gap — tidak ada nilai hard-coded.

Grid 4px

Panduan Konteks

Component Level
/* Button */
padding: spacing-2 spacing-4   /* 8px 16px */
gap (icon–text): spacing-2     /* 8px */
/* Card */
padding: spacing-5             /* 20px */
/* Badge */
padding: spacing-1 spacing-2   /* 4px 8px */
Layout Level
/* Grid */
gap: spacing-6                 /* 24px */
/* Section */
margin-bottom: spacing-10      /* 40px */
/* Page */
padding: spacing-8             /* 32px */

Elevation Tokens

Lima level shadow untuk membedakan kedalaman lapisan UI. Gunakan secara konsisten — jangan skip level dan jangan gunakan nilai shadow ad-hoc di luar token ini.

Shadow Scale

Level 0
Flat
--shadow-0
Tabel, input, divider, border-only
Level 1
Raised
--shadow-1
Kartu kursus, list item, card default
Level 2
Floating
--shadow-2
Dropdown, tooltip, badge popover
Level 3
Overlay
--shadow-3
Side panel, sticky header, drawer
Level 4
Modal
--shadow-4
Modal dialog, bottom sheet, alert

CSS Values

CSS
--shadow-0: none;
--shadow-1: 0 1px 4px rgba(0,0,0,.08);
--shadow-2: 0 4px 12px rgba(0,0,0,.10);
--shadow-3: 0 8px 24px rgba(0,0,0,.14);
--shadow-4: 0 16px 40px rgba(0,0,0,.18);

Border Radius Tokens

Empat level radius yang konsisten digunakan di seluruh komponen. Jangan mix radius berbeda dalam satu komponen yang sama.

Radius Scale

Small
--radius-sm
4px
Chip, badge, tag, thumbnail kecil
Medium
--radius-md
8px
Button, input, dropdown item
Large
--radius-lg
12px
Kartu kursus, modal, panel
Full / Pill
--radius-full
9999px
Avatar, toggle switch, pill badge

CSS Variables – Referensi Lengkap

Semua token dalam format --nama-token. Simpan sebagai tokens.css dan import di root stylesheet.

Tabel Token