Brand Guideline

Sirah Community — identitas yang teduh & berwibawa.

Sistem visual untuk seluruh produk Sirah Community Indonesia. Biru navy yang tenang, emas yang hangat, dan ink yang tegas — modern, mudah dibaca, konsisten di terang maupun gelap.

Sirah Community IndonesiaSirah Community Indonesia
01

Identitas

Nama produk selalu ditulis “Sirah Community Indonesia”, disingkat “SCI”. Hindari “Sirah Comunity” atau ejaan lain.

Nama Produk

Sirah Community Indonesia

Singkatan

SCI

Kategori

Platform belajar Sirah Nabawiyah

Karakter

Teduh, tegas, ramah-profesional

Tone of Voice

Jelas, hangat, terpercaya

Bahasa

Bahasa Indonesia

Prinsip

Satu fokus per layar. Biru navy bekerja sebagai aksi utama, emas sebagai aksen — bukan dekorasi. Ruang kosong adalah fitur, bukan kekosongan.

03

Warna

Palet brand tetap (nilai hex pasti) dipakai untuk warna yang harus akurat. Token semantik oklch (background, foreground, card…) beradaptasi otomatis di mode terang & gelap.

Palet brand

#2F318C

sci-primary

Warna utama — aksi, tautan, brand

#202450

sci-primary-dark

Dark surface, hover primary

#52559C

sci-primary-soft

Gradien, aksen lembut

#A3A5CA

sci-primary-light

Primary pada latar gelap

#2F57A7

sci-sky

Ujung gradien, variasi biru

#30D79F

sci-aqua

Sukses, gratis, aksen segar

#E3A738

sci-gold

Aksen & CTA sekunder (≤10%)

#C88435

sci-gold-dark

Ujung gradien emas, hover

#F8E6C2

sci-sand

Tint emas lembut, badge

#FFF8E8

sci-cream

Latar hangat, kartu highlight

Netral

#101828

sci-charcoal

Ink — heading, teks pekat

#344054

sci-body

Teks isi

#667085

sci-muted

Teks sekunder, caption

#EAECF0

sci-line

Border, pemisah

#F8FAFC

sci-bg

Latar lapang

Proporsi & aksesibilitas

Dominan netral (putih/ink) · biru navy 20–40% sebagai aksi · emas maksimal 10% sebagai aksen. Teks ink di atas putih atau navy = kontras tinggi. Hindari teks emas untuk body.

04

Tipografi

Dua peran: Display (Plus Jakarta Sans) untuk judul & angka, dan Body (Inter) untuk paragraf & UI. Heading memakai letter-spacing -0.03em.

Ag

Display

Plus Jakarta Sans

Judul, hero, angka · 400–800

Ag

Body

Inter

Paragraf, UI, caption

DISPLAY XL

Belajar Sirah Nabawiyah

Jakarta · 44/800
DISPLAY

Satu platform, semua kelas

Jakarta · 30/800
HEADING

Kelas terbaru pekan ini

Jakarta · 20/700
BODY

Materi disusun berjenjang oleh ahli Sirah, dari pengantar hingga kajian mendalam.

Inter · 16/400
CAPTION

Diperbarui 2 menit lalu

Inter · 12/500
05

Bahasa grafis

Kartu squircle sudut membulat, blok warna flat, glassmorphism halus, dan bayangan lembut. Tegas dan lapang — bukan gradient ramai.

Radius (squircle)

rounded-lg · 12px
rounded-2xl · 16px
rounded-sci · 24px
rounded-sci-lg · 32px

Glass & bayangan

sci-glass-dark
sci-glass-light
sci-glass-blue
sci-glass-gold
shadow-sci-card
shadow-sci-blue
shadow-sci-gold
shadow-sci-glass
06

Komponen

Tombol pill, kartu, dan chip. Satu aksi utama (navy) per layar; emas untuk CTA sekunder yang hangat.

Tombol
Mulai BelajarDaftar Program Lihat Semua
Chip & badge
PemulaGratisSirah NabawiyahE-Course
Kartu (.course-card)
📚

Pengantar Sirah Nabawiyah

Rp 149.000

Arahkan kursor — kartu terangkat dengan bayangan lembut.

07

Aplikasi

Penerapan token pada layar nyata — kartu konten, blok CTA, dan permukaan gelap.

Ajakan

Mulai perjalanan ilmu hari ini

Daftar Gratis
Kelas

Madrasah Sirah Nabawiyah

26 materi · 56+ video kajian · sertifikat resmi.

Akses seumur hidup

Mode gelap

Kehadiran hari ini

96%

Semua materi on-track.

08

Do & Don't

Patokan cepat untuk tim desain dan konten SCI.

Lakukan
  • Tulis nama produk: “Sirah Community Indonesia”
  • Navy (sci-primary) untuk aksi utama
  • Emas untuk aksen & CTA sekunder (≤10%)
  • Pasangkan Plus Jakarta Sans + Inter
  • Konsistenkan radius squircle (16–32px)
Hindari
  • Ejaan lain: “Sirah Comunity”, “SCI” tanpa konteks
  • Tombol utama berwarna emas
  • Teks emas untuk body / paragraf panjang
  • Gradient ramai & bayangan berat
  • Mencampur sudut tajam dan membulat
09

Developer

Token sudah tersedia sebagai utility Tailwind v4 di web/app/globals.css (@theme inline). Pakai langsung nama kelasnya.

/* Warna brand (nilai hex tetap) */
bg-sci-primary       /* #2F318C — aksi utama */
bg-sci-gold          /* #E3A738 — aksen */
bg-sci-aqua          /* #30D79F — sukses/gratis */
text-sci-charcoal    /* #101828 — ink */
text-sci-muted       /* #667085 — teks sekunder */

/* Token semantik (adaptif terang/gelap) */
bg-background  text-foreground  bg-card  bg-muted
text-primary   text-accent      border-border

/* Radius & bayangan */
rounded-sci      /* 24px */    shadow-sci-card
rounded-sci-lg   /* 32px */    shadow-sci-blue / shadow-sci-gold

/* Font */
font-heading  /* Plus Jakarta Sans */
font-sans     /* Inter */

Sumber lengkap token: web/app/globals.css. Lihat juga komponen nyata di /kelas.