Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Sampul / DESAIN & KOMPONEN

Sampul
Disusun dari bagiannya sendiri.

Undangan cetak yang dibawa ke layar. Di Indonesia pernikahan diumumkan dengan kartu dalam amplop yang ditujukan kepada setiap tamu, lalu dibalas. Sampul menjaga urutan itu: amplop bernama tamu dan bersegel pasangan di bawah janur melengkung, kartu berisi nama, orang tua, acara, tanggal, dan tempat, lalu kartu balasan. Amplop membuka halaman; amplop tidak pernah menghalangi tamu dari faktanya.

01 / Palet & tipografi

Bahan undangan cetak, bukan foil emas: amplop terakota, lengkung dan segel kuning janur, kertas gading berbingkai garis ganda, dan tinta coklat sogan. Nama, tanggal, dan tempat terbaca sebelum ornamen; janur melengkung dan denah tempat adalah gambar orisinal yang tidak pernah membawa teks.

Latar gading#f3ebdd
Tinta sogan#3a2417
Amplop terakota#9a4330
Kuning janur#d6c25e
Kertas kartu#fbf7ef
Sogan redup#6b5040

Bellefair 400, serif display transisional berkontras tinggi dengan serif tajam dan ampersand yang anggun, menulis nama pasangan, judul, tanggal, nama acara, angka hitung mundur, segel, dan wordmark: suara kartu cetak, bukan huruf skrip yang menyulitkan nama panjang. DM Sans membawa label, waktu, alamat, formulir, dan pesan. Prata 400 tetap cadangan tercatat yang tidak dipakai.

02 / Komposisi & perilaku

Tiga halaman dan buku desain. Undangan meletakkan amplop 640px di atas kartu: nama dan orang tua di kiri, tanggal, acara, dan hitung mundur di kanan, lalu tempat dan denahnya, lalu ajakan membalas. Halaman konfirmasi meletakkan formulir di kiri dan kartu balasan 460px di kanan. Di bawah 900px semuanya satu kolom; di bawah 600px amplop tegak 4:5.

Dengan JavaScript dan gerak diizinkan, amplop tertutup sebelum cat pertama. Buka undangan memutar tutup ke belakang (0,42 detik), menggeser kartu keluar (0,36 detik), dan memindahkan fokus ke judul kartu. Kartu selalu ada di halaman dan bisa digulir. Dengan reduced motion — juga bila berubah saat halaman terbuka — atau tanpa JavaScript amplop sudah terbuka. Hitung mundur berganti sekali semenit, tanpa angka berputar.

Kartu berupa article dengan heading berurutan, daftar deskripsi untuk acara, dan figure bertitle untuk denah. Formulir balasan memakai fieldset dan legend; galat berada di samping kelompoknya dan fokus berpindah ke galat pertama. Hitung mundur tidak diumumkan setiap menit. Salin dan unduh melaporkan apa yang benar-benar terjadi; tidak ada yang mengaku terkirim.

03 / Kontrol hingga setiap detail

Tiga halaman dan buku desain. Undangan meletakkan amplop 640px di atas kartu: nama dan orang tua di kiri, tanggal, acara, dan hitung mundur di kanan, lalu tempat dan denahnya, lalu ajakan membalas. Halaman konfirmasi meletakkan formulir di kiri dan kartu balasan 460px di kanan. Di bawah 900px semuanya satu kolom; di bawah 600px amplop tegak 4:5.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Amplop bersegel yang terbuka menjadi kartu

    Tiga halaman dan buku desain. Undangan meletakkan amplop 640px di atas kartu: nama dan orang tua di kiri, tanggal, acara, dan hitung mundur di kanan, lalu tempat dan denahnya, lalu ajakan membalas. Halaman konfirmasi meletakkan formulir di kiri dan kartu balasan 460px di kanan. Di bawah 900px semuanya satu kolom; di bawah 600px amplop tegak 4:5.

  2. 02
    Nama tamu dari tautan, hanya ditampilkan

    Kartu berupa article dengan heading berurutan, daftar deskripsi untuk acara, dan figure bertitle untuk denah. Formulir balasan memakai fieldset dan legend; galat berada di samping kelompoknya dan fokus berpindah ke galat pertama. Hitung mundur tidak diumumkan setiap menit. Salin dan unduh melaporkan apa yang benar-benar terjadi; tidak ada yang mengaku terkirim.

  3. 03
    Hitung mundur, denah skematik, dan berkas kalender

    Demo Next.js statis dwibahasa. Amplop berupa HTML dan SVG yang digerakkan transform CSS; skrip inline kecil menutupnya sebelum cat. Nama tamu dibaca dari ?untuk= di peramban, dibatasi 60 huruf, angka, spasi, dan .,'-(), dan tidak pernah disimpan. Draf balasan disimpan sebagai { version: 1, reply } dengan kunci collection-sampul-rsvp-v1, paling besar 2 KiB, divalidasi zod/mini pada setiap baca dan tulis. Berkas .ics dibuat di halaman.

  4. 04
    Kartu balasan sebagai pesan WhatsApp

    Demo Next.js statis dwibahasa. Amplop berupa HTML dan SVG yang digerakkan transform CSS; skrip inline kecil menutupnya sebelum cat. Nama tamu dibaca dari ?untuk= di peramban, dibatasi 60 huruf, angka, spasi, dan .,'-(), dan tidak pernah disimpan. Draf balasan disimpan sebagai { version: 1, reply } dengan kunci collection-sampul-rsvp-v1, paling besar 2 KiB, divalidasi zod/mini pada setiap baca dan tulis. Berkas .ics dibuat di halaman.

  5. 05
    Buku komponen dan status sendiri

    Demo Next.js statis dwibahasa. Amplop berupa HTML dan SVG yang digerakkan transform CSS; skrip inline kecil menutupnya sebelum cat. Nama tamu dibaca dari ?untuk= di peramban, dibatasi 60 huruf, angka, spasi, dan .,'-(), dan tidak pernah disimpan. Draf balasan disimpan sebagai { version: 1, reply } dengan kunci collection-sampul-rsvp-v1, paling besar 2 KiB, divalidasi zod/mini pada setiap baca dan tulis. Berkas .ics dibuat di halaman.

  6. 06
    Personalisasi merek lokal

    Demo Next.js statis dwibahasa. Amplop berupa HTML dan SVG yang digerakkan transform CSS; skrip inline kecil menutupnya sebelum cat. Nama tamu dibaca dari ?untuk= di peramban, dibatasi 60 huruf, angka, spasi, dan .,'-(), dan tidak pernah disimpan. Draf balasan disimpan sebagai { version: 1, reply } dengan kunci collection-sampul-rsvp-v1, paling besar 2 KiB, divalidasi zod/mini pada setiap baca dan tulis. Berkas .ics dibuat di halaman.

  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. Laras & Dimas, orang tua mereka, tanggal, Pendopo Sekar Arum, dan alamatnya tidak ada; nomor +44 7700 900142 berasal dari rentang khusus drama dan bukan milik siapa pun. Halaman tidak mengirim apa pun dan tidak menyimpan daftar tamu.

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 Sampul.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Amplop, bukan gerbang

    Amplop terakota membuka halaman: Buka undangan memutar tutup ke belakang dan menggeser kartu keluar. Kartu selalu ada di halaman di bawahnya; dengan reduced motion atau tanpa JavaScript amplop sudah terbuka.

  2. 02

    Nama untuk setiap tamu

    Nama tamu dibawa lewat tautan (?untuk=): hanya huruf, angka, spasi, dan .,'-(), paling banyak 60 karakter, selain itu sapaan umum. Nama ditampilkan dan ditawarkan ke kartu balasan, tidak pernah disimpan atau dikirim.

  3. 03

    Nama, tanggal, dan tempat dulu

    Kartu gading terbaca seperti cetakan: pasangan dalam Bellefair dengan ampersand terakota, orang tua, tanggal, kedua acara dengan waktu WIB, hitung mundur, dan tempat dengan denah skematik — sebelum ornamen apa pun.

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.