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
Build
End-to-end system integration dan implementasi teknologi data.
Layanan IntiResearch
Riset kebutuhan bisnis untuk solusi teknologi yang tepat sasaran.
StrategiDevelop
Pengembangan dan manajemen layanan berkelanjutan.
DeliveryNavigasi
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
Informasi
Pembaruan sistem terjadwal Sabtu, 02.00–04.00 WIB.
Berhasil
Konfigurasi data integrator telah disimpan.
Peringatan
Kuota penyimpanan mendekati batas maksimum.
Gagal
Koneksi ke server database terputus.
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.
Bisa ditutup
Klik tombol × untuk menutup pesan ini.
Tutup otomatis (8 dtk)
Tertutup sendiri; arahkan kursor untuk menjeda.
Peringatan menetap
Tetap tampil sampai pengguna menutupnya.
Hanya tutup otomatis
Tanpa tombol tutup; hilang setelah 6 detik.
Tabel
| Proyek | Klien | Layanan | Status |
|---|---|---|---|
| Migrasi Data Nasional | Sinarmas Finance | Data Integration | Berjalan |
| Platform DevOps | Indosat | DevOps | Selesai |
| Database Modernization | Prodia Widyahusada | Database Platform | Perencanaan |
Tab
Pagination
Breadcrumb
Tooltip
Arahkan kursor ke teks bergaris putus-putus untuk melihat tooltip.
Modal
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.
Deliver the best technology solution
We focused on end to end IT solution to help a company improve their capabilities in facing today's business challenges with technology.