Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Serambi / DESAIN & KOMPONEN

Serambi
Disusun dari bagiannya sendiri.

Baca papan di serambi. Di masjid kecil atau majelis, sepekan dibagikan lewat satu papan: jadwal bertanggal, pengumuman yang berlaku untuk satu hari, dan catatan apa yang diterima serta dibelanjakan. Serambi menjadikan papan itu situsnya — bingkai kayu dengan pinggiran geometris, lembar yang ditempel pada bidang tenang, roset bintang delapan di samping nama — sehingga pengunjung langsung menemukan waktu, ruang, dan perubahannya, dan laporannya menunjukkan asal setiap angka. Tanpa layar sambutan, potret, slogan, atau ajakan memberi uang.

01 / Palet & tipografi

Dinding kapur, tinta zaitun, bidang papan hijau pupus dalam bingkai kayu, lembar kertas, dan satu pengumuman kuningan, selalu dengan tinta gelap. Geometri Islami nontekstual yang digambar orisinal untuk studi ini: kisi bintang delapan di sepanjang bingkai atas dan bawah, roset di samping nama dan di sekeliling tiap tanggal, lengkung ceruk bersarang di atas pengumuman, garis ganda di bawah judul lembar. Bidang baca tetap polos; penerimaan dan pengeluaran ditulis dengan kata serta + dan −, tidak pernah hijau dan merah.

Dinding kapur#ece9de
Tinta zaitun#28372d
Lembar kuningan#e0c887
Kertas lembar#faf8f0
Bidang papan#dde2d3
Bingkai kayu#6c4834

Petrona 600, serif berkaki tegas, dipakai untuk wordmark, judul, angka tanggal, dan saldo laporan — berbobot untuk papan yang dibaca bersama, tetap tenang untuk dibaca. DM Sans membawa jam, ruang, kontrol, dan tabel laporan dengan angka tabular, sehingga membaca angka tidak bergantung pada serif. Tanpa italic dan tanpa huruf Arab dekoratif.

02 / Komposisi & perilaku

Papan nama tenang dengan lima tautan bab, satu baris gelap yang menyatakan datanya fiktif, lalu papan berbingkai: judul dan tanggal edisi, lembar jadwal di kiri (sekitar tiga perlima) serta pengumuman dan ringkasan infak di kanan. Laporan adalah satu lembar lebar: kepala dan pelat periode, empat saldo, rekonsiliasi, tabel, keterangan, dan folio bernomor. Di bawah 800px semuanya bertumpuk sesuai urutan baca — jadwal, pengumuman, infak — dan tabel memindahkan tanggal ke sel kode tanpa geser mendatar.

Tanpa animasi: menyimpan, menyaring, dan pemberitahuan berubah seketika; tidak ada yang berkilau, bergulir, atau menghitung mundur sendiri. Tanggal adalah edisi contoh tetap, bukan “hari ini” atau “berikutnya”.

Simpan adalah tombol tekan yang dinamai sesuai jadwalnya (aria-pressed, centang, dan “Tersimpan”); fokus tetap padanya dan status singkat mengonfirmasi. Saringan berupa tombol aria-pressed dengan hitungan langsung, dan hasil kosong menyatakannya dengan tombol reset. Keterangan dan pengumuman dibuka dengan details/summary bawaan. Tabel mempertahankan caption, header, dan relasi sel di setiap lebar. Setiap ornamen aria-hidden dan tidak menangkap klik, dan tidak ada keadaan yang bergantung pada warna. Menghapus semua selalu bertanya dulu dan mengembalikan fokus.

03 / Kontrol hingga setiap detail

Papan nama tenang dengan lima tautan bab, satu baris gelap yang menyatakan datanya fiktif, lalu papan berbingkai: judul dan tanggal edisi, lembar jadwal di kiri (sekitar tiga perlima) serta pengumuman dan ringkasan infak di kanan. Laporan adalah satu lembar lebar: kepala dan pelat periode, empat saldo, rekonsiliasi, tabel, keterangan, dan folio bernomor. Di bawah 800px semuanya bertumpuk sesuai urutan baca — jadwal, pengumuman, infak — dan tabel memindahkan tanggal ke sel kode tanpa geser mendatar.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Papan mingguan berbingkai: jadwal, pengumuman berlaku, ringkasan infak

    Papan nama tenang dengan lima tautan bab, satu baris gelap yang menyatakan datanya fiktif, lalu papan berbingkai: judul dan tanggal edisi, lembar jadwal di kiri (sekitar tiga perlima) serta pengumuman dan ringkasan infak di kanan. Laporan adalah satu lembar lebar: kepala dan pelat periode, empat saldo, rekonsiliasi, tabel, keterangan, dan folio bernomor. Di bawah 800px semuanya bertumpuk sesuai urutan baca — jadwal, pengumuman, infak — dan tabel memindahkan tanggal ke sel kode tanpa geser mendatar.

  2. 02
    Simpan jadwal secara lokal; daftar tersimpan dengan TXT, hapus satu atau semua

    Simpan adalah tombol tekan yang dinamai sesuai jadwalnya (aria-pressed, centang, dan “Tersimpan”); fokus tetap padanya dan status singkat mengonfirmasi. Saringan berupa tombol aria-pressed dengan hitungan langsung, dan hasil kosong menyatakannya dengan tombol reset. Keterangan dan pengumuman dibuka dengan details/summary bawaan. Tabel mempertahankan caption, header, dan relasi sel di setiap lebar. Setiap ornamen aria-hidden dan tidak menangkap klik, dan tidak ada keadaan yang bergantung pada warna. Menghapus semua selalu bertanya dulu dan mengembalikan fokus.

  3. 03
    Saringan jadwal dengan hitungan langsung dan keadaan kosong

    Halaman Next.js statis dwibahasa. Jadwal tersimpan — hanya ID sesi — tinggal di peramban ini dengan kuncinya sendiri, diperiksa ukurannya (2 KiB) dan divalidasi dengan Zod setiap dibaca; ID yang tidak lagi ada di papan dibuang. Laporan infak dirender saat build dari satu catatan yang totalnya dihitung dalam rupiah bulat serta diperiksa dari kode ganda, arah asing, nominal tidak sah, dan tanggal di luar periode. TXT, CSV, dan cetak dibuat lokal. Tanpa akun, pembayaran, pendaftaran, atau server.

  4. 04
    Laporan infak contoh: saldo direkonsiliasi dari tujuh catatan, CSV, dan cetak

    Halaman Next.js statis dwibahasa. Jadwal tersimpan — hanya ID sesi — tinggal di peramban ini dengan kuncinya sendiri, diperiksa ukurannya (2 KiB) dan divalidasi dengan Zod setiap dibaca; ID yang tidak lagi ada di papan dibuang. Laporan infak dirender saat build dari satu catatan yang totalnya dihitung dalam rupiah bulat serta diperiksa dari kode ganda, arah asing, nominal tidak sah, dan tanggal di luar periode. TXT, CSV, dan cetak dibuat lokal. Tanpa akun, pembayaran, pendaftaran, atau server.

  5. 05
    Ornamen geometris orisinal dan buku komponen sendiri

    Halaman Next.js statis dwibahasa. Jadwal tersimpan — hanya ID sesi — tinggal di peramban ini dengan kuncinya sendiri, diperiksa ukurannya (2 KiB) dan divalidasi dengan Zod setiap dibaca; ID yang tidak lagi ada di papan dibuang. Laporan infak dirender saat build dari satu catatan yang totalnya dihitung dalam rupiah bulat serta diperiksa dari kode ganda, arah asing, nominal tidak sah, dan tanggal di luar periode. TXT, CSV, dan cetak dibuat lokal. Tanpa akun, pembayaran, pendaftaran, atau server.

  6. 06
    Personalisasi merek lokal

    Halaman Next.js statis dwibahasa. Jadwal tersimpan — hanya ID sesi — tinggal di peramban ini dengan kuncinya sendiri, diperiksa ukurannya (2 KiB) dan divalidasi dengan Zod setiap dibaca; ID yang tidak lagi ada di papan dibuang. Laporan infak dirender saat build dari satu catatan yang totalnya dihitung dalam rupiah bulat serta diperiksa dari kode ganda, arah asing, nominal tidak sah, dan tanggal di luar periode. TXT, CSV, dan cetak dibuat lokal. Tanpa akun, pembayaran, pendaftaran, atau server.

  7. 07
    Pilihan, tooltip & area gulir

    Perilaku papan ketik dibagikan; tema ini memiliki warna popup, batas, radius, tipografi, dan fokus sendiri.

  8. 08
    Ekspor & batasan

    Studi desain fiktif. Serambi bukan masjid atau lembaga nyata; pemateri, ruang, tanggal, dan angkanya adalah contoh. Tidak menerima uang, pendaftaran, atau data pribadi, laporannya tidak diaudit atau disahkan, dan menyimpan jadwal tidak mengonfirmasi kehadiran.

BACA KEPUTUSAN DESAIN

Mengapa disusun seperti ini.

Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.

Tangkapan layar desktop asli demo Serambi.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Pekannya, bukan sambutan

    Pembukanya papan pekan ini: judul edisi dan tanggal tetapnya, lalu jadwal — tanpa layar sambutan, slogan, atau potret. Baris gelap di atasnya menyatakan sekali bahwa setiap angka fiktif, dan brand tidak bisa menghapusnya. Di ponsel jadwal langsung menyusul judul.

  2. 02

    Tanggal dalam roset, Simpan yang menyebut jadwalnya

    Setiap tanggal berada dalam medali roset yang sama dan tetap teks; medali tidak menandai keadaan. Simpan adalah tombol tekan yang dinamai sesuai jadwalnya — centang dan “Tersimpan” saat ditekan, tidak pernah warna saja — tersimpan di peramban ini saja dan dihitung di tautan bab.

  3. 03

    Ornamen di bingkai, tidak di teks

    Kisi bintang delapan mengikuti bingkai atas dan bawah, dan ceruk memahkotai pengumuman: gambar orisinal, mask yang disembunyikan dari teknologi bantu. Lembar dan angka tetap polos, dan saldo ringkasan infak berasal dari tujuh catatan yang sama dengan laporan.

04 / Kontrak formulir & respons

Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.

10–1.000 karakter. Disimpan pada halaman ini.

Catatan yang disiapkan akan muncul di sini.

05 / Komponen yang benar-benar bekerja

Aktifkan ruang kerja lengkap saat ingin memeriksanya. Kode interaksinya dimuat sesuai kebutuhan.

06 / Ornamen, pada lembar asli

Tiga gambar orisinal nontekstual yang dibuat untuk studi ini dari koordinat grid: roset bintang delapan, ubin kisi, dan lengkung bersarang. Ketiganya mengikuti papan — tepinya, nama, tiap tanggal, pengumuman — dan berhenti sebelum bidang baca. Tanpa kaligrafi atau teks sakral, dan tanpa klaim atas bangunan, daerah, atau tradisi tertentu.

Tiap motif sendiri

Roset kop: bintang delapan dengan tiga garis lembar. 52 × 52 px, garis 2 unit pada grid 64; nama di sampingnya tetap teks Petrona.

03Selasa

Medali tanggal: garis luar bintang di sekeliling tanggal yang tetap teks. 46 × 46 px dengan angka 27 px; 34 × 38 px dengan 23 px di ponsel. Semua tanggal memakainya — bukan penanda keadaan.
Ceruk di atas pengumuman: dua lengkung berpuncak bersarang dan roset kecil. 120 × 72 px; 100 × 60 px di ponsel; punya ruang sendiri dan tidak memotong judul.

Satu ubin 96 × 48 — roset, belah ketupat, dan sambungan diagonal — diulang oleh CSS: 68 × 34 px di atas (48 × 24 di ponsel), 40 × 20 di bawah (32 × 16). Ubin bertemu di garis tengah, jadi jalurnya tanpa sambungan.

Kisi sebagai jalur atas dan bawah papan. Satu mask, bukan ratusan node SVG.

Ruang aman di sekitar teks

Satu jalur di atas papan, satu di bawah, satu ceruk pada pengumuman; roset kecil mengikat nama dan tanggal ke sana. Lembar, angka, dan tabel laporan tetap polos, dan ponsel mengecilkan motif, tidak pernah teksnya.

  1. 03Selasa

    18.30–19.30 WIB · 03 November

    Menjaga amanah bersama

    Pemateri contoh A · Ruang utama (fiktif)

    Kajian umumSpesimen

Pengumuman · contoh P-01

Lingkar belajar pindah ruang sementara.

Sesi Ahad, 08 November, memakai ruang belajar, bukan ruang utama. Silakan mengikuti papan penunjuk saat tiba.

Berlaku untuk 08 Nov 2026 · lokasi fiktif

Dengan brand

Warna utama brand menjadi tinta, disesuaikan sampai terbaca di dinding, kertas, papan, dan kuningan; warna keduanya mengambil bingkai dan ornamen. Ceruk dan garis pengumuman tetap cokelat, dan label fiktif tetap ada.

Brand gelap · #b53629 / #1739ad → #9a2e23 / #1739ad

Catatan infak · contoh

September 2026

01–30 Sep · 7 catatan sintetis · IDR

Saldo awal
Rp8.450.000
Penerimaan
+ Rp4.750.000
Pengeluaran
− Rp3.250.000
Saldo akhir
Rp9.950.000
Baca rincian pencatatan

Angka fiktif. Tidak menerima pembayaran.

Brand terang · #f2c94c / #7fd1ff → #61501e / #395e73

Catatan infak · contoh

September 2026

01–30 Sep · 7 catatan sintetis · IDR

Saldo awal
Rp8.450.000
Penerimaan
+ Rp4.750.000
Pengeluaran
− Rp3.250.000
Saldo akhir
Rp9.950.000
Baca rincian pencatatan

Angka fiktif. Tidak menerima pembayaran.

Di kertas, dan tanpa mask

Saat dicetak, jalur panjang dan ceruk hilang dan semuanya menjadi hitam di atas putih; roset dan garis lembar tetap. Pada peramban tanpa mask, bingkai, label, tanggal, dan tindakan tetap lengkap tanpa ornamen.

Seperti dicetak

  1. 03Selasa

    18.30–19.30 WIB · 03 November

    Menjaga amanah bersama

    Pemateri contoh A · Ruang utama (fiktif)

    Kajian umumSpesimen

Pengumuman · contoh P-01

Lingkar belajar pindah ruang sementara.

Sesi Ahad, 08 November, memakai ruang belajar, bukan ruang utama. Silakan mengikuti papan penunjuk saat tiba.

Berlaku untuk 08 Nov 2026 · lokasi fiktif

Tanpa mask

  1. 03Selasa

    18.30–19.30 WIB · 03 November

    Menjaga amanah bersama

    Pemateri contoh A · Ruang utama (fiktif)

    Kajian umumSpesimen

Pengumuman · contoh P-01

Lingkar belajar pindah ruang sementara.

Sesi Ahad, 08 November, memakai ruang belajar, bukan ruang utama. Silakan mengikuti papan penunjuk saat tiba.

Berlaku untuk 08 Nov 2026 · lokasi fiktif

Usulan merencanakan papan gelap; itu tidak dibangun. Seperti semua demo, Serambi tetap terang di bawah skema gelap sistem atau katalog, sehingga pengumuman kuningan selalu bertinta gelap.