Brand Guideline
Panduan singkat identitas visual Istana Sunat Lampung
Ringkasan aturan logo, warna, dan tipografi agar semua materi — website, konten sosial, spanduk, hingga kartu nama — terlihat satu suara: modern, bersih, dan terpercaya.
01 — Logo
Emblem istana bermahkota emas
Emblem selalu dipakai bersama wordmark, kecuali di ruang sangat kecil (favicon, ikon aplikasi, profil sosial) yang boleh emblem saja.
Lockup utama
IstanaSunatLampungDipakai di navbar, header halaman, dan footer.
Emblem saja
Ukuran minimum 24px. Di bawah itu, detail mahkota mulai hilang.
Di latar teal
Aman dipakai di latar teal gelap tanpa perlu bingkai tambahan.
Lakukan
- Pakai komponen BrandLogo (size sm untuk navbar, md untuk footer) agar ukuran & spacing konsisten.
- Beri ruang kosong minimal setinggi mahkota di sekeliling emblem.
- Letakkan emblem di atas latar teal gelap, krem, atau putih.
- Wordmark selalu "Istana" + "Sunat" berwarna primary, dengan label LAMPUNG di bawahnya.
Hindari
- Mengubah warna emblem, menambah gradient, bayangan, atau outline baru.
- Merentangkan, memiringkan, atau memutar logo — skala harus proporsional.
- Menaruh logo di atas foto ramai tanpa lapisan gelap transparan.
- Menulis ulang wordmark dengan font lain atau huruf kapital semua.
02 — Warna
Teal klinis, emas premium, krem hangat
Semua warna berupa design token (CSS variable) sehingga otomatis menyesuaikan mode terang & gelap. Jangan menulis kode warna langsung di komponen.
Teal Istana (Primary)
--primary
oklch(0.52 0.11 172)
dark: oklch(0.7 0.12 172)
Tombol utama, link, aksen judul, latar section brand.
Emas Mahkota (Accent)
--accent
oklch(0.84 0.13 78)
Badge promo, highlight harga, garis dekoratif. Maksimal 10% area.
Sand
--sand
oklch(0.955 0.026 88)
Latar kartu lembut dan pemisah antar section.
Background
--background
oklch(0.988 0.008 95)
dark: oklch(0.17 0.025 172)
Latar halaman utama (krem hangat, bukan putih murni).
Foreground
--foreground
oklch(0.24 0.03 165)
dark: oklch(0.965 0.012 120)
Teks utama dan heading.
Muted foreground
--muted-foreground
oklch(0.52 0.02 165)
Teks pendukung, caption, label kecil.
Proporsi ideal: 70% netral (krem/putih/teks), 20% teal, 10% emas. Emas hanya untuk menarik perhatian ke satu hal per layar.
03 — Tipografi
Fraunces untuk judul, Plus Jakarta Sans untuk teks
Dua keluarga font saja. Fraunces memberi kesan hangat dan berkelas pada judul; Plus Jakarta Sans menjaga teks tetap mudah dibaca di layar kecil.
--font-display · Fraunces · 500–700
Sunat modern tanpa jarum
Judul section & halaman
Dipakai untuk h1–h3. Selalu tracking rapat (tracking-tight) dan maksimal dua baris pada mobile.
--font-sans · Plus Jakarta Sans · 400–700
Body 16px — Klinik sunat modern di Bandar Lampung dengan metode laser tanpa jarum, ditangani langsung oleh dr. Sunny Wadhwa.
Body kecil 14px — untuk keterangan, caption, dan daftar manfaat.
Label 12px uppercase
Teks isi 400–500, tombol dan label 600–700. Hindari font lain, termasuk font default perangkat.
Bentuk & bayangan
Radius kartu
rounded-3xl
Tombol & badge
rounded-full
Bayangan
shadow-soft