HAPAKAT

Design system

Sistem desain HAPAKAT

Token, komponen, dan pola untuk aplikasi HAPAKAT dan situs ini. Monokrom dan tenang, dengan biru Bank Indonesia sebagai satu-satunya aksen.

Versi
1.0
Tanggal
Status
Draf untuk ideathon
Pemilik
Tim ATERA
Komponen
39 komponen hd-

Pendahuluan

HAPAKAT adalah katalog UMKM Kalimantan Tengah yang terintegrasi Kartu Kredit Indonesia (KKI) untuk belanja pemerintah daerah, dengan SPJ (Surat Pertanggungjawaban) yang tersusun otomatis. Halaman ini adalah acuan visualnya: warna, huruf, spasi, ikon, komponen, dan pola teks. Pembacanya tim pengembang HAPAKAT, juri ideathon, dan mitra yang ingin tahu bagaimana layar HAPAKAT dibangun.

Dasarnya adalah sistem desain x.ai milik tim: monokrom, editorial, dan tenang. Tinta hampir hitam di atas putih, kartu putih hangat, kontrol berbentuk pil, dan tanpa bayangan kecuali untuk panel yang melayang. HAPAKAT mengganti satu-satunya warna x.ai, oranye, dengan biru Bank Indonesia. Nama x.ai di sini merujuk pada sistem desain internal tim yang meniru gaya situs x.ai; HAPAKAT tidak berafiliasi dengan xAI.

Palet mockup lama (hijau hutan, emas, pita anyaman, dan huruf Plus Jakarta Sans) sudah tidak dipakai. Mockup tetap menjadi acuan isi: layar, data, alur, dan teks.

Cara memakai

  1. tokens.css

    Semua nilai mentah: warna, huruf, spasi, radius, ukuran, dan gerak sebagai custom property di :root. Satu-satunya berkas yang boleh berisi kode warna.

  2. components.css

    Pustaka komponen aplikasi berawalan hd-, hanya memakai var(--…). Aplikasi HAPAKAT cukup memuat tokens.css dan components.css.

  3. site.css

    Tata letak dan prosa situs dokumentasi: beranda, PRD, dan halaman ini. Tidak dibutuhkan di aplikasi.

Muat huruf lebih dulu, lalu ketiga berkas dengan urutan ini:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap">
<link rel="stylesheet" href="/assets/tokens.css">
<link rel="stylesheet" href="/assets/components.css">
<link rel="stylesheet" href="/assets/site.css">

Usulan tim, data fiktif

HAPAKAT adalah usulan Tim ATERA untuk Tambun Bungai Ideathon, Borneo DECAFEST 2026, bukan produk resmi Bank Indonesia. Semua nama UMKM, nominal, nomor kartu, dan persona Rina A. di halaman ini fiktif. [Nama OPD] dan [Nama bank] sengaja dibiarkan sebagai tempat isian.

Prinsip desain

Lima prinsip ini lahir dari tiga pengguna HAPAKAT: bendahara pengeluaran atau PPTK yang berbelanja dan menyusun SPJ, pelaku UMKM yang menjual, dan pemerintah daerah yang memantau ke mana belanja mengalir.

1. Nominal selalu utuh

Bendahara mempertanggungjawabkan setiap rupiah. Nominal ditulis lengkap, misalnya Rp1.050.000, dengan angka tabular dan rata kanan. Singkatan seperti Rp412 jt hanya untuk dashboard.

2. Satu layar, satu aksi

Setiap layar tugas punya satu tombol utama berwarna tinta di bar bawah, dengan satu baris penjelasan. Tombol yang memindahkan uang menyebut nominalnya.

3. Bukti tercatat sendiri

Waktu, lokasi, dan dokumen dicatat otomatis, pajak disiapkan sebagai draf, dan setiap dokumen menyebut asalnya: Dari transaksi KKI, Dari konfirmasi penerimaan. Bendahara memeriksa, bukan menyalin.

4. Terbaca tanpa warna

Status verifikasi, status SPJ, dan pilihan selalu berupa teks atau bentuk; warna hanya penguat. Pelaku UMKM dan petugas penerima barang sering membaca layar di ponsel lama atau di bawah terik.

5. Tenang, biru untuk yang penting

Antarmuka monokrom. Biru BI hanya menandai tautan, fokus, pilihan, dan angka kunci seperti sisa limit KKI. Pemda melihat data, bukan dekorasi.

Makna hapakat

Dalam bahasa Dayak Ngaju, hapakat berarti musyawarah untuk mufakat, sepakat bersama. HAPAKAT memakai makna itu untuk hubungan pemerintah daerah, bank, dan UMKM lokal: satu alur belanja yang disepakati bersama, dengan administrasinya dikerjakan oleh sistem. Perlu verifikasi Arti dan pelafalan masih perlu dikonfirmasi dengan penutur bahasa Dayak Ngaju, sesuai catatan produksi naskah pitch.

Merek

Wordmark

HAPAKAT ditulis sebagai huruf, bukan gambar: Geist semibold, kapital semua, tracking 0,04em. Sistem x.ai juga tidak punya logo; merek cukup diset dengan huruf biasa.

Wordmark besar, lockup aplikasi, dan tanda pada 16, 20, 32, 64px

HAPAKAT HAPAKAT
Tanda HAPAKAT 16px Tanda HAPAKAT 20px Tanda HAPAKAT 32px Tanda HAPAKAT 64px 
<div class="hd-col">
  <span class="hd-brand hd-brand--lg"><img class="hd-brand__mark" src="/assets/favicon.svg" alt="" width="64" height="64">HAPAKAT</span>
  <span class="hd-brand"><img class="hd-brand__mark" src="/assets/favicon.svg" alt="" width="24" height="24">HAPAKAT</span>
  <div class="hd-row">
    <img src="/assets/favicon.svg" alt="Tanda HAPAKAT 16px" width="16" height="16">
    <img src="/assets/favicon.svg" alt="Tanda HAPAKAT 20px" width="20" height="20">
    <img src="/assets/favicon.svg" alt="Tanda HAPAKAT 32px" width="32" height="32">
    <img src="/assets/favicon.svg" alt="Tanda HAPAKAT 64px" width="64" height="64">
  </div>
</div>

Tanda anyaman

Tanda kecilnya berupa dua helai tinta dan dua helai biru yang saling menyilang di atas dan di bawah, seperti anyaman. Ini rujukan halus pada kerajinan anyaman rotan Kalimantan Tengah, bukan pola dekoratif. Tanda dipakai hanya sebagai favicon, tanda di header situs, dan lockup aplikasi. Ukuran terkecil 16px, selalu di atas latar putih. Berkasnya /assets/favicon.svg.

Biru Bank Indonesia

Biru diambil dari nilai CSS terhitung (computed style) situs bi.go.id pada 31 Oktober 2026. #055498 adalah warna dominan situs itu dan juga isi ikon SVG-nya; #106EBE versi terangnya; #163A65 versi gelapnya. HAPAKAT dirancang untuk ekosistem KKI dan diikutkan dalam ideathon yang diselenggarakan Kantor Perwakilan Bank Indonesia Provinsi Kalimantan Tengah. Biru ini dipakai sebagai warna fungsional, bukan sebagai identitas Bank Indonesia.

Kontras --bi-blue di atas putih 7,69:1, cukup untuk teks kecil. Karena itu biru boleh dipakai untuk tautan, fokus, pilihan, angka kunci, badge pengumuman, dan sorotan data kecil. Tidak ada tombol biru: tombol utama tetap tinta, seperti x.ai.

Bukan produk resmi Bank Indonesia

HAPAKAT tidak memakai logo Bank Indonesia, tidak memakai nama atau slogan BI sebagai bagian merek, dan tidak menulis kalimat yang menyiratkan dukungan resmi. Bank Indonesia disebut sebagai penyelenggara ideathon dan sebagai mitra yang diharapkan dalam rencana uji coba.

Lakukan

  • Tulis HAPAKAT dengan kapital semua, Geist semibold.
  • Pakai tanda anyaman di atas putih, minimal 16px.
  • Pakai biru BI untuk tautan, fokus, pilihan, dan angka kunci.
  • Sebut "usulan Tim ATERA" di materi publik.

Hindari

  • Memakai logo, gedung, atau gambar resmi Bank Indonesia.
  • Mewarnai wordmark dengan biru atau gradien.
  • Menghidupkan lagi hijau hutan, emas, dan pita anyaman dari mockup lama.
  • Menulis "aplikasi resmi BI" atau "didukung Bank Indonesia".

Warna

Semua warna di bawah dibaca langsung dari tokens.css. Rasio kontras dihitung dengan rumus luminans relatif WCAG 2.2 oleh skrip yang membangun halaman ini, pada latar tipikal setiap token. Warna beralfa dihitung setelah ditumpuk di atas latarnya, sekali dengan presisi penuh dan sekali dengan pembulatan 8-bit seperti di layar; yang dipakai adalah hasil yang lebih kecil. Angka dipotong ke bawah pada dua desimal, jadi tidak pernah dilebihkan.

Aturan singkat

  • Teks: --ink; keterangan: --ink-60. Jangan turun ke abu-abu hex.
  • Biru: tautan, fokus, pilihan, angka kunci, badge pengumuman, dan sorotan data kecil. Bukan untuk tombol, judul, atau dekorasi.
  • Status: pasangan -fg di atas -bg, selalu dengan teks.
  • Oranye x.ai (#ff6308) dan gradien ember dibuang. Nama --accent tetap ada dan kini menunjuk ke biru BI.

Permukaan (x.ai)

--surface #ffffff

Latar halaman dan layar aplikasi. Semuanya berdiri di atas putih polos. Teks --ink di atasnya: 19,79:1, AAA.

--surface-nav #ffffffd9

Header lengket 64px, selalu dipakai bersama --blur-nav. Teks --ink di atasnya: 19,79:1, AAA.

--surface-card #f9f8f6

Putih hangat untuk kartu, tile ikon, kartu limit, dan KPI. Teks --ink di atasnya: 18,65:1, AAA.

--surface-button #f2f1ef

Isi tombol sekunder dan chip filter yang tidak dipilih. Teks --ink di atasnya: 17,53:1, AAA.

Tinta (x.ai)

--ink #0a0a0a

Semua teks utama dan isi tombol primer. Di atas --surface: 19,79:1, AAA.

--ink-60 #0a0a0a99

Eyebrow, keterangan, label sekunder, placeholder. Teks terkecil yang masih lolos AA. Di atas --surface: 5,25:1, AA.

--ink-55 #0a0a0a8c

Paragraf pelan dari x.ai. Sedikit di bawah AA; HAPAKAT memakai --ink-60 untuk teks penting. Di atas --surface: 4,38:1, AA teks besar dan grafis.

--ink-45 #0a0a0a73

Garis kontrol formulir dan cincin langkah berikutnya di linimasa (lolos 3:1), teks nonaktif. Bukan untuk teks biasa. Di atas --surface: 3,15:1, AA teks besar dan grafis.

--ink-30 #0a0a0a4d

Dekoratif saja: batang grafik "lainnya", sub-label yang maknanya sudah ada di nilai. Di atas --surface: 2,05:1, dekoratif.

--ink-25 #0a0a0a40

Dekoratif: titik tengah pemisah. Di atas --surface: 1,78:1, dekoratif.

--ink-20 #0a0a0a33

Dekoratif: pemisah di pil pengumuman, garis putus-putus area foto kosong. Di atas --surface: 1,57:1, dekoratif.

--ink-10 #0a0a0a1a

Garis rambut kartu, pemisah baris, dan garis antar-bagian. Di atas --surface: 1,24:1, dekoratif.

--ink-08 #0a0a0a14

Garis pil pengumuman; lapisan saat ditekan. Di atas --surface: 1,18:1, dekoratif.

--ink-06 #0a0a0a0f

Garis rambut halus, isi skeleton, dan lintasan grafik. Di atas --surface: 1,12:1, dekoratif.

--ink-04 #0a0a0a0a

Lapisan hover dan chip panah di pil pengumuman. Di atas --surface: 1,08:1, dekoratif.

--ink-muted #7d8187

Label tab tidak aktif di x.ai. HAPAKAT memakai --ink-60 karena nilai ini di bawah AA. Di atas --surface: 3,91:1, AA teks besar dan grafis.

--border-popover #d5d9e2

Garis 1px panel melayang. Di atas --surface: 1,41:1, dekoratif.

Di atas tinta (x.ai)

--on-ink #ffffff

Teks di atas isi --ink, misalnya tombol primer. Di atas --ink: 19,79:1, AAA.

--on-ink-80 #ffffffcc

Judul pada tile gelap. Di atas --ink: 12,58:1, AAA.

--on-ink-55 #ffffff8c

Teks sekunder pada tile gelap; detail chip kartu KKI mini. Di atas --ink: 6,24:1, AA.

--on-ink-20 #ffffff33

Garis pemisah di dalam tombol gelap. Di atas --ink: 1,76:1, dekoratif.

Biru Bank Indonesia

--bi-blue #055498

Biru dominan bi.go.id, rgb(5, 84, 152), juga isi ikon SVG situsnya. Diambil 31 Oktober 2026. Di atas --surface: 7,69:1, AAA.

--bi-blue-bright #106ebe

Biru terang bi.go.id, rgb(16, 110, 190). Seri grafik dan sorotan data kecil. Di atas --surface: 5,25:1, AA.

--bi-navy #163a65

Biru gelap bi.go.id, rgb(22, 58, 101). Hover tautan dan seri grafik pertama. Di atas --surface: 11,49:1, AAA.

--bi-blue-light #9dc1e6

Turunan HAPAKAT, bukan dari bi.go.id. Seri grafik ketiga; dekoratif, bukan untuk teks. Di atas --surface: 1,87:1, dekoratif.

--bi-blue-tint #05549814

--bi-blue 8%. Latar status terpilih, badge biru, KPI unggulan, dan callout info. Teks --bi-blue di atasnya: 6,79:1, AA.

--on-blue #ffffff

Teks dan ikon di atas isi --bi-blue. Di atas --bi-blue: 7,69:1, AAA.

Status (hue status situs x.ai, digelapkan agar lolos AA)

--success-fg #1d723c

hsl(142 60% 28%) dari hsl(142 71% 45%). Teks, ikon, dan cakram status sukses. Di atas --surface: 5,95:1, AA.

--success-bg #ecf9f1

hsl(142 50% 95%). Latar badge dan alert sukses. Teks --success-fg di atasnya: 5,50:1, AA.

--warning-fg #7a631f

hsl(45 60% 30%) dari hsl(45 93% 47%). Teks status menunggu atau diproses. Di atas --surface: 5,78:1, AA.

--warning-bg #fdf8e7

hsl(45 85% 95%). Latar badge dan alert peringatan. Teks --warning-fg di atasnya: 5,43:1, AA.

--danger-fg #b62020

hsl(0 70% 42%) dari hsl(0 84% 60%). Galat, ditolak, perlu revisi. Di atas --surface: 6,52:1, AA.

--danger-bg #fceeee

hsl(0 70% 96%). Latar badge dan alert galat. Teks --danger-fg di atasnya: 5,78:1, AA.

--info-fg var(--bi-blue) · #055498

Teks dan ikon informasi. Di atas --surface: 7,69:1, AAA.

--info-bg var(--bi-blue-tint) · #05549814

Latar alert dan callout informasi. Teks --info-fg di atasnya: 6,79:1, AA.

Alias semantik

--accent var(--bi-blue) · #055498

Aksen tunggal HAPAKAT: biru BI menggantikan oranye x.ai. Di atas --surface: 7,69:1, AAA.

--accent-tint var(--bi-blue-tint) · #05549814

Latar badge aksen, pengganti tint oranye x.ai. Teks --bi-blue di atasnya: 6,79:1, AA.

--link var(--bi-blue) · #055498

Warna tautan teks. Di atas --surface: 7,69:1, AAA.

--link-hover var(--bi-navy) · #163a65

Tautan saat hover. Di atas --surface: 11,49:1, AAA.

--focus var(--bi-blue) · #055498

Cincin fokus 2px di semua elemen interaktif. Di atas --surface: 7,69:1, AAA.

--selected var(--bi-blue) · #055498

Isi atau garis elemen terpilih: chip, baris dokumen, menu aktif. Di atas --surface: 7,69:1, AAA.

--selected-tint var(--bi-blue-tint) · #05549814

Latar lembut elemen terpilih. Teks --bi-blue di atasnya: 6,79:1, AA.

--on-selected var(--on-blue) · #ffffff

Teks di atas --selected. Di atas --bi-blue: 7,69:1, AAA.

--border-hairline var(--ink-10) · #0a0a0a1a

Garis rambut kartu dan pemisah. Di atas --surface: 1,24:1, dekoratif.

--border-control var(--ink-45) · #0a0a0a73

Garis input, pencarian, dan kotak centang. Lolos 3:1 untuk batas kontrol. Di atas --surface: 3,15:1, AA teks besar dan grafis.

--disabled-bg var(--ink-06) · #0a0a0a0f

Isi tombol nonaktif. Label --disabled-fg di atasnya: 3,09:1, AA teks besar dan grafis.

--disabled-fg var(--ink-45) · #0a0a0a73

Label tombol nonaktif. Pengecualian kontras WCAG untuk kontrol nonaktif. Di atas --surface: 3,15:1, AA teks besar dan grafis.

--state-hover var(--ink-04) · #0a0a0a0a

Lapisan hover di atas isi terang. Teks --ink di atas lapisan: 18,15:1, AAA.

--state-press var(--ink-08) · #0a0a0a14

Lapisan saat ditekan di atas isi terang. Teks --ink di atas lapisan: 16,72:1, AAA.

--state-hover-dark #ffffff1f

Lapisan hover 12% putih di atas isi tinta atau biru. Tambahan HAPAKAT. Label --on-ink di atas tinta saat hover: 14,74:1, AAA.

Grafik

--chart-1 var(--bi-navy) · #163a65

Seri pertama: Konsumsi. Di atas --surface: 11,49:1, AAA.

--chart-2 var(--bi-blue-bright) · #106ebe

Seri kedua: ATK. Di atas --surface: 5,25:1, AA.

--chart-3 var(--bi-blue-light) · #9dc1e6

Seri ketiga: Percetakan. Di atas --surface: 1,87:1, dekoratif.

--chart-other var(--ink-30) · #0a0a0a4d

Seri "lainnya" dan batang kabupaten lain. Di atas --surface: 2,05:1, dekoratif.

--chart-bar var(--bi-blue) · #055498

Batang tunggal, misalnya belanja per kabupaten/kota. Di atas --surface: 7,69:1, AAA.

--chart-track var(--ink-06) · #0a0a0a0f

Lintasan batang dan meter. Di atas --surface: 1,12:1, dekoratif.

Panel demo gelap (x.ai)

--term-bg #151515

Latar terminal dan ilustrasi foto. Gelap hanya di dalam panel demo. Teks --term-ink di atasnya: 13,96:1, AAA.

--term-chip #111110

Gelembung chat gelap. Teks --on-ink di atasnya: 18,89:1, AAA.

--term-ink #e1e1e1

Teks kode di atas --term-bg. Di atas --term-bg: 13,96:1, AAA.

--term-cream #f2ede5

Teks prompt dan label tebal di terminal. Di atas --term-bg: 15,67:1, AAA.

--term-muted #8d867e

Teks status terminal. Di atas --term-bg: 5,08:1, AA.

--term-dim #59534d

Teks tersier terminal. Dekoratif. Di atas --term-bg: 2,40:1, dekoratif.

--term-rule #2a2825

Pemisah pipa di status bar terminal. Di atas --term-bg: 1,24:1, dekoratif.

--term-lineno #6c6c6c

Nomor baris diff yang tidak berubah. Di atas --term-bg: 3,47:1, AA teks besar dan grafis.

--term-add #9ece6a

Nomor baris tambahan di diff. Di atas --term-bg: 9,99:1, AAA.

--term-add-bg #202a16

Latar baris tambahan. Teks --term-ink di atasnya: 11,43:1, AAA.

--term-del #f7768e

Nomor baris yang dihapus. Di atas --term-bg: 6,90:1, AA.

--term-del-bg #32181c

Latar baris yang dihapus. Teks --term-ink di atasnya: 12,51:1, AAA.

--term-path #91c17a

Path berkas dan penanda selesai. Di atas --term-bg: 8,79:1, AAA.

--term-violet #bc97ff

Glif agen dan titik berpikir. Di atas --term-bg: 7,83:1, AAA.

--term-blue #93adff

Caret prompt. Di atas --term-bg: 8,40:1, AAA.

--term-cyan #29c6be

Nama pemanggilan alat. Di atas --term-bg: 8,62:1, AAA.

--window-red #ff5f57

Titik kontrol jendela. Di atas --term-bg: 6,11:1, AA.

--window-yellow #febc2e

Titik kontrol jendela. Di atas --term-bg: 10,82:1, AAA.

--window-green #28c840

Titik kontrol jendela. Di atas --term-bg: 8,19:1, AAA.

Kode terang (x.ai)

--code-ink #24292e

Teks biasa di blok kode terang. Di atas --surface-card (blok kode): 13,82:1, AAA.

--code-keyword #d73a49

Kata kunci dan operator. Di atas --surface-card (blok kode): 4,30:1, AA teks besar dan grafis.

--code-string #032f62

Literal string. Di atas --surface-card (blok kode): 12,46:1, AAA.

--code-param #e36209

Nama argumen. Nilai asli x.ai, di bawah AA. Di atas --surface-card (blok kode): 3,28:1, AA teks besar dan grafis.

--code-builtin #005cc5

Fungsi bawaan. Di atas --surface-card (blok kode): 5,92:1, AA.

Kartu KKI (HAPAKAT)

--kki-deep #0b2a4d

Tepi gelap kilau kartu KKI, turunan --bi-navy. Dekoratif, tidak untuk teks. Di atas --surface: 14,45:1, AAA.

Tipografi

Satu keluarga sans dan satu mono, keduanya dimuat dari Google Fonts. Geist untuk semua teks. Geist Mono untuk kode, nomor pesanan, kode rekening, koordinat, dan label teknis kecil. Judul memakai weight regular atau medium, tidak pernah tebal, dengan tracking -1% dari ukurannya.

Skala tipe

Skala lengkap x.ai, ditambah display-sm untuk judul hero di ponsel dan dua gaya wordmark. Setiap token adalah shorthand font; pasangkan dengan token --tracking-* bila ada.

Belanja pemda ke UMKM lokal.

--text-display · 400 60px/60px sans · tracking -0.6px · Judul hero, satu per halaman.

Belanja pemda ke UMKM lokal.

--text-display-sm · 400 40px/44px sans · tracking -0.4px · Tambahan HAPAKAT: judul hero di layar di bawah 768px.

Rp1,28 miliar

--text-stat · 500 48px/48px sans · tracking -0.48px · Angka statistik besar.

Rp18.450.000

--text-heading-1 · 500 30px/36px sans · tracking -0.3px · Judul bagian; angka kunci seperti sisa limit dan nilai KPI.

SPJ siap diperiksa

--text-heading-2 · 500 24px/32px sans · tracking -0.24px · Subjudul bagian, judul layar hasil.

Katalog UMKM Kalimantan Tengah, dibayar dengan KKI, SPJ tersusun otomatis.

--text-lead · 400 18px/29px sans · Paragraf pembuka di bawah judul.

Bendahara memilih produk dari UMKM yang NIB dan NPWP-nya terverifikasi, lalu membayar nontunai dengan Kartu Kredit Indonesia.

--text-body-lg · 400 16px/26px sans · Teks dokumen panjang (PRD, design system).

Nota, BAST, dan draf SPJ dibuat otomatis setelah barang diterima.

--text-body · 400 16px/24px sans · Teks dasar aplikasi dan kartu.

Paket nasi kotak rapat

--text-title-sm · 500 16px/22px sans · tracking -0.16px · Nama produk, judul kartu, nominal di daftar.

Bayar Rp1.050.000 dengan KKI

--text-label · 500 14px/20px sans · Tombol, tab, chip, label field, nilai di daftar keterangan.

Dapur Bawi Kameloh, Palangka Raya

--text-body-sm · 400 14px/20px sans · tracking -0.15px · Teks sekunder, isi tabel, nama UMKM.

Design System

--text-nav · 500 13px/20px sans · Tautan navigasi situs, inisial avatar.

Ambil foto dan centang jumlah barang untuk melanjutkan

--text-link-sm · 400 13px/21px sans · Footer, petunjuk field.

3 Nov 2026, 14.20 WIB

--text-caption · 400 12px/16px sans · Waktu, sumber dokumen, teks bantu di bawah tombol.

Baru

--text-badge · 500 11px/11px sans · Badge kecil.

Tim ATERA, Tambun Bungai Ideathon 2026

--text-micro · 500 10px/15px sans · Baris legal.

HPK-2611-0042

--text-code · 400 13px/24px mono · Blok kode terang.

5.1.02.01.01.0052

--text-code-sm · 400 12px/19px mono · tracking -0.12px · Kode kecil, kode rekening di tabel.

-2.2096, 113.9135, Palangka Raya

--text-term · 400 11px/18px mono · tracking -0.11px · Teks terminal.

HAPAKAT

--text-wordmark · 600 18px/20px sans · tracking 0.04em · Tambahan HAPAKAT: wordmark di header.

HAPAKAT

--text-wordmark-lg · 600 48px/48px sans · tracking 0.04em · Tambahan HAPAKAT: wordmark besar di halaman merek.

KKI

--text-kki-mark · 600 18px/20px sans · "KKI" di kotak limit.

Angka Rupiah

Semua nominal, kode, dan waktu memakai angka tabular (font-variant-numeric: tabular-nums, lewat kelas hd-num atau num), supaya digit sejajar ketika nilai berubah, misalnya saat jumlah pesanan ditambah. Nominal di daftar rata kanan dan tidak boleh terpotong ke baris baru.

Angka kunci dan baris nominal

Rp18.450.000

Subtotal (30 × Rp35.000)
Rp1.050.000
Perkiraan pajak (draf)
Rp5.250
Ditagihkan ke KKI
Rp1.050.000
<div class="hd-col">
  <p class="hd-num" style="font: var(--text-heading-1); letter-spacing: var(--tracking-heading-1); color: var(--accent)">Rp18.450.000</p>
  <dl class="hd-summary__rows">
    <div class="hd-summary__row"><dt>Subtotal (30 × Rp35.000)</dt><dd>Rp1.050.000</dd></div>
    <div class="hd-summary__row"><dt>Perkiraan pajak (draf)</dt><dd>Rp5.250</dd></div>
    <div class="hd-summary__row"><dt>Ditagihkan ke KKI</dt><dd>Rp1.050.000</dd></div>
  </dl>
</div>

Spasi dan tata letak

Ritme 4px dari x.ai. Bagian halaman bernapas lebar; isi kartu rapat. Dua token tambahan HAPAKAT (--space-0-5 dan --space-12) mengisi celah yang dibutuhkan aplikasi dan dokumen panjang. --space-1-5 sama dengan space-1.5 x.ai, karena titik tidak boleh ada di nama custom property.

Spasi

Skala spasi, dibaca dari tokens.css
TokenNilaiUkuranPemakaian
--space-0-52pxTambahan HAPAKAT: jarak rapat label dan nilai.
--space-14pxJarak ikon ke label, tumpukan rapat.
--space-1-56pxSetara space-1.5 x.ai: baris meta, celah kecil.
--space-28pxCelah antar-chip dan antar-tombol rapat.
--space-312pxCelah antar-tombol hero, padding kartu kecil.
--space-416pxPadding kartu, gutter halaman di ponsel.
--space-520pxGutter layar aplikasi 390px, padding kartu besar.
--space-624pxGutter halaman mulai 768px.
--space-832pxJarak pil pengumuman ke judul.
--space-1040pxCelah antar-kolom grid besar.
--space-1248pxTambahan HAPAKAT: jarak antar-bagian dokumen di ponsel.
--space-1664pxJarak antar-bagian dokumen.
--space-2080pxJarak blok hero.
--space-2496pxPadding vertikal bagian beranda.

Radius

Semua kontrol interaktif berbentuk pil. Kartu dan panel --radius-lg, tile ikon dan area foto --radius-md, thumbnail --radius-sm.

--radius-xs3px

Batang grafik, swatch legenda.

--radius-sm8px

Thumbnail, skeleton, tile kecil.

--radius-md12px

Tile ikon, area foto, baris dokumen, blok kode.

--radius-lg16px

Kartu, panel, spesimen.

--radius-tail6px

Satu sudut rapat gelembung chat; sudut kartu KKI mini.

--radius-pill9999px

Semua kontrol interaktif: tombol, chip, input, tab, badge.

--radius-device44px

Tambahan HAPAKAT: bingkai ponsel di halaman dokumentasi.

Garis, bayangan, dan blur

Datar. Kartu tidak berbayang; batasnya dibentuk oleh --surface-card di atas putih atau garis rambut --ink-10. Bayangan hanya untuk elemen yang melayang, seperti menu atau sheet. Header situs memakai --surface-nav dengan blur 6px, bukan bayangan.

--shadow-window0px 0px 1px #0000000f, 0px 18px 16px #0f172a2e

Jendela kode melayang.

--shadow-popover0px 10px 12px #0000001a, 0px 4px 2px #0000001a

Panel melayang seperti banner atau menu.

--shadow-kki0px 8px 24px #0a0a0a29

Bayangan kartu KKI dan kotak limit, satu-satunya bayangan di layar aplikasi.

--blur-nav6px

backdrop-filter header lengket.

--blur-pill2px

backdrop-filter pil pengumuman.

Grid dan breakpoint

Breakpoint mobile first
MulaiPerubahan
0pxSatu kolom, gutter 16px (--space-4), judul hero 40px, daftar isi bisa dilipat di atas isi.
480pxWordmark 18px, tautan navigasi lebih longgar.
768pxGutter 24px (--space-6), judul hero 60px, angka stat 48px.
1024pxDokumen dua kolom: daftar isi menempel di kiri selebar 250px.
1280pxLebar desain dashboard pemda.

Lebar konten situs 1117px (--width-content), kolom hero 768px, dan paragraf dokumen maksimal 70ch. Grid kartu memakai repeat(auto-fit, minmax(240px, 1fr)) dan turun ke satu kolom di ponsel. Halaman tidak pernah bergulir mendatar; tabel lebar bergulir di dalam pembungkusnya sendiri.

Aplikasi 390px, dashboard 1280px

Aplikasi ponsel

Dirancang untuk layar 390 × 844 px dengan gutter 20px (--space-5). Layar katalog punya header, isi yang bergulir, dan navigasi bawah. Layar tugas punya bar judul, kartu bertumpuk, dan bar aksi bawah dengan tombol 52px.

Dashboard pemda

Dirancang untuk 1280px dengan gutter 24px. Grid KPI auto-fit minimal 220px (empat kolom di 1280px). Panel per kabupaten/kota dan per kategori berdampingan dan turun bertumpuk di layar sempit; tabel transaksi bergulir sendiri di bawah 680px.

Ikon

Ikon dari mockup digambar ulang dalam gaya x.ai: grid 24, garis tipis 1,5 (1,75 di 16px, 2 di 14px), ujung dan sambungan bulat, tanpa isi, warna currentColor. Ikon selalu aria-hidden="true" dan selalu ditemani label teks. Dua ikon dokumen di mockup digabung menjadi satu.

  • 14px: badge, status verifikasi
  • 16px: meta waktu dan lokasi, tombol
  • 20px: bawaan
  • 24px: navigasi, tombol ikon
  • 28px: tile kategori
  • 32px: cakram status

kembali

Kembali. Di tombol ikon 44px kiri atas layar tugas.

lanjut

Lanjut ke layar berikutnya, di ujung tombol atau baris tautan.

buka

Membuka pilihan pada select.

keluar

Pengumuman atau tautan keluar, di chip pil pengumuman.

cari

Pencarian produk atau UMKM.

centang

Terverifikasi, selesai, berhasil, terpilih.

tutup

Ditolak, gagal, belum terverifikasi.

tambah

Tambah jumlah.

kurang

Kurangi jumlah.

konsumsi

Kategori Konsumsi: makanan dan minuman rapat.

atk

Kategori ATK: alat tulis kantor.

percetakan

Kategori Percetakan: spanduk dan dokumen cetak.

suvenir

Kategori Suvenir: kerajinan lokal.

katalog

Navigasi Katalog.

pesanan

Navigasi Pesanan: status dan pengiriman.

dokumen

Dokumen SPJ dan navigasi SPJ. Dua ikon dokumen di mockup digabung menjadi satu.

dokumen-cek

SPJ lengkap dan siap diperiksa.

akun

Navigasi Akun.

kamera

Ambil foto serah terima.

jam

Waktu yang tercatat otomatis.

lokasi

Titik lokasi yang tercatat otomatis.

grafik

Dashboard pemda.

kartu

Kartu Kredit Indonesia sebagai metode bayar.

info

Informasi.

peringatan

Peringatan: menunggu atau perlu perhatian.

galat

Galat yang menghentikan proses.

ulangi

Ulangi, misalnya foto ulang.

Cara menyisipkan ikon

Ambil foto serah terima 
<span class="hd-row"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.5"/></svg> <span>Ambil foto serah terima</span></span>

Komponen

Setiap komponen di bawah dirender langsung dari components.css. Cuplikan HTML di bawah setiap contoh dibuat otomatis dari contoh itu sendiri, jadi selalu sama. Level judul di dalam contoh diturunkan agar struktur halaman ini benar; di aplikasi, judul layar memakai h1 dan judul bagian h2.

Tombol hd-btn

Diambil dari Button x.ai: pil, huruf label 14/20 medium, varian dibedakan oleh isi saja.

Varian

<div class="hd-row">
  <button type="button" class="hd-btn hd-btn--primary hd-btn--lg">Teruskan ke PPK-SKPD</button>
  <button type="button" class="hd-btn hd-btn--secondary hd-btn--lg">Lihat dashboard pemda</button>
  <button type="button" class="hd-btn hd-btn--ghost hd-btn--lg">Ubah pesanan</button>
  <button type="button" class="hd-btn hd-btn--text">Ulangi foto</button>
</div>

Ukuran: sm 28, md 40, lg 44, xl 52 (area sentuh selalu 44px atau lebih)

<div class="hd-row">
  <button type="button" class="hd-btn hd-btn--primary hd-btn--sm">Simpan</button>
  <button type="button" class="hd-btn hd-btn--primary hd-btn--md">Simpan</button>
  <button type="button" class="hd-btn hd-btn--primary hd-btn--lg">Simpan</button>
  <button type="button" class="hd-btn hd-btn--primary hd-btn--xl">Simpan</button>
</div>

State: nonaktif dengan alasan, memuat, tombol ikon, tautan bergaya tombol

Ambil foto dan centang jumlah barang untuk melanjutkan

Lacak pesanan 
<div class="hd-col">
  <button type="button" class="hd-btn hd-btn--primary hd-btn--xl hd-btn--block" disabled aria-describedby="alasan-konfirmasi">Konfirmasi diterima</button>
  <p class="hd-footer-bar__hint" id="alasan-konfirmasi">Ambil foto dan centang jumlah barang untuk melanjutkan</p>
  <button type="button" class="hd-btn hd-btn--primary hd-btn--xl hd-btn--block" disabled aria-busy="true">Memproses pembayaran…</button>
  <div class="hd-row">
    <a class="hd-btn hd-btn--ghost hd-btn--icon hd-btn--lg" href="#k-tombol" aria-label="Kembali ke katalog"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 5l-7 7 7 7"/></svg></a>
    <a class="hd-btn hd-btn--secondary hd-btn--lg" href="#k-tombol">Lacak pesanan <svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 5l7 7-7 7"/></svg></a>
  </div>
</div>

Pemakaian

  • Primer (tinta) untuk satu aksi utama per layar. Sekunder untuk aksi pendamping. Ghost untuk deretan rapat. Teks (hd-btn--text) untuk aksi kecil yang tampil seperti tautan. Tidak ada tombol berisi biru.
  • Label kalimat biasa, kata kerja di depan, objek spesifik: Bayar Rp1.050.000 dengan KKI. Berbeda dari x.ai yang memakai Title Case, karena Title Case tidak lazim dalam bahasa Indonesia. Label memuat diakhiri elipsis tunggal (…).
  • Aksi utama layar tugas memakai hd-btn--xl hd-btn--block di bar aksi bawah. Tautan navigasi memakai <a>; aksi memakai <button type="button">.

Aksesibilitas

  • Ukuran sm dan md tetap punya area sentuh 44px lewat ::after.
  • Tombol ikon wajib aria-label. Nonaktif memakai atribut disabled dan menunjuk alasannya dengan aria-describedby.
  • Memuat: disabled plus aria-busy="true"; putaran berhenti bila gerak dikurangi, label tetap menjelaskan.

Badge hd-badge

Versi biru dari chip "New" x.ai, plus varian status. Ukuran kecil 17px untuk satu kata; --lg 24px untuk status di tabel, header, dan baris dokumen.

Kecil, besar, dan varian status

Baru Data simulasi November 2026 Disetujui Diteruskan ke PPK Menunggu barang Perlu revisi Subtema: QRIS Lintas Negara dan KKI 
<div class="hd-row">
  <span class="hd-badge">Baru</span>
  <span class="hd-badge hd-badge--lg">Data simulasi</span>
  <span class="hd-badge hd-badge--lg hd-badge--neutral">November 2026</span>
  <span class="hd-badge hd-badge--lg hd-badge--success"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>Disetujui</span>
  <span class="hd-badge hd-badge--lg hd-badge--warning">Diteruskan ke PPK</span>
  <span class="hd-badge hd-badge--lg hd-badge--neutral">Menunggu barang</span>
  <span class="hd-badge hd-badge--lg hd-badge--danger">Perlu revisi</span>
  <span class="hd-badge hd-badge--lg hd-badge--solid">Subtema: QRIS Lintas Negara dan KKI</span>
</div>

Pemakaian

  • Sukses: selesai atau disetujui. Peringatan: menunggu pihak lain atau sedang diproses. Netral: menunggu barang, periode. Bahaya: ditolak atau perlu revisi. Solid biru: penanda yang harus menonjol, paling banyak satu per layar.
  • Teks status mengikuti pola kata kerja di-: Disetujui, Diteruskan ke PPK. Keadaan menunggu diawali Menunggu.

Aksesibilitas

  • Semua pasangan teks dan latar lolos 4,5:1 (lihat Warna). Teks selalu ada, warna hanya penguat.
  • Badge bukan kontrol. Bila bisa diklik, pakai chip atau tombol.

Pil pengumuman hd-announce

Dari AnnouncementPill x.ai: satu tautan berbentuk pil di atas judul hero, berisi badge, judul, detail, dan chip panah.

Di atas judul hero beranda

Ideathon Tambun Bungai IdeathonBorneo DECAFEST 2026 
<a class="hd-announce" href="/#tim">
  <span class="hd-badge">Ideathon</span>
  <span class="hd-announce__text"><span class="hd-announce__title">Tambun Bungai Ideathon</span><span class="hd-announce__dot" aria-hidden="true">·</span>Borneo DECAFEST 2026</span>
  <span class="hd-announce__chip"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 17L17 7"/><path d="M9 7h8v8"/></svg></span>
</a>
  • Satu per halaman, berjarak --space-8 dari judul. Garis --ink-08 dan blur 2px seperti aslinya; badge oranye diganti badge biru.
  • Seluruh pil adalah satu tautan setinggi minimal 44px; titik pemisah aria-hidden.

Tab hd-tabs

Dari SegmentedTabs x.ai: pil tanpa lintasan. Tab terpilih memakai latar biru tipis dan label biru, karena di HAPAKAT biru berarti pilihan. Tab tidak aktif memakai --ink-60, bukan --ink-muted x.ai yang di bawah AA.

Pilihan periode di dashboard

<div class="hd-tabs" role="tablist" aria-label="Periode">
  <button type="button" role="tab" class="hd-tab" aria-selected="true">November 2026</button>
  <button type="button" role="tab" class="hd-tab" aria-selected="false">Oktober 2026</button>
  <button type="button" role="tab" class="hd-tab" aria-selected="false">Triwulan IV</button>
</div>
  • Pola tab ARIA butuh tabpanel dan navigasi panah yang diatur skrip aplikasi. Untuk navigasi antarhalaman, pakai <a class="hd-tab" aria-current="page"> tanpa role tab.
  • Tinggi tampilan 36px, area sentuh 44px.

Kartu hd-card

Wadah bagian di layar tugas. Standarnya putih hangat tanpa garis dan tanpa bayangan, seperti tile x.ai.

Standar dan bergaris

Detail pesanan

Latar --surface-card, radius-lg, padding 20px.

Bukti serah terima

Latar putih dengan garis rambut, untuk kartu yang memuat area abu-abu di dalamnya.

<div class="hd-col">
  <div class="hd-card">
    <p class="hd-card__title">Detail pesanan</p>
    <p class="hd-card__text">Latar --surface-card, radius-lg, padding 20px.</p>
  </div>
  <div class="hd-card hd-card--outline">
    <p class="hd-card__title">Bukti serah terima</p>
    <p class="hd-card__text">Latar putih dengan garis rambut, untuk kartu yang memuat area abu-abu di dalamnya.</p>
  </div>
</div>

Stat hd-stat

Dari Stat x.ai: angka besar di atas keterangan pendek. Angkanya yang bicara, tanpa kata sifat.

Angka dari naskah pitch: jumlah layar dan target uji coba

5layar prototipe
1–2OPD provinsi, target uji coba
10–20UMKM mitra, target uji coba
HPK-2611-0042nomor pesanan contoh
<div class="hd-row">
  <div class="hd-stat"><span class="hd-stat__value">5</span><span class="hd-stat__label">layar prototipe</span></div>
  <div class="hd-stat"><span class="hd-stat__value">1–2</span><span class="hd-stat__label">OPD provinsi, target uji coba</span></div>
  <div class="hd-stat"><span class="hd-stat__value">10–20</span><span class="hd-stat__label">UMKM mitra, target uji coba</span></div>
  <div class="hd-stat hd-stat--sm"><span class="hd-stat__value">HPK-2611-0042</span><span class="hd-stat__label">nomor pesanan contoh</span></div>
</div>
  • Varian kecil x.ai memakai keterangan --ink-30 (di bawah 3:1). HAPAKAT memakai --ink-60 agar keterangan tetap terbaca.
  • Target ditulis sebagai target, bukan pencapaian.

Lockup merek hd-brand

Tanda anyaman dan wordmark. Di aplikasi lockup menjadi tautan ke beranda dengan nama yang jelas.

Sebagai tautan

HAPAKAT 
<a class="hd-brand" href="/" aria-label="HAPAKAT, beranda"><img class="hd-brand__mark" src="/assets/favicon.svg" alt="" width="24" height="24">HAPAKAT</a>
  • Tanda selalu alt="" karena wordmark sudah berupa teks.
  • Di dashboard, tambahkan konteks dengan hd-brand__context (lihat Header dashboard).

Avatar hd-avatar

Lingkaran 36px berisi inisial. Persona Rina A. (RA) dari mockup adalah contoh fiktif.

Dekoratif dan sebagai tombol akun

<div class="hd-row">
  <span class="hd-avatar" aria-hidden="true">RA</span>
  <button type="button" class="hd-avatar" aria-label="Akun Rina A.">RA</button>
</div>
  • Bila inisial hanya mengulang sapaan, sembunyikan dari pembaca layar. Bila membuka menu akun, jadikan tombol dengan aria-label; area sentuhnya 44px.

Header aplikasi hd-app-header

Atas layar katalog: lockup, avatar, sapaan, peran, dan kartu limit KKI. Mockup lama memakai header gelap; kini putih, dengan garis rambut di bawahnya.

Layar 1, bagian atas

HAPAKAT

Halo, Rina

Bendahara Pengeluaran, [Nama OPD]

KKIKartu Kredit Indonesia •••• 4417
Sisa limit KKI bulan ini Rp18.450.000
Terpakai Rp6.550.000 dari Rp25.000.000 
<header class="hd-app-header">
  <div class="hd-app-header__top">
    <span class="hd-brand"><img class="hd-brand__mark" src="/assets/favicon.svg" alt="" width="24" height="24">HAPAKAT</span>
    <button type="button" class="hd-avatar" aria-label="Akun Rina A.">RA</button>
  </div>
  <div class="hd-app-header__hello">
    <p class="hd-app-header__greeting">Halo, Rina</p>
    <p class="hd-app-header__role">Bendahara Pengeluaran, [Nama OPD]</p>
  </div>
  <div class="hd-limit-card">
    <div class="hd-limit-card__top">
      <span class="hd-limit-card__mark">KKI<small>Kartu Kredit Indonesia</small></span>
      <span class="hd-limit-card__card">•••• 4417</span>
    </div>
    <span class="hd-limit-card__label" id="limit-label-1">Sisa limit KKI bulan ini</span>
    <span class="hd-limit-card__amount">Rp18.450.000</span>
    <div class="hd-meter" role="meter" aria-labelledby="limit-label-1" aria-valuemin="0" aria-valuemax="25000000" aria-valuenow="18450000" aria-valuetext="Sisa Rp18.450.000 dari Rp25.000.000"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="73.8" height="1"/></svg></div>
    <span class="hd-limit-card__caption">Terpakai Rp6.550.000 dari Rp25.000.000</span>
  </div>
</header>
  • Di aplikasi, sapaan bisa menjadi h1 layar. Nama OPD yang panjang dibiarkan turun baris.
  • Belum dirancang: belum ada kartu tertaut dan lebih dari satu kartu.

Bar judul hd-appbar

Kepala layar tugas: tombol kembali 44px, judul, dan subjudul opsional.

Layar 3, serah terima

Pesanan HPK-2611-0042

30 paket nasi kotak rapat, Dapur Bawi Kameloh

<header class="hd-appbar">
  <a class="hd-btn hd-btn--ghost hd-btn--icon hd-btn--lg" href="#k-appbar" aria-label="Kembali ke katalog"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 5l-7 7 7 7"/></svg></a>
  <div class="hd-appbar__text">
    <p class="hd-appbar__title">Pesanan HPK-2611-0042</p>
    <p class="hd-appbar__subtitle">30 paket nasi kotak rapat, Dapur Bawi Kameloh</p>
  </div>
</header>
  • Satu h1 per layar: di aplikasi, judul bar adalah h1. Tombol kembali menyebut tujuannya: Kembali ke katalog.

Header status hd-status-hero

Menyatakan hasil satu langkah dengan cakram ikon dan judul, misalnya SPJ yang siap diperiksa.

Layar 4, SPJ

SPJ siap diperiksa

Disusun otomatis dari pesanan HPK-2611-0042

<header class="hd-status-hero">
  <a class="hd-btn hd-btn--ghost hd-btn--icon hd-btn--lg" href="#k-status-hero" aria-label="Kembali ke pesanan"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 5l-7 7 7 7"/></svg></a>
  <div class="hd-status-hero__row">
    <span class="hd-status-hero__disc" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 15l2 2 4-4"/></svg></span>
    <div>
      <p class="hd-status-hero__title">SPJ siap diperiksa</p>
      <p class="hd-status-hero__subtitle">Disusun otomatis dari pesanan HPK-2611-0042</p>
    </div>
  </div>
</header>

Kartu limit KKI hd-limit-card dan hd-meter

Sisa limit Kartu Kredit Indonesia bulan ini, sebelum memesan. Kotaknya memakai kulit wajah kartu KKI (latar --kki-sheen, pita --kki-band dibalik ke kanan), supaya bendahara langsung mengenali kartunya. Semua teks putih; label dan keterangan memakai --on-ink-80 di bagian latar yang gelap. Meter berupa <div role="meter"> dengan isi SVG; lebar isi ditulis sebagai atribut SVG, bukan gaya inline.

Normal dan limit hampir habis (di bawah 10%)

KKIKartu Kredit Indonesia •••• 4417
Sisa limit KKI bulan ini Rp18.450.000
Terpakai Rp6.550.000 dari Rp25.000.000
KKIKartu Kredit Indonesia •••• 4417
Sisa limit KKI bulan ini Rp1.200.000
Limit hampir habisTerpakai Rp23.800.000 dari Rp25.000.000 
<div class="hd-col">
  <div class="hd-limit-card">
    <div class="hd-limit-card__top">
      <span class="hd-limit-card__mark">KKI<small>Kartu Kredit Indonesia</small></span>
      <span class="hd-limit-card__card">•••• 4417</span>
    </div>
    <span class="hd-limit-card__label" id="limit-label-2">Sisa limit KKI bulan ini</span>
    <span class="hd-limit-card__amount">Rp18.450.000</span>
    <div class="hd-meter" role="meter" aria-labelledby="limit-label-2" aria-valuemin="0" aria-valuemax="25000000" aria-valuenow="18450000" aria-valuetext="Sisa Rp18.450.000 dari Rp25.000.000"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="73.8" height="1"/></svg></div>
    <span class="hd-limit-card__caption">Terpakai Rp6.550.000 dari Rp25.000.000</span>
  </div>
  <div class="hd-limit-card">
    <div class="hd-limit-card__top">
      <span class="hd-limit-card__mark">KKI<small>Kartu Kredit Indonesia</small></span>
      <span class="hd-limit-card__card">•••• 4417</span>
    </div>
    <span class="hd-limit-card__label" id="limit-label-3">Sisa limit KKI bulan ini</span>
    <span class="hd-limit-card__amount">Rp1.200.000</span>
    <div class="hd-meter" role="meter" aria-labelledby="limit-label-3" aria-valuemin="0" aria-valuemax="25000000" aria-valuenow="1200000" aria-valuetext="Sisa Rp1.200.000 dari Rp25.000.000, hampir habis"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="4.8" height="1"/></svg></div>
    <span class="hd-limit-card__caption"><span class="hd-badge hd-badge--warning">Limit hampir habis</span>Terpakai Rp23.800.000 dari Rp25.000.000</span>
  </div>
</div>

Pemakaian

  • Batang menunjukkan sisa limit, bukan yang terpakai. Tulis keduanya sebagai teks.
  • hd-progress adalah alias hd-meter untuk tim yang lebih akrab dengan nama itu.
  • Bila sisa di bawah 10% dari limit, taruh badge peringatan "Limit hampir habis" di awal keterangan dan sebut juga di aria-valuetext. Warna peringatan tidak terbaca langsung di atas biru, jadi badge membawa latarnya sendiri.
  • Bila limit tidak cukup untuk pesanan, pakai alert bahaya di atas tombol bayar. Mockup masih menampilkan sisa limit yang sama setelah pembayaran; di aplikasi, sisa harus berkurang.

Aksesibilitas

  • role="meter" (WAI-ARIA 1.2) dengan aria-valuemin, aria-valuemax, aria-valuenow, nama lewat aria-labelledby, dan aria-valuetext yang menyebut sisa dan total. SVG di dalamnya aria-hidden.

Pencarian teks bebas untuk produk dan nama UMKM.

Bawaan

<div class="hd-search" role="search">
  <label class="hd-sr-only" for="cari-1">Cari produk atau UMKM</label>
  <svg class="hd-icon hd-search__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="M16.5 16.5L20 20"/></svg>
  <input class="hd-search__input" id="cari-1" type="search" placeholder="Cari produk atau UMKM" autocomplete="off">
</div>
  • Label nyata tetap ada walau tersembunyi secara visual. Garis input --border-control (3,15:1 di atas putih) memenuhi 3:1 untuk batas kontrol.
  • Jumlah hasil diumumkan lewat judul daftar yang aria-live. Hasil kosong memakai keadaan kosong.

Field formulir hd-field, hd-input, hd-check

Mockup hanya menampilkan data pesanan sebagai teks. Aplikasi membutuhkan field yang bisa diisi: keperluan, lokasi kirim, waktu kirim, dan kode rekening.

Isi, petunjuk, pilihan, galat, nonaktif, dan kotak centang

Ditulis di kuitansi dan draf SPJ

Waktu kirim wajib diisi

<div class="hd-col">
  <div class="hd-field">
    <label class="hd-field__label" for="keperluan">Keperluan</label>
    <input class="hd-input" id="keperluan" type="text" value="Rapat koordinasi triwulan IV" aria-describedby="keperluan-petunjuk">
    <p class="hd-field__hint" id="keperluan-petunjuk">Ditulis di kuitansi dan draf SPJ</p>
  </div>
  <div class="hd-field">
    <label class="hd-field__label" for="rekening">Kode rekening belanja</label>
    <div class="hd-field__control">
      <select class="hd-input hd-input--select" id="rekening">
        <option>5.1.02.01.01.0052 Belanja Makanan dan Minuman Rapat</option>
        <option>[Kode rekening lain]</option>
      </select>
      <svg class="hd-icon hd-field__chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6"/></svg>
    </div>
  </div>
  <div class="hd-field">
    <label class="hd-field__label" for="waktu-kirim">Waktu kirim</label>
    <input class="hd-input" id="waktu-kirim" type="text" value="" aria-invalid="true" aria-describedby="waktu-kirim-galat">
    <p class="hd-field__error" id="waktu-kirim-galat"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6"/><path d="M9 9l6 6"/></svg>Waktu kirim wajib diisi</p>
  </div>
  <div class="hd-field">
    <label class="hd-field__label" for="dikirim-ke">Dikirim ke</label>
    <input class="hd-input" id="dikirim-ke" type="text" value="[Nama OPD], ruang rapat lantai 2" disabled>
  </div>
  <label class="hd-check"><input type="checkbox" checked> Jumlah sesuai pesanan: 30 kotak</label>
</div>
  • Label selalu terlihat di atas field. Petunjuk dan galat dihubungkan dengan aria-describedby; galat memakai aria-invalid="true", ikon, dan teks yang menyebut cara memperbaikinya.
  • Waktu kirim di aplikasi sebaiknya memakai pemilih tanggal dan jam bawaan perangkat; contoh ini memakai teks agar statis.
  • Kotak centang asli di dalam label memberi area sentuh 44px dan nama yang benar.

Chip filter hd-chip

Filter kategori pilihan tunggal. Chip terpilih berisi biru dengan label putih dan ikon centang, jadi tidak hanya dibedakan oleh warna.

Semua terpilih

<div class="hd-chip-row" role="group" aria-label="Kategori produk">
  <button type="button" class="hd-chip" aria-pressed="true"><svg class="hd-icon hd-chip__check" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>Semua</button>
  <button type="button" class="hd-chip" aria-pressed="false"><svg class="hd-icon hd-chip__check" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>Konsumsi</button>
  <button type="button" class="hd-chip" aria-pressed="false"><svg class="hd-icon hd-chip__check" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>ATK</button>
  <button type="button" class="hd-chip" aria-pressed="false"><svg class="hd-icon hd-chip__check" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>Percetakan</button>
  <button type="button" class="hd-chip" aria-pressed="false"><svg class="hd-icon hd-chip__check" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>Suvenir</button>
</div>
  • Di layar aplikasi tambahkan hd-chip-row--bleed agar baris bergulir sampai tepi layar. Chip terpilih harus tetap terlihat saat baris digulir.
  • Tombol toggle dengan aria-pressed, dikelompokkan dengan aria-label. Karena hanya satu yang bisa dipilih, grup radio juga tepat bila tim memilihnya.

Judul daftar hd-list-head

Judul daftar dengan jumlah isinya, yang berubah saat filter dipakai.

Katalog, filter Semua

UMKM lokal Kalimantan Tengah

5 produk 
<div class="hd-list-head">
  <h4 class="hd-list-head__title">UMKM lokal Kalimantan Tengah</h4>
  <span class="hd-list-head__count" aria-live="polite">5 produk</span>
</div>

Tile ikon hd-tile

Kotak 64px berisi ikon kategori, dengan satu nada netral untuk semua kategori. Mockup lama memakai dua nada, hangat dan sejuk; di HAPAKAT biru disimpan untuk pilihan dan angka kunci, jadi kategori dibedakan oleh ikon dan teks. Versi 36px untuk baris dokumen.

Konsumsi, ATK, Percetakan, Suvenir, dokumen

<div class="hd-row">
  <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12h18a9 9 0 0 1-18 0z"/><path d="M8 4c0 2 2 2 2 4"/><path d="M13 4c0 2 2 2 2 4"/></svg></span>
  <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 20l4-1 11-11-3-3L5 16z"/><path d="M14 6l3 3"/></svg></span>
  <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 9V3h10v6"/><rect x="3" y="9" width="18" height="8" rx="2"/><path d="M7 14h10v7H7z"/></svg></span>
  <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 8h14l-1 13H6z"/><path d="M9 8a3 3 0 0 1 6 0"/></svg></span>
  <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
</div>
  • Tile selalu dekoratif. Kategori juga ditulis sebagai teks di kartu produk, karena ikon saja tidak cukup.

Kartu produk hd-product-card, hd-price

Satu produk dari UMKM terverifikasi. Seluruh kartu adalah satu tautan ke detail pesanan.

Tersedia dan stok habis

Konsumsi Paket nasi kotak rapat Dapur Bawi Kameloh, Palangka Raya Rp35.000/ kotak NIB dan NPWP terverifikasi
Suvenir Tas anyaman rotan untuk tamu Rotan Isen, Katingan Rp85.000/ buah Stok habis 
<div class="hd-list">
  <a class="hd-product-card" href="#k-product">
    <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12h18a9 9 0 0 1-18 0z"/><path d="M8 4c0 2 2 2 2 4"/><path d="M13 4c0 2 2 2 2 4"/></svg></span>
    <span class="hd-product-card__body">
      <span class="hd-product-card__cat">Konsumsi</span>
      <span class="hd-product-card__name">Paket nasi kotak rapat</span>
      <span class="hd-product-card__seller">Dapur Bawi Kameloh, Palangka Raya</span>
      <span class="hd-product-card__foot">
        <span class="hd-price"><span class="hd-price__amount">Rp35.000</span><span class="hd-price__unit">/ kotak</span></span>
        <span class="hd-verified"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>NIB dan NPWP terverifikasi</span>
      </span>
    </span>
  </a>
  <div class="hd-product-card hd-product-card--unavailable">
    <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 8h14l-1 13H6z"/><path d="M9 8a3 3 0 0 1 6 0"/></svg></span>
    <span class="hd-product-card__body">
      <span class="hd-product-card__cat">Suvenir</span>
      <span class="hd-product-card__name">Tas anyaman rotan untuk tamu</span>
      <span class="hd-product-card__seller">Rotan Isen, Katingan</span>
      <span class="hd-product-card__foot">
        <span class="hd-price"><span class="hd-price__amount">Rp85.000</span><span class="hd-price__unit">/ buah</span></span>
        <span class="hd-badge hd-badge--lg hd-badge--neutral">Stok habis</span>
      </span>
    </span>
  </div>
</div>

Ringkasan produk di layar pesan, bukan tautan

Paket nasi kotak rapat Dapur Bawi Kameloh, Palangka Raya Nasi, ayam bakar, sayur, buah, air mineral Rp35.000/ kotak 
<div class="hd-product-card">
  <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12h18a9 9 0 0 1-18 0z"/><path d="M8 4c0 2 2 2 2 4"/><path d="M13 4c0 2 2 2 2 4"/></svg></span>
  <span class="hd-product-card__body">
    <span class="hd-product-card__name">Paket nasi kotak rapat</span>
    <span class="hd-product-card__seller">Dapur Bawi Kameloh, Palangka Raya</span>
    <span class="hd-product-card__desc">Nasi, ayam bakar, sayur, buah, air mineral</span>
    <span class="hd-product-card__foot">
      <span class="hd-price"><span class="hd-price__amount">Rp35.000</span><span class="hd-price__unit">/ kotak</span></span>
    </span>
  </span>
</div>
  • Urutan isi: kategori, nama produk, UMKM dan kabupaten/kota, harga per satuan, status verifikasi. Harga memakai format Rp35.000 / kotak.
  • Di layar pesan, kartu yang sama menjadi ringkasan produk tanpa tautan, dengan isi paket di hd-product-card__desc.
  • Satu tautan per kartu; nama aksesibelnya adalah seluruh teks kartu. Kartu yang tidak bisa dipesan bukan tautan dan menulis alasannya.
  • Belum dirancang: foto produk asli. Bila ada, foto menggantikan tile dengan rasio 1:1 dan radius --radius-md.

Status verifikasi hd-verified

Dasar kepercayaan belanja pemerintah: NIB dan NPWP UMKM sudah diperiksa. Mockup hanya punya keadaan terverifikasi; dua keadaan lain ditambahkan.

Terverifikasi, menunggu, belum terverifikasi

NIB dan NPWP terverifikasi Menunggu verifikasi Belum terverifikasi, belum bisa dipesan 
<div class="hd-col hd-col--tight">
  <span class="hd-verified"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>NIB dan NPWP terverifikasi</span>
  <span class="hd-verified hd-verified--pending"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg>Menunggu verifikasi</span>
  <span class="hd-verified hd-verified--unverified"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12"/><path d="M18 6L6 18"/></svg>Belum terverifikasi, belum bisa dipesan</span>
</div>
  • Selalu sebut kedua identitas bersama: NIB dan NPWP. Makna dibawa teks, ikon hanya penguat.

Pengatur jumlah hd-qty

Mengatur jumlah pesanan; subtotal dan perkiraan pajak dihitung ulang langsung. Batas di mockup 1 sampai 500; di pilot, total dibatasi Rp10 juta per transaksi (PRD, Ambang nilai).

Jumlah 30, dan di batas bawah

Jumlah
30 kotak
Jumlah
1 kotak 
<div class="hd-col">
  <div class="hd-qty">
    <span class="hd-qty__label" id="qty-label-1">Jumlah</span>
    <div class="hd-qty__control" role="group" aria-labelledby="qty-label-1">
      <button type="button" class="hd-btn hd-btn--secondary hd-btn--icon hd-btn--lg" aria-label="Kurangi jumlah"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12h14"/></svg></button>
      <output class="hd-qty__value" aria-live="polite">30 kotak</output>
      <button type="button" class="hd-btn hd-btn--primary hd-btn--icon hd-btn--lg" aria-label="Tambah jumlah"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5v14"/><path d="M5 12h14"/></svg></button>
    </div>
  </div>
  <div class="hd-qty">
    <span class="hd-qty__label" id="qty-label-2">Jumlah</span>
    <div class="hd-qty__control" role="group" aria-labelledby="qty-label-2">
      <button type="button" class="hd-btn hd-btn--secondary hd-btn--icon hd-btn--lg" aria-label="Kurangi jumlah" disabled><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12h14"/></svg></button>
      <output class="hd-qty__value" aria-live="polite">1 kotak</output>
      <button type="button" class="hd-btn hd-btn--primary hd-btn--icon hd-btn--lg" aria-label="Tambah jumlah"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5v14"/><path d="M5 12h14"/></svg></button>
    </div>
  </div>
</div>
  • Tombol 44px dengan aria-label; nilai di <output aria-live="polite"> sehingga perubahan diumumkan. Di batas, tombol memakai disabled.
  • Untuk jumlah besar, sediakan juga input angka langsung.

Daftar keterangan hd-dl

Data pesanan yang hanya dibaca, sebagai <dl>. Tiga tata letak: bertumpuk, grid dua kolom, dan sebaris.

Bertumpuk, grid, dan sebaris

Keperluan
Rapat koordinasi triwulan IV
Dikirim ke
[Nama OPD], ruang rapat lantai 2
Waktu kirim
Rabu, 4 November 2026, 09.30 WIB
Kode rekening belanja
5.1.02.01.01.0052 Belanja Makanan dan Minuman Rapat
Nilai belanja
Rp1.050.000
Tanggal terima
4 Nov 2026
Kode rekening
5.1.02.01.01.0052
Penyedia
Dapur Bawi Kameloh
Nomor pesanan
HPK-2611-0042
Waktu bayar
3 Nov 2026, 14.20 WIB
Diterima oleh
Rina A., Bendahara Pengeluaran
<div class="hd-col">
  <dl class="hd-dl">
    <div><dt>Keperluan</dt><dd>Rapat koordinasi triwulan IV</dd></div>
    <div><dt>Dikirim ke</dt><dd>[Nama OPD], ruang rapat lantai 2</dd></div>
    <div><dt>Waktu kirim</dt><dd>Rabu, 4 November 2026, 09.30 WIB</dd></div>
    <div><dt>Kode rekening belanja</dt><dd><span class="hd-mono">5.1.02.01.01.0052</span> Belanja Makanan dan Minuman Rapat</dd></div>
  </dl>
  <hr class="hd-divider">
  <dl class="hd-dl hd-dl--grid">
    <div><dt>Nilai belanja</dt><dd class="hd-dl__emph">Rp1.050.000</dd></div>
    <div><dt>Tanggal terima</dt><dd>4 Nov 2026</dd></div>
    <div><dt>Kode rekening</dt><dd class="hd-mono">5.1.02.01.01.0052</dd></div>
    <div><dt>Penyedia</dt><dd>Dapur Bawi Kameloh</dd></div>
  </dl>
  <hr class="hd-divider">
  <dl class="hd-dl hd-dl--inline">
    <div><dt>Nomor pesanan</dt><dd class="hd-mono">HPK-2611-0042</dd></div>
    <div><dt>Waktu bayar</dt><dd>3 Nov 2026, 14.20 WIB</dd></div>
    <div><dt>Diterima oleh</dt><dd>Rina A., Bendahara Pengeluaran</dd></div>
  </dl>
</div>

Rincian biaya hd-summary

Subtotal, perkiraan pajak sebagai draf untuk diuji bendahara, dan total yang ditagihkan ke KKI. Pajak tidak ditambahkan ke tagihan dan tidak dipotong dari pembayaran kartu.

Layar 2, pesanan 30 kotak

Rincian biaya

Subtotal (30 × Rp35.000)
Rp1.050.000
Perkiraan pajak (draf, diuji bendahara)
Rp5.250
Total dibayar dengan KKI
Rp1.050.000
<section class="hd-card hd-summary" aria-labelledby="rincian-judul">
  <h4 class="hd-summary__title" id="rincian-judul">Rincian biaya</h4>
  <dl class="hd-summary__rows">
    <div class="hd-summary__row"><dt>Subtotal (30 × Rp35.000)</dt><dd>Rp1.050.000</dd></div>
    <div class="hd-summary__row"><dt>Perkiraan pajak (draf, diuji bendahara)</dt><dd>Rp5.250</dd></div>
    <div class="hd-summary__row hd-summary__row--total"><dt>Total dibayar dengan KKI</dt><dd aria-live="polite">Rp1.050.000</dd></div>
  </dl>
</section>
  • Teks mengikuti PRD, bukan mockup. Mockup menulis "PPh Final UMKM 0,5%, dipungut otomatis" dan "Diterima UMKM Rp1.044.750"; keduanya diganti karena HAPAKAT tidak memotong apa pun dari pembayaran kartu, dan nilai bersih UMKM bergantung pada MDR dan cara setor pajak. Contoh Rp5.250 adalah PPh final 0,5% pada skenario A di PRD, Perpajakan dan contoh hitung. Perlu verifikasi Tarif dan cara pemotongan atau penyetorannya perlu dicek dengan BPKAD dan KPP.
  • Nominal rata kanan, tabular, tidak terputus. Total diberi aria-live="polite" agar perubahan jumlah terdengar.

Tabel pajak hd-tax-table

Isi draf daftar pungutan atau potongan pajak dalam tabel dua kolom dengan judul baris. Draf ini disusun mesin aturan dan diuji bendahara sebelum masuk paket SPJ.

Draf pajak, skenario A di PRD, contoh

Draf pajak (diuji bendahara)
Dasar pengenaanRp1.050.000
PPNTidak dipungut
PPh 22Tidak dipungut
PPh final 0,5%Rp5.250
Atas namaDapur Bawi Kameloh
Perkiraan pajakRp5.250
 
<table class="hd-tax-table">
  <caption>Draf pajak (diuji bendahara)</caption>
  <tbody>
    <tr><th scope="row">Dasar pengenaan</th><td>Rp1.050.000</td></tr>
    <tr><th scope="row">PPN</th><td>Tidak dipungut</td></tr>
    <tr><th scope="row">PPh 22</th><td>Tidak dipungut</td></tr>
    <tr><th scope="row">PPh final 0,5%</th><td>Rp5.250</td></tr>
    <tr><th scope="row">Atas nama</th><td>Dapur Bawi Kameloh</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Perkiraan pajak</th><td>Rp5.250</td></tr>
  </tfoot>
</table>
  • Dasar tiap baris dan skenario lain (PPh 23, PBJT, penjual PKP) ada di PRD, Perpajakan dan contoh hitung. Perlu verifikasi Cara pemotongan atau penyetoran PPh final belum dipastikan.

Kartu pembayaran KKI hd-kki-card

Menegaskan kartu yang akan ditagih dan sisa limitnya, tepat di atas tombol bayar. Gambar kecilnya adalah wajah kartu KKI versi mini, hanya hiasan karena teks di sebelahnya sudah menyebut kartunya.

Satu kartu

Dibayar dengan Kartu Kredit Indonesia •••• 4417 Sisa limit Rp18.450.000, [Nama bank] 
<div class="hd-kki-card">
  <div class="hd-kki-face hd-kki-face--thumb" aria-hidden="true"><span class="hd-kki-face__mark">KKI<small>Kartu Kredit<br>Indonesia</small></span><span class="hd-kki-face__bank">[Nama bank]</span><span class="hd-kki-face__chip"></span><span class="hd-kki-face__number">•••• •••• •••• 4417</span><span class="hd-kki-face__holder">Rina A.<small>[Nama OPD]</small></span></div>
  <div class="hd-kki-card__text">
    <span class="hd-kki-card__eyebrow">Dibayar dengan</span>
    <span class="hd-kki-card__title">Kartu Kredit Indonesia <span class="hd-num">•••• 4417</span></span>
    <span class="hd-kki-card__meta">Sisa limit Rp18.450.000, [Nama bank]</span>
  </div>
</div>
  • Jangan pernah menampilkan lebih dari empat digit terakhir. Belum dirancang: memilih di antara beberapa kartu, kartu diblokir atau kedaluwarsa.

Wajah kartu KKI hd-kki-face

Gambar kartu yang netral: tulisan Kartu Kredit Indonesia, tanpa logo bank. Kotak putus-putus di kanan atas adalah tempat logo bank penerbit dan berisi "[Nama bank]" selama belum ada kesepakatan dengan bank mana pun. Ukuran kartu penuh di halaman Akun; versi hd-kki-face--thumb di layar bayar.

Kartu penuh

<div class="hd-kki-face" role="img" aria-label="Kartu Kredit Indonesia, nomor berakhiran 4417, [Nama bank]">
  <span class="hd-kki-face__mark">KKI<small>Kartu Kredit<br>Indonesia</small></span>
  <span class="hd-kki-face__bank">[Nama bank]</span>
  <span class="hd-kki-face__chip"></span>
  <span class="hd-kki-face__number">•••• •••• •••• 4417</span>
  <span class="hd-kki-face__holder">Rina A.<small>[Nama OPD]</small></span>
</div>

Pemakaian

  • Rasio kartu ISO/IEC 7810 ID-1 (--ratio-card). Semua teks di dalamnya diukur dengan cqw, jadi satu markup dipakai penuh maupun mini.
  • Pita motif di kiri masih abstrak; calon penggantinya motif benang bintik Kalimantan Tengah. Jangan memasang logo bank asli sebelum ada kesepakatan.
  • Hanya empat digit terakhir. Nama pemegang dan OPD dari profil bendahara.

Aksesibilitas

  • Kartu penuh memakai role="img" dengan nama "Kartu Kredit Indonesia, nomor berakhiran 4417, [Nama bank]". Versi mini aria-hidden.
  • Teks putih di atas biru: --on-blue di atas --bi-blue 7,69:1.

Menjaga satu aksi utama layar tugas selalu terjangkau, dengan satu baris tentang apa yang terjadi berikutnya.

Siap bayar

Nota, BAST, dan draf SPJ dibuat otomatis setelah barang diterima

<div class="hd-footer-bar">
  <button type="button" class="hd-btn hd-btn--primary hd-btn--xl hd-btn--block">Bayar Rp1.050.000 dengan KKI</button>
  <p class="hd-footer-bar__hint">Nota, BAST, dan draf SPJ dibuat otomatis setelah barang diterima</p>
</div>

Nonaktif dengan alasan

Ambil foto dan centang jumlah barang untuk melanjutkan

<div class="hd-footer-bar">
  <button type="button" class="hd-btn hd-btn--primary hd-btn--xl hd-btn--block" disabled aria-describedby="alasan-terima">Konfirmasi diterima</button>
  <p class="hd-footer-bar__hint" id="alasan-terima">Ambil foto dan centang jumlah barang untuk melanjutkan</p>
</div>
  • Tombol bayar di mockup lama berwarna aksen. Kini semua aksi utama tinta; nominal di label yang membedakan tombol bayar.
  • Teks bantu satu baris, tanpa titik di akhir. Setelah aksi selesai, umumkan hasilnya dan pindahkan fokus ke konfirmasi.

Layar hasil hd-result

Menegaskan pembayaran berhasil, dengan nomor pesanan dan langkah berikutnya. Varian bahaya ada di Pola.

Pembayaran berhasil

Pembayaran berhasil

Rp1.050.000 dibayar dengan KKI •••• 4417 ke Dapur Bawi Kameloh untuk 30 paket nasi kotak rapat.

Nomor pesanan
HPK-2611-0042
Waktu bayar
3 Nov 2026, 14.20 WIB
Status
Diteruskan ke UMKM
Lacak pesanan Kembali ke katalog 
<div class="hd-result">
  <span class="hd-result__disc" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg></span>
  <p class="hd-result__title">Pembayaran berhasil</p>
  <p class="hd-result__text">Rp1.050.000 dibayar dengan KKI •••• 4417 ke Dapur Bawi Kameloh untuk 30 paket nasi kotak rapat.</p>
  <div class="hd-card">
    <dl class="hd-dl hd-dl--inline">
      <div><dt>Nomor pesanan</dt><dd class="hd-mono">HPK-2611-0042</dd></div>
      <div><dt>Waktu bayar</dt><dd>3 Nov 2026, 14.20 WIB</dd></div>
      <div><dt>Status</dt><dd><span class="hd-badge hd-badge--lg hd-badge--success">Diteruskan ke UMKM</span></dd></div>
    </dl>
  </div>
  <div class="hd-result__actions">
    <a class="hd-btn hd-btn--primary hd-btn--xl hd-btn--block" href="#k-result">Lacak pesanan</a>
    <a class="hd-btn hd-btn--secondary hd-btn--lg hd-btn--block" href="#k-result">Kembali ke katalog</a>
  </div>
</div>
  • Di aplikasi, judul menjadi h1 dengan tabindex="-1" dan menerima fokus saat layar muncul. Status ditulis sebagai teks, bukan hanya hijau.

Linimasa pesanan hd-timeline

Perjalanan pesanan dari pembayaran sampai diterima di kantor. Mockup punya dua keadaan; linimasa ini menambah langkah berikutnya dan langkah gagal.

Selesai, saat ini, berikutnya

  1. Dibayar dengan KKI, selesai3 Nov 2026, 14.20 WIB
  2. Diproses Dapur Bawi Kameloh, selesai3 Nov 2026, 14.35 WIB
  3. Dalam pengiriman, selesai4 Nov 2026, 09.05 WIB
  4. Diterima di kantor, langkah saat iniMenunggu konfirmasi kamu
  5. SPJ disusun, belum dimulaiSetelah penerimaan dikonfirmasi 
<ol class="hd-timeline">
  <li class="hd-timeline__item hd-timeline__item--done">
    <span class="hd-timeline__marker" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg></span>
    <span class="hd-timeline__text"><span class="hd-timeline__title">Dibayar dengan KKI<span class="hd-sr-only">, selesai</span></span><span class="hd-timeline__time">3 Nov 2026, 14.20 WIB</span></span>
  </li>
  <li class="hd-timeline__item hd-timeline__item--done">
    <span class="hd-timeline__marker" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg></span>
    <span class="hd-timeline__text"><span class="hd-timeline__title">Diproses Dapur Bawi Kameloh<span class="hd-sr-only">, selesai</span></span><span class="hd-timeline__time">3 Nov 2026, 14.35 WIB</span></span>
  </li>
  <li class="hd-timeline__item hd-timeline__item--done">
    <span class="hd-timeline__marker" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg></span>
    <span class="hd-timeline__text"><span class="hd-timeline__title">Dalam pengiriman<span class="hd-sr-only">, selesai</span></span><span class="hd-timeline__time">4 Nov 2026, 09.05 WIB</span></span>
  </li>
  <li class="hd-timeline__item hd-timeline__item--current" aria-current="step">
    <span class="hd-timeline__marker" aria-hidden="true"></span>
    <span class="hd-timeline__text"><span class="hd-timeline__title">Diterima di kantor<span class="hd-sr-only">, langkah saat ini</span></span><span class="hd-timeline__time">Menunggu konfirmasi kamu</span></span>
  </li>
  <li class="hd-timeline__item hd-timeline__item--upcoming">
    <span class="hd-timeline__marker" aria-hidden="true"></span>
    <span class="hd-timeline__text"><span class="hd-timeline__title">SPJ disusun<span class="hd-sr-only">, belum dimulai</span></span><span class="hd-timeline__time">Setelah penerimaan dikonfirmasi</span></span>
  </li>
</ol>

Langkah gagal

  1. Pembayaran ditolak bank penerbit, gagal3 Nov 2026, 14.20 WIB 
<ol class="hd-timeline">
  <li class="hd-timeline__item hd-timeline__item--failed">
    <span class="hd-timeline__marker" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12"/><path d="M18 6L6 18"/></svg></span>
    <span class="hd-timeline__text"><span class="hd-timeline__title">Pembayaran ditolak bank penerbit<span class="hd-sr-only">, gagal</span></span><span class="hd-timeline__time">3 Nov 2026, 14.20 WIB</span></span>
  </li>
</ol>
  • <ol> dengan aria-current="step" pada langkah saat ini. Keadaan tiap langkah juga ditulis sebagai teks tersembunyi visual, karena penanda hanya berupa bentuk.

Bukti foto hd-photo, hd-meta

Foto barang saat diterima, sebagai bukti untuk BAST dan SPJ. Waktu dan titik lokasi dicatat otomatis.

Kosong

Bukti serah terima

Foto barang saat diterima

<section class="hd-card hd-card--outline hd-photo" aria-labelledby="foto-judul-1">
  <h4 class="hd-card__title" id="foto-judul-1">Bukti serah terima</h4>
  <div class="hd-photo__empty">
    <svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.5"/></svg>
    <p class="hd-photo__caption">Foto barang saat diterima</p>
    <button type="button" class="hd-btn hd-btn--primary hd-btn--lg">Ambil foto serah terima</button>
  </div>
</section>

Tersimpan

Bukti serah terima

Foto tersimpan
  • Waktu foto: 4 Nov 2026, 09.41 WIB
  • Lokasi: -2.2096, 113.9135, Palangka Raya
<section class="hd-card hd-card--outline hd-photo" aria-labelledby="foto-judul-2">
  <h4 class="hd-card__title" id="foto-judul-2">Bukti serah terima</h4>
  <figure class="hd-photo__frame">
    <svg class="hd-photo__image" viewBox="0 0 320 196" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Foto 30 nasi kotak yang diterima">
      <rect class="hd-photo__bg" width="320" height="196"/>
      <rect class="hd-photo__table" y="118" width="320" height="78"/>
      <rect class="hd-photo__box" x="44" y="70" width="52" height="38" rx="3"/><rect class="hd-photo__lid" x="44" y="70" width="52" height="9" rx="3"/>
      <rect class="hd-photo__box" x="104" y="70" width="52" height="38" rx="3"/><rect class="hd-photo__lid" x="104" y="70" width="52" height="9" rx="3"/>
      <rect class="hd-photo__box" x="164" y="70" width="52" height="38" rx="3"/><rect class="hd-photo__lid" x="164" y="70" width="52" height="9" rx="3"/>
      <rect class="hd-photo__box" x="224" y="70" width="52" height="38" rx="3"/><rect class="hd-photo__lid" x="224" y="70" width="52" height="9" rx="3"/>
      <rect class="hd-photo__box" x="28" y="112" width="60" height="46" rx="3"/><rect class="hd-photo__lid" x="28" y="112" width="60" height="11" rx="3"/>
      <rect class="hd-photo__box" x="96" y="112" width="60" height="46" rx="3"/><rect class="hd-photo__lid" x="96" y="112" width="60" height="11" rx="3"/>
      <rect class="hd-photo__box" x="164" y="112" width="60" height="46" rx="3"/><rect class="hd-photo__lid" x="164" y="112" width="60" height="11" rx="3"/>
      <rect class="hd-photo__box" x="232" y="112" width="60" height="46" rx="3"/><rect class="hd-photo__lid" x="232" y="112" width="60" height="11" rx="3"/>
    </svg>
    <span class="hd-badge hd-badge--lg hd-badge--overlay"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>Foto tersimpan</span>
  </figure>
  <ul class="hd-meta">
    <li><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg><span class="hd-sr-only">Waktu foto: </span>4 Nov 2026, 09.41 WIB</li>
    <li><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11z"/><circle cx="12" cy="10" r="2"/></svg><span class="hd-sr-only">Lokasi: </span>-2.2096, 113.9135, Palangka Raya</li>
  </ul>
  <div><button type="button" class="hd-btn hd-btn--text"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 12a8 8 0 1 1-2.34-5.66"/><path d="M20 4v5h-5"/></svg>Ulangi foto</button></div>
</section>
  • Di web, tombol membuka <input type="file" accept="image/*" capture="environment">. Foto tersimpan diberi teks alternatif yang menyebut isinya.
  • Ikon waktu dan lokasi didampingi label tersembunyi visual: Waktu foto, Lokasi.
  • Belum dirancang: izin kamera ditolak, unggahan gagal, lokasi tidak tersedia (tulis "Lokasi tidak tersedia", jangan dikosongkan).

Baris dokumen SPJ hd-doc-row

Daftar dokumen pertanggungjawaban yang disusun otomatis. Setiap baris menyebut asal dokumennya dan statusnya; memilih baris menampilkan pratinjau.

Lima dokumen, draf SPJ terpilih

<div class="hd-list" role="group" aria-label="Dokumen pertanggungjawaban">
  <button type="button" class="hd-doc-row" aria-pressed="false">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Bukti pembayaran KKI</span><span class="hd-doc-row__source">Dari transaksi KKI</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--success">Lengkap</span>
  </button>
  <button type="button" class="hd-doc-row" aria-pressed="false">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Nota penyedia</span><span class="hd-doc-row__source">Diterbitkan Dapur Bawi Kameloh</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--success">Lengkap</span>
  </button>
  <button type="button" class="hd-doc-row" aria-pressed="false">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Berita acara serah terima</span><span class="hd-doc-row__source">Dari konfirmasi penerimaan</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--success">Lengkap</span>
  </button>
  <button type="button" class="hd-doc-row" aria-pressed="false">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Draf pajak</span><span class="hd-doc-row__source">Dari mesin aturan, diuji bendahara</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--success">Lengkap</span>
  </button>
  <button type="button" class="hd-doc-row" aria-pressed="true">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Draf SPJ dan kuitansi</span><span class="hd-doc-row__source">Disusun dari empat dokumen di atas</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--success">Lengkap</span>
  </button>
</div>

Status lain: disusun, perlu revisi, belum ada

<div class="hd-list">
  <button type="button" class="hd-doc-row" aria-pressed="false">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Berita acara serah terima</span><span class="hd-doc-row__source">Menunggu konfirmasi penerimaan</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--warning">Disusun</span>
  </button>
  <button type="button" class="hd-doc-row" aria-pressed="false">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Draf SPJ dan kuitansi</span><span class="hd-doc-row__source">Dikembalikan PPK-SKPD</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--danger">Perlu revisi</span>
  </button>
  <button type="button" class="hd-doc-row" aria-pressed="false">
    <span class="hd-tile hd-tile--sm" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>
    <span class="hd-doc-row__text"><span class="hd-doc-row__name">Nota penyedia</span><span class="hd-doc-row__source">Belum diunggah penyedia</span></span>
    <span class="hd-badge hd-badge--lg hd-badge--neutral">Belum ada</span>
  </button>
</div>
  • Terpilih: cincin dalam 2px biru dan latar biru tipis, plus aria-pressed="true". Karena hanya satu yang terpilih, pasangan tablist dan tabpanel dengan pratinjau juga tepat.
  • Status selalu berupa teks di badge (Lengkap, Disusun, Perlu revisi, Belum ada), bukan hanya cakram hijau seperti di mockup.

Pratinjau dokumen hd-preview

Isi pokok dokumen terpilih untuk diperiksa cepat. Garis putus-putus menandakan draf.

Draf SPJ dan kuitansi

Pratinjau: Draf SPJ dan kuitansi

  • Kode rekening 5.1.02.01.01.0052
  • Belanja Makanan dan Minuman Rapat, Rp1.050.000
  • Siap diverifikasi PPK-SKPD
<section class="hd-preview" aria-live="polite" aria-labelledby="pratinjau-judul">
  <h4 class="hd-preview__title" id="pratinjau-judul">Pratinjau: Draf SPJ dan kuitansi</h4>
  <ul class="hd-preview__list">
    <li>Kode rekening <span class="hd-mono">5.1.02.01.01.0052</span></li>
    <li>Belanja Makanan dan Minuman Rapat, Rp1.050.000</li>
    <li>Siap diverifikasi PPK-SKPD</li>
  </ul>
</section>

Alert hd-alert

Pesan sebaris di dalam layar. Mockup hanya punya alert sukses; info, peringatan, dan bahaya ditambahkan dengan bentuk yang sama.

Sukses, info, peringatan, bahaya

Terkirim ke PPK-SKPD untuk diverifikasi

4 Nov 2026, 09.43 WIB

Data simulasi

Semua angka di dashboard ini fiktif untuk demo.

Menunggu verifikasi PPK-SKPD

Kamu akan diberi tahu bila ada dokumen yang perlu direvisi.

<div class="hd-col">
  <div class="hd-alert hd-alert--success" role="status">
    <svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l4 4 10-10"/></svg>
    <div class="hd-alert__body"><p class="hd-alert__title">Terkirim ke PPK-SKPD untuk diverifikasi</p><p class="hd-alert__text">4 Nov 2026, 09.43 WIB</p></div>
  </div>
  <div class="hd-alert" role="status">
    <svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 7.5h.01"/></svg>
    <div class="hd-alert__body"><p class="hd-alert__title">Data simulasi</p><p class="hd-alert__text">Semua angka di dashboard ini fiktif untuk demo.</p></div>
  </div>
  <div class="hd-alert hd-alert--warning" role="status">
    <svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10.3 4.2L2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4"/><path d="M12 17h.01"/></svg>
    <div class="hd-alert__body"><p class="hd-alert__title">Menunggu verifikasi PPK-SKPD</p><p class="hd-alert__text">Kamu akan diberi tahu bila ada dokumen yang perlu direvisi.</p></div>
  </div>
  <div class="hd-alert hd-alert--danger" role="alert">
    <svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6"/><path d="M9 9l6 6"/></svg>
    <div class="hd-alert__body"><p class="hd-alert__title">Limit KKI tidak cukup</p><p class="hd-alert__text">Sisa Rp850.000, total pesanan Rp1.050.000. Kurangi jumlah atau pakai kartu lain.</p></div>
  </div>
</div>
  • role="status" untuk hasil yang sopan diumumkan; role="alert" hanya untuk galat yang menghentikan proses.
  • Judul menyebut apa yang terjadi, teks menyebut angka dan langkah berikutnya.

Kosong dan memuat hd-empty, hd-skeleton

Keadaan yang tidak ada di mockup tetapi pasti muncul: pencarian tanpa hasil dan katalog yang sedang dimuat.

Pencarian tanpa hasil

Tidak ada produk untuk “kursi lipat”

Coba kata lain atau pilih kategori Semua. UMKM baru tampil setelah NIB dan NPWP-nya terverifikasi.

<div class="hd-empty">
  <span class="hd-tile" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="M16.5 16.5L20 20"/></svg></span>
  <p class="hd-empty__title">Tidak ada produk untuk “kursi lipat”</p>
  <p class="hd-empty__text">Coba kata lain atau pilih kategori Semua. UMKM baru tampil setelah NIB dan NPWP-nya terverifikasi.</p>
  <button type="button" class="hd-btn hd-btn--secondary hd-btn--md">Hapus pencarian</button>
</div>

Memuat katalog

Memuat katalog 
<div class="hd-product-card" aria-busy="true">
  <span class="hd-sr-only">Memuat katalog</span>
  <span class="hd-skeleton hd-skeleton--tile" aria-hidden="true"></span>
  <span class="hd-product-card__body" aria-hidden="true">
    <span class="hd-skeleton hd-skeleton--title"></span>
    <span class="hd-skeleton"></span>
    <span class="hd-skeleton hd-skeleton--short"></span>
  </span>
</div>
  • Keadaan kosong menyebut kata yang dicari dan satu jalan keluar. Skeleton meniru bentuk kartu sebenarnya, denyutnya berhenti bila gerak dikurangi, dan teks "Memuat katalog" tersedia untuk pembaca layar.

KPI hd-kpi

Angka utama dashboard pemda. KPI unggulan memakai latar biru tipis dan angka biru; sisanya putih hangat.

Unggulan dan biasa, data simulasi

Belanja ke UMKM lokal
Rp1,28 miliar
642 transaksi KKI
UMKM penyedia aktif
87
Tersebar di 14 kabupaten/kota
<dl class="hd-kpi-grid">
  <div class="hd-kpi hd-kpi--featured"><dt class="hd-kpi__label">Belanja ke UMKM lokal</dt><dd class="hd-kpi__value">Rp1,28 miliar</dd><dd class="hd-kpi__meta">642 transaksi KKI</dd></div>
  <div class="hd-kpi"><dt class="hd-kpi__label">UMKM penyedia aktif</dt><dd class="hd-kpi__value">87</dd><dd class="hd-kpi__meta">Tersebar di 14 kabupaten/kota</dd></div>
</dl>
  • Label mendahului nilai di DOM, sebagai <dt> dan <dd>, sehingga terbaca "Belanja ke UMKM lokal, Rp1,28 miliar".
  • Belum dirancang: perubahan dibanding bulan lalu dan keadaan tanpa data.

Daftar batang hd-bar-list

Peringkat belanja per kabupaten/kota. Pengganti peta di naskah pitch yang lebih mudah dibaca; peta bisa menyusul.

Belanja per kabupaten/kota, data simulasi

Belanja per kabupaten/kota

  • Palangka RayaRp412 jt
  • Kotawaringin TimurRp186 jt
  • KapuasRp142 jt
  • Kotawaringin BaratRp121 jt
  • Barito UtaraRp88 jt
  • Pulang PisauRp74 jt
  • KatinganRp61 jt
  • 7 kabupaten lainnyaRp196 jt
<section class="hd-card hd-card--outline" aria-labelledby="kab-judul">
  <h4 class="hd-card__title" id="kab-judul">Belanja per kabupaten/kota</h4>
  <ul class="hd-bar-list">
    <li class="hd-bar-list__row"><span>Palangka Raya</span><div class="hd-meter hd-meter--bar" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="100.0" height="1"/></svg></div><span class="hd-bar-list__value">Rp412 jt</span></li>
    <li class="hd-bar-list__row"><span>Kotawaringin Timur</span><div class="hd-meter hd-meter--bar" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="45.15" height="1"/></svg></div><span class="hd-bar-list__value">Rp186 jt</span></li>
    <li class="hd-bar-list__row"><span>Kapuas</span><div class="hd-meter hd-meter--bar" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="34.47" height="1"/></svg></div><span class="hd-bar-list__value">Rp142 jt</span></li>
    <li class="hd-bar-list__row"><span>Kotawaringin Barat</span><div class="hd-meter hd-meter--bar" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="29.37" height="1"/></svg></div><span class="hd-bar-list__value">Rp121 jt</span></li>
    <li class="hd-bar-list__row"><span>Barito Utara</span><div class="hd-meter hd-meter--bar" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="21.36" height="1"/></svg></div><span class="hd-bar-list__value">Rp88 jt</span></li>
    <li class="hd-bar-list__row"><span>Pulang Pisau</span><div class="hd-meter hd-meter--bar" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="17.96" height="1"/></svg></div><span class="hd-bar-list__value">Rp74 jt</span></li>
    <li class="hd-bar-list__row"><span>Katingan</span><div class="hd-meter hd-meter--bar" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="14.81" height="1"/></svg></div><span class="hd-bar-list__value">Rp61 jt</span></li>
    <li class="hd-bar-list__row"><span>7 kabupaten lainnya</span><div class="hd-meter hd-meter--bar hd-meter--muted" aria-hidden="true"><svg class="hd-meter__bar" viewBox="0 0 100 1" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="hd-meter__fill" width="47.57" height="1"/></svg></div><span class="hd-bar-list__value">Rp196 jt</span></li>
  </ul>
</section>
  • Nilai tertulis di setiap baris, jadi batang (hd-meter hd-meter--bar) boleh aria-hidden. Baris gabungan "lainnya" memakai --chart-other. Jumlah semua baris Rp1.280 jt, sama dengan KPI Rp1,28 miliar.

Batang proporsi hd-share, hd-legend

Porsi belanja per kategori dalam satu batang bertumpuk, dengan legenda yang mengulang semua angka.

Belanja per kategori, data simulasi

  • Konsumsi46%Rp589 jt
  • ATK22%Rp282 jt
  • Percetakan18%Rp230 jt
  • Suvenir dan lainnya14%Rp179 jt
<figure class="hd-share">
  <svg class="hd-share__bar" viewBox="0 0 100 20" preserveAspectRatio="none" role="img" aria-label="Konsumsi 46 persen, ATK 22 persen, percetakan 18 persen, suvenir dan lainnya 14 persen">
    <rect class="hd-share__seg--1" x="0" width="44.9" height="20" rx="0.6" ry="3"/>
    <rect class="hd-share__seg--2" x="45.7" width="21.47" height="20" rx="0.6" ry="3"/>
    <rect class="hd-share__seg--3" x="67.97" width="17.57" height="20" rx="0.6" ry="3"/>
    <rect class="hd-share__seg--other" x="86.34" width="13.66" height="20" rx="0.6" ry="3"/>
  </svg>
  <ul class="hd-legend">
    <li class="hd-legend__item"><span class="hd-legend__swatch hd-legend__swatch--1" aria-hidden="true"></span><span>Konsumsi</span><span class="hd-legend__pct">46%</span><span class="hd-legend__value">Rp589 jt</span></li>
    <li class="hd-legend__item"><span class="hd-legend__swatch hd-legend__swatch--2" aria-hidden="true"></span><span>ATK</span><span class="hd-legend__pct">22%</span><span class="hd-legend__value">Rp282 jt</span></li>
    <li class="hd-legend__item"><span class="hd-legend__swatch hd-legend__swatch--3" aria-hidden="true"></span><span>Percetakan</span><span class="hd-legend__pct">18%</span><span class="hd-legend__value">Rp230 jt</span></li>
    <li class="hd-legend__item"><span class="hd-legend__swatch hd-legend__swatch--other" aria-hidden="true"></span><span>Suvenir dan lainnya</span><span class="hd-legend__pct">14%</span><span class="hd-legend__value">Rp179 jt</span></li>
  </ul>
</figure>
  • Seri memakai keluarga biru BI dari gelap ke terang, lalu abu-abu untuk "lainnya". Celah putih memisahkan segmen yang bertetangga. Lebar segmen ditulis sebagai atribut SVG, bukan gaya inline.
  • Batang punya role="img" dan label yang menyebut semua persen; legenda mengulang nilai sebagai teks.

Tabel data hd-table

Transaksi KKI terbaru dengan status SPJ. Tabel bergulir di dalam pembungkusnya sendiri di layar sempit.

Transaksi terbaru, data simulasi

Transaksi terbaru
WaktuOPDUMKM penyediaNilaiStatus SPJ
4 Nov, 09.43[Nama OPD]Dapur Bawi KamelohRp1.050.000Diteruskan ke PPK
4 Nov, 09.12Dinas KesehatanSinar Kahayan ATKRp1.240.000Disetujui
3 Nov, 15.30Dinas PendidikanPercetakan TingangRp900.000Disetujui
3 Nov, 11.05Badan Pendapatan DaerahWadai Mama IraRp675.000Disetujui
3 Nov, 10.20Dinas PariwisataRotan IsenRp2.550.000Menunggu barang
 
<div class="hd-table-wrap" tabindex="0" role="region" aria-labelledby="trx-judul">
  <table class="hd-table">
    <caption id="trx-judul">Transaksi terbaru</caption>
    <thead>
      <tr><th scope="col">Waktu</th><th scope="col">OPD</th><th scope="col">UMKM penyedia</th><th scope="col" class="hd-table__num">Nilai</th><th scope="col">Status SPJ</th></tr>
    </thead>
    <tbody>
      <tr><td class="hd-table__muted">4 Nov, 09.43</td><td>[Nama OPD]</td><td>Dapur Bawi Kameloh</td><td class="hd-table__num">Rp1.050.000</td><td><span class="hd-badge hd-badge--lg hd-badge--warning">Diteruskan ke PPK</span></td></tr>
      <tr><td class="hd-table__muted">4 Nov, 09.12</td><td>Dinas Kesehatan</td><td>Sinar Kahayan ATK</td><td class="hd-table__num">Rp1.240.000</td><td><span class="hd-badge hd-badge--lg hd-badge--success">Disetujui</span></td></tr>
      <tr><td class="hd-table__muted">3 Nov, 15.30</td><td>Dinas Pendidikan</td><td>Percetakan Tingang</td><td class="hd-table__num">Rp900.000</td><td><span class="hd-badge hd-badge--lg hd-badge--success">Disetujui</span></td></tr>
      <tr><td class="hd-table__muted">3 Nov, 11.05</td><td>Badan Pendapatan Daerah</td><td>Wadai Mama Ira</td><td class="hd-table__num">Rp675.000</td><td><span class="hd-badge hd-badge--lg hd-badge--success">Disetujui</span></td></tr>
      <tr><td class="hd-table__muted">3 Nov, 10.20</td><td>Dinas Pariwisata</td><td>Rotan Isen</td><td class="hd-table__num">Rp2.550.000</td><td><span class="hd-badge hd-badge--lg hd-badge--neutral">Menunggu barang</span></td></tr>
    </tbody>
  </table>
</div>
  • <caption> dan scope="col" wajib. Pembungkus yang bisa digulir diberi tabindex="0", role="region", dan nama, supaya pengguna papan ketik bisa menggulirnya.
  • Belum dirancang: urutan kolom, halaman, dan baris yang membuka detail.

Navigasi bawah hd-bottom-nav

Navigasi utama aplikasi di layar katalog. Item aktif berwarna biru, lebih tebal, dan ikonnya diberi pil biru tipis, jadi tidak hanya dibedakan oleh warna.

Katalog aktif

<nav class="hd-bottom-nav" aria-label="Menu utama">
  <a class="hd-bottom-nav__item" href="#k-bottom-nav" aria-current="page"><span class="hd-bottom-nav__icon"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></svg></span>Katalog</a>
  <a class="hd-bottom-nav__item" href="#k-bottom-nav"><span class="hd-bottom-nav__icon"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg></span>Pesanan</a>
  <a class="hd-bottom-nav__item" href="#k-bottom-nav"><span class="hd-bottom-nav__icon"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M10 13h6"/><path d="M10 17h4"/></svg></span>SPJ</a>
  <a class="hd-bottom-nav__item" href="#k-bottom-nav"><span class="hd-bottom-nav__icon"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg></span>Akun</a>
</nav>
  • Item 52px, label selalu terlihat, ikon aria-hidden, item aktif aria-current="page". Layar tugas tidak memakai navigasi bawah.

Header dashboard hd-dash-header, hd-page-head

Kepala dashboard pemda: lockup, nama pemerintah daerah, periode, dan penanda data simulasi. Mockup lama memakai pita gelap; kini putih dengan garis rambut.

Dashboard, lebar penuh

HAPAKAT Pemerintah Provinsi Kalimantan Tengah
November 2026 Data simulasi

Belanja pemerintah ke UMKM lokal

Semua belanja OPD yang dibayar dengan KKI melalui HAPAKAT, November 2026.

<div class="hd-col">
  <header class="hd-dash-header">
    <div class="hd-dash-header__brand">
      <span class="hd-brand"><img class="hd-brand__mark" src="/assets/favicon.svg" alt="" width="24" height="24">HAPAKAT</span>
      <span class="hd-brand__context">Pemerintah Provinsi Kalimantan Tengah</span>
    </div>
    <div class="hd-dash-header__meta">
      <span class="hd-badge hd-badge--lg hd-badge--neutral">November 2026</span>
      <span class="hd-badge hd-badge--lg">Data simulasi</span>
    </div>
  </header>
  <div class="hd-page-head">
    <p class="hd-page-head__title">Belanja pemerintah ke UMKM lokal</p>
    <p class="hd-page-head__text">Semua belanja OPD yang dibayar dengan KKI melalui HAPAKAT, November 2026.</p>
  </div>
</div>
  • Periode di mockup tampak seperti filter tetapi tidak bisa dipilih. Bila menjadi kontrol, pakai tab atau select berlabel.
  • Penanda Data simulasi wajib ada selama angka belum berasal dari transaksi nyata.

Pola

Format angka, tanggal, dan identitas

Format baku HAPAKAT
DataContohAturan
RupiahRp1.050.000"Rp" tanpa spasi, titik pemisah ribuan, tanpa desimal. Rata kanan dan tabular di daftar.
Rupiah ringkasRp1,28 miliar · Rp412 jtKoma desimal, kata "miliar", singkatan "jt" berspasi. Hanya di dashboard; layar transaksi selalu nominal penuh.
Harga satuanRp35.000 / kotakGaris miring berspasi, lalu satuan: kotak, rim, lembar, buah.
Perkalian30 × Rp35.000Tanda × (U+00D7), bukan huruf x.
Tanggal panjangSenin, 2 November 2026Nama hari, tanggal tanpa nol di depan, nama bulan lengkap. Untuk jadwal kirim.
Tanggal dan jam3 Nov 2026, 14.20 WIBBulan tiga huruf, jam 24 dengan titik, zona waktu WIB.
Ringkas di tabel4 Nov, 09.43Tanpa tahun dan zona waktu bila periode tabel sudah jelas.
Rentang10–20 UMKMTanda pisah en (U+2013) tanpa spasi, hanya untuk rentang angka. Bukan tanda pisah em.
Nomor kartuKKI •••• 4417Empat titik bulat (U+2022), spasi, empat digit terakhir. Jangan pernah lebih dari empat digit. Bentuk panjang: Kartu Kredit Indonesia •••• 4417.
Persen0,5% · 46%Koma desimal, tanpa spasi sebelum %. Untuk pembaca layar: "46 persen".
Nomor pesananHPK-2611-0042Awalan HPK, tahun dan bulan (2611 = November 2026), nomor urut empat digit. Geist Mono.
Kode rekening5.1.02.01.01.0052Geist Mono, diikuti nama rekening. Kode contoh dari mockup. Perlu verifikasi
NIB dan NPWPNIB dan NPWP terverifikasiDi katalog cukup status. Nomor lengkap hanya di dokumen SPJ dan profil penyedia, dalam Geist Mono. Panjang dan format resminya belum dicek. Perlu verifikasi
Koordinat-2.2096, 113.9135, Palangka RayaTitik desimal, empat angka di belakang titik, lalu nama tempat.

Keadaan kosong, memuat, dan galat

Komponen untuk setiap keadaan
KeadaanKomponenContoh teks
Kosonghd-emptyTidak ada produk untuk “kursi lipat”
Memuathd-skeleton, aria-busyMemuat katalog
Galat isianhd-field__errorWaktu kirim wajib diisi
Galat proseshd-alert--dangerLimit KKI tidak cukup
Gagal totalhd-result--dangerPembayaran ditolak

Pembayaran ditolak

Pembayaran ditolak

Bank penerbit menolak transaksi Rp1.050.000. Limit KKI •••• 4417 tidak terpakai.

Hubungi [Nama bank] 
<div class="hd-result hd-result--danger">
  <span class="hd-result__disc" aria-hidden="true"><svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12"/><path d="M18 6L6 18"/></svg></span>
  <p class="hd-result__title">Pembayaran ditolak</p>
  <p class="hd-result__text">Bank penerbit menolak transaksi Rp1.050.000. Limit KKI •••• 4417 tidak terpakai.</p>
  <div class="hd-result__actions">
    <button type="button" class="hd-btn hd-btn--primary hd-btn--xl hd-btn--block">Coba lagi</button>
    <a class="hd-btn hd-btn--secondary hd-btn--lg hd-btn--block" href="#pola-keadaan">Hubungi [Nama bank]</a>
  </div>
</div>

Konfirmasi sebelum membayar

  1. Ringkas dulu

    Produk, jumlah, penyedia, kode rekening, kartu KKI, dan rincian biaya terlihat di satu layar sebelum tombol bayar.

  2. Nominal di tombol

    Label tombol menyebut nominal yang sama persis dengan total: Bayar Rp1.050.000 dengan KKI.

  3. Cek limit lebih dulu

    Bila total melebihi sisa limit, tombol nonaktif dan alasannya tertulis di atas dan di bawahnya.

  4. Satu ketukan

    Setelah ditekan, tombol menjadi Memproses pembayaran…, nonaktif, dan aria-busy="true", sehingga tidak ada pembayaran ganda.

  5. Hasil yang jelas

    Layar hasil menyebut nominal, kartu, penerima, dan barang. Fokus pindah ke judul hasil.

Limit tidak cukup: tombol bayar dikunci

Kurangi jumlah atau pakai kartu lain untuk melanjutkan

<div class="hd-col">
  <div class="hd-alert hd-alert--danger" role="alert">
    <svg class="hd-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6"/><path d="M9 9l6 6"/></svg>
    <div class="hd-alert__body"><p class="hd-alert__title">Limit KKI tidak cukup</p><p class="hd-alert__text">Sisa Rp850.000, total pesanan Rp1.050.000.</p></div>
  </div>
  <button type="button" class="hd-btn hd-btn--primary hd-btn--xl hd-btn--block" disabled aria-describedby="alasan-limit">Bayar Rp1.050.000 dengan KKI</button>
  <p class="hd-footer-bar__hint" id="alasan-limit">Kurangi jumlah atau pakai kartu lain untuk melanjutkan</p>
</div>

Suara dan nada

Diadaptasi dari suara x.ai: yakin, pendek, deklaratif. Dalam bahasa Indonesia yang hangat dan cukup resmi untuk kantor pemerintah.

  • Kalimat aktif dan pendek, kata kerja di depan, angka spesifik. Tanpa tanda seru, tanpa emoji, tanpa kata sifat promosi.
  • Judul dan tombol memakai huruf kapital kalimat: Detail pesanan, Rincian biaya.
  • Status memakai kata kerja berawalan di-: Dibayar, Diteruskan, Disetujui. Keadaan menunggu diawali "Menunggu".
  • Akronim dipakai apa adanya di aplikasi (KKI, SPJ, BAST, PPK-SKPD, OPD, NIB, NPWP) dan dijelaskan sekali di situs.
  • Sapaan "kamu" mengikuti mockup. Perlu verifikasi Uji dengan bendahara apakah "Anda" lebih cocok.
  • Teks bantu di bawah tombol satu baris, tanpa titik di akhir.

Lakukan

Pembayaran berhasil

Hindari

Yeay, pembayaran kamu sukses!

Lakukan

Limit KKI tidak cukup. Sisa Rp850.000, total pesanan Rp1.050.000.

Hindari

Oops, terjadi kesalahan. Silakan coba beberapa saat lagi.

Lakukan

Ambil foto dan centang jumlah barang untuk melanjutkan

Hindari

Mohon untuk melakukan pengambilan foto terlebih dahulu sebelum dapat melanjutkan ke proses berikutnya.

Lakukan

Teruskan ke PPK-SKPD

Hindari

Klik di sini

Lakukan

SPJ disusun otomatis dari pesanan HPK-2611-0042.

Hindari

Aplikasi canggih yang membuat semua urusan SPJ jadi mudah!

Aksesibilitas

Target HAPAKAT adalah WCAG 2.2 tingkat AA, dengan target sentuh tingkat AAA karena aplikasi dipakai di ponsel oleh petugas yang sedang memegang barang.

Target sentuh

  • Semua kontrol aplikasi dan tautan navigasi minimal 44 × 44 px (--touch-min), sesuai kriteria 2.5.5 tingkat AAA. Batas AA (2.5.8) adalah 24 × 24 px.
  • Tombol utama di bar bawah dan item navigasi bawah 52px (--size-cta).
  • Ukuran x.ai yang lebih kecil (tombol 28–40px, tab 36px, tautan navigasi situs 36px) tetap punya area sentuh 44px lewat pseudo-elemen ::after.

Fokus

  • Cincin 2px --focus dengan jarak 2px di semua elemen interaktif, lewat :focus-visible. x.ai memakai cincin tinta; HAPAKAT memakai biru agar cincin tidak menyatu dengan tombol primer yang juga tinta.
  • Kontras cincin 7,69:1 di atas putih dan 7,25:1 di atas --surface-card; syaratnya 3:1 (1.4.11).
  • Setiap halaman dimulai dengan tautan "Langsung ke isi". Header lengket tidak menutupi target fokus karena scroll-padding-top mengikuti tingginya.

Kontras

Teks biasa minimal 4,5:1; teks 24px ke atas, batas kontrol, dan cincin fokus minimal 3:1 (1.4.3 dan 1.4.11). Beberapa alfa tinta x.ai di bawah batas itu dan hanya boleh untuk dekorasi atau keadaan nonaktif:

Token di bawah 4,5:1 dan batas pemakaiannya (dihitung skrip)
TokenDi atas --surfaceDi atas --surface-cardBoleh untuk
--ink-554,38:14,31:1Tidak untuk teks penting. Pakai --ink-60.
--ink-453,15:13,13:1Batas kontrol formulir, cincin langkah berikutnya di linimasa, label nonaktif, teks 24px ke atas.
--ink-muted3,91:13,69:1Tidak dipakai di HAPAKAT. Tab tidak aktif memakai --ink-60.
--ink-302,05:12,03:1Dekoratif: batang "lainnya" yang nilainya tertulis.
--ink-251,78:11,78:1Dekoratif: titik pemisah.
--ink-201,57:11,56:1Dekoratif: pemisah di pil, garis putus-putus area foto kosong.
--ink-101,24:11,24:1Garis rambut kartu dan pemisah. Bukan batas kontrol.
--ink-081,18:11,18:1Garis pil pengumuman, lapisan tekan.
--ink-061,12:11,13:1Lintasan grafik, skeleton, garis tabel.
--ink-041,08:11,08:1Lapisan hover.
--bi-blue-light1,87:11,76:1Seri grafik ketiga, selalu dengan nilai tertulis di legenda.
--code-param3,48:13,28:1Nilai asli x.ai untuk sorotan kode; tidak dipakai HAPAKAT.

Label dan struktur

  • Setiap input punya label nyata. Label pencarian boleh tersembunyi visual dengan hd-sr-only, tidak boleh dihapus.
  • Tombol ikon memakai aria-label; ikon selalu aria-hidden="true".
  • Satu h1 per layar. Pasangan label dan nilai memakai <dl>. Tabel memakai <caption> dan scope.
  • Perubahan jumlah, hasil filter, dan pratinjau diumumkan dengan aria-live="polite". Hasil kirim memakai role="status"; galat yang menghentikan proses memakai role="alert".
  • Galat isian memakai aria-invalid dan aria-describedby ke pesan yang menyebut cara memperbaikinya.

Warna bukan satu-satunya penanda

  • Chip terpilih memakai ikon centang, menu aktif memakai pil di belakang ikon dan huruf lebih tebal, status selalu berupa teks.
  • Langkah linimasa punya teks tersembunyi visual: selesai, langkah saat ini, belum dimulai, gagal.
  • Grafik selalu disertai nilai tertulis.

Gerak

  • Saat prefers-reduced-motion: reduce, --duration-fast dan --duration-base menjadi 0ms, putaran tombol memuat dan denyut skeleton berhenti, dan gulir halus dimatikan.
  • Tidak ada animasi yang membawa informasi; semua keadaan juga tertulis.

Contoh penerapan

Layar 1: Katalog UMKM

Layar katalog dari mockup "1. Katalog UMKM", dibangun ulang hanya dengan komponen hd- dan data fiktif mockup. Halaman ini tanpa JavaScript, jadi chip dan tautan di dalamnya tidak berfungsi. Isi layar bisa digulir di dalam bingkai.

HAPAKAT

Halo, Rina

Bendahara Pengeluaran, [Nama OPD]

KKIKartu Kredit Indonesia •••• 4417
Sisa limit KKI bulan ini Rp18.450.000
Terpakai Rp6.550.000 dari Rp25.000.000

UMKM lokal Kalimantan Tengah

5 produk
Konsumsi Paket nasi kotak rapat Dapur Bawi Kameloh, Palangka Raya Rp35.000/ kotakNIB dan NPWP terverifikasi Konsumsi Snack box rapat isi 3 kue Wadai Mama Ira, Palangka Raya Rp15.000/ kotakNIB dan NPWP terverifikasi ATK Kertas HVS A4 80 gsm Sinar Kahayan ATK, Palangka Raya Rp62.000/ rimNIB dan NPWP terverifikasi Percetakan Spanduk kegiatan 3 × 1 m Percetakan Tingang, Kapuas Rp150.000/ lembarNIB dan NPWP terverifikasi Suvenir Tas anyaman rotan untuk tamu Rotan Isen, Katingan Rp85.000/ buahNIB dan NPWP terverifikasi
Layar 1, Katalog UMKM, dalam tampilan baru: header putih, limit KKI biru, chip terpilih biru, aksi tinta. Semua nama UMKM, harga, nomor kartu, dan persona Rina A. fiktif.

Potongan dashboard pemda

Bagian atas dashboard 1280px: header, judul, dan baris KPI. Angkanya data simulasi dari mockup dan saling cocok: 598 SPJ dari 642 transaksi adalah 93%.

Dashboard pemda, data simulasi

HAPAKAT Pemerintah Provinsi Kalimantan Tengah
November 2026 Data simulasi

Belanja pemerintah ke UMKM lokal

Semua belanja OPD yang dibayar dengan KKI melalui HAPAKAT, November 2026.

Belanja ke UMKM lokal
Rp1,28 miliar
642 transaksi KKI
UMKM penyedia aktif
87
Tersebar di 14 kabupaten/kota
SPJ tersusun otomatis
598
93% dari seluruh transaksi
OPD pengguna aktif
24
Tingkat provinsi

Referensi token

Tabel ini dibuat otomatis dari /assets/tokens.css setiap kali halaman dibangun, termasuk kolom tujuan yang diambil dari komentar di ujung baris token. Jangan menyuntingnya dengan tangan: ubah tokens.css, lalu bangun ulang halaman.

213 custom property di :root, dibaca dari /assets/tokens.css
TokenNilaiTujuan
Permukaan (x.ai)
--surface #ffffffLatar halaman dan layar aplikasi. Semuanya berdiri di atas putih polos.
--surface-nav #ffffffd9Header lengket 64px, selalu dipakai bersama --blur-nav.
--surface-card #f9f8f6Putih hangat untuk kartu, tile ikon, kartu limit, dan KPI.
--surface-button #f2f1efIsi tombol sekunder dan chip filter yang tidak dipilih.
Tinta (x.ai)
--ink #0a0a0aSemua teks utama dan isi tombol primer.
--ink-60 #0a0a0a99Eyebrow, keterangan, label sekunder, placeholder. Teks terkecil yang masih lolos AA.
--ink-55 #0a0a0a8cParagraf pelan dari x.ai. Sedikit di bawah AA; HAPAKAT memakai --ink-60 untuk teks penting.
--ink-45 #0a0a0a73Garis kontrol formulir dan cincin langkah berikutnya di linimasa (lolos 3:1), teks nonaktif. Bukan untuk teks biasa.
--ink-30 #0a0a0a4dDekoratif saja: batang grafik "lainnya", sub-label yang maknanya sudah ada di nilai.
--ink-25 #0a0a0a40Dekoratif: titik tengah pemisah.
--ink-20 #0a0a0a33Dekoratif: pemisah di pil pengumuman, garis putus-putus area foto kosong.
--ink-10 #0a0a0a1aGaris rambut kartu, pemisah baris, dan garis antar-bagian.
--ink-08 #0a0a0a14Garis pil pengumuman; lapisan saat ditekan.
--ink-06 #0a0a0a0fGaris rambut halus, isi skeleton, dan lintasan grafik.
--ink-04 #0a0a0a0aLapisan hover dan chip panah di pil pengumuman.
--ink-muted #7d8187Label tab tidak aktif di x.ai. HAPAKAT memakai --ink-60 karena nilai ini di bawah AA.
--border-popover #d5d9e2Garis 1px panel melayang.
Di atas tinta (x.ai)
--on-ink #ffffffTeks di atas isi --ink, misalnya tombol primer.
--on-ink-80 #ffffffccJudul pada tile gelap.
--on-ink-55 #ffffff8cTeks sekunder pada tile gelap; detail chip kartu KKI mini.
--on-ink-20 #ffffff33Garis pemisah di dalam tombol gelap.
Biru Bank Indonesia
--bi-blue #055498Biru dominan bi.go.id, rgb(5, 84, 152), juga isi ikon SVG situsnya. Diambil 31 Oktober 2026.
--bi-blue-bright #106ebeBiru terang bi.go.id, rgb(16, 110, 190). Seri grafik dan sorotan data kecil.
--bi-navy #163a65Biru gelap bi.go.id, rgb(22, 58, 101). Hover tautan dan seri grafik pertama.
--bi-blue-light #9dc1e6Turunan HAPAKAT, bukan dari bi.go.id. Seri grafik ketiga; dekoratif, bukan untuk teks.
--bi-blue-tint #05549814--bi-blue 8%. Latar status terpilih, badge biru, KPI unggulan, dan callout info.
--on-blue #ffffffTeks dan ikon di atas isi --bi-blue.
Status (hue status situs x.ai, digelapkan agar lolos AA)
--success-fg #1d723chsl(142 60% 28%) dari hsl(142 71% 45%). Teks, ikon, dan cakram status sukses.
--success-bg #ecf9f1hsl(142 50% 95%). Latar badge dan alert sukses.
--warning-fg #7a631fhsl(45 60% 30%) dari hsl(45 93% 47%). Teks status menunggu atau diproses.
--warning-bg #fdf8e7hsl(45 85% 95%). Latar badge dan alert peringatan.
--danger-fg #b62020hsl(0 70% 42%) dari hsl(0 84% 60%). Galat, ditolak, perlu revisi.
--danger-bg #fceeeehsl(0 70% 96%). Latar badge dan alert galat.
--info-fg var(--bi-blue)Teks dan ikon informasi.
--info-bg var(--bi-blue-tint)Latar alert dan callout informasi.
Alias semantik
--accent var(--bi-blue)Aksen tunggal HAPAKAT: biru BI menggantikan oranye x.ai.
--accent-tint var(--bi-blue-tint)Latar badge aksen, pengganti tint oranye x.ai.
--link var(--bi-blue)Warna tautan teks.
--link-hover var(--bi-navy)Tautan saat hover.
--focus var(--bi-blue)Cincin fokus 2px di semua elemen interaktif.
--selected var(--bi-blue)Isi atau garis elemen terpilih: chip, baris dokumen, menu aktif.
--selected-tint var(--bi-blue-tint)Latar lembut elemen terpilih.
--on-selected var(--on-blue)Teks di atas --selected.
--border-hairline var(--ink-10)Garis rambut kartu dan pemisah.
--border-control var(--ink-45)Garis input, pencarian, dan kotak centang. Lolos 3:1 untuk batas kontrol.
--disabled-bg var(--ink-06)Isi tombol nonaktif.
--disabled-fg var(--ink-45)Label tombol nonaktif. Pengecualian kontras WCAG untuk kontrol nonaktif.
--state-hover var(--ink-04)Lapisan hover di atas isi terang.
--state-press var(--ink-08)Lapisan saat ditekan di atas isi terang.
--state-hover-dark #ffffff1fLapisan hover 12% putih di atas isi tinta atau biru. Tambahan HAPAKAT.
Grafik
--chart-1 var(--bi-navy)Seri pertama: Konsumsi.
--chart-2 var(--bi-blue-bright)Seri kedua: ATK.
--chart-3 var(--bi-blue-light)Seri ketiga: Percetakan.
--chart-other var(--ink-30)Seri "lainnya" dan batang kabupaten lain.
--chart-bar var(--bi-blue)Batang tunggal, misalnya belanja per kabupaten/kota.
--chart-track var(--ink-06)Lintasan batang dan meter.
Panel demo gelap (x.ai)
--term-bg #151515Latar terminal dan ilustrasi foto. Gelap hanya di dalam panel demo.
--term-chip #111110Gelembung chat gelap.
--term-ink #e1e1e1Teks kode di atas --term-bg.
--term-cream #f2ede5Teks prompt dan label tebal di terminal.
--term-muted #8d867eTeks status terminal.
--term-dim #59534dTeks tersier terminal. Dekoratif.
--term-rule #2a2825Pemisah pipa di status bar terminal.
--term-lineno #6c6c6cNomor baris diff yang tidak berubah.
--term-add #9ece6aNomor baris tambahan di diff.
--term-add-bg #202a16Latar baris tambahan.
--term-del #f7768eNomor baris yang dihapus.
--term-del-bg #32181cLatar baris yang dihapus.
--term-path #91c17aPath berkas dan penanda selesai.
--term-violet #bc97ffGlif agen dan titik berpikir.
--term-blue #93adffCaret prompt.
--term-cyan #29c6beNama pemanggilan alat.
--window-red #ff5f57Titik kontrol jendela.
--window-yellow #febc2eTitik kontrol jendela.
--window-green #28c840Titik kontrol jendela.
Kode terang (x.ai)
--code-ink #24292eTeks biasa di blok kode terang.
--code-keyword #d73a49Kata kunci dan operator.
--code-string #032f62Literal string.
--code-param #e36209Nama argumen. Nilai asli x.ai, di bawah AA.
--code-builtin #005cc5Fungsi bawaan.
Keluarga huruf
--font-sans"Geist", system-ui, sans-serifSatu keluarga sans untuk semua teks.
--font-mono"Geist Mono", ui-monospace, monospaceKode, nomor pesanan, kode rekening, label teknis kecil.
--weight-regular400Judul display dan teks.
--weight-medium500Judul, label, tombol, angka. Judul tidak pernah tebal.
--weight-semibold600Wordmark, label menu aktif, dan teks strong di dokumen. Judul tidak pernah semibold.
Skala tipe (x.ai, format: weight size/line-height family)
--text-display400 60px/60px var(--font-sans)Judul hero, satu per halaman.
--tracking-display-0.6pxTracking -1% untuk display.
--text-display-sm400 40px/44px var(--font-sans)Tambahan HAPAKAT: judul hero di layar di bawah 768px.
--tracking-display-sm-0.4pxTracking -1% untuk display-sm.
--text-stat500 48px/48px var(--font-sans)Angka statistik besar.
--tracking-stat-0.48pxTracking -1% untuk stat.
--text-heading-1500 30px/36px var(--font-sans)Judul bagian; angka kunci seperti sisa limit dan nilai KPI.
--tracking-heading-1-0.3pxTracking -1% untuk heading-1.
--text-heading-2500 24px/32px var(--font-sans)Subjudul bagian, judul layar hasil.
--tracking-heading-2-0.24pxTracking -1% untuk heading-2.
--text-lead400 18px/29px var(--font-sans)Paragraf pembuka di bawah judul.
--text-body-lg400 16px/26px var(--font-sans)Teks dokumen panjang (PRD, design system).
--text-body400 16px/24px var(--font-sans)Teks dasar aplikasi dan kartu.
--text-title-sm500 16px/22px var(--font-sans)Nama produk, judul kartu, nominal di daftar.
--tracking-title-sm-0.16pxTracking -1% untuk title-sm.
--text-label500 14px/20px var(--font-sans)Tombol, tab, chip, label field, nilai di daftar keterangan.
--text-body-sm400 14px/20px var(--font-sans)Teks sekunder, isi tabel, nama UMKM.
--tracking-body-sm-0.15pxTracking body-sm dari x.ai.
--text-nav500 13px/20px var(--font-sans)Tautan navigasi situs, inisial avatar.
--text-link-sm400 13px/21px var(--font-sans)Footer, petunjuk field.
--text-caption400 12px/16px var(--font-sans)Waktu, sumber dokumen, teks bantu di bawah tombol.
--text-badge500 11px/11px var(--font-sans)Badge kecil.
--text-micro500 10px/15px var(--font-sans)Baris legal.
--text-code400 13px/24px var(--font-mono)Blok kode terang.
--text-code-sm400 12px/19px var(--font-mono)Kode kecil, kode rekening di tabel.
--tracking-code-sm-0.12pxTracking code-sm.
--text-term400 11px/18px var(--font-mono)Teks terminal.
--tracking-term-0.11pxTracking term.
--text-wordmark600 18px/20px var(--font-sans)Tambahan HAPAKAT: wordmark di header.
--text-wordmark-lg600 48px/48px var(--font-sans)Tambahan HAPAKAT: wordmark besar di halaman merek.
--tracking-wordmark0.04emWordmark kapital diberi jarak sedikit lebih longgar.
--font-size-code-inline0.875emKode sebaris di dalam paragraf, relatif terhadap teks di sekitarnya.
Spasi (x.ai, kelipatan 4px)
--space-0-52pxTambahan HAPAKAT: jarak rapat label dan nilai.
--space-14pxJarak ikon ke label, tumpukan rapat.
--space-1-56pxSetara space-1.5 x.ai: baris meta, celah kecil.
--space-28pxCelah antar-chip dan antar-tombol rapat.
--space-312pxCelah antar-tombol hero, padding kartu kecil.
--space-416pxPadding kartu, gutter halaman di ponsel.
--space-520pxGutter layar aplikasi 390px, padding kartu besar.
--space-624pxGutter halaman mulai 768px.
--space-832pxJarak pil pengumuman ke judul.
--space-1040pxCelah antar-kolom grid besar.
--space-1248pxTambahan HAPAKAT: jarak antar-bagian dokumen di ponsel.
--space-1664pxJarak antar-bagian dokumen.
--space-2080pxJarak blok hero.
--space-2496pxPadding vertikal bagian beranda.
Radius (x.ai)
--radius-xs3pxBatang grafik, swatch legenda.
--radius-sm8pxThumbnail, skeleton, tile kecil.
--radius-md12pxTile ikon, area foto, baris dokumen, blok kode.
--radius-lg16pxKartu, panel, spesimen.
--radius-tail6pxSatu sudut rapat gelembung chat; sudut kartu KKI mini.
--radius-pill9999pxSemua kontrol interaktif: tombol, chip, input, tab, badge.
--radius-device44pxTambahan HAPAKAT: bingkai ponsel di halaman dokumentasi.
Bayangan dan blur (x.ai, hanya untuk elemen melayang)
--shadow-window0px 0px 1px #0000000f, 0px 18px 16px #0f172a2eJendela kode melayang.
--shadow-popover0px 10px 12px #0000001a, 0px 4px 2px #0000001aPanel melayang seperti banner atau menu.
--blur-nav6pxbackdrop-filter header lengket.
--blur-pill2pxbackdrop-filter pil pengumuman.
Kartu KKI (HAPAKAT)
--kki-deep #0b2a4dTepi gelap kilau kartu KKI, turunan --bi-navy. Dekoratif, tidak untuk teks.
--kki-sheenradial-gradient(120% 140% at 85% 20%, var(--bi-blue-bright) 0%, var(--bi-blue) 45%, var(--kki-deep) 100%)Latar biru berkilau kartu KKI dan kotak limit.
--kki-bandurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 214'><defs><pattern id='m' width='26' height='26' patternUnits='userSpaceOnUse'><g fill='none' stroke='%239dc1e6' stroke-opacity='.5'><path d='M13 1L25 13L13 25L1 13Z'/><path d='M13 6C17 10 17 16 13 20C9 16 9 10 13 6Z'/></g><g fill='%239dc1e6' fill-opacity='.5'><circle cx='13' cy='13' r='1.6'/><circle r='1.2'/><circle cx='26' r='1.2'/><circle cy='26' r='1.2'/><circle cx='26' cy='26' r='1.2'/></g></pattern></defs><path d='M0 0H132C80 52 168 124 108 214H0Z' fill='%23163a65'/><path d='M0 0H132C80 52 168 124 108 214H0Z' fill='url(%23m)'/><path d='M132 0C80 52 168 124 108 214' fill='none' stroke='%239dc1e6' stroke-opacity='.6' stroke-width='1.5'/></svg>")Pita motif abstrak di sisi kartu. Warna di dalam SVG = --bi-navy dan --bi-blue-light. Calon pengganti: motif benang bintik.
--ratio-kki-band170 / 214Rasio gambar pita motif.
--ratio-card1.586Rasio kartu ISO/IEC 7810 ID-1, 85,60 × 53,98 mm.
--shadow-kki0px 8px 24px #0a0a0a29Bayangan kartu KKI dan kotak limit, satu-satunya bayangan di layar aplikasi.
--kki-text-mark600 8.8cqw/1 var(--font-sans)"KKI" di wajah kartu, relatif terhadap lebar kartu.
--kki-text-small500 2.4cqw/1.3 var(--font-sans)Tulisan kecil di wajah kartu: Kartu Kredit Indonesia, nama bank, OPD.
--kki-text-name500 2.9cqw/1.3 var(--font-sans)Nama pemegang kartu.
--kki-text-number400 3.7cqw/1 var(--font-mono)Empat digit terakhir di wajah kartu.
--text-kki-mark600 18px/20px var(--font-sans)"KKI" di kotak limit.
Garis dan fokus
--border-width1pxGaris rambut.
--selected-width2pxCincin dalam elemen terpilih.
--focus-width2pxTebal cincin fokus.
--focus-offset2pxJarak cincin fokus dari elemen.
Ukuran kontrol dan komponen (HAPAKAT)
--touch-min44pxTarget sentuh minimum semua kontrol aplikasi dan tautan navigasi.
--size-cta52pxTombol aksi utama di bar bawah layar tugas dan item navigasi bawah.
--size-btn-lg44pxTombol lg x.ai.
--size-btn-md40pxTombol md x.ai; area sentuh tetap 44px lewat pseudo-elemen.
--size-btn-nav36pxTombol nav x.ai, tab.
--size-btn-sm28pxTombol sm x.ai; area sentuh tetap 44px.
--size-control44pxTinggi input, pencarian, dan select.
--size-badge17pxBadge kecil x.ai.
--size-badge-lg24pxBadge status di tabel dan header.
--size-chip-arrow24pxChip panah bulat di pil pengumuman.
--size-avatar36pxAvatar inisial.
--size-marker24pxPenanda linimasa dan cakram status.
--size-tile-sm36pxTile ikon kecil di baris dokumen.
--size-tile64pxTile ikon kategori produk.
--size-disc64pxCakram ikon header status.
--size-disc-lg80pxCakram ikon layar hasil.
--size-row60pxTinggi minimum baris dokumen SPJ.
--size-kki-thumb64pxLebar gambar kartu KKI mini di layar bayar; tinggi mengikuti --ratio-card.
--size-qty-value80pxLebar minimum nilai di pengatur jumlah.
--size-legend14pxSwatch legenda grafik.
--progress-height6pxTinggi meter limit KKI.
--bar-height12pxTinggi batang di daftar batang.
--share-height20pxTinggi batang proporsi kategori.
--photo-height196pxTinggi area foto serah terima.
--icon-xs14pxIkon di badge dan status verifikasi.
--icon-sm16pxIkon meta (waktu, lokasi) dan di tombol.
--icon-md20pxIkon bawaan.
--icon-lg24pxIkon navigasi dan tombol ikon.
--icon-tile28pxIkon kategori di tile 64px.
--icon-xl32pxIkon di cakram status.
--icon-stroke1.5Tebal garis ikon pada grid 24, setara 1,25px di ukuran 20px.
--icon-stroke-sm1.75Ikon 16px agar garis tetap terbaca.
--icon-stroke-bold2Ikon 14px di badge, status, dan penanda linimasa.
Tata letak
--nav-height64pxTinggi header situs.
--measure70chLebar baca maksimum paragraf dokumen.
--measure-short36chLebar teks pendek di layar hasil dan keadaan kosong.
--width-hero768pxKolom hero dan judul bagian di beranda.
--width-content1117pxLebar konten maksimum situs (x.ai).
--width-toc250pxKolom daftar isi dokumen mulai 1024px.
--grid-min240pxLebar minimum kartu di grid auto-fit situs.
--grid-min-kpi220pxLebar minimum kartu KPI; empat kolom di 1280px.
--grid-min-meta140pxLebar minimum kolom metadata dokumen.
--grid-min-swatch200pxLebar minimum contoh warna di halaman design system.
--grid-min-do260pxLebar minimum kolom Lakukan dan Hindari.
--width-app390pxLebar desain layar aplikasi ponsel.
--height-app844pxTinggi desain layar aplikasi ponsel.
--width-dashboard1280pxLebar desain dashboard pemda.
--frame-bezel8pxTebal bingkai ponsel di dokumentasi.
--table-min680pxLebar minimum tabel transaksi sebelum menggulir sendiri.
--swatch-height72pxTinggi contoh warna di halaman design system.
--z-header10Lapisan header lengket.
--z-skip100Lapisan tautan lewati navigasi.
Gerak
--duration-fast120msHover dan tekan.
--duration-base200msPerubahan state seperti chip terpilih.
--duration-slow1200msPutaran spinner dan denyut skeleton.
--ease-standardcubic-bezier(0.2, 0, 0, 1)Kurva bawaan semua transisi.

Penimpaan di dalam media query:

  • @media (prefers-reduced-motion: reduce): --duration-fast menjadi 0ms.
  • @media (prefers-reduced-motion: reduce): --duration-base menjadi 0ms.

Sumber

  1. Bank Indonesia. Situs resmi Bank Indonesia. https://www.bi.go.id/. Warna biru diambil dari nilai CSS terhitung halaman, diakses 31 Oktober 2026.
  2. W3C. Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/. Kriteria 1.4.3, 1.4.11, 2.4.7, 2.5.5, 2.5.8, dan definisi rasio kontras serta luminans relatif.
  3. Google Fonts. Geist. https://fonts.google.com/specimen/Geist.
  4. Google Fonts. Geist Mono. https://fonts.google.com/specimen/Geist+Mono.
  5. W3C. Accessible Rich Internet Applications (WAI-ARIA) 1.2, role meter. https://www.w3.org/TR/wai-aria-1.2/#meter.
  6. Tim ATERA. Sistem desain x.ai: README, tokens.json versi 1, dan components/bundle.css (artefak internal tim). Sumber semua token dan gaya komponen x.ai di halaman ini.
  7. Tim ATERA. Mockup HAPAKAT lima layar dan poster A3 (kanvas), serta naskah video pitch HAPAKAT (2026). Sumber layar, alur, data contoh fiktif, dan target uji coba.
  8. Cahyo Muliawan dan Muhammad Fauzan Ahsan Hafizi. Hapakat Basara di Kabupaten Kapuas. AL-IBNOR: Jurnal Kependidikan, STAI Kuala Kapuas, Vol. 1 No. 2, 2024. https://ejurnal.staikualakapuas.ac.id/index.php/alibnor/article/download/88/19/256. Sumber arti "hapakat".