System Requirements Document for orbit-bisakah

1. Introduction

orbit-bisakah adalah aplikasi pesan pribadi yang dirancang untuk percakapan intim antara teman dan keluarga. Produk ini menjawab kebutuhan komunikasi sehari-hari yang tenang, hangat, dan tanpa gangguan — bukan alat produktivitas tim atau kanal bisnis, melainkan ruang pribadi tempat percakapan keluarga dan pertemanan dapat berlangsung secara berkelanjutan.

Audiens produk adalah pengguna lintas usia — dari remaja hingga kakek-nenek — yang sering menggunakan ponsel kelas menengah dalam kondisi cahaya yang bervariasi. Karena itu, antarmuka harus mudah dibaca, lembut, dan bebas tekanan visual. Fokus produk adalah pesan pribadi satu-ke-satu dan percakapan keluarga/teman yang tersimpan dan dapat dilanjutkan kapan saja.

2. System Overview

orbit-bisakah adalah aplikasi web chat pribadi dengan identitas milik aplikasi sendiri. Pengguna mendaftar sendiri (self-service sign up), masuk kembali untuk melanjutkan percakapan yang tersimpan, memilih kontak teman atau keluarga, dan bertukar pesan dalam ruang percakapan pribadi.

Aktor manusia yang diterima:

• Pengguna Chat Pribadi — memulai percakapan, mengirim dan membaca pesan, kembali ke percakapan berjalan.
• Penerima Pesan Pribadi — teman atau anggota keluarga yang menerima dan membalas pesan dalam percakapan yang sama.

Cakupan saat ini (current):

• Pendaftaran mandiri untuk penggunaan pertama.
• Verifikasi kembali melalui Login untuk melanjutkan percakapan tersimpan.
• Daftar percakapan pribadi yang dapat ditinjau dan dibuka kembali.
• Pemilihan kontak teman atau keluarga untuk memulai percakapan baru.
• Ruang percakapan pribadi untuk membaca, menulis, dan mengirim balasan secara berkelanjutan.

Batasan lingkup (hard constraint):

• Lingkup produk adalah chat pribadi antar teman dan keluarga, bukan chat untuk tim atau bisnis.

Di luar cakupan saat ini: fitur kolaborasi tim, kanal bisnis, dan kemampuan produktivitas organisasi tidak termasuk dalam lingkup yang diterima.

2a. Product Interpretation and Delivery Boundary

orbit-bisakah adalah produk chat pribadi yang dimiliki dan dioperasikan oleh aplikasi itu sendiri. Identitas pengguna dibuat dan dikelola oleh aplikasi (application-owned identity), bukan oleh penyedia eksternal. Semua permukaan interaksi saat ini adalah halaman kustom milik aplikasi.

Kepemilikan akses:

• Landing, Sign Up, dan Login dapat diakses tanpa login (anonymous entry). Landing menjelaskan aplikasi sebelum pengguna masuk atau mendaftar; Sign Up dan Login adalah permukaan pembentukan dan verifikasi identitas.
• Chats memerlukan login — daftar percakapan pribadi yang tersimpan hanya dapat diakses oleh pemilik identitas yang terverifikasi.
• Contacts dan Conversation dibatasi peran (role_restricted) — hanya Pengguna Chat Pribadi yang memulai percakapan baru dan mengirim pesan; Penerima Pesan Pribadi berinteraksi melalui sisi penerimaan dalam percakapan yang sama.

Batas current/future: Seluruh perilaku yang dijelaskan dalam dokumen ini adalah lingkup saat ini. Tidak ada fitur masa depan yang dinyatakan dalam sumber otoritatif.

2b. Source Content Inventory

Tidak ada directive referensi dengan content_source yang diberikan. Bagian ini tidak berlaku.

2c. Page Content and Component Coverage

Landing

• Informasi/state: Penjelasan aplikasi chat pribadi untuk teman dan keluarga; headline besar; satu foto still-life; tautan CTA teks dengan garis bawah 1px; satu tombol moss terisi di bagian bawah kolom.
• Aksi utama: Menuju Sign Up (mulai penggunaan pertama); menuju Login (pengguna yang sudah punya identitas).
• Aksi pendukung: Membaca penjelasan produk.
• Entitas domain: Aplikasi (deskripsi produk), identitas pengguna (belum terbentuk).
• Tanggung jawab komponen: Hero field kertas (#F4F1EA) dengan grain 3%; headline Zen Kaku Gothic New Light clamp(40px, 11vw, 104px) dua baris ragged-left; hairline persimmon 1px 96px di atas headline; foto still-life 4:5 yang bleed ke tepi kanan viewport; CTA teks dengan underline; tombol moss 44px.
• State: Loading (halaman statis, tanpa loading state khusus); Empty (tidak berlaku); Success (navigasi ke Sign Up/Login); Error (tidak berlaku — halaman statis); Recovery (tidak berlaku).

Sign Up

• Informasi/state: Formulir pendaftaran mandiri dalam satu kolom 380px; label di atas field; satu tombol terisi.
• Aksi utama: Membuat identitas aplikasi untuk memulai percakapan pribadi berkelanjutan.
• Aksi pendukung: Menuju Login jika sudah memiliki identitas.
• Entitas domain: Identitas pengguna (dibuat), kredensial.
• Tanggung jawab komponen: Kolom form 380px; input dengan radius 4px dan border hairline 1px (#DED9CF); label di atas field; tombol moss terisi; pesan validasi inline.
• State: Loading (tombol dalam proses submit); Empty (field kosong dengan placeholder); Success (identitas terbentuk, lanjut ke Chats); Error (validasi field gagal — pesan inline di bawah field terkait); Recovery (pengguna memperbaiki input dan mengirim ulang).

Login

• Informasi/state: Formulir verifikasi kembali dalam satu kolom 380px; label di atas field; satu tombol terisi.
• Aksi utama: Memverifikasi identitas untuk mengakses percakapan pribadi yang tersimpan.
• Aksi pendukung: Menuju Sign Up jika belum memiliki identitas.
• Entitas domain: Identitas pengguna (diverifikasi), sesi.
• Tanggung jawab komponen: Kolom form 380px; input dengan radius 4px dan border hairline; tombol moss terisi; pesan error inline.
• State: Loading (tombol dalam proses verifikasi); Empty (field kosong); Success (sesi terbentuk, lanjut ke Chats); Error (kredensial tidak cocok — pesan inline); Recovery (pengguna mencoba lagi atau menuju Sign Up).

Chats

• Informasi/state: Daftar percakapan pribadi yang sudah ada; setiap baris menampilkan avatar 44px, nama, baris terakhir dalam muted, timestamp rata kanan pada baseline bersama; satu hairline antar baris; indikator thread aktif berupa hairline persimmon.
• Aksi utama: Membuka percakapan yang ada untuk melanjutkan komunikasi.
• Aksi pendukung: Menuju Contacts untuk memulai percakapan baru; meninjau daftar.
• Entitas domain: Percakapan (thread), pesan terakhir, kontak, timestamp, status belum dibaca.
• Tanggung jawab komponen: Ruled list tanpa kartu; avatar lingkaran 44px dengan ring 1px; hairline pemisah edge-to-edge; dot belum dibaca (persimmon, pulse 1.2s pada rentang opacity 40%); hover row memunculkan rule kiri 1px slide 140ms.
• State: Loading (daftar sedang dimuat); Empty (satu pictogram garis tangan — amplop tanpa tanda — di tengah 200px kertas kosong dengan caption muted 16px); Success (daftar tampil); Error (gagal memuat daftar — pesan muted dengan aksi coba lagi); Recovery (coba lagi memuat).

Contacts

• Informasi/state: Daftar kontak teman atau keluarga yang dapat dipilih untuk memulai percakapan pribadi baru.
• Aksi utama: Memilih kontak untuk memulai percakapan pribadi baru.
• Aksi pendukung: Meninjau daftar kontak.
• Entitas domain: Kontak (teman/keluarga), identitas kontak.
• Tanggung jawab komponen: Ruled list dengan hairline; avatar lingkaran 44px; hover row rule kiri 1px; aksi pilih kontak.
• State: Loading (daftar kontak sedang dimuat); Empty (pictogram garis tangan — satu kursi — di tengah kertas kosong dengan caption muted 16px); Success (kontak dipilih, lanjut ke Conversation); Error (gagal memuat kontak — pesan muted dengan aksi coba lagi); Recovery (coba lagi memuat).

Conversation

• Informasi/state: Ruang percakapan pribadi; kolom kertas maksimal 680px; bubble pesan sebagai slip kertas radius 10px tanpa shadow; hairline full-bleed antar grup pesan; margin rule kiri persisten setinggi thread; composer bar putih (#FFFFFF) dengan hairline atas 1px.
• Aksi utama: Menulis dan mengirim pesan/balasan; membaca pesan masuk.
• Aksi pendukung: Melampirkan (glyph attachment satu baris); kembali ke daftar Chats.
• Entitas domain: Pesan (keluar/masuk), pengirim, penerima, timestamp, thread.
• Tanggung jawab komponen: Bubble keluar moss (#3B4A3F), bubble masuk putih (#FFFFFF); teks pesan 17px dengan line-height 1.7; gap 12px antar bubble, 24px antar pembicara; composer bar borderless input + glyph attachment + panah kirim persimmon; hairline persimmon sebagai underline tombol kirim; navigasi top rule tipis dengan nama thread di tengah dan dua kontrol ikon tenang; bottom bar mobile tiga item dengan label 16px di bawah ikon 20px.
• State: Loading (thread sedang dimuat); Empty (pictogram amplop tanpa tanda di tengah kertas kosong dengan caption muted 16px); Success (pesan terkirim — bubble masuk ke tempatnya dengan fade 180ms dan drift naik 4px, tanpa bounce); Error (pesan gagal terkirim — indikator muted dengan aksi kirim ulang); Recovery (kirim ulang pesan).

3. Functional Requirements

FR-01 — Membuat aplikasi chat pribadi untuk teman dan keluarga Provenance: explicit As a Pengguna Chat Pribadi, I should dapat menggunakan aplikasi chat pribadi untuk berkirim pesan dengan teman dan keluarga, sehingga komunikasi pribadi sehari-hari berlangsung lancar.

• Trigger/input: pengguna membuka aplikasi.
• Observable result: aplikasi menyediakan alur chat pribadi dari pendaftaran hingga pengiriman pesan.
• Access state: publik (Landing) hingga terverifikasi (Chats, Conversation).
• Failure/recovery: jika sesi berakhir, pengguna kembali melalui Login.
• Continuation: pengguna melanjutkan percakapan yang tersimpan.
• Acceptance: pengguna dapat menyelesaikan satu siklus penuh — daftar, masuk, pilih kontak, kirim pesan, baca balasan.

FR-02 — Lingkup chat pribadi antar teman dan keluarga Provenance: explicit As a Pengguna Chat Pribadi, I should menggunakan aplikasi hanya untuk percakapan pribadi dengan teman dan keluarga, sehingga lingkup tetap intim dan bukan kanal tim atau bisnis.

• Trigger/input: pengguna memulai percakapan.
• Observable result: percakapan berlangsung antara dua pengguna pribadi (pengirim dan penerima).
• Access state: terverifikasi.
• Failure/recovery: tidak berlaku.
• Continuation: percakapan berlanjut dua arah.
• Acceptance: tidak ada permukaan produk untuk kolaborasi tim atau kanal bisnis.

FR-03 — Pendaftaran mandiri untuk penggunaan pertama Provenance: required_inference As a Pengguna Chat Pribadi, I should mendaftar sendiri saat pertama kali menggunakan aplikasi, sehingga saya memiliki identitas aplikasi untuk percakapan pribadi yang berkelanjutan.

• Trigger/input: pengguna baru memilih mulai dari Landing.
• Observable result: identitas aplikasi terbentuk dan pengguna dapat mengakses Chats.
• Access state: anonymous entry pada Sign Up; hasil akhir terverifikasi.
• Failure/recovery: validasi field gagal menampilkan pesan inline; pengguna memperbaiki dan mengirim ulang.
• Continuation: pengguna diarahkan ke Chats untuk memulai percakapan.
• Acceptance: pengguna baru dapat menyelesaikan pendaftaran dan mencapai Chats.

FR-04 — Verifikasi kembali melalui Login untuk melanjutkan percakapan tersimpan Provenance: required_inference As a Pengguna Chat Pribadi, I should masuk kembali melalui Login, sehingga saya dapat melanjutkan percakapan pribadi yang tersimpan setelah sesi sebelumnya berakhir.

• Trigger/input: pengguna kembali membuka aplikasi dengan identitas yang sudah ada.
• Observable result: sesi terbentuk dan daftar percakapan tersimpan dapat diakses.
• Access state: anonymous entry pada Login; hasil akhir terverifikasi.
• Failure/recovery: kredensial tidak cocok menampilkan pesan inline; pengguna mencoba lagi atau menuju Sign Up.
• Continuation: pengguna membuka percakapan yang ada dari Chats.
• Acceptance: pengguna dapat masuk dan membuka kembali percakapan tersimpan.

FR-05 — Meninjau dan membuka kembali percakapan pribadi yang ada Provenance: required_inference As a Pengguna Chat Pribadi, I should meninjau daftar percakapan pribadi saya dan membukanya kembali, sehingga saya dapat melanjutkan komunikasi yang sedang berjalan.

• Trigger/input: pengguna membuka Chats.
• Observable result: daftar percakapan tampil dengan nama, baris terakhir, timestamp, dan indikator belum dibaca.
• Access state: login.
• Failure/recovery: gagal memuat daftar menampilkan pesan muted dengan aksi coba lagi.
• Continuation: pengguna memilih percakapan dan masuk ke Conversation.
• Acceptance: pengguna dapat membuka percakapan yang ada dan melihat pesan terakhirnya.

FR-06 — Memilih kontak teman atau keluarga untuk memulai percakapan baru Provenance: required_inference As a Pengguna Chat Pribadi, I should memilih kontak teman atau keluarga dari daftar kontak, sehingga saya dapat memulai percakapan pribadi baru.

• Trigger/input: pengguna membuka Contacts dari Chats.
• Observable result: daftar kontak tampil dan kontak yang dipilih membuka Conversation baru.
• Access state: role_restricted (Pengguna Chat Pribadi).
• Failure/recovery: gagal memuat kontak menampilkan pesan muted dengan aksi coba lagi.
• Continuation: pengguna mulai menulis pesan di Conversation.
• Acceptance: pengguna dapat memilih kontak dan mencapai Conversation kosong siap tulis.

FR-07 — Membaca pesan masuk dan menanggapi dalam percakapan yang sama Provenance: required_inference As a Penerima Pesan Pribadi, I should membaca pesan masuk dan menanggapinya dalam percakapan yang sama, sehingga percakapan dua arah berkelanjutan.

• Trigger/input: pesan masuk dari Pengguna Chat Pribadi.
• Observable result: pesan tampil sebagai bubble masuk putih; penerima dapat menulis dan mengirim balasan.
• Access state: role_restricted (Penerima Pesan Pribadi dalam percakapan yang sama).
• Failure/recovery: pesan gagal terkirim menampilkan indikator muted dengan aksi kirim ulang.
• Continuation: balasan tampil di thread dan percakapan berlanjut.
• Acceptance: penerima dapat membaca pesan dan mengirim balasan yang terlihat di thread.

FR-08 — Menulis dan mengirim pesan/balasan secara berkelanjutan Provenance: required_inference As a Pengguna Chat Pribadi, I should menulis dan mengirim pesan atau balasan di ruang percakapan, sehingga komunikasi pribadi berlangsung terus-menerus.

• Trigger/input: pengguna mengetik di composer bar dan menekan kirim.
• Observable result: bubble keluar moss masuk ke tempatnya dengan fade 180ms dan drift naik 4px, tanpa bounce.
• Access state: role_restricted.
• Failure/recovery: kegagalan kirim menampilkan indikator muted dengan aksi kirim ulang.
• Continuation: pengguna dapat mengirim pesan berikutnya atau menutup thread dan kembali ke Chats.
• Acceptance: pesan terkirim tampil di thread dan dapat dibaca penerima.

4. User Personas

Pengguna Chat Pribadi

Konteks produk: Orang yang ingin berkirim pesan pribadi dengan teman dan keluarga. Menggunakan aplikasi di rumah, di perjalanan, atau di meja makan — sering pada ponsel kelas menengah dengan cahaya bervariasi.

Tujuan utama: Menjaga komunikasi pribadi yang lancar dan berkelanjutan dengan teman dan keluarga.

Tanggung jawab yang diterima:

• Mendaftar sendiri saat pertama kali menggunakan aplikasi (FR-03).
• Masuk kembali melalui Login untuk melanjutkan percakapan tersimpan (FR-04).
• Meninjau dan membuka kembali percakapan pribadi yang ada (FR-05).
• Memilih kontak teman atau keluarga untuk memulai percakapan baru (FR-06).
• Menulis dan mengirim pesan/balasan secara berkelanjutan (FR-08).

Input/keputusan: Memilih antara mulai (Sign Up) atau masuk (Login); memilih kontak dari daftar; memutuskan kapan mengirim pesan.

Interaksi dengan peserta lain: Berkomunikasi dua arah dengan Penerima Pesan Pribadi dalam Conversation yang sama.

Keberhasilan yang dapat diamati: Percakapan pribadi berlangsung; pesan terkirim tampil di thread; balasan diterima dan dibaca.

Yang membedakan peran ini: Pengguna Chat Pribadi adalah inisiator — ia yang membuka aplikasi, membentuk identitas, memilih kontak, dan memulai thread. Tanggung jawabnya mencakup seluruh siklus dari pendaftaran hingga pengiriman pesan berkelanjutan.

Penerima Pesan Pribadi

Konteks produk: Teman atau anggota keluarga yang menerima dan membalas pesan dalam percakapan pribadi. Sama seperti Pengguna Chat Pribadi, ia menggunakan aplikasi dalam konteks pribadi sehari-hari.

Tujuan utama: Percakapan dua arah yang berkelanjutan dalam thread yang sama.

Tanggung jawab yang diterima:

• Membaca pesan masuk dan menanggapi dalam percakapan yang sama (FR-07).
• Menulis dan mengirim balasan secara berkelanjutan (FR-08).

Input/keputusan: Membaca pesan masuk; memutuskan isi balasan; mengirim balasan.

Interaksi dengan peserta lain: Merespons pesan dari Pengguna Chat Pribadi dalam Conversation yang sama.

Keberhasilan yang dapat diamati: Balasan terkirim tampil di thread dan percakapan berlanjut.

Yang membedakan peran ini: Penerima Pesan Pribadi adalah pihak yang merespons — fokusnya pada membaca pesan masuk dan menanggapi, bukan pada memulai thread baru atau mengelola daftar kontak. Peran ini tidak memiliki tanggung jawab atas Contacts atau pembentukan identitas baru.

5. Core User Flows

Flow 1 — Pengguna baru mendaftar dan memulai percakapan pertama

1. Pengguna Chat Pribadi membuka Landing (anonymous entry). Ia membaca penjelasan aplikasi chat pribadi untuk teman dan keluarga.
2. Pengguna memilih CTA teks menuju Sign Up.
3. Di Sign Up, pengguna mengisi formulir pendaftaran mandiri dalam kolom 380px dan mengirim.
4. Hasil yang dapat diamati: identitas aplikasi terbentuk; pengguna diarahkan ke Chats.
5. Kegagalan/recovery: jika validasi field gagal, pesan inline muncul di bawah field terkait; pengguna memperbaiki input dan mengirim ulang.
6. Dari Chats (state kosong: pictogram amplop tanpa tanda dengan caption muted), pengguna menuju Contacts.
7. Di Contacts, pengguna memilih kontak teman atau keluarga.
8. Hasil yang dapat diamati: Conversation baru terbuka dalam state kosong, siap tulis.
9. Pengguna menulis pesan di composer bar dan menekan kirim.
10. Hasil yang dapat diamati: bubble keluar moss masuk ke tempatnya dengan fade 180ms dan drift naik 4px.
11. Langkah berikutnya: pengguna dapat mengirim pesan berikutnya atau kembali ke Chats.

Flow 2 — Pengguna kembali masuk dan melanjutkan percakapan tersimpan

1. Pengguna Chat Pribadi membuka Landing (anonymous entry) dan memilih menuju Login.
2. Di Login, pengguna memasukkan kredensial dan mengirim.
3. Hasil yang dapat diamati: sesi terbentuk; pengguna diarahkan ke Chats.
4. Kegagalan/recovery: jika kredensial tidak cocok, pesan inline muncul; pengguna mencoba lagi atau menuju Sign Up.
5. Di Chats, pengguna meninjau daftar percakapan — nama, baris terakhir muted, timestamp rata kanan, indikator belum dibaca.
6. Pengguna memilih percakapan yang ada.
7. Hasil yang dapat diamati: Conversation terbuka dengan riwayat pesan; composer bar fade in 180ms.
8. Pengguna menulis balasan dan mengirim.
9. Hasil yang dapat diamati: bubble masuk ke thread.
10. Langkah berikutnya: pengguna melanjutkan percakapan atau kembali ke Chats.

Flow 3 — Penerima Pesan Pribadi membaca dan membalas

1. Penerima Pesan Pribadi membuka Chats (terverifikasi) dan melihat indikator belum dibaca pada thread.
2. Pengguna memilih thread tersebut.
3. Hasil yang dapat diamati: Conversation terbuka; pesan masuk tampil sebagai bubble putih.
4. Penerima membaca pesan.
5. Penerima menulis balasan di composer bar dan menekan kirim.
6. Hasil yang dapat diamati: bubble balasan masuk ke thread; pengirim dapat membacanya.
7. Kegagalan/recovery: jika pengiriman gagal, indikator muted muncul dengan aksi kirim ulang; penerima mengirim ulang.
8. Langkah berikutnya: percakapan berlanjut dua arah dalam thread yang sama.

6. Visuals Colors and Theme

Muse: Kenya Hara — Emptiness as content: a quiet room where family conversations live.

Headline direction: Ruang tenang, bukan dasbor. Kertas sebagai latar, satu objek tenang, tipografi berbisik dengan tracking lebar. Warna adalah tamu, bukan tuan rumah.

Palet (light mode)

Tanpa gradien. Tanpa shadow kecuali hairline 1px. Border hairline #DED9CF.

Tipografi

• Headings: Zen Kaku Gothic New — Light 300 untuk display, Regular 400 untuk UI.
• Body: Zen Kaku Gothic New.
• Skala: modular 1.25 — 40/32/24/18/16/14; display step 56px mobile hingga 104px desktop untuk headline landing.
• Detail: tracking lebar 0.08em pada micro-label uppercase (mis. 'HARI INI'); headline besar tanpa bold — skala yang membawa penekanan; leading display 1.05; leading pesan 1.7; body tidak di bawah 16px; teks pesan 17px dengan line-height 1.7; micro-label 12px dengan tracking 0.08em.

Shape language

• Proporsi persegi dan rule tipis.
• Radius kecil dan konsisten: 4px pada input dan tombol; 10px pada bubble pesan (slip kertas terlipat, bukan pill).
• Border hairline 1px #DED9CF memisahkan setiap region; tanpa card shadow, tanpa floating layer.
• Avatar lingkaran sempurna 44px dengan ring 1px, tidak pernah persegi.
• Divider berjalan edge-to-edge melintasi thread dan list, seperti kertas bergaris.

Layout

• Kolom tunggal terpusat dengan margin luas — 24px mobile, 96px desktop untuk permukaan bacaan.
• Chat list adalah ruled list: avatar, nama, baris terakhir muted, timestamp rata kanan pada baseline bersama, satu hairline antar baris, tanpa kartu.
• Conversation view adalah kolom kertas maksimal 680px; bubble rata kiri dan kanan dengan gap 12px dan 24px antar pembicara.
• Navigasi adalah top rule tipis dengan nama thread di tengah dan dua kontrol ikon tenang; di mobile bottom bar tiga item dengan label 16px di bawah ikon 20px.
• Landing menggunakan komposisi terpusat dengan satu objek besar dan ruang sekeliling yang luas; form Sign Up dan Login adalah kolom tunggal 380px dengan label di atas field dan satu tombol terisi.

7. Signature Design Concept

Konsep: Percakapan sebagai kertas bergaris — thread chat dirender seperti halaman buku catatan, bukan feed.

Elemen signature:

1. Thread sebagai ruled paper: hairline full-bleed 1px antar setiap grup pesan; bubble pesan sebagai slip kertas radius 10px tanpa shadow; margin rule kiri persisten setinggi thread seperti tepi buku catatan.

2. Hairline persimmon tunggal: garis #B5462F 1px sepanjang 96px adalah satu-satunya warna di layar Landing, digambar 96px di atas headline. Hairline yang sama muncul kembali sebagai indikator thread aktif di chat list dan sebagai underline tombol kirim di composer.

3. Gestur tipografis: headline Landing diset dalam Light 300 hingga 104px dengan tracking positif 0.02em, ditumpuk dalam dua baris ragged-left yang membentang sembilan kolom, dengan foto still-life tumpang tindih pada descender baris kedua — bukan di sampingnya.

4. Empty state sebagai satu pictogram garis: amplop tanpa tanda atau satu kursi, terpusat dalam 200px kertas kosong dengan caption muted 16px di bawahnya — tidak pernah ilustrasi adegan, tidak pernah maskot.

5. Composer bar sebagai permukaan putih murni: #FFFFFF dengan hairline atas 1px dan tanpa shadow, menampung input borderless, glyph attachment satu baris, dan panah kirim persimmon; seluruh bar fade in 180ms saat thread terbuka.

Hero Landing: Field kertas full-bleed #F4F1EA dengan grain 3%. Headline besar Zen Kaku Gothic New Light clamp(40px, 11vw, 104px) dua baris ragged-left di sembilan kolom kiri atas. Di bawahnya, offset ke kanan dan tumpang tindih vertikal dengan descender baris kedua, satu foto still-life — tangan memegang ponsel di meja dapur dalam cahaya jendela lembut, crop 4:5 tinggi yang bleed ke tepi kanan viewport. Hairline persimmon 1px 96px di atas headline. CTA utama adalah tautan teks dengan underline 1px, bukan tombol; satu tombol moss terisi berada di bawah kolom, rata kiri, tinggi 44px. Tanpa gradien, tanpa blob, tanpa centered stack, tanpa floating card.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: still Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: Headline besar Zen Kaku Gothic New Light dua baris ragged-left, dengan foto still-life tangan memegang ponsel di meja dapur yang tumpang tindih pada descender baris kedua.
• Input → transformation → outcome thesis: Tidak ada transformasi otomatis. Pengguna membaca headline dan foto; interaksi terjadi hanya saat pengguna memilih CTA teks menuju Sign Up atau Login. Tidak ada motion yang berjalan tanpa aksi pengguna.
• Motion vocabulary: Hampir tidak ada, dan tidak pernah dekoratif. Pesan masuk dengan fade 180ms dan drift naik 4px; aksi kirim tidak menghasilkan bounce, hanya bubble masuk ke tempatnya; transisi thread adalah crossfade 220ms; dot belum dibaca berdenyut sekali pada interval 1.2s dengan rentang opacity 40%; hover pada baris list memunculkan rule kiri 1px slide 140ms; composer bar fade in 180ms saat thread terbuka.
• Composed first frame: Field kertas #F4F1EA dengan grain 3%; hairline persimmon 96px di atas headline; headline Light 300 clamp(40px, 11vw, 104px) dua baris ragged-left; foto still-life 4:5 bleed ke tepi kanan; CTA teks underline; tombol moss 44px rata kiri di bawah kolom.
• Reduced-motion state: Dengan prefers-reduced-motion, seluruh motion runtuh menjadi perubahan state instan — pesan muncul tanpa fade/drift, transisi thread tanpa crossfade, dot belum dibaca tanpa pulse, hover tanpa slide.

9. Non-Functional Requirements

NFR-01 — Legibilitas lintas viewport Provenance: explicit (creative direction) Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap utuh di dalam viewport dan container-nya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (mis. font-size: clamp(...) dengan ukuran mobile-nya) agar muat. Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Imagery, dekorasi, dan motion boleh di-crop, bleed, rotasi, overlap, atau dipotong sesuai arah kreatif selama tidak menutupi teks atau kontrol yang dapat dibaca.

NFR-02 — Aksesibilitas kontras dan tipografi Provenance: explicit (creative direction) Ink #26241F pada paper white #F4F1EA memberikan kontras baca penuh. Body copy tidak di bawah 16px; teks pesan 17px dengan line-height 1.7. Tidak ada visual competition dengan percakapan itu sendiri.

NFR-03 — Reduced motion Provenance: explicit (creative direction) Dengan prefers-reduced-motion, semua motion (fade pesan, crossfade thread, pulse dot, slide hover) runtuh menjadi perubahan state instan.

NFR-04 — Identitas dan kontinuitas sesi Provenance: required_inference Identitas dimiliki aplikasi. Sesi harus mempertahankan kontinuitas agar pengguna dapat melanjutkan percakapan tersimpan setelah sesi sebelumnya berakhir. Chats memerlukan login; Contacts dan Conversation dibatasi peran.

NFR-05 — Lingkup produk Provenance: explicit Produk hanya untuk chat pribadi antar teman dan keluarga. Tidak ada permukaan untuk kolaborasi tim atau kanal bisnis.

10. Tech Stack

• Frontend: React (web) — antarmuka chat pribadi dengan halaman Landing, Sign Up, Login, Chats, Contacts, Conversation.
• Backend: Python/FastAPI — melayani autentikasi identitas aplikasi, daftar percakapan, daftar kontak, dan pengiriman/penerimaan pesan.
• Storage: penyimpanan persisten untuk identitas pengguna, kontak, thread percakapan, dan pesan.
• Deployment: Docker/docker-compose untuk menjalankan frontend, backend, dan storage secara lokal/terkontainerisasi.

Catatan: pilihan teknologi di atas adalah default yang tidak ditentukan secara eksplisit oleh pengguna [Default — not specified by user], kecuali React/FastAPI/storage/Docker yang merupakan pilihan yang wajar untuk aplikasi chat web dengan backend integrasi.

11. Assumptions and Constraints

Constraints (hard):

• Lingkup produk adalah chat pribadi antar teman dan keluarga, bukan chat untuk tim atau bisnis. (explicit)

Assumptions:

• Identitas dimiliki aplikasi (application-owned identity) dengan pendaftaran mandiri dan verifikasi kembali melalui Login. (required_inference)
• Landing, Sign Up, dan Login dapat diakses tanpa login; Chats memerlukan login; Contacts dan Conversation dibatasi peran. (required_inference)
• Percakapan bersifat pribadi antara dua pengguna (pengirim dan penerima) dalam thread yang sama. (required_inference)
• Tidak ada fitur masa depan yang dinyatakan dalam sumber otoritatif; seluruh perilaku dalam dokumen ini adalah lingkup saat ini.

Exclusions:

• Chat tim/bisnis tidak termasuk lingkup.
• Fitur kolaborasi organisasi tidak termasuk lingkup.

12. Glossary

• orbit-bisakah: Nama proyek aplikasi chat pribadi untuk teman dan keluarga.
• Pengguna Chat Pribadi: Aktor manusia yang memulai percakapan, mengirim dan membaca pesan, serta kembali ke percakapan berjalan.
• Penerima Pesan Pribadi: Aktor manusia (teman atau anggota keluarga) yang menerima dan membalas pesan dalam percakapan pribadi.
• Thread: Percakapan pribadi antara dua pengguna yang tersimpan dan dapat dilanjutkan.
• Composer bar: Permukaan putih di bagian bawah Conversation untuk menulis dan mengirim pesan.
• Ruled list: Daftar dengan hairline edge-to-edge antar baris, seperti kertas bergaris.
• Hairline: Garis 1px #DED9CF yang memisahkan region; hairline persimmon #B5462F adalah aksen tunggal.
• Paper white: Ground #F4F1EA yang mendominasi setiap layar.
• Ink: Warna teks #26241F pada kontras penuh.
• Moss: Warna primary #3B4A3F untuk bubble keluar dan tombol terisi.
• Persimmon: Warna accent #B5462F pada skala kecil saja.