Logiscale — Brand Design Kit v2.0

Logo

Mark Logiscale menggabungkan globe (jangkauan pasar) dengan panah naik (pertumbuhan terukur). Panah oranye selalu menjadi satu-satunya elemen berwarna aksen — inilah yang membuat logo langsung dikenali.

Lockup utama — horizontal + tagline

Default untuk header website, dokumen, deck, dan surat resmi. Gunakan versi ini kecuali ruang tidak memungkinkan.

Horizontal — tanpa tagline

Ruang sempit, navbar tinggi rendah, favicon bar.

Reverse

Di atas navy, foto gelap, atau footer. Panah tetap oranye.

Stacked

Ruang persegi: stempel, sertifikat, cover, watermark.

Ikon / simbol

Avatar, favicon, tombol, ruang di bawah 120px.

Monokrom navy

Cetak 1 warna, fax, stempel, embossing, dokumen hukum.

Monokrom putih

Di atas oranye atau foto ramai — jangan pakai versi full-color di sini.

App icon — navy

Default untuk aplikasi & PWA.

App icon — oranye

Varian alternatif. Pakai hemat, satu produk satu warna.

Ikon monokrom

Sponsor wall, cetak 1 warna, bordir.

Ikon reverse

Di atas latar navy/gelap.

Aturan Pakai Logo

Tiga hal yang menjaga logo tetap terbaca di mana pun: ruang kosong, ukuran minimal, dan larangan modifikasi.

Clearspace

Ruang kosong minimal di semua sisi = setengah tinggi ikon globe (X). Tidak boleh ada teks, garis, atau elemen lain masuk area ini.

ikon 24px

horizontal 120px lebar

+ tagline 180px lebar

Ukuran minimal

Ikon 24px · lockup horizontal 120px · lockup bertagline 180px. Di bawah 180px, tagline jadi tidak terbaca — turun ke versi tanpa tagline.

Jangan lakukan ini

Jangan meregang atau memampatkan. Kunci rasio.

Jangan pakai versi full-color di latar berwarna. Pakai reverse.

Jangan ganti warna logo di luar varian resmi.

Jangan tambah bayangan, outline, gradient, atau efek 3D.

Juga dilarang: mengubah jarak ikon–wordmark, menulis ulang “Logiscale” dengan font lain, memotong globe, memutar logo, atau menaruh logo di atas foto ramai tanpa lapisan gelap 40%.

Warna

Dua warna membawa seluruh merek: Deep Navy untuk otoritas dan kepercayaan, Logiscale Orange untuk energi dan arah. Klik swatch mana pun untuk menyalin kode hex.

tersalin Deep Navy#0D1F3D · RGB 13 31 61 · CMYK 79 49 0 76 Primary — porsi ±30% dari komposisi

tersalin Logiscale Orange#FF7A00 · RGB 255 122 0 · CMYK 0 52 100 0 Accent — maksimal ±10%, jangan jadi warna dominan

tersalin Gradient Accent#0D1F3D → #FF7A00 Bidang besar & dekoratif saja. Jangan taruh teks di tengahnya.

Navy scale

tersalin950#050D1A

tersalin900 · primary#0D1F3D

tersalin800 · hover#16305C

tersalin700#1F447D

tersalin600#2C5C9E

tersalin400#6D93C4

tersalin300#9FBBDC

tersalin100#DCE6F2

tersalin50#F2F6FB

Orange scale

tersalin800#A34A00

tersalin700 · teks#BD5A00

tersalin600 · hover#E66E00

tersalin500 · accent#FF7A00

tersalin400 · di navy#FF9838

tersalin300#FFB877

tersalin100#FFE7D1

tersalin50#FFF5EC

Netral

tersalinCharcoal · body#333333

tersalinGray · muted#666666

tersalinGray Light#9AA3AF

tersalinLine#E3E7EE

tersalinSurface#F2F4F7

tersalinWhite#FFFFFF

Kontras — sudah diverifikasi WCAG 2.1

Kombinasi	Rasio	Hasil
Teks putih di Navy 900	16.40:1	AAA
Teks Navy 900 di putih	16.40:1	AAA
Teks Charcoal di putih	12.63:1	AAA
Teks Orange 400 di Navy 900	7.65:1	AAA
Teks Navy 900 di Orange 500	6.28:1	AA
Teks Orange 500 di Navy 900	6.28:1	AA
Teks Gray di putih	5.74:1	AA
Teks Orange 700 di putih	4.54:1	AA
Teks Orange 500 di putih	2.61:1	GAGAL
Teks putih di Orange 500	2.61:1	GAGAL

Rasio komposisi 60 · 30 · 10

60% netral

30% navy

10%

Dua aturan yang tidak bisa ditawar.
1 — Oranye #FF7A00 tidak boleh dipakai untuk teks di atas putih (2.61:1). Untuk teks oranye gunakan #BD5A00.
2 — Teks di atas tombol oranye harus navy #0D1F3D, bukan putih.

Di atas latar navy, oranye aman untuk teks — bahkan lebih baik pakai #FF9838 (Orange 400) yang mencapai AAA.

Tipografi

Poppins geometris dan membulat — bentuknya senada dengan wordmark Logiscale, jadi dipakai untuk semua judul dan elemen UI. Inter mengambil alih di teks panjang karena lebih nyaman dibaca pada ukuran kecil.

Poppins

Regular 400 · Medium 500 · SemiBold 600 · Bold 700

Judul, subjudul, tombol, label UI, angka statistik. Beri letter-spacing:-0.02em pada ukuran display agar tidak terlihat renggang.

font-family: var(--ls-font-display)

Inter

Regular 400 · Medium 500 · SemiBold 600 · Bold 700

Paragraf, tabel, caption, form, dokumen panjang. Line-height 1.6 untuk body.

font-family: var(--ls-font-body)

Fondasi bisnis yang rapi,
pertumbuhan yang terukur.

Subheadline — satu kalimat penegas

Body text pakai Inter. Logiscale mendampingi pelaku usaha merapikan fondasi bisnis, mendigitalkan operasional, lalu menskalakannya. Setiap tahap punya ukuran keberhasilan yang jelas, sehingga pertumbuhan bisa dibuktikan — bukan sekadar dirasakan.

Caption 13px — untuk sumber data, keterangan gambar, dan catatan kaki.

Peran	Font	Ukuran	Weight	Line-height
Display	Poppins	clamp(2.5rem, 5vw, 4rem)	700	1.15
H1	Poppins	clamp(2rem, 3.6vw, 3rem)	700	1.25
H2	Poppins	clamp(1.6rem, 2.6vw, 2.125rem)	600	1.25
H3	Poppins	1.375rem	600	1.25
Body	Inter	1.0625rem	400	1.6
Small	Inter	0.9375rem	400	1.6
Caption	Inter	0.8125rem	400	1.5
Label / eyebrow	Inter	0.75rem · caps	600	1.4 · tracking .14em

Keduanya berlisensi SIL Open Font License — bebas dipakai untuk komersial, web, dan cetak.
https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap

Ikonografi

Garis tunggal, ujung membulat, grid 24px, ketebalan 1.7px. Aturan mainnya sederhana: badan ikon navy, tepat satu elemen oranye sebagai titik fokus. Ikon tanpa aksen oranye terasa mati; ikon dengan dua aksen terasa ramai.

connect

digitalize

scale

ecosystem

workflow

analytics

document

security

collab

automate

target

integrate

Tiga ikon pertama memetakan langsung ke tiga pilar: connect → Connect., digitalize → Digitalize., scale → Scale. Gunakan trio ini konsisten di website, deck, dan materi jualan.

Pattern & Elemen Grafis

Tiga elemen dekoratif untuk mengisi ruang kosong tanpa mengganggu keterbacaan. Semuanya opsional — pakai satu per komposisi, jangan ditumpuk.

Network

Motif jangkauan & koneksi. Untuk hero, cover deck, dan section pembuka.

Arrow flow

Pita pertumbuhan — turunan langsung dari panah pada logo. Selalu naik ke kanan.

Dot grid

Tekstur latar paling netral. Opacity maksimal 30% agar teks tetap terbaca.

Pattern tidak pernah menjadi latar langsung di belakang paragraf. Kalau teks harus berada di atas pattern, beri lapisan solid atau turunkan opacity pattern ke bawah 15%.

Komponen Dasar

Contoh penerapan token ke elemen UI yang paling sering dipakai.

Tombol

Mulai konsultasi Daftar sekarang Pelajari dulu

Radius pill. Teks tombol oranye selalu navy — ini syarat kontras, bukan selera.

Kartu & badge

Tahap 3

Scale.

Perluas kapasitas, kanal, dan tim setelah fondasi dan sistem digital berjalan stabil.

Statistik

tahap pendampingan

60·30·10

rasio warna

Angka besar pakai Poppins 700. Satu angka boleh oranye sebagai penekanan — sisanya navy.

Section gelap

Kapan pakai latar navy

Hero, footer, call-to-action, dan halaman penuh yang butuh bobot. Di sini oranye boleh jadi warna teks — kontrasnya 6.28:1.

Tombol di latar gelap

Section terang

Kapan pakai latar terang

Konten panjang, tabel, form, dan dokumen. Ini kondisi default — ±60% halaman sebaiknya netral terang.

Tombol di latar terang

Penerapan

Template hidup — bukan gambar mati. Semua di bawah ini dibuat dengan HTML/SVG dan token yang sama, jadi bisa Anda salin, ubah teksnya, lalu ekspor.

CONNECT · DIGITALIZE · SCALE

Kartu nama — sisi depan

Latar navy penuh, lockup reverse, pita oranye di bawah. Ukuran cetak 90×55 mm, bleed 3 mm.

Nama Anda

Jabatan

+62 ··· ···· ····
nama@logiscale.id

Kartu nama — sisi belakang

Latar putih, lockup navy, satu bilah oranye di tepi. Kontak selalu Inter, bukan Poppins.

Digital Growth
Ecosystem

Connect. Digitalize. Scale.

Cover presentasi

16:9, latar navy + pattern network 55%, judul Poppins 600, pilar oranye di bawah judul.

Kop surat

A4, logo bertagline kiri atas (lebar 45 mm), pita di kaki halaman. Margin teks 25 mm.

App icon

Radius 22.5% (gaya iOS). Ikon mengisi ±72% bidang. Untuk Android maskable, ikon turun ke 58%.

Social / OG image

1200×630. Lockup reverse kiri atas, headline Poppins 600, tiga pilar di kaki, arrow flow kanan.

Suara & Gaya Tulisan

Mendampingi, empowering, membumi. Logiscale bicara seperti mentor yang pernah turun ke lapangan: mengajak jalan bareng, bukan menggurui. Jujur soal tantangan, optimis soal hasil, dan selalu memberi satu langkah konkret.

Kanal	Sapaan	Gaya
Instagram, TikTok, WhatsApp	kamu	Santai: “nggak”, “bikin” boleh
Website, landing page	Anda	Semi-formal, hangat, kalimat pendek
Proposal, email mitra	Anda / Bapak/Ibu	Formal, bahasa baku
LinkedIn	Anda	Profesional, berbasis insight

Formula: Hook ≤12 kata (tantang mitos) → Validasi → Penjelasan bertahap (1 gagasan, ≤2 kalimat) → Punchline → satu CTA konkret, diakhiri →.

Kata khas: naik kelas · go global · fondasi bisnis · rapikan · mendampingi · ekosistem · bertumbuh · terukur · jejaring · tumbuh bersama

Hindari: “cuan instan”, “pasti sukses”, “dijamin laris”, “revolusioner”, “game changer”. Jangan mengarang angka, testimoni, atau nama klien.

Bukan begini	Tapi begini
“Solusi digital revolusioner yang akan melipatgandakan omzet Anda!”	“Logiscale mendampingi UMKM merapikan fondasi bisnis — supaya pertumbuhannya bisa diukur, bukan sekadar dirasakan.”
“Buruan daftar sebelum terlambat!!! Slot terbatas!!!”	“25 slot · pendaftaran ditutup 10 Oktober. Join Batch 02 →”

Bukan logistik. Logiscale adalah Incubator & Business Hub untuk UMKM — jangan gambarkan sebagai jasa ekspedisi, dan jangan pakai truk/kontainer/gudang sebagai visual utama.

Untuk AI

Saat meminta AI membuat gambar, caption, desain, atau halaman web, sertakan link brand-ai.md. File itu berisi semua aturan di halaman ini dalam format teks yang mudah dibaca AI, lengkap dengan URL absolut setiap logo, prompt gambar, dan checklist.

brand-ai.md

Panduan lengkap untuk ChatGPT, Claude, Gemini, dan AI lain. Tempel link ini di prompt.

brand.json

Versi JSON: token, aturan, dan URL aset untuk otomasi dan pipeline.

llms.txt

Indeks standar untuk agen AI yang menjelajah situs.

Prompt siap tempel:

Baca dan patuhi brand kit Logiscale di:
https://logiscaledigital.com/batch-02/contoh-brand-kit/brand-ai.md
Tugas: [jelaskan konten]
Kanal: [Instagram / website / proposal / LinkedIn]
Target: [siapa pembacanya]
CTA: [mis. Join Batch 02]
Jalankan checklist di bagian 8 sebelum memberikan hasil.

AI pembuat gambar tidak bisa menggambar logo dengan akurat. Minta AI menyisakan area kosong, lalu tempel logo PNG resmi dari logo/png/ di Canva atau Figma.

Daftar File

Semua aset ada di folder brand-kit/. SVG untuk web dan cetak; PNG hanya bila alat yang dipakai tidak menerima vektor.

Folder	Isi	Kapan dipakai
logo/svg/	17 varian vektor	Default untuk semua kebutuhan
logo/png/	Ikon 256/512/1024 · lockup 1600 · stacked 1000	Canva, Google Slides, WhatsApp, marketplace
favicon/	16–512, .ico, maskable, apple-touch, app icon	Website & PWA
social/	OG 1200×630 · profile 1000×1000	Meta tag, foto profil IG/LinkedIn
tokens/	tokens.css · .scss · .json · swatch sheet	Web, app, Figma Tokens, pipeline desain
icons/	12 ikon 24px (SVG) · icons/png/ 512px	Website, deck, materi jualan, Canva
patterns/	Network · arrow flow · dot grid (terang & gelap) · patterns/png/ 1920px	Hero, cover, latar section
brand-ai.md · brand.json · llms.txt	Brand kit dalam format teks & JSON	Prompt AI, otomasi konten

Pasang di web:

<link rel="stylesheet" href="tokens/tokens.css"> <link rel="icon" href="favicon/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="favicon/apple-touch-icon-180.png"> <meta property="og:image" content="social/logiscale-og-1200x630.png">