Dasa Design System

Warna

Warna brand (navy, biru, oranye) tetap konstan di kedua tema — hanya permukaan (background, surface, border, teks) yang beradaptasi. Coba tombol tema di atas.

Brand (konstan)

Netral — tema terang

Netral — tema gelap (diturunkan dari navy)

Permukaan & teks semantik (adaptif per tema)

Tipografi

Tiga peran font: --font-display (Montserrat) untuk heading & tombol, --font-body (DM Sans) untuk navigasi & UI label, --font-copy (Roboto) untuk paragraf panjang.

Tombol

Kartu & Badge

Navigasi

Form

Pengelompokan field (fieldset)

Gunakan <fieldset class="fieldset"> dengan <legend> untuk mengelompokkan field yang berkaitan; pembaca layar ikut mengumumkan nama grupnya. Isi grup memakai .field dan .grid seperti biasa.

Tata letak form (.form, .form-row, .field--sm)

Form tidak melebar penuh: bungkus dengan .form (atau kartu .card--form), kelompokkan dengan fieldset, sejajarkan field berkaitan dengan .form-row, dan batasi field pendek dengan .field--xs|sm|md.

Status galat (field--invalid)

Tambahkan field--invalid pada .field agar label, border, dan cincin fokus menjadi merah; letakkan pesan galat di <small>.

Varian

Statistik

Alert & Notifikasi

Bisa ditutup & tutup otomatis

Tambahkan alert--dismissible dan tombol .alert__close[data-alert-close] untuk tombol tutup; tambahkan data-autoclose="ms" agar tertutup sendiri dengan indikator waktu (berhenti selagi kursor di atasnya). Perilakunya dijalankan dasa-ui.js (opsional). Pesan galat sebaiknya tidak ditutup otomatis.

Tabel

Tab

Pagination

Breadcrumb

• Home
• Services
• Database Platform

Tooltip

Arahkan kursor ke teks bergaris putus-putus untuk melihat tooltip.

Modal

Navbar Responsif (Hamburger)

Tambahkan .navbar--collapsible: di bawah 768px menu tersembunyi dan dibuka lewat tombol hamburger (tanpa JavaScript; Escape / klik link menutup bila dasa-ui.js dimuat). Perkecil jendela untuk mencoba.

<nav class="navbar navbar--collapsible">
  <span class="navbar__brand">DASA</span>
  <input type="checkbox" id="menu" class="navbar__toggle-input" />
  <label for="menu" class="navbar__toggle" aria-label="Menu"></label>
  <ul class="navbar__links"><li><a href="#">Home</a></li></ul>
  <div class="navbar__actions"><button class="btn btn--cta btn--sm">Hubungi</button></div>
</nav>

Sidebar & App Shell (Drawer Mobile)

Gunakan .app-shell + .sidebar untuk navigasi aplikasi penuh. Di layar besar (≥ 1024px) tampil sebagai panel kiri permanen, sedangkan di mobile/tablet menjadi drawer geser dari kiri yang dibuka lewat .app-topbar (CSS-only via checkbox; Escape atau klik tautan menutup drawer bila dasa-ui.js dimuat).

<div class="app-shell">
  <input type="checkbox" id="app-sb" class="sidebar-toggle-input" />
  <header class="app-topbar">
    <label for="app-sb" class="sidebar-toggle" aria-label="Menu"></label>
    <span class="navbar__brand">DASA</span>
  </header>
  <label for="app-sb" class="sidebar-backdrop"></label>
  <aside class="sidebar">
    <div class="sidebar__brand">DASA</div>
    <p class="sidebar__title">Menu</p>
    <nav class="sidebar__nav">
      <ul>
        <li><a href="#" class="is-active">Dashboard</a></li>
        <li><a href="#">Proyek</a></li>
      </ul>
    </nav>
  </aside>
  <main class="app-main">...</main>
</div>

Accordion

Memakai <details> bawaan browser. Beri atribut name="grup" yang sama pada tiap <details> agar hanya satu yang terbuka.

<div class="accordion">
  <details name="faq">
    <summary>Pertanyaan</summary>
    <div class="accordion__body">Jawaban</div>
  </details>
</div>

Switch & Dropdown

<label class="switch"><input type="checkbox" role="switch" /> Label</label>

<details class="dropdown">  <!-- tambah .dropdown--end jika menu harus rata kanan -->
  <summary class="btn btn--outline btn--sm">Aksi</summary>
  <ul class="dropdown__menu"><li><a href="#">Edit</a></li></ul>
</details>

Avatar

<span class="avatar">RA</span>   <!-- --sm | --lg; boleh berisi <img alt=""> -->
<span class="avatar-group"><span class="avatar">A</span><span class="avatar">B</span></span>

Empty State & Skeleton

<div class="empty-state">
  <span class="empty-state__icon" aria-hidden="true">&#9744;</span>
  <h3 class="empty-state__title">Belum ada data</h3>
  <p>Keterangan singkat.</p>
</div>

<div aria-busy="true"><span class="skeleton skeleton--text"></span></div>

Toast

Notifikasi sementara (memakai gaya alert) dengan 7 posisi: atas/bawah × kiri/tengah/kanan, dan tengah. Di mobile otomatis dipusatkan horizontal. Butuh dasa-ui.js.

DasaUI.toast("Data tersimpan", { type: "success", title: "Berhasil", duration: 5000, position: "top-center" });
// posisi bawaan semua toast (default "bottom-right"):
DasaUI.toast.position = "top-right";

Utilitas Layout

.stack (vertikal), .cluster (baris membungkus), .hide-mobile, .show-mobile, .text-center, .text-muted, .visually-hidden. Atur jarak dengan .stack--sm|lg atau variabel --stack-gap / --cluster-gap.

<div class="stack"><h3>Judul</h3><p>Isi</p></div>
<div class="cluster cluster--between">...</div>

Aksesibilitas & Penamaan

• Fokus keyboard: semua elemen interaktif mendapat cincin fokus biru (:focus-visible); animasi dimatikan untuk pengguna prefers-reduced-motion.
• Kontras: oranye #FF5F00 hanya ±3:1 di atas putih. Untuk teks oranye kecil di latar terang pakai var(--color-brand-secondary-text) (#C24100, ±5.2:1); eyebrow dan .badge--secondary sudah memakainya. Tombol oranye (teks putih tebal) pakai ukuran btn--lg atau 18px+ bila perlu AA penuh.
• Penamaan tombol: .btn--cta = oranye (alias .btn--primary), .btn--brand = biru (alias .btn--secondary). Nama lama tetap berfungsi.
• Lebar kartu: .card--narrow (40rem, alias .card--form) dan .card--wide (56rem).

Contoh Section Gelap (fixed, tidak ikut tema)

Panel navy dekoratif ini sengaja tidak beradaptasi ke tema terang/gelap — dipakai untuk highlight konten, bukan sebagai permukaan default halaman.