The idea
Read the board in the porch. In a small mosque or study circle the week is shared on one board: dated sessions, a notice that holds for a day, and an account of what was given and spent. Serambi makes that board the site — a wood frame with a geometric border, sheets pinned to a quiet ground, an eight-pointed rosette beside the name — so a visitor finds the time, the room and the change at a glance, and the report shows where each figure comes from. No welcome screen, portraits, slogans or appeals for money.
Visual language
Chalk wall, olive ink, a sage board in a wood frame, paper sheets and one brass notice, always with dark ink. Original non-textual Islamic geometry drawn for this study: an eight-pointed star lattice along the frame’s top and bottom, a rosette by the name and around each date, a nested pointed arch over the notice, a double rule under each sheet title. Reading surfaces stay plain; receipts and expenses are words with + and −, never green and red.
Typography
Petrona 600, a serif with firm feet, sets the wordmark, titles, date numbers and the report’s balances — weight for a board read together, calm enough to read. DM Sans carries times, rooms, controls and the report’s table, with tabular figures, so reading the figures never depends on the serif. No italic and no decorative Arabic lettering.
Layout & composition
A quiet nameplate with five chapter links, one dark line that says the data is fictional, then the framed board: the edition’s title and dates, the schedule sheet on the left (about three fifths) and the notice and infak summary on the right. The report is one wide sheet: head and period plate, four balances, the reconciliation, the table, notes and a numbered folio. Below 800px everything stacks in reading order — schedule, notice, infak — and the table folds its date into the code cell without scrolling sideways.
Motion & interaction
No animation: saving, filtering and the notices change instantly; nothing shimmers, scrolls or counts down on its own. Dates are a fixed sample edition, never “today” or “next”.
Under the surface
Static bilingual Next.js pages. The saved schedule — session IDs only — stays in this browser under its own key, size-checked (2 KiB) and validated with Zod on every read; IDs no longer on the board are dropped. The infak report is rendered at build from one ledger whose totals are computed in whole rupiah and checked for duplicate codes, unknown directions, invalid amounts and dates outside the period. TXT, CSV and print are made locally. No account, payment, registration or server.
Designed for everyone
Save is a toggle button named after its session (aria-pressed, a tick and “Saved”); focus stays on it and a short status confirms. Filters are aria-pressed buttons with a live count, and an empty result says so with a reset. Notes and the notice open with native details/summary. The table keeps its caption, headers and cell relations at every width. Every ornament is aria-hidden and pointer-free, and no state relies on colour. Clearing all asks first and returns focus.
Inside the experience
- Framed weekly board: schedule, a notice with its validity, an infak summary
- Save sessions locally; a saved list with TXT, remove one or all
- Schedule filter with a live count and an empty state
- Sample infak report: balances reconciled from seven records, CSV and print
- Original geometric ornament and own component book
- Local brand personalization
A good fit for
- Small mosques and study circles that want to show how a weekly board, a notice and a transparent infak summary would read — before deciding on real content, editors and procedures.
