Sistem Desain & Panduan UI

Katalog visual ini menampilkan semua komponen dasar yang dibangun menggunakan prinsip layout Google Classroom yang terstruktur serta estetika kontras tinggi dari Anthropic Claude.

Tipografi

Font Header

Lexend Deca

--font-heading | Used for Titles, Hero Text, Page Names

Ayo Mulai Belajar!

Kelas Pemrograman Web & UI/UX

Mentor Riyanda Azis Febrian

Font Body

Inclusive Sans

--font-sans | Used for Body Text, Descriptions, Labels, Form Inputs

Satu platform yang menghubungkan siswa dan mentor dalam pengalaman belajar yang terstruktur, terukur, dan mudah diakses.

Label input, form bantuan, copyright teks, dan metadata menggunakan Inclusive Sans untuk keterbacaan tinggi.

Palet Warna

Brand Purple

#8A3DFF

Primary CTA, active elements, brand identity

Brand Yellow

#FFCD29

Accent highlights, alert states, secondary emphasis

Brand Gray

#8E8E93

Secondary text, borders, placeholders

White

#FFFFFF

Main background, card backgrounds, light contrast

Black

#000000

Primary text, headers, maximum contrast

Tombol (Button)

Varian Tombol

Ukuran Tombol

Keadaan Khusus & Animasi

Input & Form

Input Standar

Username

Label dan deskripsi bantuan menggunakan Inclusive Sans.

Alamat Email

Input Khusus

Kata Sandi

Validasi Langsung (Uji Coba)

Ketik minimal 5 karakter untuk menghilangkan pesan galat.

Kartu (Card)

Kelas Pemrograman Dasar

Materi tingkat awal untuk pemula

Modul ini mencakup HTML5, CSS3 Grid, Flexbox, dasar Javascript, dan arsitektur web modern. Mentor akan memandu tugas mingguan secara terarah.

Batas: Besok, 23:59

Sedang Berjalan

Dasar Pemrograman Web

Mentor: Riyanda Azis Febrian

Penyelesaian Modul72%

2 tugas baru ditambahkan oleh mentor

Lencana (Badge)

ActiveIn ProgressSuspendedDraft State

Pemberitahuan (Alert)

Informasi Pembaruan

Sistem autentikasi dual-portal (Siswa dan Staf) saat ini berjalan secara simulatif. Fitur dashboard penuh akan dirilis pada fase 2.

Akses Ditolak

Kata sandi yang Anda masukkan salah. Sisa batas percobaan tersisa 3 kali sebelum akun dibekukan sementara.

Tab (Tabs)

Pengenalan Web Semantik

Materi dibaca • Diunggah 2 hari yang lalu oleh Rian Prasetya

Dialog & Modal

Dropdown Menu

Toggles & Checkbox

Kirim laporan mingguan secara otomatis

Status: Non-aktif

Mode Senyap (Mute Notifications)

Matikan semua bunyi pemberitahuan aplikasi lms.

Panel Sisi (Sheet)

Scroll Area

Aktivitas Terbaru

Rian Prasetya memposting materi baru: CSS Grid.

1 jam yang lalu

Tugas Akhir UI/UX diperbarui oleh Budi Santoso.

2 jam yang lalu

Siswa A berkomentar di modul Web Semantik.

3 jam yang lalu

Akun mentor baru berhasil terdaftar di sistem.

4 jam yang lalu

Ujian Tengah Semester dijadwalkan ulang.

5 jam yang lalu

Siswa B mengunggah revisi Tugas 3.

6 jam yang lalu

Sistem LMS ditingkatkan ke versi 2.0.

7 jam yang lalu

Skeleton Loading

Loading Banner…

Toast Notifications (Sonner)

Indikator Progres (Progress Bar)

Default Progress (Brand Purple)

Animasi pengisian otomatis: 0%

Success State (Green)

Seluruh tugas berhasil dikirim (100%)