mulaibaca

Pelacak membaca untuk keluarga Indonesia

Brand Guide v1.0

01 — Warna utama

Amber#C26E2A--color-amberCTA · Tombol · Aksen
Amber Hover#A35920--color-amber-hoverState hover amber
Amber Soft#FDF0E4--color-amber-softLatar amber ringan
Forest#1E4530--color-forestLogo · Header · Gelap
Forest Dark#122B1D--color-forest-darkLatar sangat gelap
Lime#BFE040--color-limeAksen energetik

02 — Warna netral & teks

Parchment#FAF7F2--color-parchmentBackground utama
Cream#EDE0CB--color-creamCard alt · Highlight
Border#E0D8CE--color-borderGaris · Stroke
Ink#0C0C0A--color-inkTeks utama · Border
Ink Secondary#3D4E45--color-ink-secondaryTeks sekunder
Ink Muted#7A8E83--color-ink-mutedLabel · Placeholder

03 — Warna semantik

Success#2A6B3E--color-successBerhasil · Terverifikasi
Success Soft#EAF4EE--color-success-softLatar pesan sukses
Error#B83232--color-errorError · Peringatan
Error Soft#FDECEA--color-error-softLatar pesan error
Info#2D4D7A--color-infoInfo · Notifikasi
Info Soft#EBF0F8--color-info-softLatar pesan info

04 — Tipografi

Display — Fraunces

mulaibaca

Kebiasaan membaca

  • Google Fonts · Optical size 9–144
  • Weight: 400 regular · 700 bold
  • Style: Normal · Italic
  • Digunakan: Logo, heading halaman, nama buku

Body — Geist Sans

Aa Bb Cc 123

Bersih, modern, mudah dibaca
di semua ukuran layar.

  • Google Fonts · Variable
  • Weight: 400 · 500 medium · 600 semibold
  • Digunakan: UI, body teks, label, tombol

Skala tipografi

Display / 42px / 700imulaibaca
H1 / 28px / 700Rak Bacaanmu
H2 / 22px / 700Sedang Dibaca
H3 / 17px / 600Target Minggu Ini
Body / 16px / 400Kamu sudah membaca 42 halaman hari ini.
Caption / 12px / 500DIPERBARUI 5 MENIT LALU
Overline / 10px / 700KOLEKSI KAMI

05 — Tombol

Semua tombol: border 1.5px solid #0C0C0A · border-radius 6px · box-shadow offset 2px · font Geist 600

06 — Badge & label

fiksinon-fiksiTerverifikasi✓ Selesai⚠ ErrorBarureminder

Font 10px · font-weight 600 · border-radius 999px · padding 3px 8px

07 — Shadow system (Neobrutalist)

XS
--shadow-brutal-xs
SM
--shadow-brutal-sm
MD
--shadow-brutal
LG
--shadow-brutal-lg

Shadow selalu solid (bukan blur) · warna #0C0C0A · offset kanan-bawah · tidak ada spread

08 — Kombinasi logo yang direkomendasikan

mulaibacaForest + Amber · Utama
mulaibacaParchment + Forest · Light
mulaibacaAmber + White · Marketing
mulaibacaInk + Lime · Bold
mulaibacaCream + Ink · Dokumen
mulaibacaLime + Forest · Accent

Font: Fraunces · weight 700 · italic · letter-spacing -0.5px · Gunakan kombinasi pertama (Forest + Amber) sebagai logo utama

09 — Panduan penggunaan

GUNAKAN

  • ✓ Fraunces italic untuk heading & wordmark
  • ✓ Amber sebagai warna aksi utama (CTA)
  • ✓ Forest untuk header & background gelap
  • ✓ Parchment sebagai background default
  • ✓ Hard offset shadow (flat, no blur)
  • ✓ Border 1.5–2px solid #0C0C0A
  • ✓ Lime sparingly sebagai aksen kejutan

HINDARI

  • ✕ Gradient atau efek blur
  • ✕ Font selain Fraunces & Geist
  • ✕ Teks putih di atas Lime (#BFE040)
  • ✕ Drop shadow berbasis blur
  • ✕ Warna di luar palet yang ditentukan
  • ✕ Lime sebagai warna dominan/background
  • ✕ Border-radius > 16px pada elemen besar