Memulai

Arsitektur & Struktur

Struktur monorepo, tiga tingkatan token, dan anggaran performa.

Majalengka Design System dikelola dengan pola monorepo untuk memastikan sinkronisasi antara spesifikasi token, paket CSS polos, dan pustaka komponen Vue.

Struktur Repositori

majalengka-tech/design-system (monorepo)
├── packages/
│   ├── tokens/      # Sumber token DTCG JSON + build pipeline
│   ├── css/         # Layer CSS murni tanpa dependensi (±9 kB gzip)
│   └── vue/         # Komponen referensi Vue 3 + TypeScript
├── docs/            # Website dokumentasi resmi (Docus / Nuxt)
└── majalengka-design-system/ # Bundle pengetahuan OKF v0.2

Tiga Tingkat Penamaan Token

Sesuai spesifikasi arsitektur token, token dibagi menjadi tiga tingkatan terisolasi:

Tingkat	Contoh Nama Token	Penggunaan
Global	`--mjl-color-primary-700`	Nilai mentah palet warna dasar. Tidak boleh dipakai langsung di komponen.
Semantik	`--mjl-color-action-primary-default`	Nilai yang memiliki makna tujuan desain. Dipakai dalam layout sehari-hari.
Komponen	`--mjl-btn-primary-bg`	Terikat pada komponen spesifik untuk kemudahan modifikasi lokal.

Anggaran Performa (Performance Budget)

Untuk menjamin portal tetap cepat dimuat di jaringan pedesaan 3G/4G:

Ukuran CSS total: Di bawah 64 kB (minified) dan di bawah 12 kB (gzipped) — build gagal bila salah satu terlampaui.
Ketergantungan: 0 external runtime dependencies untuk paket CSS.
Font: Wajib di-self-host (Plus Jakarta Sans, Inter, JetBrains Mono) untuk menghindari pemblokiran jaringan firewall instansi.
Motion: Mematuhi kueri media prefers-reduced-motion untuk menghormati preferensi aksesibilitas pengguna.

Ubah halaman iniatauLaporkan masalah

Instalasi

Cara memasang dan menggunakan Majalengka Design System di berbagai tumpukan teknologi.

Preset UnoCSS

Panduan integrasi UnoCSS dengan @majalengka/tokens/preset untuk Vite, Nuxt, dan Astro.