Design system KarbonKita — v2.0

Arykyat: buku catatan verifikasi warga kota. Palet hangat dari deck MAGE 12, hijau aksi dari aplikasi Flutter, dengan satu keluarga tipografi.

Arah desain

Landing page dirancang sebagai catatan umum (public ledger) tentang aksi hijau warga: bukan SaaS hijau generik.

Palet warna

Semua warna didefinisikan dalam tokens.css. Kelas semantik (--color-primary, --color-muted, dll.) digunakan di komponen untuk memudahkan konsistensi.

Kertas
#F4F1E8
Kertas lembut
#ECE6D8
Tinta
#0C2117
Hutan
#2E6B4E
Aksi
#1B8039
Hutan sudah herob
#C8F169
Amar
#7A3E00
Melambat
#5E6B61

Tipografi

Semua teks menggunakan Plus Jakarta Sans. Mono hanya untuk hash dan angka teknis.

Display
Aksi kecil, dampak besar.
Head 2
Aksi hijau sulit diukur, mudah dicurangi.
Head 3
Dari poin ke warung sebelah.
Lead / paragraf
Aplikasi memverifikasi aksi hijau harianmu — memilah sampah, berjalan, bersepeda — lalu menukar poinnya jadi voucher UMKM di sekitar.
Kecil
CTA, tahapan, waktu aksi.
Mono (hash angka)
4C687A8ADD877D3DD30235ED71C28519A399632881BE9CC0270F67656D51346C

Komponen

Tombol utama
Tautan
Cara verifikasinya Baca design system
Strukcat ketika
KarbonKita Contoh bukti aksi

Pahlawan Plastik Terpilah

Terverifikasi
AI
94%
XP
+300
EP
+100
Hash 4c68…51346c
Tingkat lencana
Earth Newbie

Newbie

0 XP

Earth Keeper

Keeper

500 XP

Earth Warrior

Warrior

1.700 XP

Papan ekonomi
Kopi LokalRp20.000
Poin
500
Status
Diproses
Klaim Payout Selesai
Pertanyaan umum
Apakah KarbonKita gratis?

Ya. Warga tidak membayar, dan mitra UMKM tidak dikenakan biaya pendaftaran.

Gerak & aksesibilitas:
  • Animasi hanya untuk satu urutan masuk di hero dan hempasan (stamp). Semua transisi lain dimatikan oleh prefers-reduced-motion: reduce.
  • Tombol dan tautan punya border 3px saat :focus-visible untuk navigasi keyboard. Pada panel gelap, border menggunakan --color-focus: #C8F169.
  • Semua gambar penting punya alt yang deskriptif. Strukcat dan papan tidak punya alt. Kendaraan tidak bisa berpindah peta; kami menghargai vehicle terhadap – dan aksesibilitas hak apel.
  • Kata-kata penting atau kontrasi tinggi menggunakan font besar dengan maupun kombinasi warna yang tepat. Font dan kondisi hitam.
Sumber data:

Semua angka masalah diambil dari dokumen resmi: Kementerian ESDM (2023), SIPSN (2024), BPS via GoodStats (2025) . Angka sampah adalah data yang tercatat di SIPSN, bukan klaim seluruh Indonesia. Level tiers dan reward misi mengikuti kode aplikasi.