⚡ Westart Design System • Pro v2.6.2

Standar Desain & Arsitektur Antarmuka

Dokumentasi sistem desain, token UI/UX, hierarki visual, dan komponen antarmuka produksi untuk Westart CMS Pro dan seluruh portal media multi-tenant.

40+ Design Tokens

60-30-10 Color Spatial Ratio

WCAG 2.1 Kontras Aksesibilitas

100% Rust Ringan & Cepat

🧠 Prinsip 🎨 Warna 🔤 Tipografi 📐 Spasi & Radius 🔘 Komponen UI 📊 Bento Cards ⚡ Notifikasi 🛡️ Arsitektur

01. Fondasi Konseptual

Prinsip & Filosofi Desain

Tiga aturan universal yang mengatur setiap tata letak antarmuka Westart.

🧠 1. Don't Make Me Think

Redaksi dan pembaca memindai (scan), bukan membaca manual. Setiap tombol aksi penting (Publish, Draft, 1-Click Update) harus jelas dalam < 2 detik tanpa kebingungan.

🎨 2. Aturan Harmoni 60-30-10

60% Kanvas netral (Slate Light #f8fafc / Dark #090d16).
30% Struktur penopang kartu & sidebar (#ffffff / #0f172a).
10% Aksen fokus Hijau Zamrud (#15803d / #10b981).

📊 3. High Information Density

Panel redaksi adalah alat kerja profesional. Memprioritaskan angka metrik bento presisi, status komentar bertingkat, dan kontrol modular daripada tombol berserakan.

02. Design Tokens

Sistem Palet Warna

Palet warna terstandarisasi dengan kontras tinggi (Light & Dark).

Aksen Utama (Primary Emerald & Forest)

--primary

Forest Green

HEX#15803d

--accent-emerald

Emerald 500

HEX#10b981

--banner-dark

Deep Pine 900

HEX#064e3b

--primary-soft

Emerald Soft

HEX#f0fdf4

Kanvas & Struktur Netral (Slate)

--bg-body

Slate 50 (Light)

HEX#f8fafc

--bg-surface

Pure White

HEX#ffffff

--bg-dark

Slate 900 (Dark)

HEX#0f172a

--border-subtle

Slate 200 Border

HEX#e2e8f0

Status Semantik Redaksi

--danger

Red 600 (Hapus)

HEX#dc2626

--warning

Amber 500 (Pending)

HEX#f59e0b

--brand-max

Purple (Mode Max)

HEX#8b5cf6

--info

Sky 600 (Informasi)

HEX#0284c7

03. Hirarki Huruf

Tipografi Editorial

Menggunakan Plus Jakarta Sans untuk antarmuka dan JetBrains Mono untuk kode data.

Display Hero 32px / 850 Bold

Judul Berita Utama Redaksi

Heading 1 (H1) 24px / 800 Bold

Ringkasan Statistik Redaksi

Heading 2 (H2) 20px / 750 Semi

Daftar Artikel Terbit & Kategori

Body Regular 15px / 400 Regular

Pantau kinerja pembaca, penerbitan artikel, dan respon komentar pembaca secara berkala tanpa distraksi.

Caption / Meta 12px / 700 Meta

16 Okt 2026 • 979 Pembaca • 0 Draf • Tier Enterprise

Code Monospace 13px / Mono


                            /opt/westart/static/uploads/

04. Geometri & Skala

Spasi, Radius, & Elevasi

Interval 8px teratur untuk konsistensi jarak antar elemen.

📐 Skala Border Radius

--radius-sm (6px) Badge / Tag

--radius-md (10px) Tombol / Input

--radius-lg (14px) Bento Card / Modal

--radius-full (9999px) Pill / Avatar

☁️ Kedalaman & Bayangan (Shadows)

--shadow-sm: 0 1px 2px rgba(0,0,0,0.05) (Card Dasar)

--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07) (Bento Hover)

--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10) (Modal Dialog)

05. Pustaka Elemen

Komponen Antarmuka (UI Elements)

Koleksi tombol, status badge, dan kontrol segmentasi ramah sentuh.

1. Matriks Tombol Aksi (Buttons)

Setiap tombol memiliki area sentuh ≥ 40px untuk kenyamanan perangkat layar sentuh seluler.

<button class="btn btn-primary">Simpan Artikel</button> <button class="btn btn-1click-update"><span>⚡</span> 1-Click Update</button>

2. Lencana & Status Tag (Badges)

UPDATE TERSEDIA Max ✨ ● Terbit (Live) ⏳ Pending Spam Terblokir 👑 Super Admin HOT NEW

3. Segmented Controls & Dual-Mode Switcher

Filter Statistik:

Mode Editor Halaman Statis:

06. Visual Metrik

Kartu Bento & Status Redaksi

Arsitektur bento grid kompak untuk memantau performa konten redaksi.

Ringkasan Statistik Redaksi (Live Replica)

TOTAL PEMBACA

979

↑ 100% bln lalu

TOTAL POST

85 Terbit • 0 Draf

TOTAL PAGE

Halaman Statis

ALIHLINK (301)

SEO Protect

Status Komentar Pembaca Kelola ›

PENDING

Review

TERIMA

Tayang

SPAM

Blokir

07. Interaksi Sistem

Notifikasi Pembaruan (1-Click Update Card)

Standar responsif kartu pembaruan dengan perilaku column-stacking di HP.

Live Preview Komponen: .update-notification-card

Perilaku Responsif Mobile:

Mobile (≤ 640px): Tersusun vertikal, tombol close (✕) di pojok kanan atas, tombol update 100% lebar layar agar nyaman di-tap.
Desktop (> 640px): Berjajar horizontal dalam 1 baris ramping.

08. Tata Kelola Teknis

Standar Arsitektur & Multi-Tenant

Aturan absolut dalam membangun dan mengelola portal Westart CMS.

🛡️ 1. Isolasi Data & Avatar Tenant

Instansi tenant baru wajib berstatus murni kosongan:

Akun admin tidak boleh mewarisi foto profil pengembang (avatar_url = NULL). Header menampilkan inisial otomatis (misal: "R").
Dilarang menyalin direktori avatars/ antar-tenant saat sinkronisasi media.
Tabel media_assets hanya memuat file liputan resmi milik portal tersebut.

📱 2. Kekebalan Header Mobile

Header navigasi atas (.workspace-header) berposisi fixed: top 0:

Banner notifikasi dilarang dipasang di luar header yang menyebabkan tabrakan posisi z-index.
Semua kartu alert pembaruan wajib disuntikkan di dalam .workspace-body.
Ikon hamburger (☰), tombol Segarkan, dan avatar profil wajib selalu bebas halangan.

📢 3. Google AdSense & Better Ads

Slot iklan wajib mematuhi standar UX non-intrusif:

Dilarang memakai sticky banner yang menutupi > 30% area baca layar ponsel.
Ukuran slot terstandarisasi: Billboard (970x250), Leaderboard (728x90), In-Feed (300x250), dan Mobile Banner (320x100).
Setiap slot memiliki label IKLAN transparan dan tombol tutup opsional.

✨ Status Implementasi & Lisensi Desain

Sistem Desain Westart dilisensikan secara resmi untuk ekosistem platform Westart CMS Pro. Pembaruan komponen dan token disinkronkan secara global melalui arsitektur Broadcaster Release (v2.6.2) ke seluruh jaringan portal klien terdaftar.