Design System — PINTU UPTD Pendapatan Daerah Wilayah Kota Kupang

01 · Prinsip

Empat aturan. Dipakai di setiap layar.

01
Satu seksi, satu ide, satu visual.Jika butuh dua visual, pecah menjadi dua seksi.
Fokus
02
Headline besar dan lengkap sebagai kalimat. Sisanya kecil dan tenang.Headline selalu diakhiri titik. Angka metrik adalah elemen terkeras setelah headline.
Hierarki
03
Biru hanya untuk tautan, status aktif, dan garis bawah.Tidak untuk latar, ilustrasi, atau dekorasi.
Aksen
04
Informasi resmi selalu bertanggal dan bersumber.Setiap halaman konten menampilkan tanggal pemutakhiran dan pemeriksa.
Percaya

02 · Logo & lambang

Lambang daerah di depan. Nama portal di sampingnya.

Logo utama adalah Lambang Provinsi Nusa Tenggara Timur. Nama portal PINTU ditulis sebagai teks di sebelahnya, tidak dilebur menjadi satu gambar.

Logo utama

Lambang Provinsi NTT · PNG transparan 1020×1081
assets/img/lambang-ntt.png

Lockup navbar (latar gelap)

PINTUSamsat Kota Kupang

Lockup footer (latar terang)

PINTUPortal Informasi dan Pelayanan
UPTD Pendapatan Daerah Wilayah Kota Kupang

Ukuran di layar

Hero · 92–116

Footer · 44

Navbar · 31

Minimum · 24

Atur tinggi saja; lebar mengikuti proporsi asli.

Lakukan

Pakai berkas asli lambang-ntt*.webp/png dari folder assets/img.
Jaga proporsi: atur tinggi, biarkan lebar otomatis.
Sisakan ruang kosong minimal ¼ lebar lambang di sekelilingnya.
Letakkan di atas kertas, putih, atau tinta. Bingkai putih lambang menjaga keterbacaan di latar gelap.
Tinggi minimal 24px di layar.

Jangan

Mengubah warna atau membuatnya monokrom tanpa ketentuan resmi.
Memotong, memutar, memiringkan, atau meregangkan.
Menambah bayangan, garis tepi, efek, atau animasi.
Menaruhnya di atas foto ramai atau di dalam bentuk lain.
Melebur lambang dengan logo lain menjadi satu gambar.

Logo cadangan · tidak dipakai saat ini

PINTU. Pintu yang terbuka.

Disimpan untuk penggunaan mendatang, misalnya aplikasi atau materi sosialisasi. Tersedia sebagai simbol #logo-pintu di partials/icons.html dan berkas assets/img/logo-pintu.svg. Cara memasangnya kembali di navbar tertulis sebagai komentar di partials/header.html.

03 · Warna

Kertas hangat. Tinta biru-hitam.

Chrome halaman selalu terang. Blok gelap hanya muncul di dalam mockup produk dan papan informasi.

Kertas & tinta

Aa

Paper--paper · #F7F6F2Latar halaman

Aa

Paper 2--paper-2 · #EFEDE6Kartu media, kanvas

Aa

Surface--surface · #FFFFFFKartu putih, formulir

Aa

Ink--ink · #0F131917,2:1 di atas paper

Aa

Text 2--text-2 · #646A72Teks pendukung · 5,05:1

Aa

Gray--gray · #82878ENada kedua headline ≥ 24px · 3,35:1

Aa

Line--line · #E7E4DCGaris rambut

Aksen & status

Aa

Accent--accent · #2B63F6Tautan & aktif · 4,6:1

Aa

Accent soft--accent-soft · #E8EEFECincin fokus input

Aa

OK--ok · #1A7349Selalu dengan ikon

Aa

Warn--warn · #8C5900Jatuh tempo, cek fisik

Aa

Danger--danger · #B93A28Galat, tertunda

Mockup gelap

Aa

Night--night · #0A0A0CPanel mockup

Aa

Night 2--night-2 · #17181BTile

Aa

Night muted--night-muted · #9BA0A8Label · 6,75:1

Aa

Night accent--night-accent · #7FA4FFAksen di gelap · 7,3:1

04 · Tipografi

Display untuk suara. Text untuk isi.

SF Pro Display untuk teks 20px ke atas, SF Pro Text untuk teks di bawahnya. Keduanya font sistem Apple dan tidak di-host di situs. Perangkat non-Apple otomatis memakai font sistemnya: Segoe UI di Windows, Roboto di Android.

HeroSF Pro Display 600 · 36–80px (4.6vw + 22px) · 1.05 · −0.022em

Semua informasi. Satu pintu.

Display / H1SF Pro Display 600 · clamp(36–64px) · 1.05

Kabar dari loket.

H2 seksiSF Pro Display 600 · clamp(30–48px) · 1.08

Biaya jelas. Tanpa kejutan.

H3SF Pro Display 600 · clamp(24–28px) · 1.15

Perpanjangan STNK 5 tahun.

TitleSF Pro Text 600 · 17px

Persyaratan jelas.

BodySF Pro Text 400 · 16/1.6 · maks. 38ch

Daftar berkas setiap layanan, lengkap dengan jumlah lembar fotokopi yang perlu dibawa.

EyebrowSF Pro Text 500 · 11px · uppercase · 0.12em

Layanan utama

MetrikSF Pro Display 600 · clamp(28–40px) · angka proporsional

12.480

Angka tabulartnum · SF Pro Text untuk nomor tab dan jam (< 20px); hitung mundur besar memakai SF Pro Display

01 · 08.00–15.00 · 04:12:36

Aturan dua nada

Kalimat pertama berwarna tinta. Lanjutannya abu-abu.

Berlaku untuk setiap headline utama, termasuk penutup. Gunakan <span class="tone">.

05 · Spasi, sudut, garis

Banyak ruang. Sedikit bayangan.

Basis 4px. Jarak antar-seksi 96–160px, di dalam seksi 64px. Pisahkan dengan garis rambut, bukan bayangan.

Skala spasi

s-2 · 8

s-4 · 16

s-6 · 24

s-8 · 32

s-12 · 48

s-16 · 64

s-24 · 96

section · 160

Radius

pill
999

xl · 32
media

lg · 24
kartu

md · 16
tile

sm · 12
input

06 · Komponen

Sedikit bagian. Banyak kombinasi.

Semua komponen di bawah adalah kode produksi dari components.css, bukan gambar.

Navbar pil mengambang

Tombol

Tautan, lencana, chip, tag

Tautan teks Tautan panah

BNBank NTTQRQRIS

TerkiniJatuh tempoTertundaBaruLoket 1

Tab bernomor

Aktif: tinta + garis biru 36px.

Daftar kategori

Formulir

Normal

Galat

NIP harus 18 digit angka.

Kotak centang

Tile metrik (mockup gelap)

Total transaksi

12.480

+4,2%vs periode lalu

Akordeon

Pertanyaan 16px tebal, tanda + di kanan.

Jawaban abu-abu, maksimal 64 karakter per baris.

Pil notch

Loket kantorBuka · s.d. 15.00

Samsat Keliling2 titik

Baris keterangan media

Teks singkat di kiri.

Meta lebih kecil di kanan

Mikrokopi kepercayaan dengan ikon gembok.

Penanda data contoh (wajib dihapus saat terbit).

07 · Pola halaman

Ritme bergantian. Tengah, lalu terbelah.

Pernyataan terpusat (hero, integritas, FAQ, kanal) bergantian dengan seksi editorial terbelah 40/60.

Pola referensi	Adaptasi PINTU	Halaman
Navbar pil mengambang	Lambang + “PINTU / Samsat Kota Kupang”, 5 menu, ikon Login Pegawai, CTA “Cek Persyaratan”; lebar mengikuti isi	Semua
Hero maskot + 2 baris headline	Lambang Provinsi NTT di tengah, headline dua nada, mikrokopi “tanpa perantara”	Beranda
Media produk besar + caption	Papan layanan hari ini: antrean, Samsat Keliling, status loket langsung	Beranda
Tab bernomor + kartu tangkapan layar	Layanan utama dengan checklist berkas interaktif	Beranda
Dasbor gelap + daftar kategori	Transparansi kinerja layanan dengan rentang waktu	Beranda
Peta integrasi + pil notch	Kanal layanan: kantor, keliling, digital, informasi, pengaduan	Beranda
Kanvas bento	Simulasi PKB: pokok, opsen, denda, pemutihan, SWDKLLJ	Beranda, Layanan, Pegawai
Pernyataan privasi	Pernyataan integritas anti-pungli	Beranda
Kartu harga + hitung mundur	Biaya cek fisik Rp0 + hitung mundur jam loket	Beranda, Jadwal
Penutup jenaka	“Map apa saja boleh.” dengan kontrol “Cek lagi”	Beranda

08 · Gerak

Tenang. Hanya bila berguna.

Tidak ada paralaks atau animasi dekoratif. Semua gerak dimatikan bila pengguna memilih prefers-reduced-motion.

Token	Nilai	Dipakai untuk
--dur-1	160ms	Hover warna, tombol
--dur-2	240ms	Dropdown, akordeon, sakelar
--dur-3	600ms	Fade-up saat scroll, garis bawah tab
--ease	cubic-bezier(.2,.7,.2,1)	Semua transisi

09 · Aksesibilitas & larangan

Bisa dibaca semua orang. Di layar apa pun.

Target WCAG 2.2 AA. Teks pendukung memakai --text-2, bukan abu-abu referensi, agar lolos kontras 4,5:1.

Lakukan

Gunakan bahasa Indonesia baku yang singkat; satu kalimat, satu gagasan.
Sertakan ikon + label pada setiap status.
Pastikan semua kontrol bisa dipakai dengan papan ketik dan terlihat fokusnya.
Cantumkan tanggal pemutakhiran dan sumber informasi.
Uji di lebar 360px tanpa gulir horizontal.

Jangan

Memakai biru untuk latar atau dekorasi.
Menaruh blok gelap besar di chrome halaman di luar mockup.
Memakai abu-abu --gray untuk teks di bawah 24px.
Mengubah atau menempelkan efek pada lambang daerah.
Menerbitkan data contoh tanpa verifikasi petugas.

Tenang di permukaan. Tegas di aturan.

Empat aturan. Dipakai di setiap layar.

Lambang daerah di depan. Nama portal di sampingnya.

Lakukan

Jangan

PINTU. Pintu yang terbuka.

Kertas hangat. Tinta biru-hitam.

Display untuk suara. Text untuk isi.

Banyak ruang. Sedikit bayangan.

Sedikit bagian. Banyak kombinasi.

Ritme bergantian. Tengah, lalu terbelah.

Tenang. Hanya bila berguna.

Bisa dibaca semua orang. Di layar apa pun.

Lakukan

Jangan