Sistem visual VarmOS: logo, warna, tipografi, elemen grafis Arc Field, dan penerapannya di seluruh materi.
01 — Konsep
Ide besarnya diambil langsung dari huruf O pada logo: bola hijau yang dipotong beberapa busur konsentris. Busur itu dilepas dari logo dan dibesarkan menjadi Arc Field — bidang gelombang yang memancar dari satu titik. Satu titik awal, jangkauan yang terus melebar.
Titik fokus, jarak celah, dan arah busur mengikuti konstruksi bola pada logo. Tidak ada bentuk baru yang diciptakan.
Busur memancar dari satu titik fokus di luar bingkai. Jangan pakai dua sumber pancaran dalam satu bidang.
Warna berpindah dari hijau (dekat fokus) ke biru (jauh), lalu menghilang. Ini yang membuat komposisi terasa dalam, bukan ramai.
02 — Key Visual
Versi gelap adalah tampilan utama VarmOS. Fokus busur di kiri bawah, logo di kiri atas, headline besar di tengah kiri. Ruang kosong di kanan atas sengaja dibiarkan lega.
Contoh headline — ganti dengan tagline resmi VarmOS.
Key visual utama — rasio 16:9. Teks headline adalah contoh; ganti dengan tagline resmi.
Untuk dokumen, proposal, dan materi cetak. Fokus busur dipindah ke kanan atas agar area teks tetap bersih.
Versi terang — untuk materi cetak & dokumen.
03 — Logo
Logo utama berwarna penuh dipakai di latar putih atau terang. Untuk latar berwarna, gelap, atau foto, gunakan versi satu warna.
Primer — latar putih/terang
Reversed — latar Varm Blue
Mono putih — latar gelap
Mono putih — di atas foto
Mono biru — cetak 1 warna
Mono hitam — dokumen, fax, stempel
Sisakan jarak minimal x di semua sisi, di mana x = ½ diameter bola. Tidak ada elemen lain yang boleh masuk area ini.
Di bawah ukuran ini celah pada bola mulai menutup dan logo kehilangan karakternya.
| Media | Logo penuh | Bola saja |
|---|---|---|
| Layar | 120 px lebar | 24 px |
| Cetak | 28 mm lebar | 7 mm |
| Favicon / app icon | — | 16 px (versi solid) |
Di bawah 16 px gunakan bola versi satu warna tanpa gradasi.
04 — Warna
Biru memegang struktur dan kepercayaan; hijau hanya muncul sebagai aksen dan energi. Perbandingan yang sehat kira-kira 70% biru/netral, 20% putih, 10% hijau.
Hijau adalah warna paling terang di palet — bagus untuk grafis, berisiko untuk teks kecil. Angka di bawah dihitung dengan rumus WCAG 2.1.
| Kombinasi | Rasio | Status |
|---|---|---|
| Varm Blue di atas putih | 8.47:1 | AAA |
| Putih di atas Varm Blue | 8.47:1 | AAA |
| Slate di atas putih | 6.13:1 | AA |
| Fresh Green di atas Ink | 8.34:1 | AAA |
| Deep Green di atas putih | 3.62:1 | AA (teks besar saja) |
| Signal Green di atas putih | 2.87:1 | Grafis saja — bukan teks |
05 — Tipografi
Satu keluarga huruf untuk semua kebutuhan. Geometris tapi tetap hangat — sesuai dengan arti nama varm. Lisensi SIL Open Font, gratis dipakai untuk web maupun cetak.
Fallback jika Figtree tidak tersedia: Inter, lalu system-ui. Hindari mencampur lebih dari tiga bobot dalam satu komposisi.
06 — Elemen grafis
Arc Field boleh dipotong bingkai, tapi titik fokusnya sebaiknya berada di luar area terlihat. Jangan menaruh teks di atas busur terpadat.
Sudut kiri bawah — komposisi standar
Sudut kanan atas — versi terang
Fokus di dalam bingkai — badge, spot ilustrasi
Bola sebagai elemen tunggal (avatar, favicon, watermark)
07 — Penerapan
Semua template memakai konstruksi yang sama: logo di kiri atas, headline di area teks, Arc Field memancar dari sudut terjauh dari teks.
Post Instagram / LinkedIn — 1080 × 1080
Sisakan 250 px aman di atas & bawah.
Story / Reels cover — 1080 × 1920
Banner LinkedIn / cover YouTube — 1584 × 396
Bola dipakai sendirian, dalam versi putih di atas gradasi biru. Jangan menaruh wordmark di dalam ikon.
128 px · 72 px · 44 px · avatar bulat
08 — Ringkasan