RyuLearn Design System
Satu sumber kebenaran. Semua warna, tipografi, shape, dan komponen mengacu ke token --md-sys-* — mobile-first, 320px → 1280px, light/dark + 7 tema warna.
Context7: Material 3 color roles • Google M3 Theme Builder • Tailwind v4 @theme
Tema
Ruby • Light mode
Pilihan warna tersimpan otomatis (localStorage) dan mengikuti preferensi sistem saat pertama kali dibuka. Semua komponen mengacu ke token --md-sys-color-*.
Pilih Tema Warna
7 pilihan — semua turunan M3 tonal palette yang harmonis & accessible
Color Roles (M3)
Jangan pakai hex langsung. Pakai role: primary untuk CTA paling penting, secondary-container untuk tonal button, tertiary untuk accent pelengkap, surface-container-* untuk layer & elevation.
Surface Container Scale (elevation tanpa shadow)
Typography — Mobile First
Display Large — H1 • 36px mobile → 57px desktop
Belajar Lebih Cepat & Profesional
Headline — H2 • 24px → 30px
Dibuat untuk Hasil Nyata
Body Large • 15px mobile → 16px desktop, line 1.7
Platform pembelajaran modern dengan kurikulum terstruktur dan mentor berpengalaman. Nyaman dibaca di HP 320px hingga desktop 1280px.
Components — M3 Variants
Button
filled (primary) • tonal • outlined • text • elevated • error — semua mobile-first, 44px touch target
Elevated
Shadow + surface-low — untuk card yang perlu menonjol
Filled
Highest container — subtle, untuk list grouping
Outlined
Border outline-variant — paling minimal
Badge
Input (M3 Outlined Text Field)
Border → primary saat focus, shape small (8px), 44px height untuk mobile.
Shape Scale
Corner token — konsisten di semua komponen
Usage Guidelines
• Mobile-first: desain di 320px dulu, baru scale ke tablet/desktop (Container 16px → 24px → 32px).
• Warna: jangan hardcode hex. Selalu pakai var(--md-sys-color-*).
• Dark/light: otomatis via .dark class + data-theme. Persist di localStorage.
• Aksesibilitas: contrast sudah mengikuti M3 (on-* selalu contrast aman).
Semua komponen mengacu ke Design System ini
Tambah warna baru? Edit src/design-system/theme/config.ts + src/design-system/tokens/colors.css (tambah html[data-theme="namabaru"] & html.dark[data-theme="namabaru"]). Komponen otomatis ikut tanpa ubah file lain.