Tenang, terstruktur.
Hierarki datang dari skala, bobot, ruang, dan peran semantik — bukan dari efek. Satu ekosistem, bukan satu template.
Yang sudah diputuskan.
Kartu
Radius 20 px, latar putih, border tipis seragam di semua sisi.
Tanpa rel samping
Dilarang memberi tepi tebal berwarna hanya di satu sisi (border-left jingga/merah/navy).
Tanpa gradien & glass
Tidak pada kartu, tombol, atau permukaan konten. Glass hanya untuk satu permukaan fokus yang terdokumentasi.
Tombol
Utama: navy + teks putih, radius ±12 px, tinggi 44–48 px. Ivory tidak pernah menjadi isi tombol.
Ikon fungsional
Ikon garis (Lucide di website) untuk fungsi. Emoji bukan ikon antarmuka.
Satu header per halaman
Jangan mengulang judul halaman sebagai judul bagian pertama.
Sumber: ECOSYSTEM_DESIGN_CONTRACT.md §5, PRD_DESIGN_FREEZE.md §2.5 & §3, DESIGN_SYSTEM.md §4.
Ritme yang dapat diulang.
Kelipatan 4/8 px, sesuai skala Tailwind yang dipakai website. Angka spesifik untuk materi cetak/sosial adalah usulan.
- Web: 12 kolom, lebar konten maksimum ±1200 px.
- Sosial 1080 px: margin 72–96 px, satu pesan utama.
- Poster A4: margin 15 mm, logo di sudut yang tenang.
- Teks panjang: 60–75 karakter per baris.
Disetujui Pill hanya untuk pola utilitas/navbar kanonis, bukan tombol halaman biasa.
Yang membuat identitas pudar.
Warna per kategori (badge biru untuk Berita, ungu untuk Alumni).
Rel aksen tebal di satu sisi — seperti kartu ini.
Glassmorphism, glow, bayangan dekoratif, kartu yang membesar saat hover.
Font keempat, termasuk Plus Jakarta Sans, Sora, Manrope, atau Space Grotesk.
Kepadatan berbeda, keluarga sama.
| Portal publik | GroninGeld | |
|---|---|---|
| Target | Heritage editorial + portal komunitas modern | Pusat kendali keuangan + pendukung keputusan |
| Ruang | Lega, naratif | Lebih padat, kontrol ringkas |
| Serif | Aksen jarang | Pengecualian di dashboard |
| Mono | ≈7% | ≈3–8% |
| Warna semantik | Hanya palet inti | Warna status keuangan khusus produk, terdokumentasi |
Disetujui ECOSYSTEM_DESIGN_CONTRACT.md §4, §8, §9.
Autentik, dengan izin.
Bingkai standar
Border tipis semantik, radius 16–20 px. Tanpa overlay glass, cincin tebal, atau bingkai gradien. Alt text bermakna.
PRD_DESIGN_FREEZE.md §4.3
Hak & persetujuan
Pakai foto milik komunitas atau berizin. Untuk potret individu dan anak-anak, minta persetujuan tertulis. Hormati permintaan untuk tidak dipublikasikan.
Foto acara
Momen nyata, bukan pose berlebihan. Umumkan bahwa dokumentasi berlangsung dan sediakan opsi untuk tidak difoto.
Potret editorial
Cahaya alami dari samping, latar tenang, crop setinggi bahu atau dada, mata di sepertiga atas.
Perlakuan gambar
Koreksi eksposur dan white balance saja. Tanpa filter warna, overlay jingga, atau duotone merek.
Kualitas
Sisi panjang minimal 1600 px untuk web; hindari foto WhatsApp yang terkompresi untuk sampul.