01 · Palet inti

Tiga warna, tiga tugas

Setiap warna punya satu pekerjaan. Navy yang memimpin, putih yang memberi napas, kuning yang menunjuk. Klik kode hex untuk menyalinnya.

#001F3F

Navy Kampus

Warna utama. Dipakai untuk teks isi, header, latar section besar, dan seluruh logo versi solid. Ini yang bikin materi terbaca serius meski isinya santai.

RGB: 0, 31, 63
HSL: 210°, 100%, 12%
CMYK: 100, 51, 0, 75
Porsi: ± 30%

#FFFFFF

Putih Kertas

Latar default semua materi. Bukan sisa ruang — ini yang menjaga poster padat informasi tetap enak dibaca dari jarak dua meter.

RGB: 255, 255, 255
HSL: 0°, 0%, 100%
CMYK: 0, 0, 0, 0
Porsi: ± 60%

#FFE866

Kuning Sorak

Aksen, bukan warna latar. Tombol utama, highlight tanggal, garis bawah judul, badge "Open Recruitment". Satu halaman cukup satu–dua titik kuning.

RGB: 255, 232, 102
HSL: 51°, 100%, 70%
CMYK: 0, 9, 60, 0
Porsi: ± 10%

02 · Netral turunan

Abu-abu yang tetap berbau navy

Untuk garis pemisah, latar kartu, dan teks sekunder. Semuanya digeser ke arah biru supaya tidak pernah terlihat kotor di sebelah navy.

Mist#F4F6FAlatar kartu

Line#DCE3EDgaris & border

Muted#8FA0B8ikon nonaktif

Slate#3D5876teks sekunder

Sun Deep#E8CF3Fhover & fokus

03 · Kontras & pasangan

Kuning tidak pernah jadi warna teks di atas putih

Angka di bawah adalah rasio kontras WCAG sebenarnya. Aturannya sederhana: kuning hanya aman jika berpasangan dengan navy — ke arah mana pun.

Kombinasi	Rasio	Teks normal	Pakai untuk
Navy di Putih	16,6 : 1	AAA	Teks isi default seluruh materi
Putih di Navy	16,6 : 1	AAA	Section gelap, header, footer
Kuning di Navy	13,4 : 1	AAA	Judul aksen & angka besar di latar gelap
Navy di Kuning	13,4 : 1	AAA	Tombol utama, badge, sticker
Kuning di Putih	1,2 : 1	Gagal	Hanya blok warna, jangan pernah untuk teks
Putih di Kuning	1,2 : 1	Gagal	Tidak dipakai sama sekali

04 · Proporsi

60 / 30 / 10

Patokan cepat saat menata poster atau slide. Kalau kuningnya terasa terlalu ramai, biasanya karena porsinya lewat dari sepersepuluh halaman.

60% Putih

30% Navy

10%

Latar dan ruang kosong · Teks, header, blok gelap · Aksen dan ajakan bertindak

05 · Tipografi

Ramah dibaca, tetap punya karakter

Bricolage Grotesque untuk judul — huruf grotesk dengan lekuk yang sedikit nakal, pas untuk energi mahasiswa tanpa jatuh ke kesan main-main. Karla untuk teks isi karena bentuknya terbuka dan tetap nyaman dibaca di layar ponsel. Keduanya gratis di Google Fonts.

Aa Gg Rr

Display

Bricolage Grotesque

Judul, angka besar, nama acara. Bobot 600 & 800 saja. Fallback: Trebuchet MS.

Aa Gg Rr

Teks

Karla

Paragraf, caption, label tombol. Bobot 400, 500, 700. Fallback: Segoe UI.

Aa Gg 09

Utilitas

IBM Plex Mono

Kode warna, tanggal, nomor tiket, data tabel. Bobot 400 & 500.

06 · Skala heading

Satu skala untuk semua materi

Ukuran H1 dan H2 memakai clamp() supaya mengecil sendiri di ponsel. Jangan menambah level di luar daftar ini — kalau butuh pembeda lagi, ganti warnanya, bukan ukurannya.

Open Recruitment 2026

Bricolage 800 · clamp(2.6–3.9rem) · lh 1.02 · ls −0.035em · satu per halaman

Divisi & alur seleksi

Bricolage 800 · clamp(1.9–2.5rem) · lh 1.12 · ls −0.025em · judul section

Tahap wawancara

Bricolage 600 · 1.6rem · lh 1.22 · ls −0.015em · sub-section

Berkas yang disiapkan

Bricolage 600 · 1.25rem · lh 1.32 · judul kartu

Batas pengumpulan

Bricolage 600 · 1.0625rem · lh 1.45 · label dalam kartu

Catatan panitia

Karla 700 · 0.8125rem · uppercase · ls 0.1em · warna Slate · eyebrow

Body

Pendaftaran dibuka untuk seluruh angkatan tanpa syarat IPK minimum. Kami mencari orang yang mau belajar bareng, bukan yang sudah tahu segalanya.

Karla 400 · 1rem · lh 1.7 · maksimal 65 karakter per baris

Caption

Foto: dokumentasi Malam Keakraban 2025

Karla 400 · 0.8125rem · lh 1.6 · warna Slate

Data

14 Mar 2026 · 19.30 WIB · Aula B2

IBM Plex Mono 400 · 0.9375rem · tabular-nums

07 · Penerapan

Komponen di dua latar

Tombol utama selalu kuning dengan teks navy — di latar terang maupun gelap. Itu satu-satunya bentuk yang tidak pernah berubah, supaya orang tahu mana yang harus diklik.

Pendaftaran dibuka

Kelas Publik Speaking

Empat sesi, gratis untuk anggota. Kuota 40 orang dan biasanya penuh dalam dua hari.

Daftar sekarang Lihat silabus

Kuota terbatas

Studi banding Semarang

Tiga hari, berangkat bareng dari sekretariat. Kontribusi peserta Rp350.000.

Ambil slot Rincian biaya

08 · Do & Don't

Delapan aturan yang menutup 90% kasus

Lakukan

Mulai dari latar putih, tambahkan navy untuk struktur.
Simpan kuning untuk satu hal terpenting di halaman.
Pakai navy penuh (#001F3F) untuk teks, bukan abu-abu netral.
Beri jarak minimal setinggi huruf "H" di sekitar logo.

Hindari

Teks kuning di atas putih — rasionya 1,2:1, praktis tak terbaca.
Gradasi navy ke kuning; keduanya bertabrakan di area hijau lumpur.
Menambah warna baru untuk tiap divisi. Bedakan lewat ikon atau tipografi.
Judul dengan typeface selain Bricolage, termasuk font bawaan Canva.