You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.4 KiB
38 lines
1.4 KiB
# Design System |
|
## Palet Warna |
|
- Background utama: `slate-950` (#020617) |
|
- Surface/kartu: `slate-900` + border `slate-800` |
|
- Input: `slate-800` + border `slate-700` |
|
- Teks utama: `slate-100` / `white` |
|
- Teks sekunder: `slate-400`, `slate-500` |
|
- Aksen primer: `cyan-600` / `cyan-400` (CTA, link aktif) |
|
- Status sukses: `emerald-950` / `emerald-300` |
|
- Status peringatan: `amber-950` / `amber-300` |
|
- Status error: `red-950` / `red-300` |
|
- Status info/admin: `violet-400` |
|
|
|
## Tipografi |
|
- Font: Tailwind default (`ui-sans-serif`, system-ui) |
|
- Heading halaman: `text-2xl`–`text-3xl font-bold` |
|
- Subheading kartu: `text-lg font-semibold` |
|
- Body/tabel: `text-sm` |
|
- Meta/footer: `text-xs` |
|
- Monospace: `font-mono` untuk IP, path audit |
|
|
|
## Komponen Dasar |
|
- Kartu panel: `bg-slate-900 border border-slate-800 rounded-2xl` |
|
- Tombol primer: `rounded-lg bg-cyan-600 hover:bg-cyan-500` |
|
- Tombol sekunder: `border border-slate-700 hover:bg-slate-800` |
|
- Badge status: `inline-flex rounded-full px-2–3 py-0.5–1 text-xs` |
|
- Input: `rounded-lg bg-slate-800 border border-slate-700 px-3–4 py-2–3` |
|
- Focus ring: `focus:ring-2 focus:ring-cyan-500` |
|
|
|
## Ikon |
|
- SVG inline via `partials/nav-icon.blade.php` |
|
- Set ikon: home, database, users, settings, mail, clipboard, dll. |
|
- Brand icon: `public/icons/icon.svg` |
|
|
|
## Spacing & Lebar Konten |
|
- Max width halaman data: `max-w-[1600px]` |
|
- Max width form/profil: `max-w-4xl` / `max-w-[1200px]` |
|
- Padding halaman: `px-4 py-6`–`py-8`
|
|
|