System Requirements Document for gentle-tulang

1. Introduction

gentle-tulang adalah produk edukasi digital tentang jaringan tulang (bone tissue) untuk pembelajar anatomi di Indonesia. Produk ini menyediakan materi edukasi jaringan tulang yang dapat dipelajari pengguna secara mandiri — mencakup struktur, jenis, dan fungsi jaringan tulang — serta menyediakan ruang kerja terkelola bagi penyusun/pengelola materi untuk menyusun dan memperbarui isi edukasi tersebut.

Produk ini dibangun dengan semangat keheningan dan kepercayaan: materi disajikan seperti atlas anatomi tercetak — kolom baca terpusat, aturan rambut tipis, margin luas, dan satu spesimen mikrograf yang terang — bukan seperti dasbor SaaS yang ramai. Audiens membaca di ponsel di sela kelas dan di laptop untuk studi mendalam; pengelola materi memerlukan ruang kerja yang tenang dan tertata.

Audiens utama:

• Pelajar / Pembelajar Anatomi — mempelajari materi edukasi jaringan tulang secara mandiri dan berpindah antar topik untuk memperdalam pemahaman.
• Penyusun / Pengelola Materi Edukasi — menyediakan dan merawat isi edukasi jaringan tulang agar tetap akurat dan tersusun.

2. System Overview

gentle-tulang adalah aplikasi web dengan UI kustom milik aplikasi sendiri (app-owned identity, custom UI). Aplikasi menyediakan enam permukaan halaman yang menjadi kontrak informasi final:

Aktor:

• Pelajar / Pembelajar Anatomi (manusia) — membaca dan menelusuri materi.
• Penyusun / Pengelola Materi Edukasi (manusia) — menyusun dan memperbarui materi.
• Sistem aplikasi (non-persona) — menyimpan materi, menyajikan daftar, memverifikasi identitas pengelola, dan menegakkan pembatasan akses pada Content dan Content Editor.

Perilaku yang diterima (ringkas): menyediakan materi edukasi jaringan tulang yang dapat dipelajari; menelusuri kumpulan materi; membaca topik materi dan melanjutkan antar topik; menyusun dan memperbarui isi materi oleh pengelola terverifikasi.

Pengecualian sempit: tidak ada fitur gamifikasi (badge, streak, confetti, emoji bermain) di alur pembelajaran; tidak ada dasbor gelap padat untuk Content/Content Editor; tidak ada palet biru/indigo/violet atau template SaaS putih-pertama; tidak ada kartu hover-lift bersudut membulat atau tombol pil.

2a. Product Interpretation and Delivery Boundary

gentle-tulang adalah produk edukasi jaringan tulang yang dimiliki dan dijalankan oleh aplikasi sendiri (bukan provider eksternal, bukan headless). Seluruh permukaan halaman adalah UI kustom milik aplikasi.

Batas akses saat ini:

• Landing, Materials, dan Material Detail dapat diakses tanpa identitas — pembelajar dapat langsung membaca materi edukasi jaringan tulang tanpa membuat akun.
• Login adalah permukaan akses identitas yang dapat dibuka secara anonim; halaman ini tidak mengelola dirinya sendiri sebagai tujuan terlindungi.
• Content dan Content Editor adalah permukaan terbatas peran (role_restricted). Pengelola materi harus menerima provisioning atau undangan terlebih dahulu, lalu melakukan verifikasi kembali melalui Login sebelum dapat mengakses Content dan Content Editor. Identitas dimiliki aplikasi; pengelola tidak dapat mendaftar sendiri.

Batas saat ini vs. masa depan: Seluruh perilaku yang dijelaskan dalam dokumen ini adalah current (sekarang). Tidak ada horizon masa depan yang diterima dalam thread persyaratan; tidak ada halaman, modul, atau kemampuan masa depan yang ditambahkan.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang disuplai; bagian ini tidak berlaku dan tidak disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: Eyebrow label 11px uppercase tracked EDUKASI JARINGAN TULANG; satu mikrograf osteon persegi besar (hingga 560px di desktop) sebagai spesimen utama; headline display Jaringan tulang, dipahami perlahan dalam Shippori Mincho clamp(44px, 8vw, 104px) dengan leading rapat, menggantung satu baris di tepi bawah gambar; satu tautan teks dengan garis bawah tergambar Mulai dari struktur tulang → dalam aksen #8C5A3B; aturan rambut 1px di bawah gambar.
• Aksi utama: Membuka tautan Mulai dari struktur tulang → menuju Materials.
• Aksi pendukung: Tidak ada tombol berisi; tidak ada kartu; tidak ada gradien.
• Entitas domain: Materi edukasi jaringan tulang (koleksi), spesimen mikrograf osteon.
• Tanggung jawab komponen: Band kosong 10% viewport di atas; eyebrow; frame gambar persegi; headline yang menumpuk di tepi bawah gambar tanpa menutupi teks; tautan aksen dengan underline draw 200ms.
• State: Loading — gambar spesimen dimuat dengan latar #F4F1EA; Empty — tidak berlaku (konten statis); Success — stack tampil utuh; Error — jika gambar gagal dimuat, frame persegi tetap menampilkan latar #FBF9F5 dengan aturan rambut, headline dan tautan tetap terbaca; Recovery — tautan tetap dapat diklik menuju Materials.
• Responsif: Pada 375px, eyebrow, gambar, dan headline menumpuk dengan gutter 20px; headline membungkus menjadi tiga baris tanpa terpotong.

Login

• Informasi/state: Formulir verifikasi identitas untuk pengelola materi yang telah menerima provisioning/undangan; label kecil uppercase tracked; aturan rambut; tanpa kartu mengambang.
• Aksi utama: Memasukkan kredensial dan melakukan verifikasi untuk mengakses Content dan Content Editor.
• Aksi pendukung: Tidak ada pendaftaran mandiri (self-service sign-up) — akun berasal dari provisioning/undangan.
• Entitas domain: Identitas pengelola materi (dimiliki aplikasi), sesi terverifikasi.
• Tanggung jawab komponen: Field kredensial; tombol persegi dengan border charcoal 1px yang terisi charcoal saat hover; pesan galat inline; pengalihan ke Content setelah verifikasi berhasil.
• State: Loading — tombol menampilkan status verifikasi; Empty — field kosong dengan placeholder; Success — pengalihan ke Content; Error — kredensial tidak valid ditampilkan sebagai pesan inline tanpa menghapus input; Recovery — pengguna dapat mencoba lagi; jika belum menerima undangan, tidak ada jalur pendaftaran mandiri.

Materials

• Informasi/state: Daftar materi edukasi jaringan tulang sebagai tabel bergaris — baris rambut 1px, perataan tabular, padding baris 24–32px, tanpa zebra striping, tanpa kartu.
• Aksi utama: Membuka satu materi untuk dibaca di Material Detail.
• Aksi pendukung: Hover baris menghangatkan latar ke #FBF9F5 dan menggambar garis bawah aksen 1px pada judul.
• Entitas domain: Materi edukasi (judul, ringkasan, nomor pelajaran, metadata).
• Tanggung jawab komponen: Header kolom tabular; baris materi; label metadata 11px uppercase tracked; rail indeks kiri 200px di desktop yang runtuh menjadi strip bernomor horizontal yang dapat digulir di 768px dan 375px.
• State: Loading — baris rangka dengan aturan rambut; Empty — pesan tenang bahwa belum ada materi tersedia; Success — daftar materi tampil; Error — pesan galat dengan aksi coba lagi; Recovery — memuat ulang daftar.

Material Detail

• Informasi/state: Kolom baca terpusat 680px di desktop dengan rail indeks kiri 200px berisi nomor pelajaran 11px uppercase tracked dan aturan vertikal 1px; judul topik; isi materi tentang struktur, jenis, dan fungsi jaringan tulang; gambar spesimen persegi atau 4:3; caption gambar 13px #8A867C dengan penanda persegi kecil #8C5A3B di margin luar, muncul 150ms setelah gambar selesai.
• Aksi utama: Membaca materi; berpindah ke topik berikutnya/sebelumnya melalui indeks bernomor.
• Aksi pendukung: Kembali ke Materials.
• Entitas domain: Topik materi (judul, isi, gambar, caption, nomor pelajaran).
• Tanggung jawab komponen: Rail indeks (vertikal di desktop, strip horizontal yang dapat digulir di 768px/375px); kolom baca 62–68ch; frame gambar persegi/4:3 tanpa pembulatan; caption di margin luar.
• State: Loading — kolom baca dengan aturan rambut dan ruang gambar; Empty — pesan tenang jika topik tidak ditemukan; Success — materi tampil utuh; Error — pesan galat dengan tautan kembali ke Materials; Recovery — navigasi indeks tetap tersedia.

Content

• Informasi/state: Tinjauan materi edukasi yang tersedia bagi pengelola terverifikasi — tabel bergaris dengan baris rambut, padding 32px, tanpa kartu, latar paper-white #F4F1EA/#FBF9F5.
• Aksi utama: Membuka materi di Content Editor untuk disunting; membuat materi baru.
• Aksi pendukung: Menghapus atau menandai materi; hover baris menghangatkan latar dan menggambar garis bawah aksen pada judul.
• Entitas domain: Materi edukasi (judul, status, metadata, waktu pembaruan).
• Tanggung jawab komponen: Header kolom tabular; baris materi dengan aksi; label metadata 11px uppercase tracked; tombol persegi border charcoal 1px.
• State: Loading — baris rangka; Empty — pesan tenang bahwa belum ada materi; Success — daftar materi terkelola; Error — pesan galat dengan coba lagi; Recovery — memuat ulang; jika sesi tidak valid, pengalihan ke Login.
• Akses: role_restricted — hanya pengelola terverifikasi.

Content Editor

• Informasi/state: Ruang fokus untuk menyusun dan memperbarui isi materi edukasi jaringan tulang — kolom baca/penyuntingan terpusat, aturan rambut, latar paper-white, tanpa dasbor gelap padat.
• Aksi utama: Menyusun/memperbarui judul dan isi materi; menyimpan perubahan.
• Aksi pendukung: Menambahkan gambar spesimen dan caption; membatalkan perubahan; kembali ke Content.
• Entitas domain: Materi edukasi (judul, isi, gambar, caption, metadata).
• Tanggung jawab komponen: Field judul; area isi; kontrol gambar/caption; tombol simpan persegi border charcoal 1px yang terisi charcoal saat hover; pesan status simpan.
• State: Loading — memuat materi yang disunting; Empty — editor kosong untuk materi baru; Success — konfirmasi simpan; Error — pesan galat inline dengan input tetap utuh; Recovery — pengguna dapat mencoba menyimpan lagi; jika sesi tidak valid, pengalihan ke Login.
• Akses: role_restricted — hanya pengelola terverifikasi.

3. Functional Requirements

Setiap persyaratan menyertakan provenance: explicit (dinyatakan sumber), basic_default (default yang diterima), atau required_inference (mekanika yang diperlukan agar alur yang diterima dapat dijalankan).

FR-01 — Membangun produk edukasi tentang jaringan tulang (explicit) As a Penyusun / Pengelola Materi Edukasi, I should dapat menyediakan produk edukasi tentang jaringan tulang sehingga pembelajar memiliki sumber belajar yang tersusun.

• Aktor: Penyusun / Pengelola Materi Edukasi.
• Pemicu: Kebutuhan menyediakan materi edukasi jaringan tulang.
• Hasil teramati: Produk edukasi jaringan tulang tersedia dan dapat diakses pembelajar.
• Akses: Pengelola terverifikasi untuk permukaan terkelola.
• Kegagalan/pemulihan: Jika materi belum tersedia, pembelajar melihat state kosong yang tenang di Materials.
• Kelanjutan: Pengelola menyusun materi di Content Editor; pembelajar membacanya di Materials/Material Detail.

FR-02 — Menyediakan materi edukasi jaringan tulang yang dapat dipelajari pengguna (explicit) As a Pelajar / Pembelajar Anatomi, I should dapat mempelajari materi edukasi jaringan tulang sehingga saya memahami struktur, jenis, dan fungsi jaringan tulang.

• Aktor: Pelajar / Pembelajar Anatomi.
• Pemicu: Membuka Materials.
• Hasil teramati: Daftar materi edukasi jaringan tulang tampil dan dapat dibuka.
• Akses: Publik (none).
• Kegagalan/pemulihan: Jika daftar gagal dimuat, pesan galat dengan aksi coba lagi.
• Kelanjutan: Membuka satu materi di Material Detail.

FR-03 — Menelusuri kumpulan materi edukasi jaringan tulang (required_inference) As a Pelajar / Pembelajar Anatomi, I should dapat menelusuri kumpulan materi edukasi jaringan tulang sehingga saya menemukan topik yang ingin dipelajari.

• Aktor: Pelajar / Pembelajar Anatomi.
• Pemicu: Membuka Materials.
• Hasil teramati: Tabel bergaris berisi materi dengan judul dan metadata; hover baris menghangatkan latar dan menggambar garis bawah aksen pada judul.
• Akses: Publik (none).
• Kegagalan/pemulihan: State kosong tenang jika belum ada materi; state galat dengan coba lagi.
• Kelanjutan: Membuka materi di Material Detail.

FR-04 — Membaca topik materi tertentu (required_inference) As a Pelajar / Pembelajar Anatomi, I should dapat membaca topik materi tertentu sehingga saya memahami isi topik tersebut.

• Aktor: Pelajar / Pembelajar Anatomi.
• Pemicu: Memilih materi dari Materials.
• Hasil teramati: Kolom baca terpusat menampilkan judul, isi, gambar spesimen, dan caption.
• Akses: Publik (none).
• Kegagalan/pemulihan: Jika topik tidak ditemukan, pesan tenang dengan tautan kembali ke Materials.
• Kelanjutan: Berpindah ke topik lain melalui indeks bernomor.

FR-05 — Berpindah antar topik untuk memperdalam pemahaman (required_inference) As a Pelajar / Pembelajar Anatomi, I should dapat berpindah antar topik materi sehingga saya memperdalam pemahaman secara berurutan.

• Aktor: Pelajar / Pembelajar Anatomi.
• Pemicu: Menggunakan rail indeks bernomor di Material Detail.
• Hasil teramati: Topik berikutnya/sebelumnya tampil; rail indeks runtuh menjadi strip horizontal yang dapat digulir di 768px/375px.
• Akses: Publik (none).
• Kegagalan/pemulihan: Jika topik tujuan gagal dimuat, pesan galat dengan navigasi indeks tetap tersedia.
• Kelanjutan: Melanjutkan membaca topik berikutnya.

FR-06 — Menerima provisioning atau undangan sebelum mengelola materi (required_inference) As a Penyusun / Pengelola Materi Edukasi, I should menerima provisioning atau undangan sebelum dapat mengelola materi sehingga akses terkelola tetap terikat pada pengelola yang benar.

• Aktor: Penyusun / Pengelola Materi Edukasi.
• Pemicu: Pengelola baru ditambahkan oleh pihak yang menyediakan akses.
• Hasil teramati: Pengelola memiliki kredensial/undangan yang dapat diverifikasi.
• Akses: Tidak ada pendaftaran mandiri; akun berasal dari provisioning/undangan.
• Kegagalan/pemulihan: Tanpa undangan, tidak ada jalur pendaftaran mandiri di Login.
• Kelanjutan: Melakukan verifikasi melalui Login.

FR-07 — Verifikasi kembali melalui Login sebelum mengakses Content dan Content Editor (required_inference) As a Penyusun / Pengelola Materi Edukasi, I should melakukan verifikasi kembali melalui Login sebelum mengakses Content dan Content Editor sehingga materi terkelola hanya dapat diubah oleh pengelola terverifikasi.

• Aktor: Penyusun / Pengelola Materi Edukasi.
• Pemicu: Membuka Content atau Content Editor tanpa sesi terverifikasi.
• Hasil teramati: Setelah verifikasi berhasil, pengelola diarahkan ke Content.
• Akses: Login dapat dibuka anonim (none); Content dan Content Editor role_restricted.
• Kegagalan/pemulihan: Kredensial tidak valid menampilkan pesan inline tanpa menghapus input; pengguna dapat mencoba lagi.
• Kelanjutan: Mengelola materi di Content/Content Editor.

FR-08 — Meninjau materi edukasi yang tersedia (required_inference) As a Penyusun / Pengelola Materi Edukasi, I should dapat meninjau materi edukasi yang tersedia sehingga saya mengetahui materi mana yang perlu disusun atau diperbarui.

• Aktor: Penyusun / Pengelola Materi Edukasi.
• Pemicu: Membuka Content setelah verifikasi.
• Hasil teramati: Tabel bergaris menampilkan materi dengan judul, status, dan metadata pembaruan.
• Akses: role_restricted.
• Kegagalan/pemulihan: State kosong tenang jika belum ada materi; state galat dengan coba lagi; sesi tidak valid mengalihkan ke Login.
• Kelanjutan: Membuka materi di Content Editor.

FR-09 — Menyusun dan memperbarui isi materi edukasi jaringan tulang (required_inference) As a Penyusun / Pengelola Materi Edukasi, I should dapat menyusun dan memperbarui isi materi edukasi jaringan tulang sehingga materi tetap akurat dan tersusun.

• Aktor: Penyusun / Pengelola Materi Edukasi.
• Pemicu: Membuka Content Editor dari Content atau membuat materi baru.
• Hasil teramati: Judul dan isi materi tersimpan; konfirmasi simpan tampil.
• Akses: role_restricted.
• Kegagalan/pemulihan: Galat simpan ditampilkan inline dengan input tetap utuh; pengguna dapat mencoba lagi; sesi tidak valid mengalihkan ke Login.
• Kelanjutan: Kembali ke Content untuk meninjau materi yang diperbarui.

4. User Personas

Pelajar / Pembelajar Anatomi

Konteks produk: Pembelajar anatomi di Indonesia yang ingin memahami jaringan tulang secara edukatif. Ia membaca di ponsel di sela kelas dan di laptop untuk studi mendalam. Ia tidak memerlukan akun untuk membaca materi.

Tujuan utama: Mempelajari materi edukasi jaringan tulang — struktur, jenis, dan fungsi jaringan tulang — dan mencapai pemahaman melalui penelusuran materi secara mandiri.

Tanggung jawab berulang: Membuka materi edukasi jaringan tulang dan berpindah antar topik untuk memperdalam pemahaman.

Input/keputusan: Memilih topik dari daftar Materials; memutuskan urutan topik melalui indeks bernomor di Material Detail.

Interaksi dengan peserta lain: Tidak berinteraksi langsung dengan pengelola materi; ia menerima hasil kerja pengelola berupa materi yang tersedia dan akurat.

Keberhasilan teramati: Materi terbaca utuh dalam kolom baca terpusat dengan gambar spesimen dan caption; ia dapat berpindah antar topik tanpa hambatan.

Yang membedakan perannya: Fokusnya adalah membaca dan memahami — bukan mengelola. Ia tidak memiliki kontrol atas isi materi dan tidak memerlukan identitas untuk belajar.

Penyusun / Pengelola Materi Edukasi

Konteks produk: Pengguna yang bertanggung jawab menyediakan dan merawat isi edukasi jaringan tulang agar tetap akurat dan tersusun. Ia bekerja di ruang kerja paper-white yang tenang, bukan dasbor gelap padat.

Tujuan utama: Memastikan materi edukasi jaringan tulang tersedia dan dapat dipelajari oleh pembelajar.

Tanggung jawab berulang: Menyusun dan memperbarui konten materi edukasi jaringan tulang.

Input/keputusan: Menerima provisioning/undangan; memverifikasi identitas melalui Login; memutuskan materi mana yang perlu dibuat atau diperbarui; menyusun judul, isi, gambar, dan caption.

Interaksi dengan peserta lain: Hasil kerjanya dikonsumsi oleh Pelajar / Pembelajar Anatomi; ia bertanggung jawab atas akurasi dan keteraturan materi yang dibaca pembelajar.

Keberhasilan teramati: Materi tersimpan dan tampil di Content; pembelajar dapat membacanya di Materials/Material Detail.

Yang membedakan perannya: Fokusnya adalah menyusun dan merawat — ia memerlukan identitas terverifikasi dan akses terbatas peran, berbeda dari pembelajar yang membaca secara publik.

5. Core User Flows

Alur A — Pembelajar menelusuri dan membaca materi (Pelajar / Pembelajar Anatomi)

1. Pembelajar membuka Landing tanpa identitas. Ia melihat eyebrow EDUKASI JARINGAN TULANG, mikrograf osteon persegi besar, dan headline Jaringan tulang, dipahami perlahan.
2. Pembelajar memilih tautan Mulai dari struktur tulang → dan diarahkan ke Materials.
3. Di Materials, pembelajar melihat tabel bergaris berisi materi edukasi jaringan tulang dengan judul dan metadata. Ia menggerakkan kursor/ menyentuh baris; latar baris menghangat ke #FBF9F5 dan garis bawah aksen 1px tergambar pada judul.
4. Pembelajar memilih satu materi dan diarahkan ke Material Detail.
5. Di Material Detail, pembelajar membaca kolom terpusat 680px; gambar spesimen persegi tampil, lalu caption 13px #8A867C dengan penanda persegi #8C5A3B muncul 150ms setelah gambar selesai.
6. Pembelajar menggunakan rail indeks bernomor di kiri (atau strip horizontal yang dapat digulir di 768px/375px) untuk berpindah ke topik berikutnya.
7. Hasil teramati: Topik berikutnya tampil; pembelajar melanjutkan membaca.
8. Kegagalan/pemulihan: Jika topik gagal dimuat, pesan galat tampil dengan tautan kembali ke Materials; navigasi indeks tetap tersedia.
9. Kelanjutan: Pembelajar dapat kembali ke Materials untuk memilih topik lain.

Alur B — Pengelola menerima undangan dan memverifikasi identitas (Penyusun / Pengelola Materi Edukasi)

1. Pengelola menerima provisioning atau undangan dari pihak yang menyediakan akses. Tidak ada pendaftaran mandiri.
2. Pengelola membuka Login (dapat dibuka anonim).
3. Pengelola memasukkan kredensial dan memilih tombol persegi border charcoal 1px.
4. Hasil teramati: Setelah verifikasi berhasil, pengelola diarahkan ke Content.
5. Kegagalan/pemulihan: Jika kredensial tidak valid, pesan galat inline tampil tanpa menghapus input; pengelola dapat mencoba lagi.
6. Kelanjutan: Pengelola mengakses Content dan Content Editor.

Alur C — Pengelola meninjau dan memperbarui materi (Penyusun / Pengelola Materi Edukasi)

1. Pengelola terverifikasi membuka Content.
2. Ia melihat tabel bergaris berisi materi edukasi dengan judul, status, dan metadata pembaruan. Hover baris menghangatkan latar dan menggambar garis bawah aksen pada judul.
3. Pengelola memilih satu materi (atau membuat materi baru) dan diarahkan ke Content Editor.
4. Di Content Editor, pengelola menyusun/memperbarui judul dan isi materi; menambahkan gambar spesimen dan caption.
5. Pengelola memilih tombol simpan persegi border charcoal 1px.
6. Hasil teramati: Konfirmasi simpan tampil; materi tersimpan.
7. Kegagalan/pemulihan: Jika simpan gagal, pesan galat inline tampil dengan input tetap utuh; pengelola dapat mencoba lagi. Jika sesi tidak valid, pengelola diarahkan ke Login.
8. Kelanjutan: Pengelola kembali ke Content untuk meninjau materi yang diperbarui; pembelajar kemudian dapat membacanya di Materials/Material Detail.

6. Visuals Colors and Theme

Muse: Kenya Hara — estetika kehampaan; "white" sebagai konten; material alami; tipografi berbisik; ruang sunyi yang luas.

Headline arah: Emptiness as content — bone tissue education after Kenya Hara.

Palet (light mode):

Tidak ada blok warna lebih besar dari strip caption. Tidak ada biru/indigo/violet (#2563EB, #4F46E5, #6366F1 dilarang).

Tipografi:

• Headings: Shippori Mincho, weight 400–500, letter-spacing 0.02em (headings), 0.14em (label small caps). Sentence case untuk judul; uppercase hanya untuk label eyebrow 11px. Tidak pernah bold-black; hierarki dari ukuran dan ruang.
• Body: Zen Kaku Gothic New 400, 17–19px, line-height 1.85, measure 62–68ch.
• Skala: 1.25 modular dengan pengecualian editorial — display clamp(44px, 8vw, 104px), h1 32→52, h2 24→34, h3 20→24, body 17→19, caption 13, micro-label 11 uppercase tracked.

Shape language: Persegi dan hampir persegi; radius 0–2px; aturan rambut 1px #DCD6CA; frame gambar persegi atau 4:3 tanpa pembulatan. Tombol persegi dengan border charcoal 1px yang terisi charcoal saat hover; tanpa pil, tanpa bayangan, tanpa blob. Tidak ada kartu mengambang — konten duduk di kolom bergaris seperti atlas anatomi tercetak.

Layout: Kolom baca terpusat untuk Material Detail dan teks pelajaran, diapit margin luas di desktop dengan aturan vertikal tipis dan indeks bernomor kecil. Daftar (Materials, Content) adalah tabel bergaris: baris rambut, perataan tabular, padding baris 24–32px, tanpa zebra striping. Landing menggunakan stack tenang yang tinggi. Breakpoints: 375px kolom tunggal gutter 20px; 768px kolom tunggal gutter 48px dengan strip metadata dua kolom; 1280px kolom teks terpusat 680px dengan rail indeks kiri 200px.

Imagery: Fotografi still-life dan spesimen pada latar tak-berpemutih: makro potongan lintang tulang, mikrograf osteon dan sistem Haversian, satu render 3D osteosit yang bersih, tekstur material alami (kertas, batu, kayu) sebagai pemisah bagian. Semua citra didesaturasi ke arah netral hangat, dipotong persegi atau 4:3, subjek kecil dalam bidang kosong yang luas. Tanpa stok orang, tanpa clip art, tanpa gradient blob, tanpa ilustrasi ikon di luar diagram rambut.

7. Signature Design Concept

Layar pertama Landing adalah stack tenang yang tinggi, bukan hero SaaS terpusat:

1. Band kosong 10% viewport-height di atas.
2. Eyebrow 11px uppercase tracked: EDUKASI JARINGAN TULANG.
3. Satu mikrograf osteon persegi besar menempati lebar kolom penuh (hingga 560px di desktop), dengan aturan rambut 1px di bawahnya — satu-satunya "hero graphic" halaman; tanpa blok warna, tanpa gradien.
4. Headline display Jaringan tulang, dipahami perlahan dalam Shippori Mincho clamp(44px, 8vw, 104px) dengan leading rapat, menggantung satu baris di tepi bawah gambar; gambar dipotong di belakangnya dan tidak ada teks yang tertutup.
5. Satu tautan teks dengan garis bawah tergambar Mulai dari struktur tulang → dalam aksen #8C5A3B.

Elemen dominan adalah gambar spesimen dan hamparan kosong di sekitarnya. Tidak ada isian tombol, tidak ada gradien, tidak ada kartu. Pada 375px, eyebrow, gambar, dan headline menumpuk dengan gutter 20px; headline membungkus menjadi tiga baris tanpa terpotong.

Signature moves yang diimplementasikan:

• Mikrograf spesimen persegi selebar penuh pada latar paper-white dengan satu aturan rambut di bawahnya.
• Headline Shippori Mincho oversized yang menggantung satu baris di tepi bawah gambar spesimen.
• Rail indeks kiri 200px di desktop berisi nomor pelajaran 11px uppercase tracked dengan aturan vertikal 1px; runtuh menjadi strip bernomor horizontal yang dapat digulir di 768px dan 375px.
• Tabel bergaris untuk Materials dan Content dengan baris rambut dan padding 32px — tanpa kartu, tanpa hover-lift; hover baris hanya menghangatkan latar ke #FBF9F5 dan menggambar garis bawah aksen 1px pada judul.
• Caption gambar 13px #8A867C dengan penanda persegi kecil #8C5A3B, ditempatkan di margin luar kolom teks dan muncul setelah gambarnya selesai.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief:

• Focal subject: Mikrograf osteon persegi besar pada hamparan kertas putih tak-berpemutih.
• Input → transformation → outcome thesis: Saat halaman masuk, band kosong, eyebrow, gambar spesimen, dan headline muncul melalui fade opacity lambat 600–800ms; setelah gambar spesimen "mendarat", caption-nya memudar masuk 150ms kemudian. Tidak ada gerakan yang mengubah tata letak atau menuntut perhatian — hasilnya adalah stack tenang yang siap dibaca.
• Motion vocabulary: Fade opacity lambat 600–800ms pada entry bagian; underline draw 200ms pada hover tautan; caption fade-in 150ms setelah gambar selesai. Tanpa parallax, tanpa bounce, tanpa counter.
• Composed first frame: Band kosong 10% viewport di atas; eyebrow 11px uppercase tracked; mikrograf osteon persegi hingga 560px; headline Shippori Mincho clamp(44px, 8vw, 104px) menggantung satu baris di tepi bawah gambar; tautan aksen #8C5A3B dengan garis bawah tergambar.
• Reduced-motion state: Di bawah prefers-reduced-motion, semua fade langsung menuju keadaan akhir secara instan; tidak ada animasi yang tersisa.

9. Non-Functional Requirements

NFR-01 — Keterbacaan dan kontras (explicit — arah kreatif) Teks baca #2B2A26 pada latar #F4F1EA harus mencapai kontras ~12:1. Teks dan kontrol yang dapat dibaca tetap utuh di setiap viewport: headline, wordmark, 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(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun darinya.

NFR-02 — Aksesibilitas gerak (explicit — arah kreatif) Di bawah prefers-reduced-motion, semua fade diselesaikan secara instan ke keadaan akhir. Konten yang bergerak/dapat digulir (strip indeks horizontal) berhenti dan menampilkan item utuh: item membungkus ke baris, atau duduk dalam baris yang dapat digulir horizontal (overflow-x: auto) yang item selanjutnya dicapai dengan menggulir.

NFR-03 — Batas akses terkelola (required_inference) Content dan Content Editor adalah role_restricted; hanya pengelola terverifikasi yang dapat mengaksesnya. Login dapat dibuka anonim dan tidak mengelola dirinya sendiri sebagai tujuan terlindungi.

NFR-04 — Identitas dimiliki aplikasi (required_inference) Identitas pengelola dimiliki aplikasi; akun berasal dari provisioning/undangan, bukan pendaftaran mandiri. Sesi terverifikasi mengikat pengelola pada materi yang dikelolanya.

NFR-05 — Integritas penyimpanan materi (required_inference) Materi yang disimpan pengelola harus tersedia bagi pembelajar di Materials dan Material Detail; kegagalan simpan harus ditampilkan inline tanpa kehilangan input.

NFR-06 — Responsivitas (explicit — arah kreatif) Breakpoints: 375px kolom tunggal gutter 20px; 768px kolom tunggal gutter 48px dengan strip metadata dua kolom; 1280px kolom teks terpusat 680px dengan rail indeks kiri 200px.

10. Tech Stack

• Frontend: React (aplikasi web dengan UI kustom).
• Backend: Python / FastAPI.
• Storage: Penyimpanan persisten untuk materi edukasi dan identitas pengelola (pilihan spesifik tidak ditentukan sumber; gunakan penyimpanan yang sesuai).
• Kontainerisasi: Docker / docker-compose.
• Orkestrasi: Kubernetes hanya jika kebutuhan deployment menuntutnya (tidak dinyatakan sumber; tidak disertakan secara default).

Catatan: Tidak ada pilihan teknologi spesifik yang dinyatakan pengguna selain konteks produk; item di atas adalah default yang wajar untuk aplikasi web dengan backend terintegrasi.

11. Assumptions and Constraints

Asumsi:

• A1 (required_inference): Identitas dimiliki aplikasi; pengelola menerima provisioning/undangan dan tidak dapat mendaftar sendiri.
• A2 (required_inference): Pembelajar dapat membaca materi tanpa akun; hanya permukaan pengelolaan yang terbatas peran.
• A3 (required_inference): Materi edukasi mencakup struktur, jenis, dan fungsi jaringan tulang, sesuai rationale persona pembelajar.
• A4 (basic_default): Penyimpanan materi dan identitas bersifat persisten; pilihan teknologi penyimpanan tidak ditentukan sumber.

Batasan:

• B1 (explicit): Tidak ada gamifikasi (badge, streak, confetti, emoji bermain) di alur pembelajaran.
• B2 (explicit): Tidak ada dasbor gelap padat untuk Content dan Content Editor — tetap paper-white dan bergaris.
• B3 (explicit): Tidak ada palet biru/indigo/violet atau template SaaS putih-pertama; template indigo/blue-on-white generik dilarang.
• B4 (explicit): Tidak ada gradient-blob hero, glassmorphism, panel frosted, atau backdrop blur.
• B5 (explicit): Tidak ada grid kartu hover-lift identik dengan bayangan lembut; tidak ada tombol pil atau radius > 4px.
• B6 (explicit): Tidak ada fotografi stok orang atau bidang warna saturasi terang.
• B7 (explicit): Teks dan kontrol yang dapat dibaca tetap utuh di setiap viewport; tidak ada elemen yang menutupinya.
• B8 (explicit): Akses Content dan Content Editor terbatas peran; Login dapat dibuka anonim.

12. Glossary

• Jaringan tulang — bone tissue; jaringan ikat penyusun tulang yang mencakup struktur, jenis, dan fungsinya.
• Osteon — unit struktural silinder jaringan tulang kompak; subjek mikrograf utama pada Landing.
• Sistem Haversian — sistem saluran dan lamela yang mengelilingi osteon.
• Osteosit — sel tulang matang yang terbenam dalam matriks tulang.
• Mikrograf — citra hasil mikroskop; digunakan sebagai spesimen visual pada Landing dan Material Detail.
• Rail indeks — kolom kiri 200px di desktop berisi nomor pelajaran 11px uppercase tracked dengan aturan vertikal 1px; runtuh menjadi strip horizontal yang dapat digulir di 768px/375px.
• Tabel bergaris — daftar Materials/Content dengan baris rambut 1px, perataan tabular, padding 24–32px, tanpa zebra striping dan tanpa kartu.
• Eyebrow label — label 11px uppercase tracked di atas elemen utama.
• Provisioning/undangan — mekanisme pemberian akses pengelola oleh pihak penyedia; bukan pendaftaran mandiri.
• role_restricted — permukaan yang hanya dapat diakses pengelola terverifikasi (Content, Content Editor).
• Paper-white — latar #F4F1EA/#FBF9F5 yang mendominasi ~80% layar.