Program
Inisiatif besar, berjalan bertahun-tahun, dengan rights holders yang luas.
Simpul
Design System
Bahasa visual Pamflet
Referensi hidup — bukan gambar statis — untuk token warna, tipografi, komponen, dan motion yang dipakai di seluruh situs Pamflet Generasi. Setiap contoh di halaman ini memuat css/style.css yang sama persis dengan yang dipakai di halaman lain, jadi kalau token berubah di satu tempat, semua halaman (termasuk dokumen ini) ikut berubah.
Tipografi
Tiga peran, tiga font
Aturan intinya sederhana: H1 pakai League Gothic (display, satu per halaman), judul/title pakai DM Sans (nama program, judul kartu, heading komponen), dan Libre Baskerville hanya dipakai untuk teks isi di halaman artikel pengetahuan (paragraf dan kutipan; judul dan subjudul artikel tetap League Gothic seperti H1/H2 lainnya), serta body / deskripsi di halaman lain pakai DM Sans (paragraf, penjelasan, deskripsi kartu). Heading besar setingkat section (H2 seperti judul di atas) memakai perlakuan League Gothic yang sama dengan H1 karena fungsinya sama-sama display, bukan judul komponen.
H1 — Display
font-family: var(--font-display)
"League Gothic", fallback "DM Sans"
Diatur lewat class global pf-h1 (dipakai di semua hero halaman)
"League Gothic", fallback "DM Sans"
Diatur lewat class global pf-h1 (dipakai di semua hero halaman)
Dipimpin orang muda.
H2 — Section title
font-family: var(--font-display)
Setara H1, untuk judul section
Diatur lewat class global pf-section-title
Setara H1, untuk judul section
Diatur lewat class global pf-section-title
Yang kami kerjakan
H3 — Title
font-family: var(--font-sans)
"DM Sans" — nama program, judul kartu
Belum dibagikan: judul H3 masih per halaman
"DM Sans" — nama program, judul kartu
Belum dibagikan: judul H3 masih per halaman
Simpul
Eyebrow / label
font-family: var(--font-sans)
Kategori kecil di atas heading
Diatur lewat class global pf-eyebrow
Kategori kecil di atas heading
Diatur lewat class global pf-eyebrow
Kenapa Pamflet?
Body / Deskripsi
font-family: var(--font-sans)
"DM Sans" — paragraf, subtitle, deskripsi kartu
Diatur lewat class global pf-text
"DM Sans" — paragraf, subtitle, deskripsi kartu
Diatur lewat class global pf-text
Gerakan pengetahuan lintas isu, dari kota, kampus, sampai ruang digital, dengan orang muda sendiri yang memegang kendali.
Artikel / body panjang
font-family: var(--font-article)
"Libre Baskerville" — hanya di halaman artikel; max-width 65–72ch
Belum dibagikan: teks artikel masih per halaman
"Libre Baskerville" — hanya di halaman artikel; max-width 65–72ch
Belum dibagikan: teks artikel masih per halaman
Pamflet Generasi adalah organisasi masyarakat sipil berbasis komunitas di Indonesia yang dipimpin oleh orang muda, untuk orang muda. Teks artikel dan deskripsi panjang selalu dibatasi lebar maksimum supaya baris tidak terlalu panjang untuk dibaca nyaman.
Label kecil / meta
font-family: var(--font-sans), 700, uppercase
Tanggal, kategori, badge
Belum dibagikan: label meta masih per halaman
Tanggal, kategori, badge
Belum dibagikan: label meta masih per halaman
3 Sept 2026 · 16 Komentar
Warna
Palet Pamflet
Diambil langsung dari file Figma, bukan tebakan. Warna aksen (oranye, biru, teal) dipakai konsisten untuk CTA dan shadow kartu; warna pastel dipakai untuk tag/pill.
Setiap swatch terhubung ke Global Variable warna (color-orange, color-teal, ...). Ubah nilainya di Variables Manager Elementor dan semua halaman ikut berubah.
Orange
#f15b26
Dark / Ink
#00245b
Navy
#00245b
Teal
#6fc8c0
Blue Link
#0953a7
Blue Pale
#edf6fd
Pink Tag
#f9e2ef
Yellow Tag
#e7dd77
Cyan Tag
#d3f8ff
Off-white
#fbfbfb
Gray 700
#4a4e51
Gray 500
#707579
Gray 400
#a0a5a9
Spacing
Skala jarak
Berbasis rem, sebagian besar fluid lewat clamp() supaya otomatis mengecil di layar sempit tanpa media query tambahan.
Komponen
Tombol, tag & kartu
Tombol
Klik tombol lalu ubah class global pf-btn (bentuk dasar) atau pf-btn-primary / pf-btn-secondary / pf-btn-light / pf-btn-small. Perubahan langsung berlaku di semua halaman, termasuk tombol Kontak di header.
Tag & Badge
Klik tag/badge lalu ubah class global pf-tag, pf-tag-pink / -yellow / -cyan / -blue-pale, pf-badge, pf-badge-orange. Badge dipakai di kartu blog, kartu produk dan foto program.
Simpul
Indonesian Civil Society Forum
Melamun
Keadilan Gender dan HKSR
Buku
Kartu (varian shadow)
Proyek
Inisiatif lebih kecil dan spesifik, berjalan dalam satu siklus waktu tertentu.
ICSF
Metode
Signature Pamflet: cara kerja yang dipakai ulang lintas program & isu.
Melamun
Kartu blog
Template loop Loop / Blog card (#873): klik kartu lalu Edit Template; semua kartu di Blog, Beranda dan halaman program ikut berubah. Isi kartu datang dari post masing-masing.
Kartu produk pengetahuan
Template loop Loop — Product card (ID) (#1034): klik kartu lalu Edit Template; semua kartu di Produk Pengetahuan dan Beranda ikut berubah. Isi kartu datang dari post masing-masing. Versi EN: #1439.
Kartu tim
Template loop Loop / Team person (#1436): klik kartu lalu Edit Template; semua kartu di Tentang Kami (ID/EN) ikut berubah. Isi kartu datang dari post masing-masing.
Nadia Putri
Koordinator Komunikasi
Raka Pratama
Desainer Grafis
Salsabila Anggraini
Penulis Konten
Dimas Wicaksono
Pengelola Media Sosial
Maya Kusuma
Videografer
Logo mitra
Template loop Loop / Partner logo (#1437): klik kartu lalu Edit Template; semua kartu di Tentang Kami (ID/EN) ikut berubah. Isi kartu datang dari post masing-masing.
Serrum
Transparency International Indonesia
Amnesty International
UNESCO
UNICEF
Hivos
Voice
Blok nilai (Visi / Misi)
Komponen Elementor About / Value Block / Visi, Misi, Prinsip dan About / Principle / Teal, Orange, Yellow: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di Tentang Kami (ID/EN).
Visi
Dunia di mana orang muda menikmati hak-hak asasi manusianya.
Misi
Mendorong orang muda sebagai subjek yang kritis, berinisiatif, dan berpartisipasi dalam perubahan sosial dan pembangunan berbasis keadilan dan kesetaraan. Mewujudkan sistem pendukung bagi gerakan orang muda lewat pengelolaan pengetahuan, pelatihan, dan menghubungkan peran negara, masyarakat, dan dunia usaha.
Prinsip
Interseksionalitas, inklusivitas, dan partisipasi orang muda yang bermakna dan kritis, dipraktikkan lewat program, metode, dan produk pengetahuan yang terus kami kembangkan.
Kami mengakui bahwa setiap individu dan komunitas memiliki lapis kerentanan yang berbeda yang dipengaruhi ras, etnis, gender, seksualitas, kepercayaan, abilitas, dan kelas.
Kami membuka dan menjamin akses sumber daya dan kesempatan bagi individu dan komunitas yang dipinggirkan.
Meaningful and Inclusive Youth Participation, atau partisipasi orang muda yang bermakna dan kritis
Kami berpihak pada pandangan dan pengalaman orang muda. Kami memberi peluang bagi orang muda selaku agen aktif yang dapat memengaruhi perubahan sosial.
Komponen
Kutipan & testimoni
Kartu kutipan
Belum dibagikan: kutipan di halaman program memakai widget Testimonial Carousel di tiap halaman; gayanya dari CSS bersama (program-quote).
“Di sini lah SIMPUL sangat terasa dampaknya sebagai titik kumpul lintas isu. SIMPUL sengaja menstimulasi ruang-ruang aman buat kita saling bertemu.”
Komponen
Data & fakta
Statistik dampak
Komponen Elementor Data / Stat: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di statistik dampak Beranda (ID/EN).
1,463
Pemangku Hak
Ringkasan program (fakta)
Komponen Elementor Program / Fact: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di ringkasan semua halaman program (ID/EN).
Poin bernomor
Komponen Elementor Home / Numbered Point / Teal, Orange, Yellow: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di "Kenapa Pamflet?" Beranda (ID/EN).
Dipimpin orang muda
Orang muda memegang kendali, dari riset sampai keputusan program.
Pengetahuan orang muda dirawat
Pengalaman sehari-hari orang muda dikelola jadi kajian dan produk pengetahuan yang dipakai ulang.
Inklusif dan berani bereksperimen
Metode dibangun dari partisipasi lintas identitas, bukan template yang diimpor mentah dari luar.
Baris alasan (Kenapa)
Komponen Elementor Home / Why Row / Organisasi, Individu, Kelompok: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di "Kenapa perlu organisasi orang muda?" Beranda (ID/EN).
Dipimpin orang muda
Pamflet sepenuhnya dipimpin oleh orang muda (youth-led) berusia 18-30 tahun. Tidak lagi sebagai objek kebijakan, orang muda di Pamflet memegang kendali atas seluruh aktivitas yang diinisiasi oleh Pamflet, dari mulai perencanaan, eksekusi, hingga pelaporan.
Pengetahuan orang muda dirawat
Pamflet merayakan dan merawat pengetahuan orang muda dalam memaknai dunia di sekitarnya, khususnya dalam isu sosial, budaya, dan kekuasaan. Di tengah sistem sosial yang kerap menginvalidasi pengalaman-pengetahuan orang muda, Pamflet memberi perhatian khusus agar orang muda—dalam beragam identitasnya—dapat mendokumentasikan dan menyebarluaskan pengetahuan mereka.
Inklusif dan berani bereksperimen
Sebagai organisasi orang muda, Pamflet mengajakmu bereksperimen! Salah satu kekhasan orang muda adalah keinginan untuk belajar sekreatif mungkin dan mencoba sebanyak-banyaknya. Pamflet ingin menciptakan kesempatan bagi orang muda untuk bereksperimen, mengambil risiko, dan belajar dari kesalahan.
Komponen
Program
Kegiatan program
Komponen Elementor Program / Activity dan Program / Activity – Accent: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di kegiatan semua halaman program.
Activity title
Activity description
Activity title
Activity description
CTA daftar
Link program
Komponen Elementor Program / Link / Blue, Orange, Teal, Yellow, Dark: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di "Program lainnya" (SIMPUL).
Chips program
Komponen Elementor Program / Chips (ID): klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Versi EN: Program / Chips (EN).
Komponen
Navigasi
Breadcrumb
Belum dibagikan: breadcrumb di halaman memakai widget Breadcrumbs (Yoast) dan diatur lewat CSS bersama, bukan dari sampel ini.
Baris judul section
Komponen Elementor Section / Heading Row: klik sampel lalu Edit component; perubahan berlaku di semua halaman yang memakainya. Dipakai di Beranda dan halaman program.
Cerita dari Suka Ria Remaja
Semua CeritaMotion
Animasi yang dipakai
Semua animasi menghormati prefers-reduced-motion — otomatis mati kalau user mengaktifkan pengaturan itu di OS mereka.
Reveal on scroll
Fade + slide-up 0.7s saat elemen masuk viewport, via IntersectionObserver. Dipakai di hampir semua section.Rolling text (marquee)
Logo-strip bergerak looping terus-menerus, berhenti saat di-hover.Rolling color
Teks "orang muda" di hero berputar warna tiap 6 detik: orange → blue → teal → navy.Dancing words
Kata "orang" dan "muda" bounce singkat lalu diam, berulang tiap 5 detik, dengan jeda antar kata.Hero image wiggle
Ilustrasi rumah di hero goyang playful saat di-hover mouse.Button lift
Tombol primary naik sedikit + shadow membesar saat hover, kembali saat ditekan.