System Requirements Document for venus-petani

1. Introduction

venus-petani adalah aplikasi sederhana untuk para petani yang ingin menjual hasil panen sayur di pasar. Aplikasi ini berangkat dari masalah nyata para petani di sekitar rumah pengguna: mereka sering mengalami kerugian karena tidak mengetahui harga sayur di pasar. Ketika sayur mengalami kenaikan harga di pasar, para petani baru menanamnya di sawah, dan hal ini menyebabkan harga di pasar turun atau anjlok karena melimpahnya stok sayur jenis tertentu; berlaku sebaliknya ketika harga sedang rendah.

Aplikasi ini menjawab masalah tersebut dengan tiga kemampuan inti yang diminta secara eksplisit:

1. Fitur tanya jawab tentang sayuran apa yang cocok untuk ditanam, sederhana seperti Meta AI.
2. Voice note bagi petani yang gaptek (kurang terbiasa dengan teknologi).
3. Grafik sederhana yang dapat dibaca oleh petani yang sulit membaca grafik.

Audiens utama adalah Petani Sayur — petani yang menjual hasil panen sayur di pasar dan perlu mengetahui harga pasar serta rekomendasi tanam sebelum memutuskan apa dan kapan menanam, agar tidak lagi merugi akibat harga anjlok atau stok yang melimpah.

2. System Overview

venus-petani adalah aplikasi web sederhana yang menyajikan informasi harga sayur pasar, rekomendasi komoditas yang cocok ditanam, dan jalur pertanyaan bagi petani — baik lewat teks maupun suara. Aplikasi dirancang agar mudah digunakan oleh petani yang gaptek dan yang sulit membaca grafik.

Aktor manusia aktif (satu-satunya): Petani Sayur.

Kemampuan yang diterima (current):

• Tanya jawab tentang sayuran apa yang cocok untuk ditanam.
• Input voice note untuk menyampaikan pertanyaan bagi petani yang kesulitan mengetik.
• Tampilan grafik sederhana harga sayur yang mudah dibaca.
• Informasi harga pasar yang membantu petani menentukan waktu tanam dan menghindari kerugian akibat harga anjlok atau stok melimpah.

Batasan yang dinyatakan secara eksplisit:

• Aplikasi harus sederhana dan mudah digunakan oleh petani yang gaptek.
• Grafik harus sederhana dan dapat dibaca oleh petani yang sulit membaca grafik.
• Voice note disediakan khusus untuk mengakomodasi petani yang gaptek.

Referensi non-wajib: Meta AI dijadikan acuan kesederhanaan aplikasi (fitur tanya jawab), bukan spesifikasi wajib. Tidak ada nama produk, salinan teks, atau kemampuan dari Meta AI yang diadopsi sebagai persyaratan.

Pengecualian sempit: Aplikasi ini tidak menambahkan kemampuan di luar yang diminta — tidak ada marketplace jual-beli, tidak ada manajemen akun berlapis, tidak ada modul logistik, dan tidak ada fitur sosial. Fokusnya adalah informasi harga, rekomendasi tanam, dan jalur pertanyaan.

2a. Product Interpretation and Delivery Boundary

venus-petani adalah sistem informasi publik untuk petani sayur, bukan aplikasi SaaS komersial. Seluruh halaman dapat diakses tanpa akun: petani dapat langsung membuka aplikasi, melihat harga, bertanya, dan merekam suara tanpa hambatan pendaftaran. Ini konsisten dengan sifat audiens (petani gaptek, sering di lapangan) dan dengan sifat informasi yang disajikan (harga pasar publik, bukan data pribadi).

Kepemilikan delivery:

• Keempat halaman (Landing, Ask, Voice Note, Prices) dimiliki dan dijalankan oleh aplikasi (first-party custom UI).
• Tidak ada halaman yang memerlukan identitas pengguna atau sesi terautentikasi.
• Tidak ada provider eksternal yang memiliki permukaan interaksi manusia; integrasi backend (sumber data harga, mesin rekomendasi) berjalan sebagai proses sistem di belakang layar.

Batas current vs future: Seluruh kemampuan yang dijelaskan di dokumen ini adalah current. Tidak ada kemampuan future yang dinyatakan dalam sumber; karena itu tidak ada bagian future yang diisi.

2b. Source Content Inventory

Tidak ada content_source yang dideklarasikan dalam reference directives. Bagian ini sengaja dihilangkan.

2c. Page Content and Component Coverage

Landing

Informasi/state:

• Judul besar: "Tahu harga sayur sebelum menanam."
• Strip sinyal harga: deretan chip komoditas sayur, masing-masing dengan titik warna kode tetap, nama sayur, harga hari ini dalam angka tabular, dan panah arah (↑ hijau, ↓ merah, → abu-abu).
• Tiga titik masuk bernomor: 1 Tanya, 2 Rekam suara, 3 Lihat harga.

Aksi utama:

• Membuka halaman Ask (Tanya).
• Membuka halaman Voice Note (Rekam suara).
• Membuka halaman Prices (Lihat harga).

Aksi pendukung:

• Menggeser strip harga secara horizontal pada layar kecil untuk melihat komoditas lain.

Entitas domain: Komoditas sayur, harga pasar hari ini, arah perubahan harga.

Tanggung jawab komponen:

• Panel hero warm-paper dengan judul rata kiri.
• Strip harga full-bleed dengan chip yang dapat digulir horizontal (snap) di mobile; membungkus menjadi dua baris saat prefers-reduced-motion.
• Tiga panel putih datar dengan border hairline dan pictogram kecil (balon bicara, mikrofon, glyph grafik batang).

State:

• Loading: strip harga menampilkan kerangka chip dengan label muted.
• Empty: bila data harga belum tersedia, strip menampilkan pesan singkat "Harga belum tersedia" dan titik masuk tetap dapat digunakan.
• Success: chip terisi dengan nama, harga tabular, dan panah arah.
• Error: bila data harga gagal dimuat, strip menampilkan pesan "Harga sedang tidak bisa dimuat" dengan tombol "Coba lagi".
• Recovery: tombol "Coba lagi" memuat ulang strip tanpa meninggalkan halaman.

Ask

Informasi/state:

• Ruang tanya jawab untuk menanyakan sayuran apa yang cocok ditanam.
• Riwayat pertanyaan dan jawaban dalam sesi berjalan.
• Jawaban berupa rekomendasi berdasarkan kondisi harga serta stok pasar.

Aksi utama:

• Mengetik pertanyaan tentang sayuran yang cocok ditanam.
• Mengirim pertanyaan.
• Membaca jawaban/rekomendasi.

Aksi pendukung:

• Berpindah ke halaman Voice Note untuk bertanya lewat suara.
• Membuka halaman Prices untuk melihat grafik harga terkait.

Entitas domain: Pertanyaan petani, jawaban/rekomendasi tanam, kondisi harga pasar, kondisi stok pasar.

Tanggung jawab komponen:

• Kolom input teks full-width dengan tinggi sentuh minimal 48px dan radius 12px.
• Tombol kirim dengan label teks (bukan ikon saja).
• Daftar pertanyaan-jawaban dengan label small-caps dan angka tabular untuk nilai harga yang disebut.

State:

• Loading: indikator "Sedang mencari jawaban…" saat pertanyaan diproses.
• Empty: pesan awal "Tanyakan sayur apa yang cocok ditanam" dengan contoh pertanyaan singkat.
• Success: jawaban tampil dengan rekomendasi dan alasan berbasis harga/stok.
• Error: bila jawaban gagal diperoleh, pesan "Jawaban belum bisa diambil" dengan tombol "Coba lagi" yang mengirim ulang pertanyaan terakhir.
• Recovery: pertanyaan terakhir tetap terlihat sehingga petani dapat mengirim ulang tanpa mengetik ulang.

Voice Note

Informasi/state:

• Tombol rekam bulat besar sebagai instrumen utama.
• Waveform langsung berupa bar vertikal sederhana saat merekam.
• Titik merah berdenyut sebagai penanda status merekam.
• Baris transkrip bahasa sederhana di bawah: "Kami dengar: …".

Aksi utama:

• Mulai merekam pertanyaan suara.
• Berhenti merekam.
• Mengirim rekaman pertanyaan.

Aksi pendukung:

• Membatalkan rekaman dan merekam ulang.
• Melihat transkrip pertanyaan yang dikenali.

Entitas domain: Rekaman suara pertanyaan, transkrip pertanyaan, jawaban/rekomendasi atas pertanyaan suara.

Tanggung jawab komponen:

• Tombol rekam bulat dengan state jelas (idle, merekam, selesai).
• Waveform bar vertikal sederhana; pada prefers-reduced-motion diganti level meter statis.
• Baris transkrip "Kami dengar: …" agar petani melihat pertanyaannya dipahami.
• Tombol kirim dengan label teks.

State:

• Loading: pesan "Menyiapkan mikrofon…" saat izin mikrofon diminta.
• Empty: pesan "Tekan tombol untuk mulai bicara" sebelum rekaman dimulai.
• Success: transkrip tampil dan jawaban/rekomendasi muncul setelah rekaman dikirim.
• Error: bila izin mikrofon ditolak atau rekaman gagal, pesan "Mikrofon tidak bisa dipakai" dengan opsi "Coba lagi" dan tautan ke halaman Ask untuk mengetik.
• Recovery: petani dapat merekam ulang atau beralih ke input teks tanpa kehilangan konteks pertanyaan.

Prices

Informasi/state:

• Daftar harga sayur dengan grafik sederhana.
• Setiap sayur ditampilkan sebagai satu baris penuh: titik warna kode, nama besar, harga dalam angka tabular, dan panah arah (↑↓→).
• Bar horizontal sederhana dengan ujung membulat dan label nilai besar.

Aksi utama:

• Membaca harga dan arah perubahan tiap komoditas.
• Membaca bar sederhana untuk membandingkan harga antar komoditas.

Aksi pendukung:

• Membuka halaman Ask untuk menanyakan apakah komoditas tertentu cocok ditanam.
• Membuka halaman Voice Note untuk bertanya lewat suara.

Entitas domain: Komoditas sayur, harga pasar, arah perubahan harga, waktu/periode harga.

Tanggung jawab komponen:

• Baris harga full-width dengan titik warna kode tetap per komoditas.
• Angka harga dalam tabular figures agar kolom sejajar seperti jadwal.
• Panah arah dengan warna sinyal (hijau naik, merah turun, abu-abu stabil).
• Header seksi small-caps dengan garis berwarna di bawahnya.

State:

• Loading: bar tumbuh dari kiri selama 500ms dengan ease-out; angka menghitung naik/turun selama 400ms.
• Empty: pesan "Belum ada data harga" dengan tombol "Muat ulang".
• Success: baris harga terisi lengkap dengan bar, angka, dan panah.
• Error: pesan "Data harga gagal dimuat" dengan tombol "Coba lagi".
• Recovery: tombol "Coba lagi" memuat ulang daftar; pada prefers-reduced-motion angka tampil langsung dan bar tampil penuh tanpa animasi.

3. Functional Requirements

FR-1 — Tanya jawab sayuran yang cocok ditanam (provenance: explicit) As a Petani Sayur, I should dapat mengetik pertanyaan tentang sayuran apa yang cocok untuk ditanam dan menerima jawaban/rekomendasi, sehingga saya tahu komoditas apa yang sebaiknya ditanam berikutnya.

• Trigger/input: petani mengetik pertanyaan di halaman Ask dan menekan tombol kirim.
• Observable result: jawaban/rekomendasi tampil di halaman Ask, disertai alasan berbasis kondisi harga serta stok pasar.
• Access state: halaman Ask dapat diakses tanpa akun.
• Failure/recovery: bila jawaban gagal diperoleh, pesan "Jawaban belum bisa diambil" muncul dengan tombol "Coba lagi" yang mengirim ulang pertanyaan terakhir.
• Continuation: setelah membaca jawaban, petani dapat membuka halaman Prices untuk memeriksa grafik harga komoditas terkait.

FR-2 — Voice note untuk petani gaptek (provenance: explicit) As a Petani Sayur yang gaptek, I should dapat merekam pertanyaan dengan suara dan mengirimkannya, sehingga saya tidak perlu mengetik untuk bertanya.

• Trigger/input: petani menekan tombol rekam di halaman Voice Note, berbicara, lalu berhenti dan mengirim.
• Observable result: waveform langsung tampil saat merekam, titik merah berdenyut menandai status merekam, dan baris transkrip "Kami dengar: …" menampilkan pertanyaan yang dikenali setelah rekaman selesai.
• Access state: halaman Voice Note dapat diakses tanpa akun.
• Failure/recovery: bila izin mikrofon ditolak atau rekaman gagal, pesan "Mikrofon tidak bisa dipakai" muncul dengan opsi "Coba lagi" dan tautan ke halaman Ask untuk mengetik.
• Continuation: setelah rekaman dikirim, jawaban/rekomendasi muncul; petani dapat merekam ulang atau beralih ke input teks.

FR-3 — Grafik sederhana harga sayur (provenance: explicit) As a Petani Sayur yang sulit membaca grafik, I should melihat grafik sederhana harga sayur yang mudah dibaca, sehingga saya dapat memahami perubahan harga pasar dengan cepat.

• Trigger/input: petani membuka halaman Prices.
• Observable result: setiap sayur tampil sebagai satu baris penuh dengan titik warna kode, nama besar, harga dalam angka tabular, panah arah (↑↓→), dan bar horizontal sederhana berujung membulat dengan label nilai besar.
• Access state: halaman Prices dapat diakses tanpa akun.
• Failure/recovery: bila data harga gagal dimuat, pesan "Data harga gagal dimuat" muncul dengan tombol "Coba lagi".
• Continuation: setelah membaca harga, petani dapat membuka halaman Ask untuk menanyakan apakah komoditas tersebut cocok ditanam.

FR-4 — Informasi harga pasar untuk mencegah kerugian akibat harga anjlok (provenance: explicit) As a Petani Sayur, I should mengetahui harga sayur di pasar sebelum memutuskan menanam, sehingga saya tidak lagi menanam setelah harga naik dan menyebabkan harga pasar turun/anjlok akibat stok melimpah, dan sebaliknya.

• Trigger/input: petani membuka halaman Landing atau Prices untuk melihat harga pasar terkini.
• Observable result: strip sinyal harga di Landing dan baris harga di Prices menampilkan harga hari ini beserta arah perubahan, sehingga petani dapat menilai apakah harga sedang naik, turun, atau stabil.
• Access state: dapat diakses tanpa akun.
• Failure/recovery: bila data harga tidak tersedia, pesan "Harga belum tersedia" atau "Harga sedang tidak bisa dimuat" muncul dengan tombol "Coba lagi".
• Continuation: petani dapat melanjutkan ke halaman Ask untuk meminta rekomendasi tanam berdasarkan harga yang dilihat.

FR-5 — Titik masuk bernomor ke fitur utama (provenance: required_inference) As a Petani Sayur, I should melihat tiga titik masuk bernomor (1 Tanya, 2 Rekam suara, 3 Lihat harga) di halaman Landing, sehingga saya tahu cara memulai tanpa harus menebak-nebak.

• Trigger/input: petani membuka halaman Landing.
• Observable result: tiga panel putih datar dengan border hairline dan pictogram kecil tampil dengan label teks lengkap.
• Access state: dapat diakses tanpa akun.
• Failure/recovery: bila halaman Landing gagal memuat data harga, titik masuk tetap dapat digunakan.
• Continuation: petani memilih salah satu titik masuk dan berpindah ke halaman Ask, Voice Note, atau Prices.

FR-6 — Transkrip pertanyaan suara (provenance: required_inference) As a Petani Sayur yang gaptek, I should melihat transkrip pertanyaan suara saya ("Kami dengar: …"), sehingga saya yakin pertanyaan saya dipahami dengan benar sebelum jawaban diberikan.

• Trigger/input: petani selesai merekam pertanyaan di halaman Voice Note.
• Observable result: baris transkrip menampilkan teks pertanyaan yang dikenali.
• Access state: dapat diakses tanpa akun.
• Failure/recovery: bila transkrip tidak dapat dihasilkan, pesan singkat muncul dan petani dapat merekam ulang atau beralih ke input teks.
• Continuation: petani mengirim rekaman dan menerima jawaban/rekomendasi.

FR-7 — Jawaban/rekomendasi berbasis kondisi harga dan stok pasar (provenance: explicit) As a Petani Sayur, I should menerima jawaban/rekomendasi yang mempertimbangkan kondisi harga serta stok pasar, sehingga rekomendasi tanam tidak sekadar daftar sayur, tetapi relevan dengan situasi pasar saat itu.

• Trigger/input: petani mengirim pertanyaan lewat teks (Ask) atau suara (Voice Note).
• Observable result: jawaban menampilkan rekomendasi komoditas beserta alasan yang mengacu pada kondisi harga dan stok pasar.
• Access state: dapat diakses tanpa akun.
• Failure/recovery: bila data harga/stok tidak tersedia, jawaban menyatakan keterbatasan tersebut dan menyarankan mencoba lagi.
• Continuation: petani dapat memeriksa halaman Prices untuk memverifikasi harga komoditas yang direkomendasikan.

4. User Personas

Petani Sayur

Konteks produk: Petani sayur yang menjual hasil panennya di pasar dan tinggal di sekitar lingkungan pengguna. Mereka sering mengalami kerugian karena tidak mengetahui harga sayur di pasar. Pola yang berulang: ketika sayur mengalami kenaikan harga di pasar, mereka baru menanamnya di sawah, dan hal ini menyebabkan harga di pasar turun atau anjlok karena melimpahnya stok sayur jenis tertentu; berlaku sebaliknya ketika harga sedang rendah.

Tujuan utama: Memilih komoditas dan waktu tanam berdasarkan informasi harga dan rekomendasi tanam, sehingga tidak lagi mengalami kerugian akibat harga anjlok atau melimpahnya stok.

Tanggung jawab yang diterima:

• Bertanya lewat fitur tanya jawab tentang sayuran apa yang cocok untuk ditanam.
• Menyampaikan pertanyaan dengan voice note karena gaptek.
• Membaca grafik sederhana harga sayur yang mudah dipahami meski sulit membaca grafik.
• Memutuskan komoditas dan waktu tanam berdasarkan informasi yang diperoleh.

Input dan keputusan:

• Pertanyaan teks atau suara tentang sayur yang cocok ditanam.
• Pembacaan harga pasar dan arah perubahannya.
• Keputusan akhir tentang apa dan kapan menanam.

Interaksi dengan peserta lain: Petani Sayur adalah satu-satunya aktor manusia aktif. Tidak ada peserta manusia lain yang menerima, menunggu, atau bertindak atas hasil kerja petani dalam lingkup aplikasi ini. Jawaban dan rekomendasi dihasilkan oleh proses sistem di belakang layar, bukan oleh manusia lain.

Keberhasilan yang dapat diamati: Petani memilih komoditas dan waktu tanam berdasarkan informasi harga dan rekomendasi tanam, sehingga tidak lagi mengalami kerugian akibat harga anjlok atau melimpahnya stok.

Yang membedakan peran ini: Petani Sayur bukan pengguna dashboard analitik. Mereka bekerja di lapangan, sering di bawah sinar matahari, sebagian gaptek, dan sebagian sulit membaca grafik. Kebutuhan mereka adalah sinyal yang jelas dan langsung dapat ditindaklanjuti — bukan eksplorasi data. Karena itu, aplikasi harus sederhana, dapat dioperasikan dengan suara, dan menyajikan harga sebagai baris yang dapat dibaca sekilas.

5. Core User Flows

Flow 1 — Petani melihat harga pasar sebelum memutuskan menanam

1. Konteks awal: Petani Sayur baru pulang dari sawah dan ingin tahu harga sayur di pasar hari ini sebelum memutuskan apa yang akan ditanam.
2. Petani membuka halaman Landing.
3. Petani melihat judul "Tahu harga sayur sebelum menanam." dan strip sinyal harga berisi chip komoditas dengan titik warna kode, nama sayur, harga hari ini dalam angka tabular, dan panah arah (↑ hijau, ↓ merah, → abu-abu).
4. Petani menggeser strip secara horizontal untuk melihat komoditas lain.
5. Hasil yang dapat diamati: Petani melihat harga hari ini dan arah perubahan tiap komoditas.
6. Petani memilih titik masuk 3 Lihat harga untuk melihat lebih lengkap.
7. Petani tiba di halaman Prices dan membaca baris harga: setiap sayur tampil sebagai satu baris penuh dengan titik warna kode, nama besar, harga tabular, panah arah, dan bar horizontal sederhana berujung membulat dengan label nilai besar.
8. Hasil yang dapat diamati: Petani memahami komoditas mana yang harganya sedang naik, turun, atau stabil.
9. Langkah berikutnya: Petani membuka halaman Ask untuk menanyakan apakah komoditas tertentu cocok ditanam.
10. Kegagalan dan pemulihan: Bila data harga gagal dimuat, halaman Prices menampilkan "Data harga gagal dimuat" dengan tombol "Coba lagi"; petani menekan tombol tersebut dan daftar dimuat ulang. Bila data belum tersedia, pesan "Belum ada data harga" muncul dengan tombol "Muat ulang".

Flow 2 — Petani bertanya lewat teks tentang sayur yang cocok ditanam

1. Konteks awal: Petani Sayur sudah melihat harga di halaman Prices dan ingin tahu sayur apa yang cocok ditanam berikutnya.
2. Petani membuka halaman Ask.
3. Petani mengetik pertanyaan tentang sayuran yang cocok ditanam di kolom input teks.
4. Petani menekan tombol kirim.
5. Hasil yang dapat diamati: Indikator "Sedang mencari jawaban…" tampil, lalu jawaban/rekomendasi muncul dengan alasan berbasis kondisi harga serta stok pasar.
6. Petani membaca jawaban dan memutuskan komoditas yang akan ditanam.
7. Langkah berikutnya: Petani membuka halaman Prices untuk memverifikasi harga komoditas yang direkomendasikan.
8. Kegagalan dan pemulihan: Bila jawaban gagal diperoleh, pesan "Jawaban belum bisa diambil" muncul dengan tombol "Coba lagi"; pertanyaan terakhir tetap terlihat sehingga petani dapat mengirim ulang tanpa mengetik ulang.

Flow 3 — Petani gaptek bertanya lewat voice note

1. Konteks awal: Petani Sayur yang gaptek merasa sulit mengetik dan ingin bertanya dengan suara.
2. Petani membuka halaman Voice Note (dari Landing titik masuk 2 Rekam suara, atau dari halaman Ask).
3. Petani melihat pesan "Tekan tombol untuk mulai bicara" dan tombol rekam bulat besar.
4. Petani menekan tombol rekam dan mulai berbicara.
5. Hasil yang dapat diamati: Titik merah berdenyut menandai status merekam dan waveform bar vertikal sederhana tampil mengikuti suara.
6. Petani berhenti merekam.
7. Hasil yang dapat diamati: Baris transkrip "Kami dengar: …" menampilkan pertanyaan yang dikenali, sehingga petani yakin pertanyaannya dipahami.
8. Petani menekan tombol kirim.
9. Hasil yang dapat diamati: Jawaban/rekomendasi muncul berdasarkan kondisi harga serta stok pasar.
10. Langkah berikutnya: Petani dapat merekam pertanyaan lain atau membuka halaman Prices untuk memeriksa harga.
11. Kegagalan dan pemulihan: Bila izin mikrofon ditolak atau rekaman gagal, pesan "Mikrofon tidak bisa dipakai" muncul dengan opsi "Coba lagi" dan tautan ke halaman Ask untuk mengetik; petani dapat merekam ulang atau beralih ke input teks tanpa kehilangan konteks pertanyaan.

Flow 4 — Petani memutuskan waktu tanam berdasarkan harga dan rekomendasi

1. Konteks awal: Petani Sayur sudah melihat harga di halaman Prices dan sudah menerima rekomendasi di halaman Ask atau Voice Note.
2. Petani membandingkan arah harga komoditas yang direkomendasikan dengan harga komoditas lain di halaman Prices.
3. Hasil yang dapat diamati: Petani melihat komoditas mana yang harganya sedang naik (↑ hijau), turun (↓ merah), atau stabil (→ abu-abu).
4. Petani memutuskan komoditas dan waktu tanam yang menghindari pola "menanam setelah harga naik" yang menyebabkan harga pasar turun/anjlok akibat stok melimpah.
5. Langkah berikutnya: Petani kembali ke halaman Ask atau Voice Note bila ingin memverifikasi keputusan dengan pertanyaan lanjutan.
6. Kegagalan dan pemulihan: Bila data harga atau jawaban tidak tersedia saat keputusan akan diambil, petani dapat menekan "Coba lagi" pada halaman terkait atau menunggu data tersedia kembali sebelum memutuskan.

6. Visuals Colors and Theme

Muse: Erik Spiekermann — typographic infrastructure for farmers: information as wayfinding, warmth inside order.

Headline direction: "Tahu harga sayur sebelum menanam." — dirancang sebagai papan informasi publik, bukan dashboard SaaS.

Palet (light mode)

Proporsi: 70% warm ground, 20% panel putih, 7% hijau, 3% aksen merah dan warna sinyal. Biru-di-atas-putih sebagai warna primer dilarang.

Tipografi

• Headings: Fira Sans, weight 700, tracking -0.01em, sentence case.
• Body: Fira Sans, weight 400/500, line-height 1.6.
• Labels: weight 600, small caps, tracking 0.08em (gaya signage transit).
• Angka: tabular figures (font-feature-settings: 'tnum') agar kolom harga sejajar seperti jadwal.

Skala (modular 1.25, mobile-first, via clamp()):

Line-height: 1.15 untuk display, 1.6 untuk body. Semua ukuran via clamp() agar tidak terpotong di 375px.

Shape language

• Kartu dan kontrol: rounded rectangle 8–12px radius (approachable, bukan pill).
• Garis pemisah: hairline 1px muted grey, memisahkan baris informasi seperti jadwal.
• Titik sinyal melingkar 12px dengan warna kode tetap per komoditas, konsisten di semua halaman.
• Input dan tombol: full-width di mobile, tinggi sentuh minimal 48px, radius 12px.
• Grafik: bar horizontal sederhana dengan ujung membulat dan label nilai besar — bukan garis tipis atau sumbu kompleks.
• Tanpa blob, tanpa glass, tanpa gradient fill; warna flat dan berkode.

Layout

• Single-column, gaya wayfinding. Mobile-first: semua bertumpuk vertikal dengan gutter 20px dan header seksi small-caps dengan garis berwarna di bawahnya.
• Desktop (1280px): kolom baca terpusat 720px dengan side rail sticky di kiri untuk navigasi bernomor (1. Tanya, 2. Suara, 3. Harga).
• Halaman Prices: baris bar horizontal besar — setiap sayur satu baris penuh dengan titik warna kode, nama besar, harga tabular, dan panah ↑↓→. Tidak ada chart multi-seri.
• Kartu adalah panel putih di atas warm ground, tidak mengambang dengan shadow — duduk flat dengan border hairline, seperti panel informasi tercetak.

Imagery

• Fotografi dokumenter dan informasional: sayur nyata difoto straight-on di atas warm ground, seperti potret hasil pasar — tanpa staging lifestyle, tanpa stok orang.
• Setiap komoditas mendapat satu potret konsisten.
• Ikon pictogram sederhana (tradisi wayfinding Spiekermann): mikrofon untuk suara, balon bicara untuk tanya, glyph grafik batang untuk harga, daun untuk saran tanam.
• Grafik adalah imagery utama di halaman Prices — harus indah dalam kejelasannya, seperti diagram transit.
• Tanpa gradient, tanpa render 3D, tanpa ilustrasi demi ilustrasi.

7. Signature Design Concept

Konsep: Papan Keberangkatan Harga — hero Landing sebagai papan informasi publik yang langsung menjawab "harga sedang apa sekarang."

Hero Landing adalah panel warm-paper full-width dengan judul rata kiri dalam Fira Sans 700 (clamp 40px mobile → 72px desktop) yang membentang hingga 9 kolom di desktop: "Tahu harga sayur sebelum menanam."

Di bawahnya, strip sinyal harga — baris full-bleed berisi 5 chip komoditas sayur, masing-masing dengan titik warna kode tetap, nama sayur, harga hari ini dalam angka tabular, dan panah arah (↑ hijau, ↓ merah, → abu-abu). Strip ini adalah visual dominan hero: ia terbaca seperti papan keberangkatan, langsung menjawab "harga sedang apa sekarang."

Di mobile, strip menjadi baris yang dapat digulir horizontal (overflow-x: auto, snap) di mana setiap chip terbaca penuh saat dibawa ke tampilan; dengan prefers-reduced-motion, strip membungkus menjadi dua baris.

Di bawah strip, tiga titik masuk bernomor (1 Tanya, 2 Rekam suara, 3 Lihat harga) duduk sebagai panel putih datar dengan border hairline dan pictogram kecil masing-masing — tanpa headline terpusat, tanpa tombol biru, tanpa gradient blob.

Seluruh hero flat, information-first, dan hanya bisa menjadi milik produk ini.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: Strip sinyal harga — deretan chip komoditas dengan titik warna kode, nama, harga tabular, dan panah arah.
• Input → transformation → outcome thesis: Saat halaman Landing dimuat, angka harga pada chip menghitung naik/turun selama 400ms dan panah arah muncul — mengubah data harga mentah menjadi sinyal yang langsung terbaca, sehingga petani dapat menilai arah pasar dalam sekali pandang.
• Motion vocabulary: Crossfade halaman 150ms; angka harga count up/down 400ms; bar grafik tumbuh dari kiri 500ms dengan ease-out; hover state berupa pergeseran warna instan (green tint pada baris interaktif); tombol voice note memiliki state merekam dengan titik merah berdenyut dan waveform bar vertikal sederhana. Tanpa bouncy easing, tanpa parallax, tanpa loop dekoratif.
• Composed first frame: Panel warm-paper dengan judul rata kiri "Tahu harga sayur sebelum menanam." dan strip sinyal harga sudah terisi penuh dengan 5 chip komoditas, masing-masing menampilkan titik warna, nama, harga tabular, dan panah arah; di bawahnya tiga panel putih bernomor dengan pictogram.
• Reduced-motion state: Angka tampil langsung tanpa count-up, bar grafik tampil penuh tanpa animasi tumbuh, waveform voice note diganti level meter statis, dan strip harga membungkus menjadi dua baris alih-alih menggulir.

9. Non-Functional Requirements

NFR-1 — Kesederhanaan untuk petani gaptek (provenance: explicit) Aplikasi harus sederhana dan mudah digunakan oleh petani yang gaptek. Setiap aksi memiliki label teks (bukan ikon saja), alur utama tidak lebih dari beberapa langkah, dan tidak ada pendaftaran akun yang menghalangi penggunaan.

• Rationale: Batasan eksplisit dari sumber; audiens utama kurang terbiasa dengan teknologi.

NFR-2 — Grafik sederhana yang dapat dibaca (provenance: explicit) Grafik yang ditampilkan harus sederhana dan dapat dibaca oleh petani yang sulit membaca grafik. Grafik menggunakan bar horizontal sederhana dengan ujung membulat dan label nilai besar, bukan garis tipis, sumbu kompleks, atau chart multi-seri.

• Rationale: Batasan eksplisit dari sumber.

NFR-3 — Voice note sebagai akomodasi gaptek (provenance: explicit) Voice note disediakan khusus untuk mengakomodasi petani yang gaptek. Tombol rekam harus besar dan jelas, dengan state merekam yang terlihat (titik merah berdenyut dan waveform), serta transkrip "Kami dengar: …" agar petani yakin pertanyaannya dipahami.

• Rationale: Batasan eksplisit dari sumber.

NFR-4 — Legibilitas di lapangan (provenance: required_inference) Teks body tidak pernah di bawah 16px; kontrol memiliki tinggi sentuh minimal 48px; semua ukuran menggunakan clamp() agar tidak terpotong di 375px; angka harga menggunakan tabular figures agar kolom sejajar.

• Rationale: Diperlukan agar batasan kesederhanaan dan keterbacaan grafik benar-benar terpenuhi bagi petani yang bekerja di lapangan di bawah sinar matahari.

NFR-5 — Akses tanpa akun (provenance: required_inference) Keempat halaman (Landing, Ask, Voice Note, Prices) dapat diakses tanpa akun. Tidak ada identitas pengguna yang perlu dibuat atau diverifikasi.

• Rationale: Informasi harga pasar bersifat publik dan audiens adalah petani gaptek yang tidak boleh dihalangi oleh pendaftaran; tidak ada state pribadi, komitmen, atau nilai yang perlu terikat pada peserta tertentu.

NFR-6 — Aksesibilitas gerak (provenance: required_inference) Aplikasi menghormati prefers-reduced-motion: angka tampil langsung, bar grafik tampil penuh, waveform voice note diganti level meter statis, dan strip harga membungkus menjadi dua baris.

• Rationale: Diperlukan agar animasi tidak menghalangi pembacaan informasi bagi petani yang sensitif terhadap gerak atau menggunakan perangkat dengan pengaturan pengurangan gerak.

NFR-7 — Teks dan kontrol tetap utuh di setiap viewport (provenance: required_inference) Headline, label, angka, teks kartu, dan kontrol tetap sepenuhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...)) agar muat. Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca.

• Rationale: Diperlukan agar batasan keterbacaan terpenuhi di semua ukuran layar yang digunakan petani.

10. Tech Stack

• Frontend: React (web) — aplikasi web sederhana dengan empat halaman (Landing, Ask, Voice Note, Prices).
• Backend: Python/FastAPI — melayani data harga pasar, mesin rekomendasi tanam, dan pemrosesan pertanyaan teks maupun suara.
• Storage: Penyimpanan data harga pasar dan data komoditas sayur (jenis penyimpanan spesifik tidak ditentukan oleh sumber).
• Voice input: Perekaman audio di sisi klien dan transkripsi di sisi backend untuk menghasilkan baris "Kami dengar: …".
• Deployment: Docker/docker-compose untuk menjalankan frontend dan backend secara bersamaan.

Catatan: Pilihan teknologi di atas adalah default yang wajar untuk aplikasi web sederhana; sumber tidak menetapkan teknologi tertentu selain referensi kesederhanaan ke Meta AI (yang bersifat non-wajib).

11. Assumptions and Constraints

Asumsi:

• A-1: Aplikasi berbentuk web app yang dapat dibuka di ponsel, karena petani menggunakannya di lapangan. (Default — tidak ditentukan oleh pengguna)
• A-2: Data harga pasar dan stok sayur tersedia dari sumber data backend; mekanisme pengumpulan data tidak ditentukan oleh sumber. (Default — tidak ditentukan oleh pengguna)
• A-3: Transkripsi suara menghasilkan teks bahasa Indonesia sederhana yang dapat ditampilkan sebagai baris "Kami dengar: …". (Default — tidak ditentukan oleh pengguna)
• A-4: Komoditas sayur yang ditampilkan mencakup sayur-sayur yang umum ditanam dan dijual di pasar sekitar pengguna; daftar pasti tidak ditentukan oleh sumber. (Default — tidak ditentukan oleh pengguna)

Batasan:

• C-1: Aplikasi harus sederhana dan mudah digunakan oleh petani yang gaptek. (explicit)
• C-2: Grafik harus sederhana dan dapat dibaca oleh petani yang sulit membaca grafik. (explicit)
• C-3: Voice note disediakan khusus untuk mengakomodasi petani yang gaptek. (explicit)
• C-4: Meta AI hanya menjadi acuan kesederhanaan, bukan spesifikasi wajib; tidak ada nama produk, salinan teks, atau kemampuan dari Meta AI yang diadopsi. (explicit)
• C-5: Palet biru-di-atas-putih sebagai warna primer dilarang; template SaaS indigo/blue-on-white generik dilarang untuk proyek ini. (explicit — creative direction)
• C-6: Font Inter, Roboto, Arial, Poppins, dan system-ui dilarang untuk headings dan body; headings dan body menggunakan Fira Sans. (explicit — creative direction)
• C-7: Tidak ada marketplace jual-beli, manajemen akun berlapis, modul logistik, atau fitur sosial. (required_inference — batas sempit agar fokus tetap pada informasi harga, rekomendasi tanam, dan jalur pertanyaan)

12. Glossary

• Petani Sayur: Aktor manusia aktif satu-satunya dalam aplikasi ini; petani yang menjual hasil panen sayur di pasar dan perlu mengetahui harga pasar serta rekomendasi tanam.
• Gaptek: Istilah Indonesia untuk orang yang kurang terbiasa atau kesulitan menggunakan teknologi; dalam konteks ini, petani yang lebih nyaman bertanya lewat suara daripada mengetik.
• Voice note: Rekaman suara pertanyaan petani yang dikirim melalui halaman Voice Note, disertai transkrip "Kami dengar: …".
• Strip sinyal harga: Deretan chip komoditas sayur di hero Landing, masing-masing dengan titik warna kode, nama, harga tabular, dan panah arah — terbaca seperti papan keberangkatan.
• Baris harga: Komponen di halaman Prices di mana setiap sayur ditampilkan sebagai satu baris penuh dengan titik warna kode, nama besar, harga tabular, panah arah, dan bar horizontal sederhana.
• Titik warna kode: Titik sinyal melingkar 12px dengan warna tetap per komoditas sayur, konsisten di semua halaman seperti jalur transit.
• Panah arah: Indikator ↑ (hijau, harga naik), ↓ (merah, harga turun), → (abu-abu, harga stabil).
• Tabular figures: Pengaturan font di mana setiap angka memiliki lebar sama, sehingga kolom harga sejajar seperti jadwal.
• Small caps label: Gaya label dengan huruf kapital kecil dan tracking 0.08em, digunakan untuk setiap label field dan header seksi.
• Warm paper ground: Warna latar #F4EFE6 yang menyerupai kertas koran atau papan pengumuman, menjadi dasar seluruh tampilan.