Kamus Design System FE

Referensi visual lengkap — semua komponen, warna, tipografi, dan pattern yang dipakai di Dashboard PLN UPT Bogor.

Colors Typography Components Interactions Layout Charts Tokens Shared

Color Palette

Semua warna menggunakan CSS token — otomatis berubah saat switch dark/light mode.

CSS Color Tokens

Warna dari var(--nama) di globals.css — berubah otomatis sesuai theme.

Backgroundvar(--background)Warna dasar halaman

Foregroundvar(--foreground)Warna teks utama

Cardvar(--card)Background kartu

Primaryvar(--primary)Warna aksen utama (tombol, link)

Secondaryvar(--secondary)Warna aksen sekunder

Mutedvar(--muted)Background elemen subtle

Muted Foregroundvar(--muted-foreground)Teks sekunder/redup

Accentvar(--accent)Background hover sidebar/menu

Destructivevar(--destructive)Warna bahaya/error (merah)

Bordervar(--border)Garis pembatas elemen

Ringvar(--ring)Outline focus elemen interaktif

Status Colors — Healthy Index

5 warna status dari design-tokens.ts. Hanya untuk DATA, bukan dekorasi.

Very Good#22C55E

Good#3B82F6

Fair#EAB308

Poor#F97316

Critical#EF4444

Contoh: Segmented Bar

3.4%

2.5%

7.4%

18.1%

68.6%

Chart Palette

5 warna untuk data visualisasi (bukan status). Mudah dibedakan satu sama lain.

Blue#3B82F6

Amber#F59E0B

Violet#8B5CF6

Cyan#06B6D4

Pink#EC4899

Typography

Semua ds-* classes dari globals.css — rendered live. Copy class name langsung ke komponen.

Structural — Judul, Label, Body

ds-heading

Healthy Index MTU

24px · Bold · Tracking tight

ds-title

Status Healthy Index

16px · Semibold

ds-label

Very Good

14px · Medium

ds-body

Evaluasi kondisi MTU Gardu Induk berdasarkan Healthy Index.

14px · Normal · Muted

ds-small

Critical Ratio

12px · Semibold · UPPERCASE · Tracking wider · Foreground/70

ds-small

50 unit · Halaman 1 dari 12

12px · Normal · Muted

Data — Angka, KPI, Badge

Semua pakai font-mono + tabular-nums supaya angka rata dan sejajar.

ds-kpi

3.249

28px · Extrabold · Mono · Tabular

ds-data

2.057

14px · Mono · Tabular

ds-data

68.9%

12px · Bold · Mono

ds-overlay

24.5%

12px · Bold · White (di atas warna)

Tabular Nums — Kenapa Penting

Dengan tabular-nums, semua digit punya lebar sama. Kolom angka jadi rata sempurna.

Tanpa tabular-nums

1.137

588

239

3.249

Dengan tabular-nums

1.137

588

239

3.249

shadcn/ui Components

Komponen dari src/components/ui/ — fondasi visual seluruh dashboard. Semua bisa di-klik dan di-hover.

Button

Import: import { Button } from "@/components/ui/button"

Sizes:

Custom Buttons — cc-btn

Class: cc-btn cc-btn-primary dan cc-btn cc-btn-secondary — dipakai di Cloud Console pages.

Badge

Import: import { Badge } from "@/components/ui/badge"

DefaultSecondaryOutlineDestructive

Status pakai warna:Very GoodGoodFairPoorCritical

Card — Stripe Elevated

Card dengan subtle shadow. Hover untuk lihat efek elevation naik.

Card Default

Shadow tipis, border halus

1.234Hover untuk shadow lebih dalam

Card Active

Border primary, tint background

5.678State saat terpilih

Card with Left Accent

Very Good

2.23968.9%

Input, Switch, Progress

Input

Switch

Off

Progress

68.9%

Skeleton — Loading State

Placeholder saat data belum dimuat. Animasi pulse memberi kesan "sedang loading".

Table

Import: import { Table, TableHeader, TableRow, ... } from "@/components/ui/table"

No	Gardu Induk	MTU	Total	Status
1	Cibinong	TRAFO	245	Very Good
2	Depok Baru	PMT	182	Good
3	Gunung Putri	KOPEL	67	Fair

Tabs

Konten tab Overview — section utama.

Interactions & States

Klik card di bawah untuk lihat semua state: default, hover, active, dimmed. Klik lagi untuk reset.

Cross Filter Demo — Klik untuk Toggle

Belum ada filter aktif. Klik salah satu card di atas.

Transition Speeds

Hover tiap box untuk lihat perbedaan kecepatan transisi.

Fastds-transition-fast150ms

Standardds-transition200ms

Slowds-transition-slow300ms

Elevation / Shadow Levels

Semakin tinggi elevation = semakin penting/interaktif.

FlatInline element

RestingCard default

RaisedCard hover

OverlayDropdown, modal

Layout & Spacing

Grid, Flex, Gap, Padding — semua pattern layout yang dipakai di dashboard.

Grid — Responsive Columns

grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 — kolom berubah sesuai lebar layar.

Flex — Justify & Align

flex items-center justify-between

KiriKanan

flex items-baseline gap-2

3.249unit

flex flex-col gap-1

Label1.234deskripsi

Spacing Scale — Gap & Padding

Tailwind spacing: gap-1 = 4px, gap-2 = 8px, gap-3 = 12px, gap-4 = 16px

gap-1

4px

gap-2

8px

gap-3

12px

gap-4

16px

gap-6

24px

Responsive Breakpoints

Prefix	Min Width	Device	Contoh
`(none)`	< 640px	HP portrait	`grid-cols-2`
`sm:`	640px	HP landscape	`sm:grid-cols-3`
`md:`	768px	Tablet	`md:grid-cols-4`
`lg:`	1024px	Laptop	`lg:grid-cols-5`
`xl:`	1280px	Desktop	`xl:grid-cols-6`

Chart & Visualisasi

Pattern chart yang dipakai di dashboard — semua pakai ECharts. Ini contoh visual statis untuk referensi.

Segmented Bar (Critical Ratio)

Bar horizontal terpotong sesuai proporsi. Setiap segment menampilkan persentase.

3.4%

2.5%

7.4%

18.1%

68.6%

Very Good

Good

Fair

Poor

Critical

Stacked Horizontal Bar (Per ULTG)

Setiap baris = 1 ULTG. Segment di-stack horizontal.

BOGOR

1.203

DEPOK

937

SUKABUMI

635

Donut Chart (ECharts)

Rendered oleh ECharts di <canvas>. Config di design-tokens.ts.

Status HI

3.249

Prioritas

3.249

Status Usia

3.249

Config: innerRadius: "44%" · outerRadius: "78%"·padAngle: 2 · borderRadius: 6

KPI Card with Progress Bar

Pattern: left accent + label + angka + thin progress bar.

Very Good

2.23968.9%

Good

58818.1%

Fair

2397.4%

Poor

822.5%

Critical

1103.4%

Design Tokens & Architecture

Arsitektur 3-layer: shadcn (structural) + globals.css ds-* (typography) + design-tokens.ts (ECharts canvas).

3-Layer Architecture

Layer 1: shadcn/ui

src/components/ui/

Komponen structural — Card, Button, Table, Badge, dll. Foundation.

Layer 2: globals.css ds-*

src/app/globals.css

Typography classes + color tokens. Theme-aware via CSS variables.

Layer 3: design-tokens.ts

_components/design-tokens.ts

ECharts canvas values — hex colors, px sizes. Canvas tidak bisa pakai CSS var.

ECharts Canvas Tokens

ECharts render ke <canvas> — tidak bisa pakai CSS variables. Maka warna disimpan di ECHART_COLORS dan ECHART_FONT.

ECHART_COLORS.dark

textLabel, axis#CBD5E1

textStrongEmphasis#F8FAFC

textMutedSecondary#94A3B8

cardBgDonut border (oklch 0.2435)#3B3B3B

tooltipBgTooltiprgba(15,23,42,0.96)

ECHART_FONT

label12pxAxis, legend

tooltip12pxTooltip body

data14pxData labels

title16pxChart title

kpi18pxCentre donut

hero28pxLarge KPI

File Reference

src/app/globals.cssCSS variables, ds-* classes, card styles, transitions

src/components/ui/shadcn/ui components — Card, Button, Table, Badge, dll

_components/design-tokens.tsCOLORS, ECHART_COLORS, ECHART_FONT, CHART presets

tailwind.config.tsTailwind config — font family, extended theme

Shared Components

Komponen reusable — tinggal panggil dengan props, data bebas.

Component Registry

Nama	File	Fungsi	Props Utama
StatusKpiBar1	`components/shared/StatusKpiBar1.tsx`	KPI cards per status + Close/Open bar	title, items[], close, open, onFilter
SummaryCard1	`components/shared/SummaryCard1.tsx`	Total hero + breakdown items dengan mini bar	title, total, items[], onFilter
ProgressBar1	`components/shared/ProgressBar1.tsx`	Segmented bar Close/Open + KPI tiles	title, close, open, onFilter
useMkDonut	`ce-next-level/_components/ce-donut-factory.ts`	Donut chart factory — zero hardcode, responsive	rawData[], selectedName

StatusKpiBar1 — Live Preview

Contoh Status (sample data)

CloseOpen

SummaryCard1 — Live Preview

10.779item

Total CE (sample)

ProgressBar1 — Live Preview

Progress (sample data)

10.779Total