Design System v1.0 — 2025

One Brand.
Two Worlds.

Panduan desain terpadu yang memisahkan identitas profesional PT. SMKarier Inovasi Digital (.co.id) dengan ekosistem dinamis Platform SMKarier (.com).

Color Systems
Typography
Components
SM

Corporate

smkarier.co.id
Target Audience
Investor, B2B Partners, Pemerintah
Tone of Voice
Trust, Professional, Clean
SM
Primary Color #149A94 SM Teal

Platform

smkarier.com
Target Audience
Gen Z, Jobseeker, HR, Sekolah
Tone of Voice
Energetic, Fresh, Disdik-Inspired
#1D4ED8
#EAB308
#10B981
SM

Corporate Branding Kit

For .co.id & Official Communications

Primary Palette

Primary
#149A94
SM Teal
RGB: 20, 154, 148
Dark
#0F172A
Slate 900
RGB: 15, 23, 42
Light
#F8FAFC
Slate 50
RGB: 248, 250, 252

Origin: Warna diambil dari Logo Line Art "SM" untuk konsistensi visual maksimal.

Usage: Kop Surat, Proposal B2B, Pitch Deck, Website .co.id, Email Signature

Typography

Aa Google Fonts →
DM Sans
Regular, Medium, Bold
Font modern dan clean yang memberikan kesan profesional namun approachable. Readability tinggi untuk dokumen formal.
Heading
PT. SMKarier
Body Text
Solusi rekrutmen terpadu untuk industri.
DO: Corporate Usage
Official letterheads & business cards
Investor presentations & pitch decks
Government partnership materials
B2B marketing & whitepapers
DON'T: Avoid These
Job posting platforms (use .com branding)
Social media content for Gen Z
Student-facing materials
Mobile app UI elements

Platform Branding Kit

Gen Z Targeted • Disdik Jabar Inspired

Gen Z × Vokasi Palette

Primary
Royal Blue
#1D4ED8
Melambangkan teknologi & platform profesional
RGB: 29, 78, 216
CTA/Accent
Opportunity Gold
#EAB308
Melambangkan cuan, karier, & energi muda Gen Z
RGB: 234, 179, 8
Disdik
Vocational Green
#10B981
Mengadopsi tone Disdik Jabar untuk validasi vokasi
RGB: 16, 185, 129
Color Psychology & Strategy
Blue

Platform digital yang dapat dipercaya & teknologi cutting-edge

Yellow

Optimisme, peluang karier, & call-to-action yang menarik Gen Z

Green

Pertumbuhan vokasi & endorsement dari ekosistem pendidikan

Platform Typography

Ag Google Fonts →
Poppins
SemiBold, Bold, ExtraBold
Font modern dengan karakter bold yang energetic & appealing untuk Gen Z. Perfect untuk headlines & CTAs.
H1 - Hero Title
Cari Loker Impian?
CTA Button
Daftar Sekarang
Body - DM Sans

Gabung sekarang dan raih masa depan cerahmu.

UI Implementation Preview

Contoh implementasi real dari kedua sistem branding dalam konteks yang berbeda

SM
Corporate Site (.co.id)

Bermitra dengan SMKarier

Solusi rekrutmen terpadu untuk industri manufaktur di koridor Bekasi-Karawang dengan akses ke talent pool SMK berkualitas.

B2B Solutions
Partnership
Platform App (.com)
Full Time Verified Company Hot Job

Operator CNC Milling

PT. Astra Honda Motor

Kawasan MM2100, Cikarang

Rp 5-7 juta
5 posisi

Best Practices & Guidelines

Consistency

Pilih satu sistem branding per konteks dan gunakan secara konsisten di semua touchpoints.

Audience First

Selalu pertimbangkan target audience sebelum memilih antara corporate atau platform branding.

Scalability

Design system ini dirancang untuk scale dengan mudah ke berbagai media dan platform.