Neo-Brutalism Design System LabaBersih v2 — Phase 0 Mockup | Bruddle UI Kit + Emerald #00674F + Orange #FF965B

Neo-Brutalism signature: Border 1px solid black, hard offset shadow (no blur), radius 1px (blocky), ExtraBold 800 headings, Bold 700 buttons. Hover = shadow appears. Active = shadow gone + translate.

1. Color Palette

Primary & Accent

Primary

#00674F

Primary Hover

#005742

Accent (Oren)

#FF965B

Accent Hover

#E8834A

Semantic

Success

#98E9AB

Warning

#FAE8A4

Error

#E99898

Muted

#5F646D

Surfaces

Page Background

#FAF4F0

Card / Surface

#FFFFFF

Dark Surface

#161616

Black

#000000

Platform Colors

TikTok

#000000

Shopee

#ee4d2d

Mengantar

#1B2A4A

ScaleV

#0EA5E9

Financial

Profit

#00674F

Loss

#c0392b

CSS Variables

:root {
  --primary: #00674F;      --primary-hover: #005742;
  --accent: #FF965B;       --accent-hover: #E8834A;
  --success: #98E9AB;      --warning: #FAE8A4;
  --error: #E99898;        --muted: #5F646D;
  --surface: #FAF4F0;      --surface-card: #FFFFFF;
  --surface-dark: #161616; --black: #000000;
  --shadow-sm: 4px 4px 0px 0px var(--black);
  --shadow-md: 6px 6px 0px 0px var(--black);
  --shadow-lg: 8px 8px 0px 0px var(--black);
  --border: 1px solid var(--black);
  --radius: 1px;
}

2. Typography

Font utama: Roboto Flex (Google Fonts) — variable font. Mono: Roboto Mono untuk ID, SKU, kode akun, angka keuangan.

Heading Scale

H1 Heading

48px / ExtraBold 800 / LH 56px

H2 Heading

36px / ExtraBold 800 / LH 46px

H3 Heading

30px / ExtraBold 800 / LH 38px

H4 Heading

24px / ExtraBold 800 / LH 32px

H5 Heading

20px / ExtraBold 800 / LH 28px

H6 Heading

18px / ExtraBold 800 / LH 24px

Body & UI Text

16px

Bold 700

Medium 500

Regular 400

14px

Bold 700

Medium 500

Regular 400

12px

Bold 700

Medium 500

Regular 400

Monospace (Roboto Mono)

PS2603-00042 — Order ID

JE2603-00042 — Journal ID

Rp 1.250.000 — Currency

11-100 — Account Code

3. Shadows & Borders

Neo-brutalism signature: hard offset shadow (zero blur), 1px solid black, 1px radius.

Shadow Scale

shadow-sm
4px

shadow-md
6px

shadow-lg
8px

Primary

Accent

Property	Value	Usage
`--shadow-sm`	`4px 4px 0 0 #000`	Cards, buttons, inputs on hover
`--shadow-md`	`6px 6px 0 0 #000`	Dropdowns, elevated surfaces
`--shadow-lg`	`8px 8px 0 0 #000`	Modals
`--border`	`1px solid #000`	Semua komponen
`--radius`	`1px`	Near-zero, blocky feel

4. Spacing & Layout

Token	Value	Usage
4px	0.25rem	Tight gaps (badge padding, icon margin)
8px	0.5rem	Small gaps (between badges, form helper)
12px	0.75rem	Standard gap (stats grid, card grid)
16px	1rem	Card padding inner, section sub-gap
20px	1.25rem	Card body padding, table cell padding
24px	1.5rem	Section gap, main content padding
32px	2rem	Page-level content gutter
48px	3rem	Between major sections

Z-Index Scale

Layer	Z-Index	Element
Content	0	Normal flow
Sticky header	10	Top bar
Dropdown	20	Select, combobox, date picker
Sidebar	40	Navigation sidebar
Modal overlay	50	Backdrop
Modal	60	Dialog content

App Shell Wireframe

Sidebar (260px)

bg: #000000

Top Bar (sticky, z-10)

Main Content — padding: 24px 32px — bg: #FAF4F0

5. Buttons

Medium (16px)

Small (12px)

States

Placement Rules

2 Buttons: Cancel LEFT, Primary RIGHT

3 Buttons: Danger FAR LEFT, Cancel + Primary RIGHT

6. Badges

Order Status

Selesai Dikirim Dikemas Dibuat RTS Dibatalkan

Platform

TikTok Shopee Mengantar ScaleV POS

Payment & Journal

Lunas Belum Bayar Posted Draft Voided

Count Badges

28 14 5 3

7. Stats Cards

Variant 1: Value + Change

Total Pesanan

4.643

trending_up +12,5%

Revenue

Rp 715jt

trending_up +8,2%

RTS

trending_down -3,1%

Laba Bersih

Rp 130jt

trending_up +18,2%

Variant 2: With Progress Bar

Target Revenue

Rp 715jt

Tercapai

Rp 285jt

Sisa

Fulfillment

285

Dikirim

Pending

RTS Rate

Rate

< 5%

Target

Rekonsiliasi

1.850

Selesai

2.200

Pending

8. Segmented Control

Individual items, BUKAN dalam container — Bruddle exact. Active = black fill.

Semua 4.643

Dikemas 37

Dikirim 285

Selesai 4.112

RTS 47

9. Cards

Default Card

Revenue Bulan Ini

Rp 715.000.000

trending_up +12,5%

RTS Bulan Ini

47 paket

Kerugian: Rp 5.640.000

Collapsible Card

Detail Fee Estimasi expand_more

Admin Platform 3%Rp 6.000

Komisi Dinamis 5%Rp 10.000

Total FeeRp 16.000

10. Form Inputs

Text Input

Nama Pelanggan

Nomor Pesanan

Currency Input (Rp prefix)

Harga Modal *

Select

Platform

Error & Success States

Error State

Nomor pesanan tidak valid

Success State

Format valid

Checkbox, Radio, Toggle

Checkbox

check

Generate jurnal otomatis

Skip stok deduction

Radio

Cash (Tunai)

Utang

Toggle

Auto-post jurnal

Mode gelap

11. SearchableCombobox

Wajib untuk daftar > 7 items dari database.

Pilih Akun

12-201 Piutang TikTok Bestari

12-202 Piutang Shopee Store A

12-400 Piutang Klaim Kurir

12. DateRangeFilter

date_range1 Mar 2026 — 31 Mar 2026

Hari Ini 7 Hari 30 Hari Bulan Ini

—

13. Table / Unified Surface

CSS Grid, BUKAN <table>. Order list: 7 kolom.

ID PesananPelangganPlatformStatusJurnalBayarRevenue

PS2603-00042

TK-583... · 30 Mar · JX77...

Budi Santoso

TikTok

Selesai

✓

Lunas

Rp 200.000

PS2603-00041

SP-291... · 29 Mar · JN88...

Siti Aisyah

Shopee

Dikirim

✓

Belum

Rp 450.000

PS2603-00040

MG-102... · 28 Mar

Ahmad Ridho

Mengantar

Dikemas

✗

Belum

Rp 89.000

PS2603-00039

TK-771... · 27 Mar · SCP...

Dewi Lestari

TikTok

RTS

✓

Belum

-Rp 150.000

15. Empty & Loading States

Empty State

shopping_cart

Belum ada pesanan

Buat pesanan pertama atau upload file XLSX.

Loading State

Memuat data pesanan...

16. Error States

Error Boundary

error_outline

Terjadi kesalahan

Gagal memuat data. Silakan coba lagi.

404 Not Found

search_off

Data tidak ditemukan

Pesanan PS2603-99999 tidak ada di sistem.

17. Offline Banner

18. Progress Bars

High (83%)83%

Medium (52%)52%

Low (23%)23%

Primary (67%)67%

19. Save Indicator

Menyimpan...

Tersimpan

Gagal menyimpan

23. Mobile Bottom Nav

dashboardHome

shopping_cartPesanan

local_shippingKirim

assessmentLaporan

settingsLainnya

24. Transaction List

Transaksi Terbaru

receipt_long

Penjualan TikTok Bestari

JE2603-00042 · Penjualan

+Rp 184.000

30 Mar, 14:05

inventory

HPP Order PS2603-00042

JE2603-00043 · HPP

-Rp 45.000

30 Mar, 14:05

account_balance

Settlement Shopee Mar W4

JE2603-00044 · Rekonsiliasi

+Rp 2.450.000

29 Mar, 10:00

undo

RTS Reverse — PS2603-00038

JE2603-00045 · RTS

-Rp 150.000

28 Mar, 16:30

25. Page Patterns

List Page

Pesanan

Total

4.643

Dikemas

Dikirim

285

Selesai

4.112

Semua

Dikemas

Dikirim

Selesai

[Filter Bar + Data Table]

Detail Page

arrow_backPS2603-00042Selesai

Info Pesanan

[nomor platform, customer, phone, toko]

Status & Keuangan

[status, payment, total, resi, kurir]

[Items Table + Fee + Jurnal + Audit Trail]

Form Page (Sticky Footer)

Buat Pesanan

[Form Fields]

26. Laporan Keuangan

P&L report tree. Group header collapsible. Total row bold + border-top 2px.

Laba Rugi

AkunJumlah%

PendapatanRp 715.000.000100%

40-101 Pendapatan TikTok BestariRp 450.000.00062,9%

40-102 Pendapatan Shopee Store ARp 180.000.00025,2%

40-103 Pendapatan MengantarRp 85.000.00011,9%

41-100 Retur Penjualan-Rp 12.500.000-1,7%

Harga Pokok Penjualan-Rp 385.000.000-53,8%

50-100 HPP-Rp 385.000.000-53,8%

Beban Operasional-Rp 187.500.000-26,2%

61-101 Biaya Admin PlatformRp 42.900.0006,0%

61-102 Biaya Komisi DinamisRp 71.500.00010,0%

63-200 Beban Ongkir ReturRp 4.700.0000,7%

LABA BERSIHRp 130.000.00018,2%

27. Bagan Akun (COA)

ASET (12 akun)Rp 49.847.720

11-000KAS & BANKRp 15.584.000

11-100KasRp 15.400.000Edit

11-311Saldo TikTok BestariRp 184.000Edit

12-000PIUTANGRp 21.763.720

12-201Piutang TikTok Bestari-Rp 54.280Edit

12-400Piutang Klaim Kurir—Edit

13-000PERSEDIAANRp 12.500.000

13-100Persediaan Barang DagangRp 12.500.000Edit

28. Buku Besar

—

TanggalReferensiDeskripsiDebitCreditSaldo

Saldo AwalRp 0

15 MarJE2603-042Penjualan TikTok Bestari184.000—184.000

18 MarJE2603-055Penjualan TikTok Bestari256.000—440.000

25 MarJE2603-088Settlement TikTok W4—440.000Rp 0

Total440.000440.000Rp 0

29. Rekonsiliasi

Summary Cards

Gross

Rp 200.000

Piutang Estimasi

Rp 184.000

Settlement Aktual

Rp 182.500

Selisih

-Rp 1.500

Fee Breakdown

FeeEstimasiAktualSelisihStatus

Admin Platform6.0006.500-500Selisih

Komisi Dinamis10.00010.0000Cocok

Proses PesananFee baru

—1.000-1.000Unknown

Total Fee16.00017.500-1.500

30. Format Angka

Konteks	Format	Rendered
Normal	`Rp + titik ribuan`	Rp 1.250.000
Negatif	`-Rp + merah`	-Rp 500.000
Nol	`— (em dash)`	—
Positif (sign)	`+Rp + hijau`	+Rp 150.000
Short	`Rp 1,2jt`	Rp 45,8jt
Persentase	`12,5%`	18,2%
Delta +	`+12,5% hijau`	+12,5%
Delta -	`-8,7% merah`	-8,7%

Rule: SEMUA angka keuangan pakai Roboto Mono + tabular-nums + text-align: right. Negatif = merah. Nol = em dash abu.

31. Status Mapping

Status	Variant	Rendered
Dibuat	Outline	Dibuat
Dikemas	Info (#DFE3EA)	Dikemas
Dikirim	Warning	Dikirim
Selesai	Success	Selesai
RTS	Error	RTS
Dibatalkan	Error	Dibatalkan
Lunas	Success	Lunas
Belum Bayar	Error	Belum Bayar
Posted	Primary	Posted
Draft	Dark	Draft
Voided	Accent	Voided

Platform Badges

Platform	BG	Text	Rendered
TikTok	`#000`	`#FFF`	TikTok
Shopee	`#ee4d2d`	`#FFF`	Shopee
Mengantar	`#1B2A4A`	`#FFF`	Mengantar
ScaleV	`#0EA5E9`	`#FFF`	ScaleV
POS	Transparent	`#000`	POS

32. Icon Reference

Library: Material Icons (Google Fonts). Size: 18px nav, 14-16px buttons.

Navigation

dashboarddashboard

shopping_cartshopping_cart

local_shippinglocal_shipping

qr_code_scannerqr_code_scanner

undoundo

inventory_2inventory_2

warehousewarehouse

bookbook

account_treeaccount_tree

assessmentassessment

balancebalance

settingssettings

Actions

addadd

editedit

deletedelete

searchsearch

filter_listfilter_list

downloaddownload

uploadupload

refreshrefresh

closeclose

33. Logo

LabaBersih

Light Background

LabaBersih

Dark Background

34. Interaction States

State	Visual Change	Transition
Default	No shadow, border visible	—
Hover	Shadow appears (`shadow-sm`)	`0.15s`
Active	Shadow gone + `translate(2px,2px)`	`0.1s`
Focus	Border = primary + `box-shadow: 0 0 0 1px`	`0.15s`
Disabled	`opacity: 0.4` + not-allowed	None
Error	Border = error + `box-shadow: 0 0 0 1px`	`0.15s`

Interactive Demo

Hover me

Disabled

Focused

Error

35. Responsive

Breakpoint	Width	Layout
Mobile	< 640px	Bottom nav, 1 kolom stats, sidebar hidden
Tablet	640 – 900px	Bottom nav, 2 kolom stats, sidebar hidden
Desktop	> 900px	Sidebar visible, 4 kolom stats, full table

Pattern: Desktop = sidebar 260px + content. Mobile = bottom nav 5 tab + full-width content. Table overflow = horizontal scroll.

36. Lokalisasi

Property	Value	Contoh
Bahasa	Indonesia 100%	Pesanan, Pelanggan, Jurnal
Locale	`id-ID`	—
Currency	`Rp` + titik ribuan	Rp 1.250.000
Date	`DD MMM YYYY`	25 Mar 2026
Timezone	WIB (+07:00)	14:05 WIB
Decimal	Koma (`,`)	12,5%
Thousand	Titik (`.`)	1.250.000

37. Aksesibilitas

Rule	Detail
`aria-label`	Wajib pada SEMUA icon-only button
`role="alert"`	Pada error messages
Focus trap	Di modal — Tab tidak bisa keluar
Focus visible	Ring primary pada focus (keyboard)
Keyboard	Tab = navigate, Enter = activate, Escape = close
Touch target	Minimum 44x44px untuk mobile
Contrast	Min 4.5:1 text, 3:1 large text

Neo-brutalism advantage: 1px solid black border + hard shadows = kontras tinggi secara alami. Badge text selalu hitam (#000) di atas warna semantic untuk memenuhi ratio 4.5:1.

38. Rules (Do / Don't)

1px solid black border pada SEMUA komponen
Hard offset shadow (4/6/8px, zero blur)
Radius 1px — blocky
Heading weight 800, button weight 700
Hover = shadow muncul (0.15s)
Active = shadow hilang + translate(2px,2px)
Money: Roboto Mono, tabular-nums, right-align
Negatif = merah (#c0392b)
Nol = em dash abu-abu
Primary kanan, Cancel kiri, Danger FAR LEFT
4 kolom stats (SELALU 4)
CSS Grid untuk tabel
Bahasa Indonesia 100%

Don't

Rounded corners (> 2px radius)
Soft/blur shadows
Gradient backgrounds
Thin heading weights (< 700)
Rounded-full badges (pill shape)
Colors di luar token
Emoji di production UI
HTML <table> untuk data
Zebra striping
3 kolom stats
Icon button tanpa aria-label
Primary di kiri
Left-align angka keuangan

Neo-Brutalism vs Minimal

Property	Neo-Brutalism (baru)	Minimal (sebelumnya)
Border	1px solid #000	1px solid gray-100
Shadow	Hard offset, no blur	shadow-sm (soft blur)
Radius	1px (blocky)	12px/8px
Heading weight	800 ExtraBold	600 Semibold
Badge shape	2px radius	999px pill
Hover	Shadow + translate	Background change
Accent	Orange #FF965B	None (green only)
Page bg	#FAF4F0 (warm beige)	#F5F5F5 (cool gray)
Font	Roboto Flex	Geist Sans
Stats	Individual cards + gap	Connected row + divide-x

LabaBersih v2Neo-Brutalism Design System — Phase 0 Mockup

Bruddle UI Kit · Emerald #00674F + Orange #FF965B · Roboto Flex

Neo-Brutalism Design System LabaBersih v2 — Phase 0 Mockup | Bruddle UI Kit + Emerald #00674F + Orange #FF965B

1. Color Palette

Primary & Accent

Semantic

Surfaces

Platform Colors

Financial

CSS Variables

2. Typography

16px

14px

12px

3. Shadows & Borders

4. Spacing & Layout

Z-Index Scale

App Shell Wireframe

5. Buttons

Medium (16px)

Small (12px)

States

Placement Rules

6. Badges

Order Status

Platform

Payment & Journal

Count Badges

7. Stats Cards

Variant 1: Value + Change

Variant 2: With Progress Bar

8. Segmented Control

9. Cards

Default Card

Collapsible Card

10. Form Inputs

Text Input

Currency Input (Rp prefix)

Select

Error & Success States

Checkbox, Radio, Toggle

Checkbox

Radio

Toggle

11. SearchableCombobox

12. DateRangeFilter

13. Table / Unified Surface

14. Modal

Hapus Pesanan?

15. Empty & Loading States

16. Error States

17. Offline Banner

18. Progress Bars

19. Save Indicator

20. Tooltip

21. Sidebar Navigation

22. Top Bar

23. Mobile Bottom Nav

24. Transaction List

25. Page Patterns

List Page

Detail Page

Form Page (Sticky Footer)

26. Laporan Keuangan

27. Bagan Akun (COA)

28. Buku Besar

29. Rekonsiliasi

Summary Cards

Fee Breakdown

30. Format Angka

31. Status Mapping

Platform Badges

32. Icon Reference

33. Logo

34. Interaction States

35. Responsive

36. Lokalisasi

37. Aksesibilitas

38. Rules (Do / Don't)

Neo-Brutalism vs Minimal