Notice · sample P-01
The learning circle moves rooms for now.
Sunday’s session on 08 November uses the study room, not the main hall. Please follow the signs when you arrive.
Applies to 08 Nov 2026 · fictional location
Serambi / DESIGN & COMPONENTS
Serambi
Made of its own parts.
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.
01 / Palette & type
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.
Chalk wall
#ece9deOlive ink
#28372dBrass notice
#e0c887Sheet paper
#faf8f0Sage board
#dde2d3Wood frame
#6c4834Petrona 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.
02 / Composition & behavior
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.
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”.
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.
03 / Controls, including the edges
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.
Component inventory (scroll to inspect)
READ THE DESIGN
Why it is arranged this way.
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
- 01
The week, not a welcome
The opening is this week’s board: the edition’s title and its fixed dates, then the schedule — no welcome screen, slogan or portrait. The dark line above says once that every figure is fictional, and a brand cannot remove it. On a phone the schedule follows the title directly.
- 02
A date in a rosette, a Save that names its session
Every date sits in the same rosette medallion and stays text; the medallion marks no state. Save is a toggle named after its session — a tick and “Saved” when pressed, never colour alone — kept in this browser only and counted in the chapter link.
- 03
Ornament on the frame, never on the text
The eight-pointed lattice runs along the frame’s top and bottom and the arch crowns the notice: original drawings, masks hidden from assistive technology. Sheets and figures stay plain, and the infak summary’s balances come from the same seven records as the report.
04 / Form & feedback contract
A local preparation note. Try an empty submission, correct it, then export your actual input.
Your prepared note will appear here.
05 / Actual working components
Activate the full workspace when you want to inspect it. Its interaction code loads on demand.
06 / Ornament, on the actual sheets
Three original, non-textual drawings made for this study from grid coordinates: the eight-pointed rosette, the lattice tile and the nested arch. They follow the board — its edge, the name, each date, the notice — and stop before any reading surface. No calligraphy or sacred text, and no claim to a particular building, region or tradition.
Each motif alone
03Tuesday
One 96 × 48 tile — a rosette, a diamond and diagonal joints — repeated by CSS: 68 × 34 px along the top (48 × 24 on phones), 40 × 20 along the bottom (32 × 16). Tiles meet on the middle line, so the band has no seam.
Space kept around text
One band at the top of the board, one at the bottom, one arch on the notice; small rosettes tie the name and the dates to them. Sheets, figures and the report’s table stay plain, and phones shrink the motif, never the text.
03Tuesday
Keeping a trust together
Sample speaker A · Main hall (fictional)
General studySpecimen
With a brand
The brand’s main colour becomes the ink, adjusted until it reads on wall, paper, board and brass; its second colour takes the frame and ornament. The notice’s arch and rule stay brown, and the fictional labels stay.
Dark brand · #b53629 / #1739ad → #9a2e23 / #1739ad
Infak record · sample
September 2026
01–30 Sep · 7 synthetic records · IDR
- Opening balance
- Rp8,450,000
- Receipts
- + Rp4,750,000
- Expenses
- − Rp3,250,000
- Closing balance
- Rp9,950,000
Fictional figures. No payment is accepted.
Light brand · #f2c94c / #7fd1ff → #61501e / #395e73
Infak record · sample
September 2026
01–30 Sep · 7 synthetic records · IDR
- Opening balance
- Rp8,450,000
- Receipts
- + Rp4,750,000
- Expenses
- − Rp3,250,000
- Closing balance
- Rp9,950,000
Fictional figures. No payment is accepted.
On paper, and without masks
Printed, the long bands and the arch drop away and everything turns black on white; the rosette and the sheet rules stay. Where a browser has no masks, the frame, labels, dates and actions are complete without any ornament.
As printed
03Tuesday
Keeping a trust together
Sample speaker A · Main hall (fictional)
General studySpecimen
Notice · sample P-01
The learning circle moves rooms for now.
Sunday’s session on 08 November uses the study room, not the main hall. Please follow the signs when you arrive.
Applies to 08 Nov 2026 · fictional location
Without masks
03Tuesday
Keeping a trust together
Sample speaker A · Main hall (fictional)
General studySpecimen
Notice · sample P-01
The learning circle moves rooms for now.
Sunday’s session on 08 November uses the study room, not the main hall. Please follow the signs when you arrive.
Applies to 08 Nov 2026 · fictional location
The proposal planned a dark board; it was not built. Like every demo, Serambi stays light under a dark system or catalogue scheme, so the brass notice always keeps its dark ink.