System Requirements Document for frosty-kbm

1. Introduction

frosty-kbm adalah Sistem Informasi KBM (Kegiatan Belajar Mengajar) untuk jenjang SMA/SMK di Indonesia. Produk ini dibangun agar guru SMA/SMK dapat menjalankan kegiatan belajar mengajar sehari-hari secara tertata — mengelola kelas yang diampu, menyiapkan materi pembelajaran, dan menyiapkan aktivitas pembelajaran — sementara siswa SMA/SMK dapat mengakses dan mengikuti materi serta aktivitas yang disiapkan guru pada kelas yang diikutinya.

Produk ini secara eksplisit diminta tampil menarik, modern, dan kekinian, sehingga pengalaman visual bukan lapisan tambahan melainkan bagian dari komitmen produk: sebuah ruang kerja harian sekolah yang terasa seperti studio desain yang tertata, bukan spreadsheet, dan yang tetap layak dibuka setiap hari oleh remaja maupun pendidik.

Audiens: Guru SMA/SMK dan Siswa SMA/SMK. Sistem ditujukan khusus untuk jenjang SMA/SMK.

2. System Overview

frosty-kbm adalah aplikasi web dengan antarmuka kustom milik aplikasi sendiri, didukung backend, dan identitas yang dimiliki aplikasi. Alur kerja saat ini berpusat pada dua aktor manusia:

• Guru SMA/SMK — mengelola konteks kelas yang diampu, menyusun dan memperbarui materi pembelajaran, serta menyusun dan memperbarui aktivitas pembelajaran untuk kelas tersebut.
• Siswa SMA/SMK — mengakses materi pembelajaran dari guru dan mengikuti aktivitas pembelajaran pada kelas yang diikutinya.

Karena KBM adalah kegiatan dua arah, hasil kerja guru (materi dan aktivitas) harus benar-benar sampai dan terlihat di sisi siswa, dan keterlibatan siswa pada aktivitas harus tercatat sebagai hasil yang dapat diamati guru.

Cakupan saat ini: pendaftaran mandiri, verifikasi kembali melalui login, penetapan keterkaitan guru–kelas dan siswa–kelas, pengelolaan kelas, pengelolaan materi, pengelolaan aktivitas, serta akses siswa terhadap materi dan aktivitas.

Pengecualian sempit: tidak ada modul di luar KBM yang diminta. Sistem tidak menetapkan provider identitas eksternal, sehingga akses ditangani oleh permukaan akses netral milik aplikasi. Tidak ada jenjang selain SMA/SMK.

2a. Product Interpretation and Delivery Boundary

Kepemilikan pengiriman. frosty-kbm dikirim sebagai aplikasi web dengan UI kustom milik aplikasi dan backend milik aplikasi. Tidak ada provider identitas eksternal atau batas provisioning eksternal yang ditetapkan oleh permintaan, sehingga identitas pengguna dimiliki dan dikelola oleh aplikasi: guru dan siswa mendaftar sendiri, lalu memverifikasi kembali dirinya untuk melanjutkan ke data dan pekerjaan KBM yang tersimpan.

Batas akses. Halaman Landing dan Login dapat dijangkau tanpa identitas. Seluruh area kerja KBM bersifat terbatas peran: area guru hanya untuk guru, area siswa hanya untuk siswa. Pembatasan ini adalah pembatasan peran atas pekerjaan yang memang berbeda (guru mengelola, siswa mengikuti), bukan sistem izin berlapis.

Batas saat ini dan masa depan. Seluruh perilaku yang dijelaskan pada dokumen ini adalah cakupan saat ini. Tidak ada permintaan fitur bertahap di masa depan yang diterima; ide-ide di luar lingkup KBM tidak diimplementasikan.

Batas visual. Arah kreatif proyek bersifat mengikat: palet krem–teal hangat, tipografi Jost + Fraunces, bentuk organik-modern, dan larangan tegas atas template SaaS biru–indigo di atas putih. Detailnya ada di bagian 6–8.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source pada sumber, sehingga tidak ada inventaris konten yang disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: penjelasan sistem informasi KBM, sasaran Guru SMA/SMK dan Siswa SMA/SMK, serta fungsi pengelolaan dan akses pembelajaran. Tidak ada state terautentikasi.
• Aksi utama: masuk sebagai Guru; masuk sebagai Siswa.
• Aksi pendukung: menggulir untuk membaca penjelasan fungsi sistem.
• Entitas domain: sistem KBM, peran Guru SMA/SMK, peran Siswa SMA/SMK.
• Tanggung jawab komponen: hero poster terbelah (blok tipografi kiri, blok warna teal kanan dengan fotografi kelas), band penjelasan fungsi pengelolaan dan akses pembelajaran, ticker nama kelas dan mata pelajaran di tepi bawah, penanda jenjang SMA/SMK.
• State: loading — kerangka band dengan tinggi tetap agar tidak ada pergeseran tata letak; empty — tidak berlaku (konten statis); success — hero dan band penjelasan tampil utuh; error — jika fotografi gagal dimuat, blok teal tetap tampil sebagai bidang warna penuh tanpa teks yang hilang; recovery — pengguna tetap dapat menekan CTA masuk meski aset gambar gagal.

Login

• Informasi/state: satu permukaan akses netral yang menangani dua hal — pendaftaran mandiri untuk Guru SMA/SMK dan Siswa SMA/SMK sebelum penggunaan pertama, dan verifikasi kembali untuk melanjutkan akses ke data dan pekerjaan KBM yang tersimpan.
• Aksi utama: mendaftar sebagai Guru; mendaftar sebagai Siswa; masuk (verifikasi kembali).
• Aksi pendukung: berpindah antara mode daftar dan mode masuk; memilih peran saat mendaftar.
• Entitas domain: identitas pengguna, peran (Guru SMA/SMK / Siswa SMA/SMK), kredensial.
• Tanggung jawab komponen: pemilih peran, formulir pendaftaran mandiri, formulir verifikasi kembali, pesan galat sebaris, tautan pemulihan ke mode lain.
• State: loading — tombol kirim dalam keadaan sibuk dan tidak dapat ditekan ganda; empty — formulir kosong dengan label yang jelas; success — pendaftaran berhasil mengarahkan ke penetapan keterkaitan kelas, verifikasi berhasil mengarahkan ke area kerja sesuai peran; error — kredensial tidak cocok, peran belum dipilih, atau isian wajib kosong, ditampilkan sebagai pesan sebaris tanpa menghapus isian yang sudah benar; recovery — pengguna dapat memperbaiki isian dan mengirim ulang, atau berpindah mode tanpa kehilangan konteks.

Dashboard Guru

• Informasi/state: ringkasan dan titik lanjut bagi guru menuju kelas, materi, dan aktivitas KBM yang menjadi tanggung jawabnya; band "hari ini" berisi jadwal harian sebagai baris bergaris (waktu / kelas / ruang) dan satu angka aktivitas yang menunggu penilaian.
• Aksi utama: membuka kelas yang diampu; menuju daftar materi; menuju daftar aktivitas.
• Aksi pendukung: berpindah ke kelas lain dari daftar kelas.
• Entitas domain: kelas yang diampu, jadwal harian, materi, aktivitas, aktivitas menunggu penilaian.
• Tanggung jawab komponen: band "hari ini" selebar penuh, kolom kelas (7 kolom) dan kolom aktivitas mendatang (5 kolom), chip mata pelajaran, avatar molded shell untuk kelas.
• State: loading — band dan kolom menampilkan kerangka dengan tinggi tetap; empty — bila guru belum memiliki kelas yang diampu, tampil ajakan menuju penetapan keterkaitan kelas; success — jadwal, kelas, dan aktivitas mendatang tampil; error — bila ringkasan gagal dimuat, tampil pesan dan tombol coba lagi tanpa menghapus navigasi; recovery — memuat ulang ringkasan; angka aktivitas menunggu penilaian ditampilkan sebagai 0 bila tidak ada.

Kelas Guru

• Informasi/state: daftar kelas yang diampu guru beserta konteks tiap kelas (mata pelajaran, chip warna, jumlah siswa).
• Aksi utama: memilih kelas untuk dijadikan konteks kerja.
• Aksi pendukung: melihat detail kelas terpilih; berpindah ke materi atau aktivitas kelas tersebut.
• Entitas domain: kelas, mata pelajaran, siswa pada kelas, keterkaitan guru–kelas.
• Tanggung jawab komponen: kartu kelas dengan chip mata pelajaran, rail kiri berisi tab (Materi, Aktivitas, Siswa) pada tampilan detail kelas, kolom konten yang digeser asimetris.
• State: loading — kartu kelas dalam kerangka; empty — bila belum ada kelas yang ditetapkan, tampil penjelasan bahwa keterkaitan guru–kelas harus ditetapkan lebih dulu; success — daftar kelas tampil dan dapat dipilih; error — kegagalan memuat daftar ditampilkan dengan tombol coba lagi; recovery — memuat ulang daftar; kelas terakhir yang dipilih tetap menjadi konteks bila masih tersedia.

Materi Guru

• Informasi/state: daftar materi pembelajaran guru untuk kelas yang diampu, terkelompok menurut kelas dan mata pelajaran.
• Aksi utama: membuat materi baru; membuka materi yang ada untuk disunting.
• Aksi pendukung: menyaring daftar menurut kelas atau mata pelajaran; melihat status materi (draf/terbit).
• Entitas domain: materi pembelajaran, kelas, mata pelajaran, status materi.
• Tanggung jawab komponen: daftar materi dengan chip mata pelajaran yang konsisten dengan chip di halaman lain, tombol buat materi, penanda status.
• State: loading — baris daftar dalam kerangka; empty — bila kelas belum dipilih atau belum ada materi, tampil ajakan membuat materi pertama; success — daftar materi tampil; error — kegagalan memuat ditampilkan dengan tombol coba lagi; recovery — memuat ulang daftar tanpa kehilangan filter yang dipilih.

Editor Materi

• Informasi/state: ruang fokus untuk menyiapkan dan memperbarui satu materi pembelajaran, termasuk judul, isi materi, dan kelas tujuan.
• Aksi utama: menyimpan materi; menerbitkan materi agar dapat diakses siswa.
• Aksi pendukung: menyimpan sebagai draf; membatalkan perubahan dan kembali ke daftar materi.
• Entitas domain: materi pembelajaran, judul, isi, kelas tujuan, status.
• Tanggung jawab komponen: area penyuntingan teks dengan tipografi baca Fraunces, pemilih kelas tujuan, tombol simpan dan terbitkan, indikator perubahan belum tersimpan.
• State: loading — editor menampilkan kerangka sampai materi selesai dimuat; empty — editor kosong untuk materi baru dengan judul dan kelas tujuan belum diisi; success — materi tersimpan dan statusnya diperbarui, lalu guru kembali ke daftar materi; error — penyimpanan gagal atau isian wajib kosong, ditampilkan sebagai pesan sebaris dan perubahan tetap di editor; recovery — guru dapat memperbaiki dan menyimpan ulang; meninggalkan editor dengan perubahan belum tersimpan meminta konfirmasi.

Aktivitas Guru

• Informasi/state: daftar aktivitas pembelajaran guru untuk kelas yang diampu, beserta tenggat dan status penilaian.
• Aksi utama: membuat aktivitas baru; membuka aktivitas yang ada untuk disunting.
• Aksi pendukung: menyaring menurut kelas atau mata pelajaran; melihat jumlah siswa yang telah mengikuti.
• Entitas domain: aktivitas pembelajaran, kelas, mata pelajaran, tenggat, keterlibatan siswa, status penilaian.
• Tanggung jawab komponen: daftar aktivitas dengan penanda tenggat beraksen tomat, chip mata pelajaran, tombol buat aktivitas, ringkasan keterlibatan.
• State: loading — baris daftar dalam kerangka; empty — bila belum ada aktivitas, tampil ajakan membuat aktivitas pertama; success — daftar aktivitas tampil dengan tenggat dan keterlibatan; error — kegagalan memuat ditampilkan dengan tombol coba lagi; recovery — memuat ulang daftar tanpa kehilangan filter.

Editor Aktivitas

• Informasi/state: ruang fokus untuk menyiapkan dan memperbarui satu aktivitas pembelajaran, termasuk judul, petunjuk, kelas tujuan, dan tenggat.
• Aksi utama: menyimpan aktivitas; menerbitkan aktivitas agar dapat diikuti siswa.
• Aksi pendukung: menyimpan sebagai draf; membatalkan perubahan dan kembali ke daftar aktivitas.
• Entitas domain: aktivitas pembelajaran, judul, petunjuk, kelas tujuan, tenggat, status.
• Tanggung jawab komponen: area penyuntingan petunjuk, pemilih kelas tujuan, pemilih tenggat, tombol simpan dan terbitkan, indikator perubahan belum tersimpan.
• State: loading — editor menampilkan kerangka sampai aktivitas selesai dimuat; empty — editor kosong untuk aktivitas baru; success — aktivitas tersimpan dan statusnya diperbarui, lalu guru kembali ke daftar aktivitas; error — penyimpanan gagal, tenggat tidak valid, atau isian wajib kosong, ditampilkan sebagai pesan sebaris; recovery — guru dapat memperbaiki dan menyimpan ulang; meninggalkan editor dengan perubahan belum tersimpan meminta konfirmasi.

Dashboard Siswa

• Informasi/state: ringkasan dan titik lanjut bagi siswa menuju materi dan aktivitas pada kelas yang diikutinya, termasuk aktivitas yang belum diikuti dan tenggat terdekat.
• Aksi utama: membuka materi terbaru; membuka aktivitas yang menunggu.
• Aksi pendukung: berpindah kelas dari daftar kelas yang diikuti.
• Entitas domain: kelas yang diikuti, materi, aktivitas, tenggat, status keterlibatan siswa.
• Tanggung jawab komponen: band ringkasan kelas yang diikuti, daftar aktivitas menunggu dengan penanda tenggat, chip mata pelajaran, avatar molded shell.
• State: loading — band dan daftar dalam kerangka; empty — bila siswa belum terhubung ke kelas mana pun, tampil penjelasan bahwa keterkaitan siswa–kelas harus ditetapkan lebih dulu; success — materi terbaru dan aktivitas menunggu tampil; error — kegagalan memuat ditampilkan dengan tombol coba lagi; recovery — memuat ulang ringkasan.

Materi Siswa

• Informasi/state: materi pembelajaran dari guru pada kelas yang diikuti siswa, terkelompok menurut kelas dan mata pelajaran.
• Aksi utama: membuka dan membaca materi yang telah diterbitkan guru.
• Aksi pendukung: menyaring menurut kelas atau mata pelajaran.
• Entitas domain: materi pembelajaran, kelas yang diikuti, mata pelajaran, guru penyusun.
• Tanggung jawab komponen: daftar materi dengan chip mata pelajaran yang konsisten, tampilan baca materi dengan tipografi Fraunces, penanda kelas asal.
• State: loading — daftar dalam kerangka; empty — bila belum ada materi yang diterbitkan untuk kelas siswa, tampil pesan yang jelas bahwa belum ada materi; success — daftar materi tampil dan dapat dibuka; error — kegagalan memuat ditampilkan dengan tombol coba lagi; recovery — memuat ulang daftar tanpa kehilangan filter.

Aktivitas Siswa

• Informasi/state: aktivitas pembelajaran dari guru pada kelas yang diikuti siswa, beserta tenggat dan status keterlibatan siswa sendiri.
• Aksi utama: membuka aktivitas; menandai aktivitas sebagai telah diikuti.
• Aksi pendukung: menyaring menurut kelas atau mata pelajaran; melihat tenggat terdekat.
• Entitas domain: aktivitas pembelajaran, kelas yang diikuti, tenggat, status keterlibatan siswa.
• Tanggung jawab komponen: daftar aktivitas dengan penanda tenggat beraksen tomat, chip mata pelajaran, kontrol penandaan keterlibatan, umpan balik status.
• State: loading — daftar dalam kerangka; empty — bila belum ada aktivitas yang diterbitkan untuk kelas siswa, tampil pesan yang jelas bahwa belum ada aktivitas; success — status keterlibatan siswa tersimpan dan terlihat pada baris aktivitas; error — bila penyimpanan status gagal, status tidak berubah dan pesan ditampilkan; recovery — siswa dapat mencoba menandai ulang; status yang sudah tersimpan tetap tampil setelah pemuatan ulang.

3. Functional Requirements

Setiap butir menyatakan aktor, pemicu/masukan, hasil atau perubahan state yang dapat diamati, keadaan akses yang relevan, kegagalan/pemulihan material, dan kelanjutannya. Provenance: explicit, basic_default, atau required_inference.

FR-01 — Penjelasan sistem KBM bagi pengunjung As a pengunjung Landing (calon Guru SMA/SMK atau Siswa SMA/SMK), I should melihat penjelasan sistem informasi KBM, sasaran jenjang SMA/SMK, serta fungsi pengelolaan dan akses pembelajaran, so that saya memahami apa yang dilakukan sistem sebelum masuk.

• Provenance: required_inference (halaman masuk anonim yang menjelaskan sistem).
• Pemicu: membuka Landing tanpa identitas. Hasil: penjelasan sistem, sasaran Guru SMA/SMK dan Siswa SMA/SMK, dan fungsi pengelolaan serta akses pembelajaran terlihat.
• Akses: tanpa identitas. Kegagalan: bila aset gambar gagal dimuat, blok warna tetap tampil dan seluruh teks tetap terbaca. Kelanjutan: menuju Login.

FR-02 — Pendaftaran mandiri Guru SMA/SMK dan Siswa SMA/SMK As a calon Guru SMA/SMK atau Siswa SMA/SMK, I should mendaftar sendiri dengan memilih peran saya sebelum penggunaan pertama, so that saya memiliki identitas yang terikat pada pekerjaan KBM saya.

• Provenance: required_inference (pendaftaran mandiri sebelum penggunaan pertama).
• Pemicu: memilih peran dan mengirim formulir pendaftaran. Hasil: identitas terbentuk dan terikat pada peran yang dipilih.
• Akses: tanpa identitas. Kegagalan: peran belum dipilih atau isian wajib kosong → pesan sebaris, isian benar dipertahankan. Kelanjutan: penetapan keterkaitan kelas sesuai peran.

FR-03 — Verifikasi kembali untuk melanjutkan akses As a Guru SMA/SMK atau Siswa SMA/SMK terdaftar, I should memverifikasi kembali identitas saya melalui Login, so that saya dapat melanjutkan ke data dan pekerjaan KBM yang tersimpan.

• Provenance: required_inference (verifikasi kembali melalui Login).
• Pemicu: mengirim kredensial pada Login. Hasil: akses ke area kerja sesuai peran, dengan data KBM tersimpan tetap utuh.
• Akses: tanpa identitas pada permukaan Login; area kerja setelahnya terbatas peran. Kegagalan: kredensial tidak cocok → pesan sebaris tanpa mengosongkan isian yang benar. Kelanjutan: Dashboard Guru atau Dashboard Siswa.

FR-04 — Penetapan keterkaitan guru dengan kelas yang diampu As a Guru SMA/SMK, I should memiliki keterkaitan dengan kelas yang saya ampu sebelum data KBM ditampilkan, so that kelas, materi, dan aktivitas yang saya lihat memang menjadi tanggung jawab saya.

• Provenance: required_inference (penetapan keterkaitan guru–kelas sebelum data KBM ditampilkan).
• Pemicu: identitas guru terverifikasi. Hasil: kelas yang diampu menjadi konteks kerja dan muncul di Dashboard Guru serta Kelas Guru.
• Akses: terbatas peran guru. Kegagalan: bila belum ada kelas yang ditetapkan, area guru menampilkan keadaan kosong yang menjelaskan hal ini alih-alih data kosong yang membingungkan. Kelanjutan: memilih kelas dan mulai mengelola materi serta aktivitas.

FR-05 — Penetapan keterkaitan siswa dengan kelas yang diikuti As a Siswa SMA/SMK, I should memiliki keterkaitan dengan kelas yang saya ikuti sebelum data KBM ditampilkan, so that materi dan aktivitas yang saya lihat memang untuk kelas saya.

• Provenance: required_inference (penetapan keterkaitan siswa–kelas sebelum data KBM ditampilkan).
• Pemicu: identitas siswa terverifikasi. Hasil: kelas yang diikuti menjadi konteks dan muncul di Dashboard Siswa, Materi Siswa, dan Aktivitas Siswa.
• Akses: terbatas peran siswa. Kegagalan: bila belum terhubung ke kelas mana pun, tampil keadaan kosong yang menjelaskan hal ini. Kelanjutan: membuka materi dan aktivitas kelas tersebut.

FR-06 — Ringkasan dan titik lanjut guru As a Guru SMA/SMK, I should melihat ringkasan kelas, materi, dan aktivitas yang menjadi tanggung jawab saya beserta jadwal hari ini, so that saya tahu apa yang harus dikerjakan hari ini.

• Provenance: required_inference (ringkasan dan titik lanjut bagi guru).
• Pemicu: membuka Dashboard Guru. Hasil: band "hari ini" berisi jadwal harian (waktu / kelas / ruang) dan satu angka aktivitas yang menunggu penilaian; kolom kelas dan aktivitas mendatang terisi.
• Akses: terbatas peran guru. Kegagalan: ringkasan gagal dimuat → pesan dan tombol coba lagi, navigasi tetap tersedia. Kelanjutan: membuka kelas, materi, atau aktivitas.

FR-07 — Memilih dan mengelola konteks kelas yang diampu As a Guru SMA/SMK, I should melihat daftar kelas yang saya ampu dan memilih salah satunya sebagai konteks kerja, so that materi dan aktivitas yang saya kelola selalu terikat pada kelas yang benar.

• Provenance: required_inference (area yang dapat dikunjungi kembali guru untuk memilih dan mengelola konteks kelas).
• Pemicu: membuka Kelas Guru dan memilih kelas. Hasil: kelas terpilih menjadi konteks untuk materi dan aktivitas, dan tetap menjadi konteks saat guru kembali.
• Akses: terbatas peran guru. Kegagalan: daftar gagal dimuat → pesan dan tombol coba lagi. Kelanjutan: menuju Materi Guru atau Aktivitas Guru untuk kelas tersebut.

FR-08 — Menyusun dan memperbarui materi pembelajaran As a Guru SMA/SMK, I should membuat dan memperbarui materi pembelajaran untuk kelas yang saya ampu, so that bahan ajar tersedia dan dapat dipakai berulang kali.

• Provenance: required_inference (daftar dan konteks pengelolaan materi guru; ruang fokus menyiapkan dan memperbarui materi).
• Pemicu: membuat materi baru atau membuka materi yang ada dari Materi Guru. Hasil: materi tersimpan dengan judul, isi, dan kelas tujuan; status draf atau terbit terlihat pada daftar.
• Akses: terbatas peran guru. Kegagalan: penyimpanan gagal atau isian wajib kosong → pesan sebaris, perubahan tetap di editor; meninggalkan editor dengan perubahan belum tersimpan meminta konfirmasi. Kelanjutan: materi terbit muncul di Materi Siswa untuk kelas tersebut.

FR-09 — Menyusun dan memperbarui aktivitas pembelajaran As a Guru SMA/SMK, I should membuat dan memperbarui aktivitas pembelajaran beserta tenggatnya untuk kelas yang saya ampu, so that siswa memiliki kegiatan belajar yang jelas dan terarah.

• Provenance: required_inference (daftar dan konteks pengelolaan aktivitas guru; ruang fokus menyiapkan dan memperbarui aktivitas).
• Pemicu: membuat aktivitas baru atau membuka aktivitas yang ada dari Aktivitas Guru. Hasil: aktivitas tersimpan dengan judul, petunjuk, kelas tujuan, dan tenggat; status draf atau terbit terlihat pada daftar.
• Akses: terbatas peran guru. Kegagalan: penyimpanan gagal, tenggat tidak valid, atau isian wajib kosong → pesan sebaris, perubahan tetap di editor; meninggalkan editor dengan perubahan belum tersimpan meminta konfirmasi. Kelanjutan: aktivitas terbit muncul di Aktivitas Siswa untuk kelas tersebut.

FR-10 — Ringkasan dan titik lanjut siswa As a Siswa SMA/SMK, I should melihat ringkasan materi dan aktivitas pada kelas yang saya ikuti, termasuk aktivitas yang belum saya ikuti dan tenggat terdekat, so that saya tahu apa yang perlu saya kerjakan.

• Provenance: required_inference (ringkasan dan titik lanjut bagi siswa).
• Pemicu: membuka Dashboard Siswa. Hasil: materi terbaru dan aktivitas menunggu tampil dengan penanda tenggat.
• Akses: terbatas peran siswa. Kegagalan: ringkasan gagal dimuat → pesan dan tombol coba lagi. Kelanjutan: membuka Materi Siswa atau Aktivitas Siswa.

FR-11 — Mengakses materi pembelajaran dari guru As a Siswa SMA/SMK, I should membuka dan membaca materi pembelajaran yang disiapkan guru pada kelas yang saya ikuti, so that saya dapat belajar dari bahan yang memang ditujukan untuk kelas saya.

• Provenance: required_inference (area yang dapat dikunjungi kembali siswa untuk mengakses materi pembelajaran dari guru).
• Pemicu: membuka Materi Siswa dan memilih materi. Hasil: isi materi terbaca, dengan kelas asal dan mata pelajaran yang jelas.
• Akses: terbatas peran siswa. Kegagalan: daftar gagal dimuat → pesan dan tombol coba lagi. Kelanjutan: kembali ke daftar atau menuju Aktivitas Siswa.

FR-12 — Mengikuti aktivitas pembelajaran dari guru As a Siswa SMA/SMK, I should membuka aktivitas pembelajaran pada kelas yang saya ikuti dan menandainya sebagai telah diikuti, so that keterlibatan saya dalam proses belajar tercatat.

• Provenance: required_inference (area yang dapat dikunjungi kembali siswa untuk mengakses dan mengikuti aktivitas pembelajaran dari guru).
• Pemicu: membuka Aktivitas Siswa dan menandai sebuah aktivitas. Hasil: status keterlibatan siswa tersimpan dan terlihat pada baris aktivitas, serta terhitung pada ringkasan keterlibatan guru.
• Akses: terbatas peran siswa. Kegagalan: penyimpanan status gagal → status tidak berubah dan pesan ditampilkan. Kelanjutan: siswa dapat mencoba menandai ulang; status tersimpan tetap tampil setelah pemuatan ulang.

FR-13 — Melihat keterlibatan siswa pada aktivitas As a Guru SMA/SMK, I should melihat berapa siswa yang telah mengikuti aktivitas yang saya terbitkan, so that saya dapat menilai dan menindaklanjuti KBM yang berjalan.

• Provenance: required_inference (hasil KBM yang terselenggara dan terdokumentasi; angka aktivitas menunggu penilaian pada band "hari ini").
• Pemicu: membuka Aktivitas Guru atau Dashboard Guru. Hasil: jumlah siswa yang telah mengikuti terlihat per aktivitas, dan aktivitas yang menunggu penilaian terhitung pada band "hari ini".
• Akses: terbatas peran guru. Kegagalan: ringkasan keterlibatan gagal dimuat → angka ditampilkan sebagai tidak tersedia dengan tombol coba lagi, daftar aktivitas tetap tampil. Kelanjutan: guru membuka aktivitas untuk menindaklanjuti.

FR-14 — Tampilan menarik, modern, dan kekinian As a Guru SMA/SMK atau Siswa SMA/SMK, I should menggunakan sistem yang tampil menarik, modern, dan kekinian, so that saya mau membukanya setiap hari untuk bekerja dan belajar.

• Provenance: explicit (sistem harus tampil menarik, modern, dan kekinian).
• Pemicu: setiap kunjungan ke halaman mana pun. Hasil: palet krem–teal hangat, tipografi Jost + Fraunces, bentuk organik-modern, dan chip mata pelajaran yang konsisten terlihat di seluruh halaman.
• Akses: berlaku pada semua halaman, termasuk Landing dan Login. Kegagalan: bila aset visual gagal dimuat, tata letak dan keterbacaan tetap utuh. Kelanjutan: tidak ada; ini properti lintas halaman.

4. User Personas

Guru SMA/SMK

Konteks produk. Guru SMA/SMK adalah pengguna utama yang disebutkan langsung dalam permintaan. Mereka menjalankan KBM harian di jenjang SMA/SMK dan membutuhkan sistem yang tertata namun tetap terasa menarik dan modern — bukan spreadsheet, bukan template SaaS biru yang dingin.

Tujuan utama. Menyelenggarakan dan mendokumentasikan KBM sehari-hari dengan rapi: kelas yang diampu jelas, materi siap dipakai, aktivitas terarah dengan tenggat, dan keterlibatan siswa terlihat.

Tanggung jawab yang diterima. Mengelola konteks kelas yang diampu; menyusun dan memperbarui materi pembelajaran; menyusun dan memperbarui aktivitas pembelajaran beserta tenggat; melihat keterlibatan siswa pada aktivitas yang diterbitkan.

Masukan dan keputusan. Guru memilih kelas sebagai konteks kerja, memutuskan kapan sebuah materi atau aktivitas disimpan sebagai draf dan kapan diterbitkan agar dapat diakses siswa, serta menetapkan tenggat aktivitas.

Interaksi dengan peserta lain. Guru adalah pihak yang menyiapkan; Siswa SMA/SMK adalah pihak yang menerima dan mengikuti. Hasil kerja guru hanya bermakna bila materi dan aktivitas benar-benar sampai ke siswa pada kelas yang tepat, dan keterlibatan siswa adalah umpan balik yang kembali ke guru.

Keberhasilan yang dapat diamati. Materi dan aktivitas terbit muncul di sisi siswa untuk kelas yang benar; jumlah siswa yang telah mengikuti terlihat pada aktivitas; band "hari ini" menunjukkan jadwal dan jumlah aktivitas yang menunggu penilaian.

Yang membedakan peran ini. Guru adalah satu-satunya aktor yang menciptakan dan mengubah isi KBM. Pekerjaannya bersifat menyusun dan menerbitkan, dengan keputusan draf/terbit dan tenggat yang tidak dimiliki siswa.

Siswa SMA/SMK

Konteks produk. Siswa SMA/SMK adalah pihak aktif kedua dalam KBM dua arah. Mereka adalah audiens yang harus benar-benar mau membuka sistem — karena itu tuntutan "menarik, modern, dan kekinian" berlaku paling keras di sisi mereka.

Tujuan utama. Mengikuti pembelajaran pada kelas yang diikuti dengan lancar: menemukan materi yang tepat, membaca dan memakainya, serta mengikuti aktivitas yang diberikan guru tanpa kebingungan.

Tanggung jawab yang diterima. Mengakses materi pembelajaran dari guru pada kelas yang diikuti; mengakses dan mengikuti aktivitas pembelajaran dari guru, termasuk menandainya sebagai telah diikuti.

Masukan dan keputusan. Siswa memilih kelas yang diikuti sebagai konteks, memilih materi untuk dibaca, dan memutuskan kapan sebuah aktivitas telah ia ikuti.

Interaksi dengan peserta lain. Siswa bergantung pada penerbitan dari Guru SMA/SMK: materi dan aktivitas hanya muncul setelah guru menerbitkannya untuk kelas yang diikuti siswa. Sebaliknya, penandaan keterlibatan siswa adalah sinyal yang kembali ke guru.

Keberhasilan yang dapat diamati. Materi dan aktivitas kelas yang diikuti tampil dan dapat dibuka; status keterlibatan tersimpan dan tetap terlihat setelah pemuatan ulang; aktivitas yang belum diikuti dan tenggat terdekat terlihat di Dashboard Siswa.

Yang membedakan peran ini. Siswa tidak pernah menyusun atau mengubah isi KBM. Pekerjaannya bersifat menerima, membaca, dan menandai keterlibatan — dengan tenggat sebagai tekanan waktu yang tidak dialami guru pada perannya sendiri.

5. Core User Flows

Alur 1 — Guru baru mendaftar, menetapkan kelas, dan mulai bekerja

1. Calon Guru SMA/SMK membuka Landing tanpa identitas dan membaca penjelasan sistem KBM, sasaran jenjang SMA/SMK, serta fungsi pengelolaan dan akses pembelajaran.
2. Ia menekan CTA masuk sebagai Guru dan tiba di Login.
3. Pada Login, ia memilih peran Guru SMA/SMK dan mengisi formulir pendaftaran mandiri, lalu mengirimnya. Bila peran belum dipilih atau isian wajib kosong, pesan sebaris muncul dan isian yang sudah benar tetap ada; ia memperbaiki dan mengirim ulang.
4. Identitasnya terbentuk dan terikat pada peran guru. Sistem menetapkan keterkaitan guru dengan kelas yang diampu sebelum data KBM ditampilkan.
5. Ia tiba di Dashboard Guru. Bila belum ada kelas yang ditetapkan, ia melihat keadaan kosong yang menjelaskan hal ini dan diarahkan ke Kelas Guru.
6. Di Kelas Guru, ia melihat daftar kelas yang diampu beserta chip mata pelajaran, lalu memilih satu kelas sebagai konteks kerja.
7. Kelas terpilih menjadi konteks. Ia melanjutkan ke Materi Guru atau Aktivitas Guru untuk kelas tersebut.

Alur 2 — Guru menyusun dan menerbitkan materi

1. Dari Dashboard Guru atau Kelas Guru, Guru SMA/SMK membuka Materi Guru dengan kelas yang diampu sebagai konteks.
2. Bila belum ada materi, ia melihat ajakan membuat materi pertama; bila sudah ada, ia melihat daftar materi dengan chip mata pelajaran dan penanda status.
3. Ia menekan buat materi dan masuk ke Editor Materi.
4. Ia mengisi judul, isi materi, dan kelas tujuan. Ia dapat menyimpan sebagai draf terlebih dahulu.
5. Ia menekan simpan atau terbitkan. Bila penyimpanan gagal atau isian wajib kosong, pesan sebaris muncul dan seluruh perubahan tetap berada di editor; ia memperbaiki dan menyimpan ulang.
6. Bila ia mencoba meninggalkan editor dengan perubahan belum tersimpan, sistem meminta konfirmasi.
7. Setelah tersimpan, status materi diperbarui dan ia kembali ke Materi Guru.
8. Materi yang diterbitkan kini muncul di Materi Siswa bagi siswa pada kelas tujuan — hasil yang dapat diamati di sisi peserta lain.

Alur 3 — Guru menyusun dan menerbitkan aktivitas

1. Dari Dashboard Guru atau Kelas Guru, Guru SMA/SMK membuka Aktivitas Guru dengan kelas yang diampu sebagai konteks.
2. Ia melihat daftar aktivitas beserta penanda tenggat beraksen tomat, chip mata pelajaran, dan ringkasan keterlibatan; bila belum ada, ia melihat ajakan membuat aktivitas pertama.
3. Ia menekan buat aktivitas dan masuk ke Editor Aktivitas.
4. Ia mengisi judul, petunjuk, kelas tujuan, dan tenggat. Ia dapat menyimpan sebagai draf terlebih dahulu.
5. Ia menekan simpan atau terbitkan. Bila penyimpanan gagal, tenggat tidak valid, atau isian wajib kosong, pesan sebaris muncul dan perubahan tetap di editor; ia memperbaiki dan menyimpan ulang.
6. Bila ia mencoba meninggalkan editor dengan perubahan belum tersimpan, sistem meminta konfirmasi.
7. Setelah tersimpan, aktivitas yang diterbitkan muncul di Aktivitas Siswa bagi siswa pada kelas tujuan, dan aktivitas yang menunggu penilaian terhitung pada band "hari ini" di Dashboard Guru.

Alur 4 — Guru memantau keterlibatan siswa

1. Guru SMA/SMK membuka Dashboard Guru dan melihat band "hari ini" berisi jadwal harian (waktu / kelas / ruang) serta satu angka aktivitas yang menunggu penilaian.
2. Ia membuka Aktivitas Guru untuk kelas yang diampu.
3. Ia melihat jumlah siswa yang telah mengikuti tiap aktivitas. Bila ringkasan keterlibatan gagal dimuat, angka ditampilkan sebagai tidak tersedia dengan tombol coba lagi, sementara daftar aktivitas tetap tampil.
4. Ia membuka aktivitas yang relevan untuk menindaklanjuti KBM yang berjalan.

Alur 5 — Siswa baru mendaftar, terhubung ke kelas, dan mengakses materi

1. Calon Siswa SMA/SMK membuka Landing tanpa identitas dan membaca penjelasan sistem serta sasarannya.
2. Ia menekan tombol masuk sebagai Siswa dan tiba di Login.
3. Pada Login, ia memilih peran Siswa SMA/SMK dan mengisi formulir pendaftaran mandiri, lalu mengirimnya. Bila ada isian yang salah, pesan sebaris muncul dan ia memperbaiki tanpa kehilangan isian yang benar.
4. Identitasnya terbentuk dan terikat pada peran siswa. Sistem menetapkan keterkaitan siswa dengan kelas yang diikuti sebelum data KBM ditampilkan.
5. Ia tiba di Dashboard Siswa. Bila belum terhubung ke kelas mana pun, ia melihat keadaan kosong yang menjelaskan hal ini.
6. Setelah terhubung ke kelas, ia melihat materi terbaru dan aktivitas menunggu dengan penanda tenggat.
7. Ia membuka Materi Siswa, menyaring menurut kelas atau mata pelajaran bila perlu, lalu membuka dan membaca materi yang diterbitkan guru untuk kelasnya. Bila belum ada materi terbit, ia melihat pesan yang jelas bahwa belum ada materi.
8. Ia melanjutkan ke Aktivitas Siswa atau kembali ke Dashboard Siswa.

Alur 6 — Siswa mengikuti aktivitas dan keterlibatannya tercatat

1. Siswa SMA/SMK membuka Dashboard Siswa dan melihat aktivitas yang belum diikuti beserta tenggat terdekat.
2. Ia membuka Aktivitas Siswa untuk kelas yang diikuti dan melihat daftar aktivitas dengan penanda tenggat serta status keterlibatannya sendiri.
3. Ia membuka sebuah aktivitas, membaca petunjuk dan tenggatnya, lalu menandainya sebagai telah diikuti.
4. Status keterlibatan tersimpan dan terlihat pada baris aktivitas. Bila penyimpanan gagal, status tidak berubah dan pesan ditampilkan; ia mencoba menandai ulang.
5. Setelah pemuatan ulang, status yang tersimpan tetap tampil.
6. Keterlibatan ini terhitung pada ringkasan keterlibatan yang dilihat Guru SMA/SMK di Aktivitas Guru — hasil yang dapat diamati di sisi peserta lain.

Alur 7 — Guru kembali bekerja pada KBM yang tersimpan

1. Guru SMA/SMK membuka Login dan memverifikasi kembali identitasnya. Bila kredensial tidak cocok, pesan sebaris muncul tanpa mengosongkan isian yang benar; ia memperbaiki dan mengirim ulang.
2. Ia tiba di Dashboard Guru dengan data KBM yang tersimpan tetap utuh.
3. Kelas terakhir yang dipilih tetap menjadi konteks bila masih tersedia; ia dapat berpindah kelas dari Kelas Guru.
4. Ia melanjutkan pekerjaan yang tertunda — memperbarui materi di Editor Materi, memperbarui aktivitas di Editor Aktivitas, atau memantau keterlibatan di Aktivitas Guru.

Alur 8 — Siswa kembali melanjutkan pembelajaran

1. Siswa SMA/SMK membuka Login dan memverifikasi kembali identitasnya.
2. Ia tiba di Dashboard Siswa dengan status keterlibatan yang tersimpan tetap utuh.
3. Ia membuka Materi Siswa untuk membaca materi yang belum selesai, atau Aktivitas Siswa untuk mengikuti aktivitas yang masih menunggu.
4. Ia menandai aktivitas berikutnya sebagai telah diikuti, dan keterlibatannya kembali tercatat untuk dilihat guru.

6. Visuals Colors and Theme

Arah kreatif proyek bersifat mengikat. Musenya adalah Charles & Ray Eames; headline arahnya adalah "Warm mid-century modernism for the classroom — order with joy, craft with clarity." Bahasa visualnya adalah modernisme humanis: material jujur, warna gembira di dalam tatanan yang ketat, dan rasa ingin tahu yang terampil. Ini memberi KBM cukup struktur agar guru dapat menjalankan kelas, materi, dan aktivitas dengan andal, sekaligus cukup kehangatan agar siswa benar-benar mau membukanya.

Palet (light mode)

Aturan warna: tidak pernah lebih dari satu warna aksen yang bersaing dalam satu viewport. Bagian berblok warna bergantian krem / teal / mustard sehingga halaman terbaca seperti dinding pameran Eames. Biru–indigo primer (termasuk #2563EB, #4F46E5, #6366F1 dan tetangganya) di atas putih dilarang; palet ini hanya krem hangat dan teal dalam.

Tipografi

• Judul: Jost — 600–700 untuk display, 500 untuk judul bagian, tracking rapat -0.02em, sentence case (huruf kapital penuh hanya untuk label 11px pada +0.14em).
• Isi: Fraunces 400, dengan dial optical size diarahkan hangat sehingga teks materi panjang terasa manusiawi dan sedikit sastrawi.
• Skala: modular 1.25 dengan lompatan display — 20 / 24 / 30 / 38 / 48 / 64 / 88. Hero display clamp(40px, 8vw, 88px). Judul halaman 30–38px. Judul kartu 20px. Isi 17px / 1.65. Label mikro 11px uppercase +0.14em.
• Dilarang: Inter, Roboto, Poppins, Lato, Open Sans, Arial, atau system-ui untuk judul maupun isi.

Bentuk

Organik-modern pertengahan abad: radius 14–20px pada kartu dan input, tombol dan chip berbentuk kapsul, serta motif berulang "molded shell" Eames — persegi panjang membulat asimetris (satu sudut jauh lebih bulat dari yang lain) untuk avatar, ikon mata pelajaran, dan keadaan kosong. Batas bagian tidak berupa garis lurus: kurva radius dangkal 40px atau pita walnut diagonal memisahkan zona utama. Tanpa kaca, tanpa blur, tanpa cahaya neon. Garis batas 1px #E3D6C4; panel penekanan memakai 2px walnut solid.

Tata letak

Urutan galeri modular, bukan grid dashboard. Grid 12 kolom pada kanvas 1280px dengan margin luar lebar 96px dan gutter 32px; lebar konten maksimum 1160px. Halaman terbaca sebagai rangkaian band horizontal — band berblok warna, lalu band krem, lalu band fotografi — bukan hamparan kartu yang seragam. Dashboard Guru: band "hari ini" selebar penuh, lalu pemisahan dua kolom (kelas 7 kolom / aktivitas mendatang 5 kolom). Detail kelas: rail kiri berisi tab (Materi, Aktivitas, Siswa) dengan kolom konten digeser asimetris. Pada 768px pemisahan runtuh menjadi band bertumpuk; pada 375px semuanya satu kolom dengan margin 20px dan semua kontrol selebar penuh atau dibungkus baris chip yang dapat digulir.

Citra

Fotografi cahaya alami yang hangat dari ruang kelas nyata, tangan di atas buku catatan, papan tulis, koridor sekolah, dan siswa SMA/SMK Indonesia yang sedang bekerja — dipotong lapang menjadi band lebar dan kadang meluber keluar tepi kiri. Ditambah ilustrasi geometris datar bergaya Eames (lingkaran, busur seperempat, persegi bertumpuk dalam mustard/teal/tomat) sebagai ikon mata pelajaran dan pembuka bagian. Tanpa foto stok jabat tangan, tanpa blob 3D, tanpa mesh gradien. Fotografi diperlakukan hangat dan sedikit didesaturasi, tidak pernah hitam-putih kontras tinggi.

7. Signature Design Concept

Konsep: "Poster Kelas" — hero Landing sebagai poster terbelah, bukan tumpukan SaaS terpusat.

Hero Landing disusun sebagai poster dua panel yang bertemu di satu bentuk:

• Panel kiri (7 kolom), dasar krem #F4EDE1: wordmark kecil di kiri atas, lalu headline Jost raksasa bertumpuk empat baris — "Kelas yang rapi. / Belajar yang / menyenangkan." — pada clamp(40px, 8vw, 88px) dengan leading rapat. Frasa "menyenangkan" dicetak tomat #E2542C, sisanya tinta #2B2118. Tepat di bawah headline, rata kiri, duduk CTA kapsul tomat "Masuk sebagai Guru" dengan tombol hantu sekunder "Masuk sebagai Siswa" di sebelahnya.
• Panel kanan (5 kolom): blok warna teal #1F5C54 setinggi penuh yang meluber ke tepi atas dan kanan viewport, membawa fotografi kelas nyata yang dipotong keras ke tepi blok.
• Sambungan: satu bentuk seperempat lingkaran mustard #D9A227 bergaya Eames menumpuk pada jahitan antara kedua belahan.
• Penutup: garis horizontal tipis dengan label 11px uppercase (KBM • SMA/SMK • 2024) berjalan di sepanjang dasar hero.
• Ticker: baris nama kelas dan mata pelajaran bergerak lambat di tepi bawah Landing, 11px uppercase Jost dengan tracking +0.14em, 40 detik per putaran.

Pada mobile: blok teal berpindah ke bawah headline sebagai band setinggi 240px dan headline membungkus menjadi lima baris pada 40px, seluruhnya di dalam viewport. Tidak ada yang terpusat, tidak ada blob gradien, dan elemen dominan adalah blok tipografi — bukan ilustrasi.

Gerakan tanda tangan lain yang membentuk identitas produk:

• Avatar "molded shell": setiap avatar siswa dan kelas adalah persegi panjang membulat asimetris (satu sudut radius 40px, sisanya 12px) dalam palet pertengahan abad yang berotasi, sehingga daftar kelas terbaca sebagai dinding cangkang Eames, bukan lingkaran identik.
• Band "hari ini" di Dashboard Guru: panel teal selebar penuh di bagian atas dengan jadwal hari itu sebagai baris bergaris (waktu / kelas / ruang) dalam Jost 500, label hari 11px uppercase, dan satu angka tomat yang berhitung naik untuk aktivitas yang menunggu penilaian.
• Pewarnaan mata pelajaran sebagai sistem: setiap mata pelajaran mendapat chip mustard, teal, tomat, atau walnut yang dipakai konsisten pada kartu kelas, daftar materi, baris aktivitas, dan jadwal siswa — warna menjadi navigasi, dan chip yang sama muncul di rail kiri setiap halaman.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Subjek fokus: blok tipografi poster — headline Jost empat baris dengan kata "menyenangkan" dalam tomat — yang bertemu dengan blok teal berisi fotografi kelas nyata di jahitan seperempat lingkaran mustard.
• Tesis input → transformasi → hasil: saat Landing dimuat, band hero bergeser naik 24px dengan stagger ease-out 80ms dan berhenti pada posisi akhirnya; saat pengunjung menggulir, band penjelasan fungsi pengelolaan dan akses pembelajaran masuk dengan crossfade lambat 300ms alih-alih meluncur. Hasilnya adalah halaman yang terasa seperti film Eames yang tenang — bukan chrome antarmuka yang bergerak.
• Kosakata gerak: satu reveal pemuatan halaman yang bertujuan, transisi bagian berupa crossfade lambat 300ms, kartu terangkat 2px dengan bayangan walnut lembut saat hover tanpa pantulan, angka dashboard berhitung naik satu kali saat pertama terlihat, dan satu marquee horizontal lambat untuk ticker kelas–mata pelajaran.
• Bingkai pertama yang tersusun: panel kiri krem dengan wordmark kecil dan headline empat baris sudah pada posisi akhirnya; panel kanan teal penuh dengan fotografi terpotong ke tepinya; seperempat lingkaran mustard duduk di jahitan; garis label 11px uppercase di dasar hero; ticker mulai bergerak dari kanan.
• State reduced-motion: seluruh elemen dirender langsung pada keadaan akhirnya — tanpa pergeseran, tanpa hitungan naik, tanpa crossfade — dan ticker dibungkus menjadi baris statis yang membungkus, sehingga setiap nama kelas dan mata pelajaran tetap terbaca penuh.

Catatan tempo: tempo restrained dipilih karena audiensnya adalah guru yang bekerja setiap hari dan siswa yang harus mau kembali setiap hari; gerakan yang tenang dan filmis membangun kepercayaan, sementara gerakan yang ramai akan mengikisnya. Tidak ada yang berulang selamanya kecuali satu ticker tersebut.

9. Non-Functional Requirements

• NFR-01 — Tampilan menarik, modern, dan kekinian. Seluruh halaman harus mengikuti palet, tipografi, bentuk, tata letak, citra, dan tempo gerak pada bagian 6–8. Provenance: explicit. Rasional: permintaan pengguna menyatakan sistem harus tampil menarik, modern, dan kekinian; ini komitmen produk, bukan preferensi.
• NFR-02 — Keterbacaan dan kontrol utuh di setiap viewport. Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap seluruhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) beserta ukuran mobile-nya) agar muat, dan tidak ada elemen lain yang menutupi bagian mana pun darinya. Provenance: explicit (arahan kreatif). Rasional: keterbacaan adalah prasyarat penggunaan harian.
• NFR-03 — Gerakan menghormati preferensi pengguna. Semua gerakan harus menghormati prefers-reduced-motion dengan merender keadaan akhir segera dan membungkus ticker menjadi baris statis. Provenance: explicit (arahan kreatif). Rasional: aksesibilitas dan kenyamanan baca.
• NFR-04 — Konten bergerak tetap dapat dibaca penuh. Ticker dan baris yang dapat digulir horizontal boleh melewati tepi viewport atau kontainer sesuai desain, tetapi setiap item harus menjadi terbaca penuh saat melewatinya; pada mode reduced-motion disediakan susunan statis yang membungkus atau dapat digulir. Provenance: explicit (arahan kreatif). Rasional: gerakan tidak boleh menyembunyikan informasi.
• NFR-05 — Identitas dimiliki aplikasi dan berkelanjutan. Identitas pengguna dimiliki aplikasi; guru dan siswa mendaftar sendiri dan memverifikasi kembali untuk melanjutkan ke data KBM tersimpan. Provenance: required_inference. Rasional: permintaan tidak menetapkan provider atau batas provisioning eksternal, sementara akses berulang ke data KBM tersimpan diperlukan agar alur kerja dapat dilanjutkan.
• NFR-06 — Pemisahan area kerja per peran. Area guru hanya dapat diakses guru dan area siswa hanya dapat diakses siswa; Landing dan Login dapat dijangkau tanpa identitas. Provenance: required_inference. Rasional: pekerjaan guru (mengelola) dan siswa (mengikuti) berbeda secara material, dan data KBM harus terikat pada peserta yang benar.
• NFR-07 — Data KBM bertahan antar sesi. Materi, aktivitas, tenggat, dan status keterlibatan siswa harus tetap utuh setelah verifikasi kembali dan pemuatan ulang. Provenance: required_inference. Rasional: KBM harus terdokumentasi dengan baik dan dapat dilanjutkan.
• NFR-08 — Cakupan jenjang SMA/SMK. Sistem ditujukan untuk jenjang SMA/SMK. Provenance: explicit. Rasional: batas keras dari sumber.

10. Tech Stack

• Frontend: React (aplikasi web dengan UI kustom milik aplikasi). [Default — not specified by user]
• Backend: Python / FastAPI. [Default — not specified by user]
• Penyimpanan: basis data relasional untuk identitas, kelas, keterkaitan guru–kelas dan siswa–kelas, materi, aktivitas, tenggat, dan status keterlibatan siswa. [Default — not specified by user]
• Kontainerisasi: Docker dan docker-compose untuk pengembangan dan penyajian. [Default — not specified by user]
• Orkestrasi: Kubernetes tidak disertakan; tidak ada kebutuhan penerapan yang menuntutnya. [Default — not specified by user]
• Tipografi: Jost dan Fraunces dimuat sebagai font web. Sumber: arah kreatif (mengikat).

11. Assumptions and Constraints

Asumsi

• A-01 — Guru dan siswa mendaftar sendiri melalui satu permukaan akses netral; tidak ada provider identitas eksternal atau batas provisioning eksternal yang ditetapkan sumber. [Default — not specified by user]
• A-02 — Penetapan keterkaitan guru–kelas dan siswa–kelas terjadi setelah identitas terbentuk dan sebelum data KBM ditampilkan; mekanisme penetapannya tidak dirinci sumber, sehingga hanya hasilnya yang diwajibkan. [Default — not specified by user]
• A-03 — Materi dan aktivitas memiliki keadaan draf dan terbit; hanya yang terbit terlihat oleh siswa. [Default — not specified by user]
• A-04 — Aktivitas memiliki tenggat, dan keterlibatan siswa ditandai oleh siswa sendiri sebagai sinyal yang terlihat guru. [Default — not specified by user]
• A-05 — Satu guru dapat mengampu lebih dari satu kelas dan satu siswa dapat mengikuti lebih dari satu kelas. [Default — not specified by user]

Kendala

• C-01 — Sistem ditujukan untuk jenjang SMA/SMK. (eksplisit)
• C-02 — Tampilan harus menarik, modern, dan kekinian. (eksplisit)
• C-03 — Palet krem–teal hangat dan tipografi Jost + Fraunces bersifat mengikat; template SaaS biru–indigo di atas putih dilarang. (arahan kreatif)
• C-04 — Tidak ada modul di luar KBM yang diminta; tidak ada jenjang selain SMA/SMK. (batas lingkup)
• C-05 — Tidak ada permintaan fitur bertahap di masa depan yang diterima; seluruh perilaku pada dokumen ini adalah cakupan saat ini. (batas horizon)

12. Glossary

• KBM (Kegiatan Belajar Mengajar): kegiatan belajar mengajar dua arah antara guru dan siswa yang menjadi inti produk ini.
• Guru SMA/SMK: aktor manusia yang mengampu kelas, menyusun materi, dan menyusun aktivitas pembelajaran.
• Siswa SMA/SMK: aktor manusia yang mengikuti kelas, mengakses materi, dan mengikuti aktivitas pembelajaran dari guru.
• Kelas yang diampu: kelas yang keterkaitannya ditetapkan pada seorang guru dan menjadi konteks kerja guru tersebut.
• Kelas yang diikuti: kelas yang keterkaitannya ditetapkan pada seorang siswa dan menjadi konteks belajar siswa tersebut.
• Materi pembelajaran: bahan ajar yang disusun guru untuk sebuah kelas, dengan judul, isi, dan status draf atau terbit.
• Aktivitas pembelajaran: kegiatan belajar yang disusun guru untuk sebuah kelas, dengan judul, petunjuk, tenggat, dan status draf atau terbit.
• Keterlibatan siswa: status tercatat bahwa seorang siswa telah mengikuti sebuah aktivitas pembelajaran.
• Molded shell: motif bentuk berulang dari arah kreatif — persegi panjang membulat asimetris dengan satu sudut jauh lebih bulat dari yang lain, dipakai untuk avatar dan ikon.
• Chip mata pelajaran: penanda warna kategori (mustard, teal, tomat, atau walnut) yang konsisten dipakai untuk mata pelajaran di seluruh halaman.