Sampul / DESIGN & COMPONENTS
Sampul
Made of its own parts.
A printed invitation, brought to the screen. In Indonesia a wedding is announced with a card in an envelope addressed to each guest, and answered with a reply. Sampul keeps that order: the envelope with the guest’s name and the couple’s seal under a curved janur, the card with names, parents, events, date and place, then the reply card. The envelope opens the page; it never stands between the guest and the facts.
01 / Palette & type
The materials of a printed invitation, not gold foil: a terracotta envelope, a janur-yellow arch and seal, ivory card stock with a double rule, and sogan-brown ink. Names, date and place are read before any ornament; the janur arch and the venue plan are original drawings that never carry text.
#f3ebdd#3a2417#9a4330#d6c25e#fbf7ef#6b5040Bellefair 400, a high-contrast transitional display serif with sharp serifs and a graceful ampersand, sets the couple’s names, titles, the date, event names, countdown figures, the seal and the wordmark: the voice of an engraved card, not a script that hides a long name. DM Sans carries labels, times, the address, the form and the message. Prata 400 stays an unused recorded fallback.
02 / Composition & behavior
Three pages and a design book. The invitation sets the 640px envelope over the card: names and parents left, the date, events and countdown right, then the venue and its plan, then the call to reply. The reply page puts the form left and the 460px reply card right. Below 900px everything is one column; below 600px the envelope stands upright at 4:5.
With JavaScript and motion allowed, the envelope is sealed before the first paint. Open the invitation turns the flap back (0.42s), slides the card out (0.36s) and moves focus to the card’s title. The card is always in the page and can be scrolled to. With reduced motion — also when it changes while the page is open — or without JavaScript the envelope is already open. The countdown changes once a minute, without rolling digits.
The card is an article with ordered headings, a description list for the events and a figure with a title for the plan. The reply form uses fieldsets and legends; errors sit beside their group and focus moves to the first one. The countdown is not announced every minute. Copy and download report what actually happened; nothing claims to be sent.
03 / Controls, including the edges
Three pages and a design book. The invitation sets the 640px envelope over the card: names and parents left, the date, events and countdown right, then the venue and its plan, then the call to reply. The reply page puts the form left and the 460px reply card right. Below 900px everything is one column; below 600px the envelope stands upright at 4:5.
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
An envelope, not a gate
The terracotta envelope opens the page: Open the invitation turns the flap back and slides the card out. The card is always in the page below it; with reduced motion or without JavaScript the envelope is already open.
- 02
A name for each guest
A guest’s name travels in the link (?untuk=): letters, digits, spaces and .,'-() only, at most 60 characters, otherwise the general greeting. It is shown and offered to the reply card, never stored or sent.
- 03
Names, date and place first
The ivory card reads like print: the couple in Bellefair with a terracotta ampersand, their parents, the date, both events with times in WIB, the countdown and the venue with a schematic plan — before any ornament.
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.