Docs Component Library
Design System

PremixOS Component Library

Building blocks yang konsisten untuk seluruh PremixOS. Setiap component didesain untuk efisiensi operator di lantai pabrik: touch-friendly, high contrast, dan minim误操作.

28 Components 120+ Variants v1.0.0
Foundations

Colors

Tracking Blue sebagai brand utama, Delivery Orange untuk CTA primer di lantai produksi.

Brand — Tracking Blue
50
100
200
300
400
500
600
700
800
900
Primary: #2563EB
CTA — Delivery Orange
500 · #F97316
600 · #EA580C
700 · #C2410C
Semantic — Status colors
Success
#10B981
Warning
#F59E0B
Pending
#F97316
Error / Variance
#EF4444
Foundations

Typography

Fira Sans untuk UI, Fira Code untuk angka & ID.

Display · 36/44 · Bold
Sistem Premix Terpercaya
H1 · 30/38 · Bold
Dashboard Produksi
H2 · 24/32 · Semibold
Approval Queue
Body · 16/24 · Regular
Pencatatan premix yang akurat dan real-time untuk seluruh lini produksi.
Caption · 12/16
Diperbarui 2 menit lalu · PMX-2406-018
Numeric · Fira Code
120.50 kg · 14:32:08 · #2406001
Foundations

Spacing & Sizing

Touch target minimum 48px (glove-friendly).

8
XS · 8px
12
SM · 12px
16
MD · 16px
24
LG · 24px
32
XL · 32px
48
Touch · 48px
← Min touch target
Foundations

Icons

Lucide-style 24×24 stroke icons. Tidak ada emoji.

Component

Button

Variants
Sizes · Touch target minimum 48px (h-12)
States
With icons
Component

Input & Select

⚠ Harus angka, minimal 0.1

Component

Badge & Status

Draft In Progress Pending Approved Completed Rejected / Variance PRIORITY NEW
Component

Card & Panel

Default Card
120.5 kg
Saus Sambal 250ml · Line A
Alert Card
Variance alert
Batch PMX-2406-017 deviates 4.2%
Component

Toast & Alert

Toast notifikasi muncul di pojok kanan atas. Klik tombol di bawah untuk trigger demo.

Component

Table

Batch Produk Berat Status
PMX-2406-018Saus Sambal 250ml120.0Draft
PMX-2406-017Saus Sambal 250ml120.5Variance
PMX-2406-016Saus Tomat 500ml85.2Pending
Component

Stepper

1
Done
2
Active
3
Pending
Component

Toggle & Switch

Off
On