System Requirements Document for indigo-perbankan

1. Introduction

indigo-perbankan adalah aplikasi perbankan mobile untuk nasabah perorangan di Indonesia, dibangun dengan gaya dan cakupan fitur aplikasi dompet digital seperti DANA. Aplikasi ini memberi nasabah satu tempat untuk melihat saldo mereka, mengirim dana ke penerima, membayar tujuan pembayaran, dan menelusuri riwayat transaksi — semuanya dari akun mereka sendiri.

Produk ini menyasar nasabah perorangan yang memakai ponsel untuk mengelola uangnya sendiri: memeriksa saldo saat buru-buru, mengirim uang ke penerima, membayar tagihan atau tujuan pembayaran, dan mengecek kembali apa yang sudah terjadi lewat riwayat transaksi. Keberhasilan produk diukur dari kemampuan nasabah menyelesaikan transaksi dan pengecekan saldo secara mandiri dari akunnya sendiri.

Aplikasi ini bukan sekadar tampilan data: saldo, transfer, pembayaran, dan riwayat transaksi adalah state persisten yang harus dijaga backend, sehingga setiap nasabah melihat angka dan catatan yang benar untuk akunnya sendiri.

2. System Overview

indigo-perbankan adalah aplikasi web mobile-first dengan UI kustom milik aplikasi sendiri dan backend yang menjaga state keuangan persisten. Nasabah dapat memulai penggunaan secara mandiri (Sign Up), kembali masuk untuk memverifikasi identitas (Login), lalu mengakses area akun yang dilindungi: Dashboard (saldo), Transfer, Payments, dan Transactions.

Aktor:

• Nasabah — satu-satunya persona aktif manusia: pengguna perorangan yang mengelola uangnya sendiri.
• Backend aplikasi — aktor sistem non-persona yang menjaga saldo, memproses transfer dan pembayaran, serta menyimpan riwayat transaksi.

Perilaku yang diterima (current):

• Aplikasi perbankan mobile banking untuk nasabah perorangan.
• Gaya produk mengikuti contoh aplikasi dompet digital seperti DANA: saldo, transfer, pembayaran, dan riwayat transaksi.
• Self-service enrollment melalui Sign Up untuk nasabah baru.
• Returning verification melalui Login untuk nasabah yang kembali.
• Backend execution untuk menjaga saldo, transfer, pembayaran, dan riwayat transaksi yang persisten.

Pengecualian sempit (narrow exclusions):

• Tidak ada fitur di luar saldo, transfer, pembayaran, dan riwayat transaksi yang diminta secara eksplisit.
• Tidak ada peran admin, teller, atau operator bank; hanya nasabah perorangan.
• Tidak ada kontrol izin atau visibilitas berbasis peran: setiap nasabah hanya melihat state akunnya sendiri, dan tidak ada state bersama yang memerlukan pembedaan peran.

2a. Product Interpretation and Delivery Boundary

Kepemilikan delivery dan akses. Aplikasi ini memiliki identitasnya sendiri (app_owned_identity): nasabah membuat identitas aplikasi lewat Sign Up dan memverifikasi kembali lewat Login. Landing adalah halaman awal anonim yang menjelaskan aplikasi sebelum akses akun; Login dan Sign Up juga dapat dijangkau tanpa login karena keduanya adalah interaksi yang menetapkan akses, bukan yang memerlukannya. Dashboard, Transfer, Payments, dan Transactions adalah destinasi terlindungi yang memerlukan login, karena semuanya bekerja atas state akun persisten milik nasabah tertentu.

Batas current vs future. Semua perilaku yang dijelaskan di dokumen ini adalah current: saldo, transfer, pembayaran, riwayat transaksi, Sign Up, Login, dan backend persisten. Tidak ada requirement future yang diterima; tidak ada halaman atau acceptance untuk horizon mendatang.

Batas sistem. Backend aplikasi adalah pemilik otoritatif saldo, transfer, pembayaran, dan riwayat transaksi. UI kustom aplikasi adalah pemilik interaksi manusia untuk setiap capability ini. Tidak ada provider eksternal atau destinasi pihak ketiga yang diterima sebagai pemilik perilaku produk.

2b. Source Content Inventory

Tidak ada reference directive dengan uses yang memuat content_source. Reference directive untuk DANA dideklarasikan sebagai feature_reference dan domain_context saja, sehingga tidak memasok fakta, entitas, atau koleksi yang harus diinventarisasi. Bagian ini sengaja dikosongkan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: Halaman awal anonim yang menjelaskan aplikasi perbankan bergaya dompet digital: sasaran nasabah perorangan, saldo, transfer, pembayaran, dan riwayat transaksi. Tidak ada state akun yang ditampilkan.
• Aksi utama: BUKA AKUN — mengarahkan nasabah baru ke Sign Up.
• Aksi pendukung: Tautan ke Login untuk nasabah yang sudah punya identitas aplikasi.
• Entitas domain: Deskripsi produk (saldo, transfer, pembayaran, riwayat transaksi); tidak ada entitas akun.
• Tanggung jawab komponen:
  • Hero asimetris: 7 kolom kiri berisi headline condensed besar; 5 kolom kanan menampilkan gauge saldo melingkar yang terpotong tepi viewport di atas citra titanium makro.
  • Tick-ruler horizontal full-bleed pada baseline hero.
  • Satu baris body copy dan satu CTA emas persegi.
• State:
  • Loading: tidak ada data yang dimuat; halaman statis.
  • Empty: tidak berlaku.
  • Success: nasabah memahami cakupan aplikasi dan memilih BUKA AKUN atau Login.
  • Error: tidak berlaku (tidak ada panggilan data).
  • Recovery: tidak berlaku.

Login

• Informasi/state: Formulir verifikasi kembali untuk nasabah yang sudah memiliki identitas aplikasi. Halaman dapat dijangkau tanpa login.
• Aksi utama: MASUK — memverifikasi identitas dan membuka area akun.
• Aksi pendukung: Tautan ke Sign Up bagi yang belum punya identitas.
• Entitas domain: Identitas aplikasi nasabah (kredensial masuk).
• Tanggung jawab komponen:
  • Field kredensial dengan label mikro uppercase di atas nilainya.
  • Tombol primer emas persegi; tombol sekunder outline-only.
  • Area pesan error inline.
• State:
  • Loading: tombol menampilkan state menunggu selama verifikasi.
  • Empty: field kosong dengan label dan placeholder.
  • Success: nasabah diarahkan ke Dashboard.
  • Error: kredensial tidak cocok — pesan inline, field tetap terisi, nasabah dapat mencoba lagi.
  • Recovery: nasabah memperbaiki input dan mengirim ulang tanpa kehilangan konteks.

Sign Up

• Informasi/state: Formulir self-service enrollment untuk nasabah baru yang membuat identitas aplikasi. Halaman dapat dijangkau tanpa login.
• Aksi utama: DAFTAR — membuat identitas aplikasi dan akun nasabah.
• Aksi pendukung: Tautan ke Login bagi yang sudah punya identitas.
• Entitas domain: Identitas aplikasi baru; akun nasabah baru dengan saldo awal.
• Tanggung jawab komponen:
  • Field pendaftaran dengan label mikro uppercase di atas nilainya.
  • Tombol primer emas persegi.
  • Area pesan error inline.
• State:
  • Loading: tombol menampilkan state menunggu selama pembuatan identitas.
  • Empty: field kosong dengan label dan placeholder.
  • Success: identitas dan akun terbentuk; nasabah diarahkan ke Dashboard.
  • Error: input tidak valid atau identitas sudah ada — pesan inline, nasabah dapat memperbaiki dan mengirim ulang.
  • Recovery: nasabah memperbaiki input tanpa kehilangan data yang sudah diisi.

Dashboard

• Informasi/state: Ringkasan akun nasabah: saldo tersedia sebagai angka terbesar di layar, nomor akun sebagai label mikro uppercase, dan log riwayat transaksi terbaru. Memerlukan login.
• Aksi utama: Melihat saldo; membuka rail aksi cepat.
• Aksi pendukung: Rail 4-aksi (Transfer / Bayar / Top Up / Tarik) sebagai tile persegi bermesin; setiap baris riwayat dapat dibuka untuk detail; pull-to-refresh memutar bezel ring satu rotasi penuh.
• Entitas domain: Saldo akun; nomor akun; transaksi (tanggal, deskripsi, jumlah).
• Tanggung jawab komponen:
  • Bezel gelap full-width berisi gauge saldo melingkar (arc emas, tick tiap 15°, numeral tabular di tengah) dengan nomor akun di bawahnya.
  • Rail aksi cepat 4-across: tile persegi berbingkai 1px, ikon garis 1.5px di atas label uppercase 11px.
  • Log RIWAYAT bergaris: setiap baris adalah satu baris penuh yang dipisahkan hairline — kolom tanggal, kolom deskripsi, kolom jumlah rata kanan dalam numeral tabular, teal untuk uang masuk dan merah untuk uang keluar.
  • Tick-ruler horizontal sebagai pembatas antar bagian.
• State:
  • Loading: gauge dan numeral menghitung naik dari 0 selama 900ms dengan ease-out fisik; needle menyapu dari 0 ke nilai; baris riwayat muncul dengan stagger 40ms.
  • Empty: belum ada transaksi — log menampilkan baris kosong dengan label mikro, gauge tetap menampilkan saldo.
  • Success: saldo dan riwayat terbaru tampil akurat untuk akun nasabah.
  • Error: saldo gagal dimuat — pesan inline dan aksi coba lagi; angka tidak menampilkan nilai palsu.
  • Recovery: pull-to-refresh memuat ulang saldo dan riwayat.

Transfer

• Informasi/state: Ruang kerja terfokus untuk memilih penerima dan menyelesaikan transfer dana dari akun nasabah. Memerlukan login.
• Aksi utama: KONFIRMASI — bar emas full-width yang dipin ke safe area bawah untuk menyelesaikan transfer.
• Aksi pendukung: Memilih penerima; memasukkan jumlah; meninjau blok konfirmasi.
• Entitas domain: Penerima; jumlah transfer; saldo akun; transaksi keluar.
• Tanggung jawab komponen:
  • Field penerima besar pada tipe condensed 32px.
  • Field jumlah dengan animasi digit wheel berdetent mekanis.
  • Blok konfirmasi bergaya struk tercetak: panel #181C21 terangkat dengan tepi bawah bertakik, angka tabular, sebelum bar konfirmasi emas.
  • Bar KONFIRMASI emas full-width dipin ke bawah.
• State:
  • Loading: tombol konfirmasi menampilkan state menunggu selama transfer diproses.
  • Empty: field penerima dan jumlah kosong dengan label mikro uppercase.
  • Success: transfer selesai — saldo berkurang, transaksi keluar tercatat, nasabah diarahkan ke Dashboard atau Transactions dengan hasil terlihat.
  • Error: saldo tidak cukup atau penerima tidak valid — pesan inline pada blok konfirmasi, transfer tidak dijalankan, nasabah dapat memperbaiki input.
  • Recovery: nasabah memperbaiki penerima atau jumlah dan mengonfirmasi ulang tanpa kehilangan input lain.

Payments

• Informasi/state: Ruang kerja terfokus untuk memasukkan tujuan dan menyelesaikan pembayaran. Memerlukan login.
• Aksi utama: KONFIRMASI — bar emas full-width yang dipin ke safe area bawah untuk menyelesaikan pembayaran.
• Aksi pendukung: Memasukkan tujuan pembayaran; memasukkan jumlah; meninjau blok konfirmasi.
• Entitas domain: Tujuan pembayaran; jumlah pembayaran; saldo akun; transaksi keluar.
• Tanggung jawab komponen:
  • Field tujuan besar pada tipe condensed 32px.
  • Field jumlah dengan animasi digit wheel berdetent mekanis.
  • Blok konfirmasi bergaya struk tercetak: panel #181C21 terangkat dengan tepi bawah bertakik, angka tabular, sebelum bar konfirmasi emas.
  • Bar KONFIRMASI emas full-width dipin ke bawah.
• State:
  • Loading: tombol konfirmasi menampilkan state menunggu selama pembayaran diproses.
  • Empty: field tujuan dan jumlah kosong dengan label mikro uppercase.
  • Success: pembayaran selesai — saldo berkurang, transaksi keluar tercatat, nasabah diarahkan ke Dashboard atau Transactions dengan hasil terlihat.
  • Error: saldo tidak cukup atau tujuan tidak valid — pesan inline pada blok konfirmasi, pembayaran tidak dijalankan, nasabah dapat memperbaiki input.
  • Recovery: nasabah memperbaiki tujuan atau jumlah dan mengonfirmasi ulang tanpa kehilangan input lain.

Transactions

• Informasi/state: Halaman yang dapat dikunjungi kembali untuk menelusuri riwayat transaksi akun nasabah. Memerlukan login.
• Aksi utama: Menelusuri log transaksi.
• Aksi pendukung: Membuka baris untuk detail; pull-to-refresh memuat ulang log.
• Entitas domain: Transaksi (tanggal, deskripsi, jumlah, arah uang masuk/keluar).
• Tanggung jawab komponen:
  • Log bergaris: baris penuh yang dipisahkan hairline, kolom tanggal, deskripsi, dan jumlah rata kanan dalam numeral tabular.
  • Warna teal untuk uang masuk dan merah untuk uang keluar.
  • Tick-ruler horizontal sebagai pembatas bagian.
• State:
  • Loading: baris muncul dengan stagger 40ms, masing-masing bergeser 8px ke atas tanpa bounce.
  • Empty: belum ada transaksi — log menampilkan baris kosong dengan label mikro.
  • Success: seluruh riwayat transaksi akun tampil akurat dan dapat ditelusuri.
  • Error: riwayat gagal dimuat — pesan inline dan aksi coba lagi.
  • Recovery: pull-to-refresh memuat ulang log.

3. Functional Requirements

FR-01 — Membuat identitas aplikasi secara mandiri As a Nasabah, I should dapat mendaftar sendiri lewat Sign Up untuk membuat identitas aplikasi dan akun saya, so that saya bisa mulai mengelola uang saya sendiri tanpa bantuan pihak lain.

• Provenance: required_inference (self-service enrollment)
• Aktor: Nasabah
• Trigger/input: Nasabah membuka Sign Up dan mengisi field pendaftaran.
• Hasil yang dapat diamati: Identitas aplikasi dan akun nasabah baru terbentuk; nasabah diarahkan ke Dashboard.
• Access state: Halaman dapat dijangkau tanpa login.
• Failure/recovery: Input tidak valid atau identitas sudah ada — pesan inline, nasabah memperbaiki input tanpa kehilangan data yang sudah diisi.
• Continuation: Nasabah melanjutkan ke Dashboard dengan akun barunya.

FR-02 — Verifikasi kembali untuk mengakses akun As a Nasabah, I should dapat masuk lewat Login untuk memverifikasi identitas saya, so that saya bisa mengakses saldo dan aktivitas akun persisten saya.

• Provenance: required_inference (returning verification)
• Aktor: Nasabah
• Trigger/input: Nasabah membuka Login dan memasukkan kredensial.
• Hasil yang dapat diamati: Identitas terverifikasi; nasabah diarahkan ke Dashboard.
• Access state: Halaman dapat dijangkau tanpa login.
• Failure/recovery: Kredensial tidak cocok — pesan inline, field tetap terisi, nasabah dapat mencoba lagi.
• Continuation: Nasabah melanjutkan ke Dashboard.

FR-03 — Melihat saldo akun As a Nasabah, I should dapat melihat saldo tersedia saya sebagai angka terbesar di Dashboard, so that saya tahu berapa uang yang saya miliki saat itu.

• Provenance: explicit (saldo)
• Aktor: Nasabah
• Trigger/input: Nasabah membuka Dashboard setelah login.
• Hasil yang dapat diamati: Gauge saldo melingkar menampilkan arc emas dan numeral tabular di tengah; angka menghitung naik dari 0 selama 900ms dengan ease-out fisik dan needle menyapu dari 0 ke nilai.
• Access state: Memerlukan login.
• Failure/recovery: Saldo gagal dimuat — pesan inline dan aksi coba lagi; angka tidak menampilkan nilai palsu.
• Continuation: Nasabah dapat melanjutkan ke transfer, pembayaran, atau riwayat.

FR-04 — Melakukan transfer dana As a Nasabah, I should dapat memilih penerima dan menyelesaikan transfer dana dari akun saya, so that uang saya sampai ke penerima yang saya maksud.

• Provenance: explicit (transfer)
• Aktor: Nasabah
• Trigger/input: Nasabah membuka Transfer, memilih penerima, dan memasukkan jumlah.
• Hasil yang dapat diamati: Blok konfirmasi bergaya struk tercetak menampilkan penerima dan jumlah dalam angka tabular; setelah KONFIRMASI, saldo berkurang dan transaksi keluar tercatat.
• Access state: Memerlukan login.
• Failure/recovery: Saldo tidak cukup atau penerima tidak valid — pesan inline pada blok konfirmasi, transfer tidak dijalankan, nasabah dapat memperbaiki input.
• Continuation: Nasabah diarahkan ke Dashboard atau Transactions dengan hasil transfer terlihat.

FR-05 — Melakukan pembayaran As a Nasabah, I should dapat memasukkan tujuan dan menyelesaikan pembayaran dari akun saya, so that kewajiban pembayaran saya terpenuhi.

• Provenance: explicit (pembayaran)
• Aktor: Nasabah
• Trigger/input: Nasabah membuka Payments, memasukkan tujuan pembayaran, dan memasukkan jumlah.
• Hasil yang dapat diamati: Blok konfirmasi bergaya struk tercetak menampilkan tujuan dan jumlah dalam angka tabular; setelah KONFIRMASI, saldo berkurang dan transaksi keluar tercatat.
• Access state: Memerlukan login.
• Failure/recovery: Saldo tidak cukup atau tujuan tidak valid — pesan inline pada blok konfirmasi, pembayaran tidak dijalankan, nasabah dapat memperbaiki input.
• Continuation: Nasabah diarahkan ke Dashboard atau Transactions dengan hasil pembayaran terlihat.

FR-06 — Menelusuri riwayat transaksi As a Nasabah, I should dapat menelusuri riwayat transaksi akun saya sebagai log bergaris, so that saya bisa memeriksa apa yang sudah terjadi pada uang saya.

• Provenance: explicit (riwayat transaksi)
• Aktor: Nasabah
• Trigger/input: Nasabah membuka Transactions atau melihat log RIWAYAT di Dashboard.
• Hasil yang dapat diamati: Baris penuh yang dipisahkan hairline dengan kolom tanggal, deskripsi, dan jumlah rata kanan dalam numeral tabular; teal untuk uang masuk dan merah untuk uang keluar; baris muncul dengan stagger 40ms.
• Access state: Memerlukan login.
• Failure/recovery: Riwayat gagal dimuat — pesan inline dan aksi coba lagi.
• Continuation: Nasabah dapat membuka baris untuk detail atau kembali ke Dashboard.

FR-07 — Menjaga state keuangan persisten As a Nasabah, I should melihat saldo, transfer, pembayaran, dan riwayat transaksi yang konsisten untuk akun saya setiap kali saya kembali, so that saya bisa mempercayai angka yang ditampilkan aplikasi.

• Provenance: required_inference (backend execution untuk state persisten)
• Aktor: Nasabah (penerima manfaat); Backend aplikasi (pelaksana)
• Trigger/input: Setiap kali nasabah membuka Dashboard, Transfer, Payments, atau Transactions.
• Hasil yang dapat diamati: Saldo dan riwayat yang ditampilkan sesuai dengan state akun yang tersimpan; transfer dan pembayaran yang selesai tercermin pada saldo dan log.
• Access state: Memerlukan login untuk membaca atau mengubah state akun.
• Failure/recovery: Kegagalan pemuatan atau pemrosesan menghasilkan pesan inline dan aksi coba lagi; state tidak berubah sebagian tanpa terlihat.
• Continuation: Nasabah dapat mengulang aksi atau melanjutkan ke aktivitas lain.

4. User Personas

Nasabah

Konteks produk. Nasabah adalah pengguna perorangan di Indonesia yang memakai aplikasi perbankan bergaya DANA untuk mengelola uangnya sendiri. Ia memakai ponsel, sering dalam keadaan buru-buru — di atas motor di warung, di tengah antrean, atau pukul 11 malam. Ia membutuhkan aplikasi yang terasa seperti instrumen presisi: serius, tepat, dan layak dipercaya untuk uang.

Tujuan utama. Menyelesaikan transaksi dan pengecekan saldo secara mandiri dari akunnya sendiri.

Tanggung jawab yang diterima.

• Membuat identitas aplikasi sendiri lewat Sign Up (FR-01).
• Memverifikasi kembali lewat Login untuk mengakses akun (FR-02).
• Melihat saldo tersedia sebagai angka terbesar di Dashboard (FR-03).
• Memilih penerima dan menyelesaikan transfer dana (FR-04).
• Memasukkan tujuan dan menyelesaikan pembayaran (FR-05).
• Menelusuri riwayat transaksi akunnya (FR-06).

Input dan keputusan. Nasabah memasukkan kredensial saat mendaftar dan masuk; memilih penerima dan jumlah saat transfer; memasukkan tujuan dan jumlah saat pembayaran; memutuskan kapan mengonfirmasi transaksi setelah meninjau blok konfirmasi bergaya struk.

Interaksi dengan peserta lain. Nasabah adalah satu-satunya persona aktif manusia. Ia berinteraksi dengan backend aplikasi, yang menjaga saldo, memproses transfer dan pembayaran, serta menyimpan riwayat transaksi. Penerima transfer dan tujuan pembayaran adalah pihak yang menerima manfaat dari transaksi, tetapi bukan pengguna aplikasi ini dan tidak memiliki interaksi di dalamnya.

Keberhasilan yang dapat diamati. Saldo akun tampil akurat sebagai angka terbesar di layar; transfer dan pembayaran selesai dengan saldo berkurang dan transaksi tercatat; riwayat transaksi dapat ditelusuri sebagai log bergaris dengan uang masuk berwarna teal dan uang keluar berwarna merah.

Yang membedakan peran ini. Nasabah adalah pemilik tunggal uang dan akun yang dikelola; setiap angka di aplikasi adalah miliknya sendiri, dan tidak ada state bersama atau peran lain yang perlu ia koordinasikan. Seluruh pekerjaannya bersifat mandiri dan berpusat pada pembacaan instrumen (saldo) serta pencatatan transaksi.

5. Core User Flows

Flow 1 — Nasabah baru membuat identitas dan mulai memakai aplikasi

1. Konteks awal: Nasabah belum punya identitas aplikasi dan membuka Landing tanpa login.
2. Aksi: Di Landing, ia membaca penjelasan aplikasi (saldo, transfer, pembayaran, riwayat transaksi) dan menekan BUKA AKUN.
3. Owner: Landing mengarahkannya ke Sign Up.
4. Aksi: Di Sign Up, ia mengisi field pendaftaran dan menekan DAFTAR.
5. Hasil yang dapat diamati: Identitas aplikasi dan akun nasabah baru terbentuk; ia diarahkan ke Dashboard.
6. Kegagalan/recovery: Jika input tidak valid atau identitas sudah ada, pesan inline muncul dan ia memperbaiki input tanpa kehilangan data yang sudah diisi.
7. Langkah berikutnya: Ia melanjutkan ke Flow 2 untuk melihat saldo akun barunya.

Flow 2 — Nasabah kembali masuk dan melihat saldo

1. Konteks awal: Nasabah sudah punya identitas aplikasi dan membuka Login tanpa login.
2. Aksi: Ia memasukkan kredensial dan menekan MASUK.
3. Hasil yang dapat diamati: Identitas terverifikasi; ia diarahkan ke Dashboard.
4. Kegagalan/recovery: Jika kredensial tidak cocok, pesan inline muncul, field tetap terisi, dan ia dapat mencoba lagi.
5. Aksi: Di Dashboard, ia melihat gauge saldo melingkar dengan arc emas dan numeral tabular di tengah; angka menghitung naik dari 0 selama 900ms dengan ease-out fisik dan needle menyapu dari 0 ke nilai.
6. Hasil yang dapat diamati: Saldo tersedia tampil sebagai angka terbesar di layar, dengan nomor akun sebagai label mikro uppercase di bawahnya.
7. Kegagalan/recovery: Jika saldo gagal dimuat, pesan inline dan aksi coba lagi muncul; angka tidak menampilkan nilai palsu. Pull-to-refresh memuat ulang saldo.
8. Langkah berikutnya: Ia dapat melanjutkan ke Flow 3, Flow 4, atau Flow 5.

Flow 3 — Nasabah melakukan transfer dana

1. Konteks awal: Nasabah sudah login dan berada di Dashboard.
2. Aksi: Ia menekan tile Transfer pada rail aksi cepat.
3. Owner: Transfer membuka ruang kerja terfokus.
4. Aksi: Ia memilih penerima pada field penerima besar (tipe condensed 32px) dan memasukkan jumlah; digit wheel beranimasi dengan detent mekanis.
5. Hasil yang dapat diamati: Blok konfirmasi bergaya struk tercetak muncul — panel #181C21 terangkat dengan tepi bawah bertakik, menampilkan penerima dan jumlah dalam angka tabular.
6. Aksi: Ia meninjau blok konfirmasi dan menekan bar KONFIRMASI emas full-width yang dipin ke safe area bawah.
7. Hasil yang dapat diamati: Transfer diproses; saldo berkurang dan transaksi keluar tercatat.
8. Kegagalan/recovery: Jika saldo tidak cukup atau penerima tidak valid, pesan inline muncul pada blok konfirmasi, transfer tidak dijalankan, dan ia dapat memperbaiki input tanpa kehilangan input lain.
9. Langkah berikutnya: Ia diarahkan ke Dashboard atau Transactions dengan hasil transfer terlihat, lalu dapat melanjutkan ke Flow 5.

Flow 4 — Nasabah melakukan pembayaran

1. Konteks awal: Nasabah sudah login dan berada di Dashboard.
2. Aksi: Ia menekan tile Bayar pada rail aksi cepat.
3. Owner: Payments membuka ruang kerja terfokus.
4. Aksi: Ia memasukkan tujuan pembayaran pada field tujuan besar (tipe condensed 32px) dan memasukkan jumlah; digit wheel beranimasi dengan detent mekanis.
5. Hasil yang dapat diamati: Blok konfirmasi bergaya struk tercetak muncul — panel #181C21 terangkat dengan tepi bawah bertakik, menampilkan tujuan dan jumlah dalam angka tabular.
6. Aksi: Ia meninjau blok konfirmasi dan menekan bar KONFIRMASI emas full-width yang dipin ke safe area bawah.
7. Hasil yang dapat diamati: Pembayaran diproses; saldo berkurang dan transaksi keluar tercatat.
8. Kegagalan/recovery: Jika saldo tidak cukup atau tujuan tidak valid, pesan inline muncul pada blok konfirmasi, pembayaran tidak dijalankan, dan ia dapat memperbaiki input tanpa kehilangan input lain.
9. Langkah berikutnya: Ia diarahkan ke Dashboard atau Transactions dengan hasil pembayaran terlihat, lalu dapat melanjutkan ke Flow 5.

Flow 5 — Nasabah menelusuri riwayat transaksi

1. Konteks awal: Nasabah sudah login dan berada di Dashboard atau Transactions.
2. Aksi: Ia membuka log RIWAYAT di Dashboard atau membuka halaman Transactions.
3. Hasil yang dapat diamati: Log bergaris tampil — baris penuh yang dipisahkan hairline dengan kolom tanggal, deskripsi, dan jumlah rata kanan dalam numeral tabular; teal untuk uang masuk dan merah untuk uang keluar; baris muncul dengan stagger 40ms, masing-masing bergeser 8px ke atas tanpa bounce.
4. Aksi: Ia menelusuri baris dan dapat membuka satu baris untuk detail.
5. Kegagalan/recovery: Jika riwayat gagal dimuat, pesan inline dan aksi coba lagi muncul; pull-to-refresh memuat ulang log.
6. Langkah berikutnya: Ia kembali ke Dashboard atau melanjutkan ke Flow 3 atau Flow 4.

6. Visuals Colors and Theme

Muse dan headline: MARQ by Garmin — Precision instrument banking: a titanium dial for your money. Aplikasi ini harus terasa seperti objek yang dimachining dengan presisi, bukan mainan: register emosionalnya adalah kepercayaan dan presisi lebih dulu, dengan kebanggaan kepemilikan yang tenang.

Palet (dark mode, authoritative):

Proporsi: ~80% dark ground, 12% surface panels, 6% text, 2% gold, <1% teal. Emas tidak pernah membanjiri layar.

Tipografi:

• Headings: Barlow Condensed 600/700, uppercase, tracking +0.02em, dipakai pada skala ekstrem untuk saldo dan numeral bagian.
• Body: Saira 400/500 untuk semua reading copy dan label.
• Micro-labels: Saira 500 uppercase 11–13px dengan tracking +0.14em (SALDO TERSEDIA, TUJUAN TRANSFER, RIWAYAT).
• Numeral: selalu tabular (font-variant-numeric: tabular-nums) agar jumlah sejajar dalam kolom bergaris seperti readout instrumen.
• Skala: 1.333 modular, mobile-first — display 44/64/96px (clamp 44px→96px), h1 32/40/52, h2 24/28/32, body 16/16/18, label 11/12/13 uppercase, mono-data 14/16/18 tabular. Angka saldo adalah step tersendiri di atas display: clamp(52px, 11vw, 128px).

Shape language: Geometri instrumen bertepi keras — radius 2px pada input dan tombol (hampir persegi, machined), 6px pada panel, 0px pada blok saldo dan baris data bergaris. Gauge dan bezel melingkar untuk saldo dan spending ring — lingkaran nyata, stroke tipis 2px, dengan tick mark setiap 15°. Hairline 1px memisahkan setiap baris data. Tidak ada pill, tidak ada blob, tidak ada radius kartu 16px yang lembut. Tombol persegi panjang dengan border emas 1px dan fill emas solid hanya untuk aksi primer; aksi sekunder outline-only.

Layout: Dashboard adalah panel instrumen, bukan grid kartu. Atas: bezel gelap full-width membawa gauge saldo (ring melingkar, arc emas, numeral tabular di tengah) dengan nomor akun sebagai uppercase tracked kecil di bawahnya. Di bawahnya rail aksi cepat 4-across (Transfer / Bayar / Top Up / Tarik) sebagai tile persegi bermesin dengan border 1px dan ikon garis tunggal di atas label uppercase 11px. Lalu log RIWAYAT bergaris: setiap baris adalah baris penuh yang dipisahkan hairline — kolom tanggal, kolom deskripsi, kolom jumlah rata kanan dalam numeral tabular, teal untuk masuk dan merah untuk keluar. Tidak ada kartu hover-lift yang identik di mana pun. Transfer dan Payments adalah workbench satu kolom yang terfokus: field penerima/tujuan besar pada tipe condensed 32px, lalu blok konfirmasi bergaris yang terbaca seperti struk tercetak, lalu bar KONFIRMASI emas full-width yang dipin ke safe area bawah. Landing asimetris: 7 kolom kiri membawa headline condensed oversized, 5 kolom kanan membled citra tekstur titanium makro keluar dari tepi kanan.

Imagery: Hanya fotografi material makro: titanium brushed, highlight tepi kaca safir, bezel aluminium machined, garis kontur topografis, dan fotografi bergaya ekspedisi gelap yang diperlakukan monokrom. Product-style shot kartu atau ponsel dirender di atas ground grafit dengan satu rim light hangat. Ikon adalah ikon garis teknis 1.5px-stroke pada grid 24px, tanpa fill, tanpa ujung kartun yang membulat. Tidak ada stok orang, tidak ada ilustrasi, tidak ada gradient blob, tidak ada karakter 3D.

Aksesibilitas teks: Headline, wordmark, label, angka, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskala (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat. Citra, dekorasi, dan motion boleh dipotong, dibled keluar tepi, dirotasi, atau ditumpuk sesuai arah kreatif, selama tidak menutupi teks atau kontrol yang dapat dibaca.

7. Signature Design Concept

Hero Landing: "Bezel Instrumen"

Landing hero adalah bezel instrumen gelap, bukan headline SaaS yang terpusat.

• Ground: full-bleed #0E1114.
• Kiri (7 kolom): headline Barlow Condensed oversized pada clamp(44px, 9vw, 112px) dalam #F2EFE9, uppercase, tiga baris bertumpuk — UANG ANDA, / TERUKUR / PRESISI. — flush-left dan berjalan sampai tepi kolom. Di bawahnya satu hairline emas 1px, lalu satu baris body copy Saira dan CTA persegi panjang emas BUKA AKUN dengan border emas 1px.
• Kanan (5 kolom): gauge saldo melingkar besar — ring 320px, arc emas pada 68%, numeral tabular Rp 4.820.000 di tengah — terpotong oleh tepi kanan viewport sehingga hanya tiga perempat ring yang terlihat, duduk di atas citra titanium brushed makro yang bled keluar dari tepi kanan dan bawah.
• Baseline: tick-ruler horizontal tipis berjalan sepanjang lebar viewport pada baseline hero.
• Larangan: tidak ada gradient, tidak ada blob, tidak ada tombol biru.

Konsep ini hanya merekomposisi konten, state, dan kontrol yang sudah diterima: headline produk, satu CTA ke Sign Up, tautan ke Login, dan gauge saldo sebagai bahasa visual instrumen. Tidak ada perilaku, halaman, atau destinasi baru.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: dimensional_css

Landing Hero Motion Brief

• Focal subject: Gauge saldo melingkar (ring 320px, arc emas 68%, numeral tabular Rp 4.820.000 di tengah) yang terpotong tepi kanan viewport, duduk di atas citra titanium brushed makro.
• Input → transformation → outcome thesis: Saat hero masuk, needle gauge menyapu dari 0 ke posisi 68% dan numeral tabular menghitung naik ke nilai akhir dengan ease-out fisik — mengubah ground statis menjadi instrumen yang "menyala" dan menetapkan janji produk: angka yang tepat, terukur, dan dapat dipercaya.
• Motion vocabulary: Gerakan instrumen presisi, tidak pernah playful. Sweep needle, count-up numeral, tick-ruler yang mengungkap satu tick emas pada bagian aktif, hairline wipe horizontal 220ms antar layar (bukan fade). Tidak ada yang mengambang, tidak ada bounce, tidak ada partikel.
• Composed first frame: Ground #0E1114 penuh; headline condensed tiga baris flush-left pada 7 kolom kiri; hairline emas dan CTA persegi di bawahnya; gauge terpotong tepi kanan dengan numeral tabular di tengah; tick-ruler horizontal pada baseline.
• Reduced-motion state: Gauge tampil pada nilai akhirnya (arc 68%, numeral Rp 4.820.000) tanpa sweep atau count-up; tick-ruler tampil statis dengan tick aktif berwarna emas; tidak ada transisi horizontal wipe — konten langsung tampil utuh dan dapat dibaca.

9. Non-Functional Requirements

NFR-01 — State keuangan persisten Saldo, transfer, pembayaran, dan riwayat transaksi harus dijaga backend sebagai state persisten per akun nasabah.

• Provenance: required_inference (backend execution untuk state persisten)
• Rationale: Tanpa persistensi, nasabah tidak dapat mempercayai angka saldo atau riwayat yang ditampilkan.

NFR-02 — Identitas aplikasi milik aplikasi sendiri Aplikasi harus memiliki identitasnya sendiri: nasabah membuat identitas lewat Sign Up dan memverifikasi kembali lewat Login.

• Provenance: required_inference (app_owned_identity)
• Rationale: State akun persisten harus terikat pada peserta yang benar.

NFR-03 — Akses terlindungi untuk state akun Dashboard, Transfer, Payments, dan Transactions harus memerlukan login; Landing, Login, dan Sign Up dapat dijangkau tanpa login.

• Provenance: required_inference (access reconciliation)
• Rationale: Destinasi terlindungi tidak boleh menjadi pemilik interaksi yang menetapkan akses ke dirinya sendiri.

NFR-04 — Mobile-first dan teks tetap utuh Aplikasi harus mobile-first; headline, wordmark, label, angka, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px.

• Provenance: explicit (creative direction)
• Rationale: Nasabah memakai ponsel, sering dalam keadaan buru-buru; teks dan kontrol harus selalu terbaca.

NFR-05 — Aksesibilitas motion Dengan prefers-reduced-motion, aplikasi harus menyediakan susunan statis yang dapat digunakan: gauge tampil pada nilai akhir, tick-ruler statis, dan tidak ada transisi horizontal wipe.

• Provenance: explicit (creative direction)
• Rationale: Motion tidak boleh menjadi syarat untuk membaca saldo atau menyelesaikan transaksi.

NFR-06 — Numeral tabular Semua angka jumlah dan saldo harus dirender dengan font-variant-numeric: tabular-nums agar sejajar dalam kolom bergaris.

• Provenance: explicit (creative direction)
• Rationale: Angka yang tidak sejajar merusak keterbacaan log instrumen.

10. Tech Stack

• Frontend: React (web, mobile-first) dengan UI kustom milik aplikasi.
• Backend: Python/FastAPI sebagai backend tunggal yang menjaga saldo, memproses transfer dan pembayaran, serta menyimpan riwayat transaksi.
• Storage: Penyimpanan persisten untuk akun, saldo, dan riwayat transaksi.
• Deployment: Docker/docker-compose untuk menjalankan frontend dan backend sebagai layanan yang dapat dijalankan.

Tidak ada pilihan teknologi lain yang ditetapkan sumber; tidak ada Kubernetes karena deployment tidak memerlukannya.

11. Assumptions and Constraints

Asumsi:

• A-01: Nasabah adalah satu-satunya persona aktif manusia; tidak ada peran admin, teller, atau operator bank. (required_inference)
• A-02: Setiap nasabah hanya melihat dan mengubah state akunnya sendiri; tidak ada state bersama yang memerlukan kontrol izin atau visibilitas berbasis peran. (required_inference)
• A-03: Penerima transfer dan tujuan pembayaran adalah pihak yang menerima manfaat, bukan pengguna aplikasi ini, dan tidak memiliki interaksi di dalamnya. (required_inference)
• A-04: Saldo awal akun baru ditetapkan oleh backend saat Sign Up; nilai spesifiknya tidak ditetapkan sumber. (required_inference)
• A-05: Top Up dan Tarik muncul sebagai tile pada rail aksi cepat Dashboard sesuai arah kreatif; perilaku detailnya tidak ditetapkan sumber dan tidak menjadi requirement terpisah. (required_inference)

Constraints:

• C-01: Gaya produk mengikuti contoh aplikasi dompet digital seperti DANA: saldo, transfer, pembayaran, dan riwayat transaksi. (explicit)
• C-02: Template SaaS indigo/biru-di-atas-putih generik dilarang untuk proyek ini. (explicit)
• C-03: Light mode bukan surface default. (explicit)
• C-04: Tidak ada glassmorphism, frosted blur panel, atau kartu translusen. (explicit)
• C-05: Tidak ada gradient blob hero, mesh gradient, atau neon glow. (explicit)
• C-06: Tidak ada easing bouncy yang playful, confetti, maskot, atau ilustrasi kartun. (explicit)
• C-07: Inter, Roboto, Poppins, dan system-ui tidak dipakai untuk headings atau body. (explicit)
• C-08: Tidak ada stok orang, ilustrasi, gradient blob, atau karakter 3D pada imagery. (explicit)
• C-09: Merah #E4572E hanya untuk uang keluar dan error. (explicit)
• C-10: Emas #C9A227 hanya untuk angka saldo, CTA primer, dan satu hairline bergaris per bagian — tidak pernah membanjiri layar. (explicit)

12. Glossary

• Nasabah: Persona aktif manusia tunggal — pengguna perorangan yang mengelola uangnya sendiri melalui aplikasi.
• Saldo: Jumlah uang tersedia pada akun nasabah, ditampilkan sebagai angka terbesar di Dashboard dalam gauge melingkar.
• Transfer: Pemindahan dana dari akun nasabah ke penerima yang dipilih.
• Pembayaran: Penyelesaian pembayaran dari akun nasabah ke tujuan pembayaran yang dimasukkan.
• Riwayat transaksi: Log bergaris berisi transaksi akun nasabah — kolom tanggal, deskripsi, dan jumlah — dengan teal untuk uang masuk dan merah untuk uang keluar.
• Gauge saldo: Ring melingkar dengan arc emas, tick setiap 15°, dan numeral tabular di tengah sebagai representasi visual saldo.
• Tick-ruler: Pembatas horizontal full-bleed bergaya penanda bezel dial; tick bagian aktif berwarna emas.
• Blok konfirmasi: Panel #181C21 terangkat dengan tepi bawah bertakik yang menampilkan detail transaksi seperti struk tercetak sebelum konfirmasi.
• Identitas aplikasi: Identitas yang dibuat nasabah lewat Sign Up dan diverifikasi kembali lewat Login, mengikat state akun persisten pada peserta yang benar.
• Landing: Halaman awal anonim yang menjelaskan aplikasi sebelum akses akun.
• Dashboard: Ringkasan akun nasabah yang menyediakan tampilan saldo dan akses lanjutan ke aktivitas perbankan.
• Rail aksi cepat: Deretan 4 tile persegi (Transfer / Bayar / Top Up / Tarik) pada Dashboard.