System Requirements Document for coral-makalah

1. Introduction

coral-makalah adalah aplikasi web berbahasa Indonesia yang menghasilkan kata pengantar makalah secara otomatis. Pengguna memasukkan tiga hal — nama, sekolah/kampus, dan judul makalah — lalu aplikasi menyusun kata pengantar makalah yang umum, siap diedit, dan siap disalin ke dalam makalah mereka.

Produk ini ditujukan untuk pelajar dan mahasiswa Indonesia yang sedang menyusun makalah dan membutuhkan kata pengantar yang cepat, rapi, dan layak secara akademik, tanpa harus menyusun sendiri kalimat pembuka yang baku. Seluruh antarmuka dan seluruh keluaran teks menggunakan bahasa Indonesia; tidak ada bagian produk yang menggunakan bahasa Inggris.

Nada produk adalah ketenangan, kredibilitas akademik, dan kehangatan — bukan kesan produk teknologi atau korporat. Pengguna harus merasa bahwa pekerjaan ini akan cepat selesai dan hasilnya rapi.

2. System Overview

coral-makalah adalah aplikasi web dengan antarmuka kustom (custom UI) yang terdiri atas tiga halaman publik: Landing, Generator, dan Editor Kata Pengantar. Ketiganya dapat diakses tanpa akun dan tanpa proses masuk (login) — tidak ada identitas aplikasi, tidak ada sesi pengguna, dan tidak ada penyimpanan permanen yang mengikat hasil kerja pada satu orang.

Alur kerja intinya sederhana dan berurutan secara alami:

1. Pengguna tiba di Landing, memahami apa yang dihasilkan aplikasi, lalu memulai.
2. Di Generator, pengguna mengisi nama, sekolah/kampus, dan judul makalah, lalu menekan tombol untuk menghasilkan kata pengantar.
3. Hasil muncul sebagai pratinjau dan diteruskan ke Editor Kata Pengantar, tempat pengguna menyunting teks, menyalinnya, atau mengunduhnya sebagai berkas .docx.

Aktor manusia tunggal yang diterima adalah Penulis Makalah. Tidak ada aktor manusia lain, tidak ada peran administratif, dan tidak ada kontrol izin berbasis peran — semua pengguna memiliki akses yang sama ke seluruh halaman dan seluruh kemampuan.

Batasan yang dikecualikan secara sempit:

• Keluaran kata pengantar harus dalam bahasa Indonesia; versi bahasa Inggris tidak diproduksi.
• Tidak ada akun pengguna, autentikasi, atau penyimpanan riwayat makalah lintas sesi.
• Tidak ada integrasi pihak ketiga, tidak ada basis data pengguna, dan tidak ada fitur kolaborasi.

2a. Product Interpretation and Delivery Boundary

coral-makalah adalah alat bantu penulisan sekali pakai (single-session tool). Pengguna datang dengan tiga potong informasi, menerima satu kata pengantar yang sudah jadi, menyuntingnya sebentar, lalu membawanya pergi. Karena tidak ada hubungan jangka panjang, komitmen, atau nilai yang perlu diikatkan pada identitas seseorang, aplikasi ini tidak memiliki kepemilikan identitas: tidak ada pendaftaran, tidak ada verifikasi, dan tidak ada halaman masuk. Ketiga halaman bersifat publik dan dapat dicapai langsung.

Batas pengiriman saat ini mencakup seluruh perjalanan dari halaman masuk hingga hasil akhir yang dapat disalin atau diunduh. Pekerjaan yang berada di luar batas ini — misalnya penyimpanan riwayat makalah, akun pengguna, atau keluaran multibahasa — tidak termasuk dalam cakupan saat ini dan tidak dijanjikan oleh dokumen ini.

2b. Page Content and Component Coverage

Landing

• Informasi/keadaan: Penjelasan singkat apa itu Generator Kata Pengantar Makalah, siapa penggunanya (pelajar dan mahasiswa Indonesia), dan apa yang akan dihasilkan (kata pengantar makalah berbahasa Indonesia yang siap diedit).
• Aksi utama: Tombol pill terracotta "Mulai Buat Kata Pengantar" yang membawa pengguna ke halaman Generator.
• Aksi pendukung: Tautan gulir ke bagian penjelasan tiga langkah; tidak ada aksi lain.
• Entitas domain: Tidak ada entitas data; halaman ini murni presentasional.
• Tanggung jawab komponen:
  • Blok hero asimetris: blok kiri 7 kolom berisi headline raksasa Jost "Kata pengantar makalah, selesai dalam satu menit." yang dipecah menjadi tiga baris dan menyentuh tepi kiri viewport, paragraf pengantar 18px, dan tombol pill terracotta.
  • Blok kanan 5 kolom: bidang terracotta penuh (#C9532F) berisi satu foto still-life meja belajar (mesin tik + tumpukan kertas) dengan sudut membulat 22px, sedikit keluar dari tepi kanan viewport.
  • Garis horizontal tipis walnut dengan nomor "01 02 03" yang menandai tiga langkah di bawah kedua blok.
  • Strip pola geometris mid-century (busur, lingkaran, kotak mustard/teal) setinggi 8px sebagai pemisah antar seksi.
• Keadaan:
  • Loading: Tidak berlaku — halaman statis tanpa pengambilan data.
  • Empty: Tidak berlaku.
  • Success: Halaman tampil penuh; tombol dapat diklik dan mengarah ke Generator.
  • Error: Tidak berlaku untuk halaman statis; jika navigasi gagal, pengguna tetap berada di Landing dan dapat mencoba lagi.
  • Recovery: Tidak berlaku.

Generator

• Informasi/keadaan: Panel input di kiri dengan tiga field berlabel uppercase bernomor langkah ("01 NAMA", "02 SEKOLAH/KAMPUS", "03 JUDUL MAKALAH"); panel pratinjau di kanan yang menampilkan kata pengantar hasil.
• Aksi utama: Tombol "Buat Kata Pengantar" yang menghasilkan teks kata pengantar berbahasa Indonesia dari ketiga masukan.
• Aksi pendukung: Tombol "Lanjut ke Editor" setelah hasil muncul; tombol "Buat Ulang" untuk menghasilkan versi baru dari masukan yang sama.
• Entitas domain: Nama penulis, sekolah/kampus, judul makalah, teks kata pengantar yang dihasilkan.
• Tanggung jawab komponen:
  • Panel input bergaya lembar kerja Eames: setiap field memiliki label uppercase Jost 13px dengan tracking 0.12em, nomor langkah, dan garis bawah tipis — bukan kotak input berbingkai.
  • Panel pratinjau: lembar kertas oat (#FBF6EC) dengan sudut membulat di atas latar krem, menampilkan teks kata pengantar 18px Literata dengan line-height 1.85 dan measure maksimal 68ch.
  • Tombol "Buat Kata Pengantar" pill terracotta yang menekan turun 2px saat diklik.
  • Pada mobile, kedua panel menumpuk vertikal dan tombol menempel penuh lebar.
• Keadaan:
  • Loading: Saat tombol "Buat" ditekan, panel pratinjau menampilkan keadaan menunggu; teks muncul baris demi baris dengan stagger 60ms.
  • Empty: Sebelum ada masukan, panel pratinjau menampilkan pesan ajakan singkat berbahasa Indonesia untuk mengisi ketiga field.
  • Success: Kata pengantar lengkap tampil di panel pratinjau; tombol "Lanjut ke Editor" menjadi aktif.

• Error: Jika salah satu field kosong, field tersebut ditandai dan pesan kesalahan berbahasa Indonesia muncul di bawahnya; tombol "Buat" tidak menghasilkan teks.
• Recovery: Pengguna melengkapi field yang ditandai lalu menekan "Buat" lagi; masukan yang sudah diisi tetap tersimpan di panel input.

Editor Kata Pengantar

• Informasi/keadaan: Satu kolom baca sempit (68ch) di tengah dengan teks kata pengantar 18px Literata/1.85, judul kata pengantar, dan garis aturan teal tipis di bawah judul.
• Aksi utama: Menyunting teks kata pengantar secara langsung di dalam kolom baca.
• Aksi pendukung: Tombol pill terracotta kecil "Salin" dan "Unduh .docx" yang menempel di kanan atas kolom; tombol "Kembali ke Generator" untuk mengubah masukan.
• Entitas domain: Teks kata pengantar yang sedang disunting, nama penulis, sekolah/kampus, judul makalah.
• Tanggung jawab komponen:
  • Toolbar tipis di atas kolom baca berisi tombol "Salin", "Unduh .docx", dan "Kembali ke Generator".
  • Kolom baca yang dapat disunting langsung (contenteditable atau textarea bergaya halaman buku).
  • Indikator status "Tersalin" berwarna teal tua (#2F6B63) yang muncul setelah tombol "Salin" ditekan.
  • Strip pola geometris mid-century sebagai pemisah di atas dan di bawah kolom baca.
• Keadaan:
  • Loading: Tidak berlaku — teks sudah tersedia dari Generator.
  • Empty: Jika pengguna tiba di halaman ini tanpa teks yang dihasilkan, kolom baca menampilkan pesan berbahasa Indonesia yang mengarahkan pengguna kembali ke Generator.
  • Success: Hasil suntingan tersimpan di kolom baca; tombol "Salin" menampilkan status "Tersalin"; tombol "Unduh .docx" mengunduh berkas.
  • Error: Jika penyalinan ke papan klip gagal, pesan kesalahan berbahasa Indonesia muncul dan pengguna dapat memilih teks secara manual.
  • Recovery: Pengguna dapat menekan "Salin" lagi atau kembali ke Generator untuk menghasilkan ulang.

3. Functional Requirements

FR-01 — Menghasilkan kata pengantar makalah berbahasa Indonesia As a Penulis Makalah, I should dapat menghasilkan kata pengantar makalah dalam bahasa Indonesia dari masukan saya, sehingga saya tidak perlu menyusun sendiri kalimat pembukanya.

• Provenance: explicit
• Aktor: Penulis Makalah
• Pemicu/masukan: Nama, sekolah/kampus, dan judul makalah yang diisi di halaman Generator; penekanan tombol "Buat Kata Pengantar".
• Hasil yang dapat diamati: Teks kata pengantar berbahasa Indonesia muncul di panel pratinjau, terisi baris demi baris dengan stagger 60ms.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Jika salah satu field kosong, field ditandai dan pesan kesalahan berbahasa Indonesia muncul; pengguna melengkapi lalu menekan "Buat" lagi.
• Kelanjutan: Pengguna menekan "Lanjut ke Editor" untuk menyunting hasil.

FR-02 — Mengisi nama, sekolah/kampus, dan judul makalah sebagai masukan As a Penulis Makalah, I should dapat mengisi nama, sekolah/kampus, dan judul makalah saya, sehingga kata pengantar yang dihasilkan memuat identitas dan konteks yang benar.

• Provenance: explicit
• Aktor: Penulis Makalah
• Pemicu/masukan: Pengetikan di tiga field berlabel "01 NAMA", "02 SEKOLAH/KAMPUS", "03 JUDUL MAKALAH".
• Hasil yang dapat diamati: Nilai tersimpan di panel input dan tercermin pada kata pengantar yang dihasilkan.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Field kosong ditandai dengan pesan kesalahan berbahasa Indonesia; nilai yang sudah diisi tetap tersimpan.
• Kelanjutan: Pengguna menekan "Buat Kata Pengantar".

FR-03 — Menyunting kata pengantar yang dihasilkan As a Penulis Makalah, I should dapat menyunting kata pengantar yang dihasilkan sebelum menggunakannya, sehingga hasil akhirnya sesuai dengan gaya dan kebutuhan makalah saya.

• Provenance: explicit
• Aktor: Penulis Makalah
• Pemicu/masukan: Pengetikan langsung di kolom baca 68ch pada halaman Editor Kata Pengantar.
• Hasil yang dapat diamati: Teks di kolom baca berubah sesuai suntingan pengguna.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Jika pengguna tiba tanpa teks yang dihasilkan, kolom baca menampilkan pesan berbahasa Indonesia yang mengarahkan kembali ke Generator.
• Kelanjutan: Pengguna menyalin atau mengunduh hasil suntingan.

FR-04 — Menyalin kata pengantar ke papan klip As a Penulis Makalah, I should dapat menyalin kata pengantar yang sudah saya sunting, sehingga saya dapat menempelkannya langsung ke dalam makalah saya.

• Provenance: required_inference
• Aktor: Penulis Makalah
• Pemicu/masukan: Penekanan tombol pill "Salin" di toolbar Editor Kata Pengantar.
• Hasil yang dapat diamati: Teks tersalin ke papan klip dan indikator "Tersalin" berwarna teal tua muncul.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Jika penyalinan gagal, pesan kesalahan berbahasa Indonesia muncul dan pengguna dapat memilih teks secara manual.
• Kelanjutan: Pengguna menempelkan teks ke dokumen makalahnya.

FR-05 — Mengunduh kata pengantar sebagai berkas .docx As a Penulis Makalah, I should dapat mengunduh kata pengantar sebagai berkas .docx, sehingga saya dapat membukanya di pengolah kata dan menggabungkannya dengan makalah saya.

• Provenance: required_inference
• Aktor: Penulis Makalah
• Pemicu/masukan: Penekanan tombol pill "Unduh .docx" di toolbar Editor Kata Pengantar.
• Hasil yang dapat diamati: Berkas .docx berisi teks kata pengantar terunduh ke perangkat pengguna.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Jika pengunduhan gagal, pengguna dapat menekan tombol lagi atau menyalin teks secara manual.
• Kelanjutan: Pengguna membuka berkas di pengolah kata.

FR-06 — Memahami aplikasi sebelum mulai bekerja As a Penulis Makalah, I should dapat memahami apa yang dihasilkan aplikasi ini dan siapa penggunanya sebelum mulai bekerja, sehingga saya yakin alat ini sesuai kebutuhan saya.

• Provenance: required_inference
• Aktor: Penulis Makalah
• Pemicu/masukan: Kunjungan ke halaman Landing.
• Hasil yang dapat diamati: Headline, paragraf pengantar, foto still-life meja belajar, dan penanda tiga langkah "01 02 03" tampil; tombol "Mulai Buat Kata Pengantar" tersedia.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Tidak berlaku untuk halaman statis; jika navigasi gagal, pengguna tetap di Landing dan dapat mencoba lagi.
• Kelanjutan: Pengguna menekan tombol untuk masuk ke Generator.

FR-07 — Menghasilkan ulang kata pengantar dari masukan yang sama As a Penulis Makalah, I should dapat menghasilkan ulang kata pengantar dari masukan yang sama, sehingga saya dapat membandingkan versi dan memilih yang paling sesuai.

• Provenance: required_inference
• Aktor: Penulis Makalah
• Pemicu/masukan: Penekanan tombol "Buat Ulang" di halaman Generator.
• Hasil yang dapat diamati: Versi baru kata pengantar muncul di panel pratinjau dengan animasi stagger yang sama.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Jika field kosong, field ditandai dan pesan kesalahan berbahasa Indonesia muncul.
• Kelanjutan: Pengguna memilih versi yang diinginkan dan melanjut ke Editor.

FR-08 — Menggunakan seluruh antarmuka dan keluaran dalam bahasa Indonesia As a Penulis Makalah, I should melihat seluruh antarmuka dan menerima seluruh keluaran dalam bahasa Indonesia, sehingga saya tidak perlu berurusan dengan teks berbahasa Inggris.

• Provenance: explicit
• Aktor: Penulis Makalah
• Pemicu/masukan: Setiap interaksi dengan aplikasi.
• Hasil yang dapat diamati: Semua label, tombol, pesan kesalahan, pesan kosong, dan teks kata pengantar yang dihasilkan menggunakan bahasa Indonesia.
• Keadaan akses: Publik, tanpa akun.
• Kegagalan/recovery: Tidak berlaku — ini adalah batasan tetap, bukan alur yang dapat gagal.
• Kelanjutan: Tidak berlaku.

4. User Personas

Penulis Makalah

Konteks produk: Penulis Makalah adalah pelajar atau mahasiswa Indonesia yang sedang menyusun makalah untuk keperluan sekolah atau kuliah. Ia biasanya bekerja di bawah tenggat waktu, sering di meja belajar dengan buku dan kertas berserakan, dan membutuhkan bagian pembuka makalah yang baku namun tetap terasa personal. Ia tidak ingin berurusan dengan perangkat lunak yang rumit atau antarmuka berbahasa Inggris.

Tujuan utama: Mendapatkan kata pengantar makalah berbahasa Indonesia yang rapi dan siap pakai dalam waktu sesingkat mungkin, lalu menyesuaikannya sedikit dan memindahkannya ke dalam makalahnya.

Tanggung jawab yang diterima:

• Mengisi nama, sekolah/kampus, dan judul makalah sebagai masukan (FR-02).
• Menekan tombol untuk menghasilkan kata pengantar (FR-01).
• Menyunting hasil di kolom baca (FR-03).
• Menyalin hasil ke papan klip (FR-04).
• Mengunduh hasil sebagai berkas .docx (FR-05).
• Menghasilkan ulang jika ingin membandingkan versi (FR-07).

Masukan dan keputusan: Tiga masukan wajib (nama, sekolah/kampus, judul makalah); keputusan tentang seberapa banyak suntingan yang diperlukan; keputusan tentang cara membawa hasil keluar (salin atau unduh).

Interaksi dengan peserta lain: Penulis Makalah adalah satu-satunya aktor manusia dalam produk ini. Tidak ada peserta manusia lain yang menerima, menyetujui, atau menindaklanjuti hasilnya di dalam aplikasi. Penerima akhir hasil adalah dokumen makalah pengguna sendiri, di luar aplikasi.

Keberhasilan yang dapat diamati: Kata pengantar berbahasa Indonesia yang lengkap, sudah disunting sesuai keinginan, dan berhasil disalin atau terunduh sebagai .docx.

Yang membedakan peran ini: Pekerjaannya adalah pekerjaan menulis, bukan pekerjaan mengoperasikan perangkat lunak. Ia menilai produk ini dari kecepatan, kerapian hasil, dan ketenangan tampilan — bukan dari jumlah fitur. Karena itu seluruh pengalaman dirancang sebagai meja belajar, bukan dasbor.

5. Core User Flows

Alur 1 — Dari halaman masuk hingga kata pengantar siap pakai

1. Penulis Makalah membuka aplikasi dan tiba di halaman Landing.
2. Ia membaca headline "Kata pengantar makalah, selesai dalam satu menit.", paragraf pengantar, dan penanda tiga langkah "01 02 03". Ia melihat foto still-life meja belajar di blok terracotta di sebelah kanan.
3. Ia menekan tombol pill terracotta "Mulai Buat Kata Pengantar" dan berpindah ke halaman Generator.
4. Di panel input kiri, ia mengisi tiga field berlabel uppercase bernomor: "01 NAMA", "02 SEKOLAH/KAMPUS", dan "03 JUDUL MAKALAH".
5. Ia menekan tombol "Buat Kata Pengantar". Tombol menekan turun 2px.
6. Panel pratinjau di kanan terisi: teks kata pengantar berbahasa Indonesia muncul baris demi baris dengan stagger 60ms di atas lembar kertas oat (#FBF6EC) bersudut membulat.
7. Ia membaca hasilnya. Jika ingin versi lain, ia menekan "Buat Ulang" dan menunggu animasi stagger yang sama; jika sudah puas, ia melanjutkan.
8. Ia menekan "Lanjut ke Editor" dan berpindah ke halaman Editor Kata Pengantar.
9. Di kolom baca 68ch, ia menyunting kalimat yang ingin diubah langsung di tempat. Garis aturan teal tipis berada di bawah judul kata pengantar.
10. Ia menekan tombol pill terracotta kecil "Salin" di kanan atas kolom. Indikator "Tersalin" berwarna teal tua muncul.
11. Ia membuka makalahnya dan menempelkan teks kata pengantar.
12. Hasil yang dapat diamati: Kata pengantar berbahasa Indonesia yang sudah disunting berada di dalam dokumen makalahnya.

Kegagalan dan pemulihan: Jika pada langkah 5 salah satu field masih kosong, field tersebut ditandai dan pesan kesalahan berbahasa Indonesia muncul di bawahnya; tombol "Buat" tidak menghasilkan teks. Nilai yang sudah diisi tetap tersimpan, sehingga ia cukup melengkapi field yang ditandai lalu menekan "Buat" lagi. Jika pada langkah 10 penyalinan ke papan klip gagal, pesan kesalahan berbahasa Indonesia muncul dan ia dapat memilih teks secara manual.

Kelanjutan: Setelah menempelkan teks, pekerjaannya selesai. Jika ia ingin mengubah masukan, ia menekan "Kembali ke Generator" dari toolbar editor.

Alur 2 — Mengunduh kata pengantar sebagai berkas .docx

1. Penulis Makalah sudah berada di halaman Editor Kata Pengantar dengan teks kata pengantar yang sudah disunting.
2. Ia menekan tombol pill terracotta kecil "Unduh .docx" di kanan atas kolom baca.
3. Berkas .docx berisi teks kata pengantar terunduh ke perangkatnya.
4. Hasil yang dapat diamati: Berkas .docx tersimpan di perangkat pengguna.
5. Ia membuka berkas tersebut di pengolah kata dan menggabungkannya dengan makalahnya.

Kegagalan dan pemulihan: Jika pengunduhan gagal, ia dapat menekan tombol "Unduh .docx" lagi atau menyalin teks secara manual dengan tombol "Salin".

Kelanjutan: Pekerjaannya selesai setelah berkas berhasil dibuka di pengolah kata.

Alur 3 — Menghasilkan ulang untuk membandingkan versi

1. Penulis Makalah berada di halaman Generator setelah menghasilkan satu versi kata pengantar.
2. Ia merasa versi pertama kurang sesuai dan menekan "Buat Ulang" tanpa mengubah masukan.
3. Panel pratinjau terisi kembali dengan versi baru, baris demi baris dengan stagger 60ms.
4. Hasil yang dapat diamati: Versi baru kata pengantar tampil di panel pratinjau.
5. Ia membandingkan versi dan memilih yang paling sesuai, lalu menekan "Lanjut ke Editor".

Kegagalan dan pemulihan: Jika field masukan menjadi kosong, field ditandai dan pesan kesalahan berbahasa Indonesia muncul; ia melengkapi field tersebut lalu menekan "Buat Ulang" lagi.

Kelanjutan: Ia melanjutkan ke Editor Kata Pengantar dengan versi yang dipilih.

Alur 4 — Tiba di Editor tanpa teks yang dihasilkan

1. Penulis Makalah membuka halaman Editor Kata Pengantar secara langsung tanpa melalui Generator.
2. Kolom baca menampilkan pesan berbahasa Indonesia yang mengarahkannya kembali ke Generator.
3. Ia menekan "Kembali ke Generator".
4. Hasil yang dapat diamati: Ia berada di halaman Generator dengan panel input siap diisi.
5. Ia mengisi ketiga field dan melanjutkan seperti pada Alur 1.

Kegagalan dan pemulihan: Tidak ada kegagalan tambahan; pesan kosong sudah menjadi jalur pemulihannya.

Kelanjutan: Ia menyelesaikan Alur 1 dari langkah 4.

6. Visuals Colors and Theme

Arah kreatif proyek ini adalah Warm modernism untuk makalah sekolah — walnut, mustard, teal, dan ketenangan sebuah mesin tik. Muse-nya adalah Charles & Ray Eames. Register emosinya adalah ketenangan, kredibilitas akademik, dan kehangatan — bukan startup atau korporat.

Headline arah: Kata pengantar makalah, selesai dalam satu menit.

Palet (light mode)

Rasio warna: 70% krem/oat, 20% tinta, 7% terracotta, 3% teal + mustard.

Tipografi

• Headings: Jost — keluarga geometris hangat ala Futura, bahasa huruf poster Eames. Weight 500–600, tracking sedikit rapat (-0.01em), case kalimat normal (bukan ALL CAPS).
• Body: Literata.
• Skala: rasio 1.333 modular.
• Hero: clamp(44px, 9vw, 128px).
• Judul seksi: clamp(28px, 4vw, 52px).
• Subjudul: 22px / 20px.
• Body: 17px dengan line-height 1.7.
• Label: 13px uppercase, tracking 0.12em, Jost 500.
• Teks keluaran kata pengantar: 18px Literata, line-height 1.85, measure maksimal 68ch.

Bahasa bentuk

Bentuk organik-modern: sudut membulat lembut (radius 14–22px pada panel, 999px pada tombol pill), panel-panel modular dengan tepi lurus di sisi grid, dan satu atau dua bentuk lengkung besar (setengah lingkaran, lengkung kursi Eames) sebagai elemen dekoratif di latar. Garis pemisah tipis 1px warna walnut pada 20% opacity. Tidak ada shadow tebal — kedalaman datang dari lapisan bidang warna, bukan bayangan.

Tata letak

Grid modular 12 kolom dengan gutter 24px dan margin luar besar (64px di desktop, 20px di mobile). Halaman Generator dibagi dua panel: kiri panel input dengan label uppercase dan garis bawah, kanan panel pratinjau yang langsung terisi. Di mobile panel menumpuk vertikal dan tombol menempel penuh lebar. Halaman Editor memakai satu kolom baca sempit (68ch) di tengah dengan toolbar tipis di atas — meniru halaman buku. Setiap seksi dipisahkan oleh garis horizontal tipis dengan nomor langkah di kiri, seperti diagram instruksi furnitur.

Gaya citra

Fotografi still-life dengan cahaya alami: meja kayu, tumpukan buku, mesin tik, cangkir keramik, kertas di atas meja — semuanya hangat dan tidak berpose. Ikon garis tebal sederhana (pena, kertas, tanda kutip) dalam gaya diagram Eames. Pola dekoratif geometris mid-century (lingkaran, busur, kotak berselang) sebagai tekstur latar di seksi, bukan sebagai hero. Tanpa ilustrasi karakter, tanpa foto orang tersenyum ke kamera.

Yang dihindari

• Latar putih bersih dengan aksen biru/indigo dan tombol biru — dilarang total.
• Font Inter, Roboto, Poppins, atau system-ui untuk heading maupun body.
• Hero terpusat dengan headline + subteks + tombol + gradien blob.
• Grid kartu identik dengan hover-lift dan shadow tebal.
• Sudut tajam 0px dan garis hitam tegas ala Swiss.
• Ilustrasi karakter kartun, emoji besar, atau foto stok orang tersenyum.
• Warna neon, gradien ungu-pink, atau glassmorphism.
• Animasi memantul, partikel, atau efek 3D yang mengalihkan perhatian dari teks.

7. Signature Design Concept

Konsep: Meja belajar Eames — halaman Landing disusun sebagai komposisi asimetris dua blok warna yang menyerupai panel furnitur Eames: satu panel terang berisi teks, satu panel terracotta penuh berisi foto still-life meja belajar.

Komposisi:

• Blok kiri (7 kolom): Headline raksasa Jost "Kata pengantar makalah, selesai dalam satu menit." dalam ukuran clamp(44px, 9vw, 128px), dipecah menjadi tiga baris, dan menyentuh tepi kiri viewport. Di bawahnya, paragraf pengantar 18px dan tombol pill terracotta "Mulai Buat Kata Pengantar".
• Blok kanan (5 kolom): Bidang terracotta penuh (#C9532F) yang memuat satu foto still-life meja belajar (mesin tik + tumpukan kertas) dengan sudut membulat 22px, sedikit keluar dari tepi kanan viewport.
• Di bawah kedua blok: Satu garis horizontal tipis walnut dengan nomor "01 02 03" yang menandai tiga langkah.

Yang tidak dilakukan: Tidak ada headline terpusat, tidak ada subteks + tombol biru, tidak ada gradien blob.

Gerakan khas yang membangun konsep ini:

• Headline hero raksasa Jost 44px→128px yang menyentuh tepi kiri viewport dan dipecah menjadi tiga baris, dengan blok warna terracotta penuh di sebelah kanan sebagai penyeimbang.
• Panel input bergaya lembar kerja Eames: setiap field punya label uppercase Jost 13px tracking 0.12em dengan nomor langkah ("01 NAMA", "02 SEKOLAH/KAMPUS", "03 JUDUL MAKALAH") dan garis bawah tipis, bukan kotak input berbingkai.
• Pratinjau kata pengantar muncul sebagai lembar kertas oat (#FBF6EC) dengan sudut membulat di atas latar krem, dan teksnya terisi baris demi baris dengan stagger 60ms setiap kali pengguna menekan "Buat".
• Toolbar editor meniru halaman buku: satu kolom baca 68ch dengan Literata 18px/1.85, tombol "Salin" dan "Unduh .docx" sebagai pill terracotta kecil yang menempel di kanan atas kolom, dan garis aturan teal tipis di bawah judul kata pengantar.
• Deretan pola geometris mid-century (busur, lingkaran, kotak mustard/teal) sebagai strip tipis 8px yang membentang penuh di antara seksi — pengganti divider biasa, dan bergeser 20px saat scroll.

Aturan keterbacaan: Headline, wordmark, label, nomor, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px — membungkus atau menskalakan (misalnya 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. Citra, dekorasi, dan gerakan mengikuti arah kreatif: foto, karya seni, bentuk, tekstur, atau animasi boleh dipotong, keluar dari tepi, diputar, ditumpuk, atau dipotong persis seperti yang diminta arah — selama tidak menutupi teks atau kontrol yang dapat dibaca.

8. Interaction Model & Motion Direction

Interaction Model: Parallax Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

Subjek fokus: Foto still-life meja belajar — mesin tik dan tumpukan kertas — di dalam bidang terracotta penuh di blok kanan hero.

Tesis input → transformasi → hasil: Saat pengguna menggulir halaman Landing, bentuk lengkung besar di latar bergeser pelan (parallax 20px) dan strip pola geometris mid-century ikut bergeser 20px, sehingga komposisi dua blok warna terasa seperti panning kamera Eames yang lambat — pengguna merasakan kedalaman meja belajar tanpa ada elemen yang bergerak lebih cepat dari bacaannya.

Kosakata gerakan: Transisi 500–700ms dengan easing halus; parallax 20px pada bentuk lengkung latar dan strip pola geometris; tanpa bounce; tanpa partikel.

Bingkai pertama yang tersusun: Blok kiri 7 kolom dengan headline Jost raksasa tiga baris yang menyentuh tepi kiri viewport, paragraf pengantar 18px, dan tombol pill terracotta; blok kanan 5 kolom terracotta penuh dengan foto still-life bersudut membulat 22px yang sedikit keluar dari tepi kanan viewport; garis horizontal tipis walnut dengan nomor "01 02 03" di bawah kedua blok.

Keadaan reduced-motion: Semua gerakan parallax dan stagger dinonaktifkan. Bentuk lengkung latar dan strip pola geometris tetap pada posisi statisnya. Teks kata pengantar di panel pratinjau muncul sekaligus, bukan baris demi baris. Tombol tetap menekan turun 2px saat diklik sebagai umpan balik taktil, karena itu bukan gerakan yang mengalihkan perhatian.

9. Non-Functional Requirements

NFR-01 — Bahasa keluaran dan antarmuka Seluruh keluaran kata pengantar dan seluruh antarmuka harus menggunakan bahasa Indonesia; tidak menggunakan bahasa Inggris. (Provenance: explicit. Rasional: batasan keras yang dinyatakan pengguna.)

NFR-02 — Keterbacaan di semua viewport Headline, wordmark, label, nomor, teks kartu, dan kontrol harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan agar muat. Tidak ada elemen lain yang boleh menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. (Provenance: explicit. Rasional: aturan keterbacaan dari arah kreatif.)

NFR-03 — Aksesibilitas gerakan Dengan prefers-reduced-motion, aplikasi harus menyediakan susunan statis yang dapat digunakan: gerakan parallax dan stagger dinonaktifkan, dan setiap item tetap dapat dibaca sepenuhnya. (Provenance: explicit. Rasional: aturan arah kreatif.)

NFR-04 — Tanpa akun dan tanpa penyimpanan permanen Aplikasi tidak boleh mewajibkan akun, login, atau penyimpanan riwayat makalah lintas sesi. (Provenance: required_inference. Rasional: tidak ada hubungan jangka panjang, komitmen, atau nilai yang perlu diikatkan pada identitas seseorang dalam alur yang diterima.)

NFR-05 — Kinerja animasi Transisi panel pratinjau harus selesai dalam 500–700ms dengan easing halus, dan stagger teks harus 60ms per baris, sehingga pengguna tidak menunggu lebih lama dari yang diperlukan untuk membaca. (Provenance: explicit. Rasional: arah kreatif menetapkan tempo gerakan.)

NFR-06 — Konsistensi visual Palet, tipografi, bahasa bentuk, dan tata letak harus mengikuti arah kreatif secara konsisten di ketiga halaman. (Provenance: explicit. Rasional: arah kreatif bersifat otoritatif untuk bagian visual.)

10. Tech Stack

• Frontend: React (aplikasi web dengan antarmuka kustom untuk tiga halaman: Landing, Generator, Editor Kata Pengantar).
• Backend: Python/FastAPI untuk menyusun teks kata pengantar berbahasa Indonesia dari masukan nama, sekolah/kampus, dan judul makalah, serta untuk menghasilkan berkas .docx yang dapat diunduh.
• Penyimpanan: Tidak ada basis data pengguna. Aplikasi tidak menyimpan riwayat makalah lintas sesi; teks kata pengantar hidup di dalam sesi halaman pengguna.
• Kontainerisasi: Docker dan docker-compose untuk menjalankan frontend dan backend sebagai satu kesatuan yang dapat dijalankan secara lokal.
• Kubernetes: Tidak diperlukan untuk cakupan saat ini.

11. Assumptions and Constraints

Asumsi:

• A-01: Kata pengantar yang dihasilkan bersifat umum dan baku, sesuai permintaan pengguna ("yang umum aja"), dan dapat disunting pengguna untuk penyesuaian pribadi.
• A-02: Teks kata pengantar yang dihasilkan memuat nama, sekolah/kampus, dan judul makalah yang diisi pengguna, karena ketiganya adalah masukan yang diminta.
• A-03: Aplikasi berjalan sebagai aplikasi web yang dapat diakses melalui peramban tanpa pemasangan tambahan.
• A-04: Pengguna bekerja dalam satu sesi halaman; tidak ada kebutuhan untuk melanjutkan pekerjaan di lain waktu.

Batasan:

• C-01: Keluaran kata pengantar harus dalam bahasa Indonesia; tidak menggunakan bahasa Inggris. (Explicit)
• C-02: Seluruh antarmuka menggunakan bahasa Indonesia, bukan bahasa Inggris. (Explicit)
• C-03: Tidak ada akun pengguna, autentikasi, atau penyimpanan riwayat makalah lintas sesi. (Required inference)
• C-04: Tidak ada integrasi pihak ketiga, tidak ada fitur kolaborasi, dan tidak ada keluaran multibahasa.
• C-05: Latar putih bersih dengan aksen biru/indigo dan tombol biru dilarang total. (Explicit, arah kreatif)
• C-06: Font Inter, Roboto, Poppins, atau system-ui dilarang untuk heading maupun body. (Explicit, arah kreatif)
• C-07: Animasi memantul, partikel, dan efek 3D yang mengalihkan perhatian dari teks dilarang. (Explicit, arah kreatif)

12. Glossary

• Kata Pengantar: Bagian pembuka makalah yang berisi ucapan syukur, tujuan penulisan, dan terima kasih kepada pihak-pihak yang membantu; ditulis dalam bahasa Indonesia yang baku.
• Makalah: Karya tulis akademik yang disusun oleh pelajar atau mahasiswa untuk keperluan sekolah atau kuliah.
• Penulis Makalah: Aktor manusia tunggal dalam produk ini — pelajar atau mahasiswa Indonesia yang menyusun makalah dan membutuhkan kata pengantar.
• Generator: Halaman tempat pengguna mengisi nama, sekolah/kampus, dan judul makalah lalu menghasilkan kata pengantar.
• Editor Kata Pengantar: Halaman tempat pengguna menyunting kata pengantar yang dihasilkan sebelum menyalin atau mengunduhnya.
• Landing: Halaman masuk publik yang menjelaskan aplikasi, siapa penggunanya, dan apa yang dihasilkan.
• Stagger: Kemunculan teks baris demi baris dengan jeda 60ms antar baris saat kata pengantar dihasilkan.
• Pill: Bentuk tombol dengan radius 999px (sepenuhnya membulat).
• Measure: Lebar maksimum kolom baca, ditetapkan 68ch untuk teks kata pengantar.
• Warm modernism: Bahasa desain yang menggabungkan struktur grid modular dengan kehangatan warna kayu/oat, mengacu pada karya Charles & Ray Eames.