Level 01
Foundations & Design Tokens
palette Palet Warna Semantik (Semantic Colors)
content_copy
Primary Accent
#adc6ff
Brand highlights & links
content_copy
Surface Obsidian
#0b1326
Main page background
content_copy
Surface Slate
#1e293b
Cards & container surface
content_copy
Compliance Green
#10b981
Lengkap 100% / Optimal
content_copy
Follow-up Amber
#f59e0b
Perlu Tindak Lanjut
content_copy
Critical Rose
#f43f5e
Kritis (<50%) & Risk Alert
format_size Skala Tipografi (Plus Jakarta Sans) CSS Font Weights: 400, 600, 700, 800
Display XL
30px • Bold 800 • Leading 36px
51 Proyek
Headline LG
20px • Bold 700 • Leading 26px
Leaderboard DO
Body Regular / Medium
14px • Regular 400/500 • Leading 20px
Teks konten & tabel proyek
Label & Meta
11px • Bold 700 • Tracking 0.04em
KODE DEPT: DO 1
Code / Data Mono
JetBrains Mono 12px
JSON / GVIZ API Payload
straighten Sistem Spacing (Grid 4px) & Sudut (Radius) Standard Tailwind Scales
4px (1)
Gap mikro, icon margins (`gap-1`, `p-1`)
8px (2)
Padding tombol kecil, badge (`p-2`, `gap-2`)
12px (3)
Default element padding (`p-3`, `gap-3`)
16px (4)
Card body standard padding (`p-4`, `space-y-4`)
24px (6)
Section headers & modal padding (`p-6`)
Border Radius Standards:
rounded-md
6px (Button)
6px (Button)
rounded-lg
8px (Input)
8px (Input)
rounded-xl
12px (Cards)
12px (Cards)
rounded-full
Pill Badge
Pill Badge
Level 02
Atoms (Elemen Primitif)
Button Component Hierarchy Standard UI Actions
Kategori Kepatuhan (Status Pills)
Lengkap 100%
Perlu Tindak Lanjut
Kritis (<50%)
Belum Diisi
Departemen Operasi (DO Tags)
DO 1 • Operasi 1
DO 2 • Operasi 2
DO 3 • Operasi 3
Level 03
Molecules (Komponen Komposit)
1. Search Bar with Clear Icon
Molecule: Input + Icon + Button
search
Digunakan di filter tabel proyek untuk pencarian instan nama proyek atau catatan.
2. Segmented Filter Group
Molecule: Button GroupSwitcher cepat pembagian departemen operasi tanpa memuat ulang halaman.
3. KPI Metric Stat Unit
Molecule: Icon + Value + Subtext
Rata-rata Kepatuhan
52.4%
trending_up
Target Q4: >80%
verified
4. Client-side Pagination Bar
Molecule: Controls + Numbers
Menampilkan 1–12 dari 51
Level 04
Organisms (Struktur Kompleks)
Project Row Preview with 20 Compliance Parameters
| No | Nama Proyek | Departemen | CM (14) | VO (6) | Progress | Status |
|---|---|---|---|---|---|---|
| #01 | Pemb. Bendungan Lau Simeme Paket 1 | DO 1 | 14 / 14 | 6 / 6 |
|
Lengkap |
| #02 | Pemb. Bendungan Lau Simeme Lanj | DO 1 | 13 / 14 | 0 / 6 |
|
Tindak Lanjut |
Developer Handoff
Panduan Slicing Frontend Engineer
tokens.css (Root Custom Properties)
CSS Variables
:root {
/* Brand Tokens */
--color-primary: #adc6ff;
--color-surface: #0b1326;
--color-surface-slate: #1e293b;
--color-surface-high: #222a3d;
/* Semantic Status */
--color-compliance: #10b981;
--color-followup: #f59e0b;
--color-critical: #f43f5e;
/* Typography */
--font-family-sans: 'Plus Jakarta Sans', sans-serif;
--font-family-mono: 'JetBrains Mono', monospace;
/* Spacing Grid Base: 4px */
--radius-button: 8px;
--radius-card: 12px;
}
Struktur Komponen (React / Vue / Svelte)
Hierarchy
src/
├── components/
│ ├── atoms/
│ │ ├── Button.tsx
│ │ ├── StatusBadge.tsx
│ │ └── DoTag.tsx
│ ├── molecules/
│ │ ├── SearchInput.tsx
│ │ ├── FilterGroup.tsx
│ │ ├── MetricStatCard.tsx
│ │ └── PaginationBar.tsx
│ ├── organisms/
│ │ ├── ExecutiveGrid.tsx
│ │ ├── ProjectsTable.tsx
│ │ └── SopModalDrawer.tsx
│ └── templates/
│ └── DashboardLayout.tsx