Satu hue dominan (turquoise), satu kontras kuat (deep teal), satu aksen hangat (sand). Primary terang — secondary gelap. Seluruh warna berasal dari dunia yang sama: alam laut Indonesia.
60%Primary#EAF8F7
30%Secondary#1F403C
10%Accent#F2EDE3
60% — Primary
Aqua 50
#EAF8F7
Page background, section ringan, surface utama
30% — Secondary
Deep Teal 700
#1F403C
Navbar, dark card, section header, dark surface
10% — Accent
Sand 100
#F2EDE3
Card surface, chip, area konten sekunder yang hangat
BRAND COLOR — Identity only
#5BBFBF
Aqua 400 — Brand Turquoise
Hanya untuk logo, wordmark, dan elemen identity. Jangan dipakai untuk teks atau tombol UI — contrast ratio 2.8:1, tidak lolos WCAG AA minimum 4.5:1.
✕ 2.8:1 — FAIL untuk teks
UI INTERACTIVE — Buttons & links
#247A7D
Aqua 600 — UI Interactive
Semua elemen interaktif: tombol, link, focus ring, active state, progress fill. Contrast ratio 5.5:1 pada Primary — lolos WCAG AA.
Semua kombinasi teks–background wajib memenuhi WCAG AA minimum. Target ideal AAA untuk teks body utama.
Teks body utama
Deep Teal 700 pada Primary (Aqua 50) — kombinasi teks utama
11.2:1AAA
Link / label aktif
Aqua 600 (UI Interactive) pada Primary — link, tab aktif
5.5:1AA
Label tombol
Putih pada Aqua 600 — label di tombol primary
5.5:1AA
Teks di accent card
Sand 800 pada Sand 100 — teks di card accent
7.1:1AAA
Heading di accent
Deep Teal 700 pada Sand 100 — heading di card accent
9.4:1AAA
Teks di dark section
Putih pada Deep Teal 700 — teks di navbar, dark card
13.1:1AAA
Sub teks di dark
Aqua 200 pada Deep Teal 700 — sub teks, metadata di dark
7.3:1AAA
Brand color ← jangan
Brand #5BBFBF pada Primary — jangan dipakai untuk teks atau label UI apapun
2.8:1FAIL
Warna Khusus — Lotus Pink
Bukan bagian dari 60:30:10. Dipakai hanya untuk konteks emosional atau kampanye tertentu.
Light
Mid
Dark
#F0D5D8 · #C4848E · #8C3F48
Lotus Pink — Special Use Only
Diambil dari bunga teratai merah muda di moodboard. Komplementer dengan teal di color wheel. Dipakai sangat sparingly — tidak masuk proporsi 60:30:10.
Status "Kritis" atau "Butuh Perhatian Segera" pada penyu
Banner kampanye donasi darurat
Badge spesies yang terancam punah
Elemen ilustrasi / dekoratif saja — bukan teks UI reguler
03 — Typography
Sistem Tipografi
Display · Heading · Label · Navigation · CTAPlus Jakarta Sans — SIL Open Font License
Lestarikan Penyu Indonesia
Light 300
Caption kecil
Regular 400
Body heading
Medium 500
Section title
Semibold 600
Display, CTA
Bold 700
Hero, wordmark
Body · Paragraf · Artikel edukasi · Form · CaptionDM Sans — SIL Open Font License
Program adopsi penyu PenyuCon memungkinkan kamu memantau perkembangan penyu secara langsung — mulai dari penetasan telur hingga penyu dewasa. Setiap donasi tercatat transparan dan dapat diverifikasi kapan saja melalui riwayat donasi di aplikasi.
Title Medium16sp · Medium · +0.15Si Kura — Penyu Hijau
Body Large16sp · Regular · +0.5Status kesehatan: sangat baik
Body Medium14sp · Regular · +0.25Pantai Pangumbahan, Sukabumi, Jawa Barat
Label Large14sp · Medium · +0.1DONASI SEKARANG
Label Small11sp · Medium · +0.572% TARGET TERPENUHI
Halaman Donasi
Adopsi Penyu
Program Transparansi PenyuCon
Setiap penyu yang kamu adopsi mendapatkan timeline perkembangan yang diperbarui setiap minggu, lengkap dengan foto dan laporan dari tim konservasi kami.
Adopsi Penyu Hijau — 1 TahunRp 350.000
Sponsor Penetasan — Per SarangRp 750.000
Mitra Konservasi — TahunanRp 2.000.000
04 — Iconography
Lucide Icons
Stroke-based, 1.5px stroke-width, konsisten di semua ukuran. Gunakan satu gaya (stroke) di seluruh aplikasi — jangan campur dengan filled icon.
Pada latar Primary (60%) — stroke warna Aqua 600
Beranda
Donasi
Timeline
Statistik
Invoice
Profil
Cari
Notifikasi
Pada latar Secondary (30%) — stroke Aqua 200, active pakai Aqua 400
Beranda
Donasi
Aktif ●
Statistik
Invoice
Profil
Cari
Notif
16px · Label
20px · Tombol
24px · Navigasi
32px · Hero fitur
48px · Ilustrasi
05 — Shape System
Border Radius — MD3
Enam tingkat corner radius dari Material Design 3. Ukuran komponen menentukan tingkat radius — jangan menggunakan nilai di luar skala ini.
4px
Extra Small
4dp · --r-xs
Form field, menu item, tooltip
8px
Small
8dp · --r-sm
Chip, icon button, thumbnail
12px
Medium
12dp · --r-md
Card, list item, text field
16px
Large
16dp · --r-lg
Bottom sheet, nav drawer, modal
28px
Extra Large
28dp · --r-xl
FAB, large dialog, side panel
∞
Full
9999px · --r-full
Button pill, badge, chip, progress
Penerapan di komponen PenyuCon
Penyu Hijau Full
Card Adopsi Medium
Aktif
06 — Design Guidelines
Do & Don't
Do
Pakai Aqua 600 (#247A7D) untuk semua tombol, link, dan elemen interaktif — bukan brand color #5BBFBF
Pertahankan proporsi 60:30:10 — Primary (Aqua 50) dominan, Secondary (Deep Teal 700) tegas di dark area, Accent (Sand 100) hangat dan sparingly di card
Gunakan Deep Teal 700 (#1F403C) untuk body text dan heading di latar terang — contrast 11:1, AAA
Pasangkan Plus Jakarta Sans (heading) dengan DM Sans (body) — konsisten di seluruh layar
Lucide Icons stroke-width 1.5px — satu gaya stroke di seluruh aplikasi, ukuran 24px untuk navigasi
Ikuti skala MD3: card = 12dp, tombol = full (9999px), form field = 4dp, FAB = 28dp
Lotus Pink hanya untuk status kritis, kampanye darurat, atau badge spesies terancam — tidak lebih
Don't
Jangan pakai #5BBFBF untuk teks, label, atau tombol UI — hanya untuk logo dan identity mark saja
Jangan tambah warna di luar 3 skala (Aqua, Deep Teal, Sand) tanpa alasan yang terdokumentasi
Jangan campur filled icon dan stroke icon dalam halaman yang sama
Jangan gunakan Pure White (#FFFFFF) sebagai bg page atau Pure Black (#000000) sebagai teks — pakai token dari skala
Jangan terapkan border-radius di luar 6 tingkat MD3 — tidak ada rx=6, rx=10, atau rx=20
Jangan center-align paragraf body lebih dari 3 baris — gunakan left-align untuk keterbacaan
Jangan tampilkan Lotus Pink berdampingan dengan warna oranye atau merah lain di UI yang sama
07 — Brand in Use
Komponen dalam Konteks
PenyuCon · Program Adopsi
Ringkasan Donasi
Transparansi penuh untuk setiap rupiah yang diberikan
Adopsi Penyu Hijau — 1 TahunRp 350.000
Biaya operasional konservasiRp 50.000
Monitoring & laporan bulananRp 25.000
TotalRp 425.000
penyucon.id
PenyuCon
Semua
Penyu Hijau
Belimbing
Lekang
Penyu Saya
Si Kura — Penyu Hijau
Sehat · Pantai Pangumbahan
72% target terpenuhi
Biru — Penyu Lekang
Pemulihan · Cilacap, Jateng
38% target terpenuhi
Beranda
Edukasi
Donasi
Profil
Colour World
60% Primary · Aqua 50 · #EAF8F7
30% Secondary · Deep Teal 700
10% Accent · Sand 100
UI Interactive · Aqua 600
Brand · Aqua 400
PenyuCon
Platform Konservasi Penyu Indonesia
Brand & Design System · Kelompok 9 · IF3151 IMK 2025