Brand Guidelines
Panduan identitas visual dan standar brand Divistant untuk memastikan konsistensi di semua touchpoints. Diselaraskan dengan nilai Commitment dari CIRCCA — konsisten dalam cara kami tampil dan berkomunikasi.
Kapan & Untuk Siapa
| Aspek |
Keterangan |
| Kapan dibaca |
Saat membuat materi visual apapun: presentasi, social media, collateral, website, email template |
| Untuk siapa |
Design & Creative, Marketing Team, semua departemen yang membuat materi visual atas nama Divistant |
| Prasyarat |
Memahami Positioning & Messaging untuk context brand |
Tujuan & Outcome
| Tujuan |
Outcome |
| Memastikan visual identity Divistant konsisten di semua materials |
Brand compliance rate ≥ 95% |
| Menyediakan guidelines yang actionable untuk tim |
Self-service brand kit yang mudah digunakan |
| Membangun brand recognition di pasar |
Consistent look & feel yang profesional |
Logo
Logo Utama
| Variant |
Penggunaan |
Keterangan |
| Logo Full (Horizontal) |
Penggunaan utama di semua materials |
Logo + wordmark horizontal |
| Logo Stacked (Vertikal) |
Untuk area sempit atau square format |
Logo + wordmark vertikal |
| Logomark Only |
Favicon, social media avatar, app icon |
Hanya simbol tanpa wordmark |
| Wordmark Only |
Konteks dimana logomark sudah visible |
Hanya teks "Divistant" |
Logo Usage Rules
| Rule |
Keterangan |
| Clear space |
Minimum clear space = tinggi logomark di semua sisi |
| Minimum size |
Full logo: min 120px width (digital), 30mm (print). Logomark: min 24px/8mm |
| Background |
Gunakan versi yang kontras dengan background. Dark logo on light, light logo on dark |
| Color |
Hanya gunakan warna resmi. Jangan ubah warna logo |
Logo Don'ts
| Jangan |
Alasan |
| Memutar atau memiringkan logo |
Mengurangi brand recognition |
| Menambah efek (shadow, glow, outline) |
Mengurangi kejelasan |
| Mengubah proporsi (stretch/squeeze) |
Merusak integritas visual |
| Menempatkan di atas background yang sibuk/ramai |
Mengurangi legibility |
| Mengubah font atau warna elemen logo |
Merusak brand consistency |
| Menambahkan elemen lain ke dalam logo |
Logo harus berdiri sendiri |
Warna
Primary Colors
| Nama |
Hex |
RGB |
Penggunaan |
| Divistant Blue |
#2563EB |
37, 99, 235 |
Primary brand color, CTAs, headers, links |
| Divistant Dark |
#1E293B |
30, 41, 59 |
Text, headings, dark backgrounds |
| White |
#FFFFFF |
255, 255, 255 |
Backgrounds, text on dark |
Secondary Colors
| Nama |
Hex |
RGB |
Penggunaan |
| Success Green |
#10B981 |
16, 185, 129 |
Positive indicators, CTAs secondary |
| Warning Amber |
#F59E0B |
245, 158, 11 |
Highlights, attention elements |
| Purple Accent |
#8B5CF6 |
139, 92, 246 |
Innovation, AI-related content |
| Light Gray |
#F1F5F9 |
241, 245, 249 |
Section backgrounds, subtle dividers |
| Medium Gray |
#94A3B8 |
148, 163, 184 |
Secondary text, borders, icons |
Color Usage Rules
| Rule |
Detail |
| 60-30-10 rule |
60% neutral (white/dark), 30% primary (blue), 10% accent (green/amber/purple) |
| Accessibility |
Pastikan contrast ratio ≥ 4.5:1 untuk text, ≥ 3:1 untuk large text (WCAG AA) |
| Background combos |
White bg + Dark text (default), Dark bg + White text (hero sections), Light Gray bg + Dark text (content sections) |
| Never |
Jangan gunakan warna di luar palette tanpa approval Marketing Lead |
Typography
Font Families
| Type |
Font |
Fallback |
Penggunaan |
| Primary |
Inter |
-apple-system, sans-serif |
Website, digital materials, UI |
| Secondary |
Arial |
Helvetica, sans-serif |
Documents (Word, PDF), email |
| Monospace |
JetBrains Mono |
Fira Code, monospace |
Code snippets, technical content |
Type Scale
| Element |
Size |
Weight |
Line Height |
Penggunaan |
| Display |
48-64px |
Bold (700) |
1.1 |
Hero headlines, landing pages |
| H1 |
32-40px |
Bold (700) |
1.2 |
Page titles |
| H2 |
24-28px |
Semi-bold (600) |
1.3 |
Section headers |
| H3 |
20-24px |
Semi-bold (600) |
1.4 |
Subsection headers |
| Body |
16px |
Regular (400) |
1.6 |
General text |
| Small |
14px |
Regular (400) |
1.5 |
Captions, metadata |
| Micro |
12px |
Medium (500) |
1.4 |
Labels, badges |
Typography Rules
| Rule |
Detail |
| Heading hierarchy |
Selalu ikuti hierarchy: H1 → H2 → H3. Jangan skip level |
| Body text |
Max 75 characters per line untuk readability optimal |
| Emphasis |
Gunakan bold untuk emphasis, bukan ALL CAPS atau underline |
| Links |
Always Divistant Blue, underlined on hover |
Imagery & Photography
Style Guidelines
| Aspek |
Guideline |
| Tone |
Professional tapi approachable. People should look natural, not staged |
| Subjects |
Fokus pada: tim bekerja bersama, kolaborasi dengan klien, teknologi in action, workspace modern |
| Diversity |
Representasi yang beragam (gender, usia, latar belakang) |
| Quality |
Minimum 300dpi untuk print, 72dpi untuk web. No pixelated/blurry images |
| Color treatment |
Slight cool-tone color grading sesuai brand palette |
Image Don'ts
| Jangan |
Alasan |
| Stock photos yang terlalu "staged" |
Mengurangi authenticity |
| Images dengan watermark |
Unprofessional |
| Overly filtered/edited |
Mengurangi trust |
| Images yang tidak representatif |
Tidak sesuai CIRCCA value Respect |
Icons & Illustrations
| Aspek |
Guideline |
| Style |
Line icons, consistent stroke weight (1.5-2px) |
| Color |
Mengikuti brand color palette |
| Library |
Lucide Icons (primary), custom illustrations untuk hero sections |
| Consistency |
Gunakan satu icon library per project/page. Jangan mix styles |
Presentasi & Documents
Presentation (PowerPoint/Google Slides)
| Element |
Standard |
| Aspect ratio |
16:9 (widescreen) |
| Font |
Inter atau Arial |
| Title slide |
Logo + title + subtitle + tanggal |
| Content slides |
Max 3-5 bullet points, gunakan visuals |
| Color scheme |
Follow brand color palette |
| Footer |
© Divistant + Confidential (jika applicable) |
| Last slide |
Contact information + CTA |
Document (Word/PDF)
| Element |
Standard |
| Font |
Arial 11pt body, 14pt+ headings |
| Margins |
2.5cm all sides |
| Header |
Logo (left) + document title (right) |
| Footer |
Page number + © Divistant + confidentiality notice |
| Headings |
Divistant Blue for H1, Divistant Dark for H2+ |
Email
| Element | Standard |
|---------|----------|
| Signature | Name, Title, Divistant | Phone | Email |
| Logo | Include Divistant logo in signature |
| Font | Arial 11pt (email-safe font) |
| Links | Divistant Blue |
Profile Standards
| Platform |
Avatar |
Cover/Banner |
Bio |
| LinkedIn (Company) |
Logomark |
Brand banner with tagline |
Company description + website link |
| LinkedIn (Personal) |
Professional headshot |
Divistant brand banner (optional) |
Role + Divistant + expertise |
| Twitter/X |
Logomark |
Brand banner |
Short description + website |
| Instagram |
Logomark |
N/A |
Short description + website |
Post Visual Guidelines
| Type |
Spec |
Guideline |
| Single Image |
1200x1200px (LinkedIn), 1080x1080px (IG) |
Use brand colors, clean typography, logo watermark |
| Carousel |
1200x1500px per slide |
Consistent template across slides, CTA on last slide |
| Video thumbnail |
1280x720px |
Clear title text, professional look |
| Quote card |
1200x1200px |
Quote + author + Divistant branding |
Brand Do's & Don'ts Summary
Do
|
|
| Gunakan template resmi untuk presentasi dan documents |
Referensikan brand guidelines saat membuat materi baru |
| Minta review Design/Marketing untuk materi customer-facing |
Gunakan foto berkualitas tinggi yang authentic |
| Ikuti color palette dan typography standards |
Pastikan logo digunakan dengan benar (clear space, min size) |
| Tulis sesuai brand voice: consultative, confident, approachable |
Cross-check dengan Positioning & Messaging |
Don't
|
|
| Jangan buat materi tanpa mengikuti brand guidelines |
Jangan ubah warna atau proporsi logo |
| Jangan gunakan font di luar brand font families |
Jangan gunakan stock photos yang terlihat "palsu" |
| Jangan publish materi customer-facing tanpa review |
Jangan gunakan "terbaik", "nomor satu" tanpa bukti |
| Jangan campurkan icon styles dalam satu deliverable |
Jangan abaikan accessibility (contrast, readability) |
Flow di BizOps
| Kebutuhan |
Lokasi di BizOps |
| Brand assets (logo, templates) |
Drive → Marketing → Brand Kit |
| Website visual updates |
Website Builder / Company Profile CMS |
| Blog post images |
Blog → Blog Post → Featured Image |
| Newsletter design |
Newsletter → Email Template |
Skenario Umum
Skenario 1: Perlu buat presentasi cepat untuk klien
Situasi: Meeting klien besok, butuh deck profesional.
Tindakan: Gunakan presentation template resmi di BizOps Drive. Ikuti structure: title slide, agenda, content (max 5 bullets per slide), next steps, contact. Pastikan semua visual mengikuti brand palette.
Skenario 2: Partner/klien minta logo Divistant
Situasi: Klien mau memasukkan logo Divistant di materi mereka (event, partnership, dll).
Tindakan: Berikan logo dari Brand Kit resmi (di BizOps Drive). Sertakan usage guidelines singkat: clear space minimum, jangan ubah warna/proporsi. Jika penggunaan tidak standar, minta review Marketing Lead.
Skenario 3: Tim Sales buat proposal tapi visualnya tidak konsisten
Situasi: Proposal dari Sales menggunakan font, warna, atau layout yang tidak sesuai brand.
Tindakan: Redirect ke template resmi. Jika template belum ada untuk use case tersebut, request ke Marketing/Design untuk pembuatan template baru. Jangan fix per-case — buat template agar scalable.
Checklist
Brand Compliance Quick Check
Quarterly Brand Audit Checklist
Tanggung Jawab
| Aktivitas |
Design |
Marketing Lead |
Content Mkt |
Digital Mkt |
All Teams |
| Brand guidelines maintenance |
R/A |
A |
I |
I |
I |
| Template creation |
R |
A |
C |
C |
I |
| Brand compliance review |
R |
R |
C |
C |
I |
| Quarterly brand audit |
R |
A |
C |
C |
I |
| Day-to-day brand compliance |
C |
I |
I |
I |
R |
R = Responsible, A = Accountable, C = Consulted, I = Informed
Referensi
Standar:
- Core Values (CIRCCA) — Commitment: konsistensi brand sebagai refleksi komitmen
- WCAG 2.1 AA — Accessibility standards untuk digital materials
Halaman terkait dalam Marketing Playbook:
Playbook lain: