Untitled
Anonymous
plain_text
02/22/2026 5:25 AM
11.1 KB
14
Indexable
maroon: "#4F0F1F" // primary brand maroonHov: "#6B1D1D" // hover state azure27: "#334155" // body text azure35: "#475569" azure47: "#64748B" // muted text grey98: "#F8FAFC" // page background grey96: "#F1F5F9" grey91: "#E2E8F0" // borders red: "#DC2626" redBg: "#FEE2E2" green: "#16A34A" greenBg: "#DCFCE7" amber: "#CA8A04" amberBg: "#FEF3C7" amberTx: "#78350F" blue: "#155DFC" blueBg: "#DBEAFE" cyan: "#0F766E" cyanBg: "#CCFBF1" cyan40: "#14B8A6" cyan32: "#0D9488" purple: "#5B21B6" purpleBg: "#EDE9FE" yellow: "#CA8A04" yellowBg: "#FEF9C3" ``` --- **TYPOGRAPHY** ``` 13.6px / 400 → body default 13.6px / 700 → td name / bold cell 12.8px / 600 / UPPER → label, kpi label (letter-spacing 0.5px) 12px / 700 / UPPER → table header (letter-spacing 0.36px) 13.6px / DM Mono → numbers, dates, codes 17px / 800 → page title 14px / 700 → section/box title 14px / 600 → tab label, filter label 30px / 800 / DM Mono → KPI number 18px / 400 → header user name & role 16px / 400 → header logo top line 16px / 800 / letter-spacing 4.8px → header logo bottom line 11.5px / 600 → action button text, tab count badge 11.2px / 600 → badge text 10px / 600 / UPPER / letter-spacing .12em → modal subtitle ``` --- **LAYOUT** ``` Header bar height: 93px bg: #4F0F1F padding: 10px Module nav height: 50px (per item) bg: white shadow: 0 4px 4px rgba(0,0,0,.25) Breadcrumb bar height: 85px bg: #FFEAF0 padding: 0 60px Page content padding: 28px 53px 36px Footer height: 48px bg: #4F0F1F Table topbar height: 68px border-bottom: 1px solid #F1F5F9 Table row height: 63px ``` --- **BADGES** `(fontSize: 11.2px, fontWeight: 600, padding: 3px 8px, borderRadius: 4px)` ``` green: bg #DCFCE7 color #16A34A amber: bg #FEF3C7 color #78350F red: bg #FEE2E2 color #DC2626 blue: bg #DBEAFE color #1D4ED8 grey: bg #F1F5F9 color #475569 purple: bg #EDE9FE color #5B21B6 teal: bg #CCFBF1 color #0F766E maroon: bg #FEE2E2 color #4F0F1F ``` --- **BUTTONS** ``` Papar btn: bg #CCFBF1 color #0F766E → 11.5px / 600 / padding 5px 9px / radius 6px Kemaskini btn: bg #FEF9C3 color #CA8A04 → same sizing Ambil btn: bg #4F0F1F color white → same sizing Primary (cari): gradient linear(161deg, #14B8A6, #0D9488) shadow: 0 2px 8px rgba(13,148,136,.30) → 13.6px / 600 / padding 10px 18px / radius 10px Secondary (reset): bg #F1F5F9 border: 2px solid #E2E8F0 → same sizing Export Excel: bg #DCFCE7 color #16A34A → 11.5px / 600 / padding 6px 12px / radius 6px Export PDF: bg #FEE2E2 color #DC2626 → same sizing Export Word: bg #DBEAFE color #1D4ED8 → same sizing Tapisan (filter toggle): bg #008BD6 color white → 13px / 400 / padding 8px 18px / radius 3px / UPPERCASE / shadow 0 4px 4px rgba(0,0,0,.26) ``` --- **COMPONENTS** **Table wrap** ``` bg white borderRadius: 16px boxShadow: 0 1px 3px rgba(0,0,0,.10) overflow: hidden ``` **Table header cell (TH)** ``` padding: 14px 16px fontSize: 12px fontWeight: 700 color: #64748B textTransform: uppercase letterSpacing: 0.36px borderBottom: 2px solid #E2E8F0 bg: #F8FAFC whiteSpace: nowrap ``` **Table data cell (TD)** ``` padding: 0 16px fontSize: 13.6px fontWeight: 400 color: #334155 borderBottom: 1px solid #F1F5F9 verticalAlign: middle height: 63px ``` **Table topbar** `(height 68px, padding 0 20px, borderBottom 1px solid #F1F5F9)` ``` → "Paparkan" label + rows select (height 31px, radius 8px) + "barisan" + search input (width 220px, height 35px, radius 8px, marginLeft: auto) ``` **Pagination** ``` padding: 14px 20px borderTop: 1px solid #F1F5F9 justify: space-between Info text: 13.6px / color #64748B → "Halaman X dari Y [Jumlah Rekod: Z]" Buttons: width/height 36px radius 10px fontSize 14px Active page: bg #155DFC color white fontWeight 700 Prev/Next: padding 0 12px height 36px radius 10px ``` **Filter panel** ``` bg white border: 1px solid #E2E8F0 borderRadius: 10px padding: 24px marginBottom: 16px Field group: label 12.8px/600/#475569 + input/select height 41px / padding 10px 12px / border 2px solid #E2E8F0 / radius 10px ``` **KPI card** ``` bg white border: 1px solid #E2E8F0 borderLeft: 4px solid [accent] borderRadius: 12px padding: 18px 20px Label: 12.8px / 600 / #475569 / UPPER / letter-spacing 0.5px / marginBottom 10px Number: 30px / 800 / DM Mono / #334155 / lineHeight 1 / marginBottom 4px Sub: 13.6px / 400 / #64748B ``` **Dash box** ``` bg white border: 1px solid #E2E8F0 borderRadius: 12px padding: 20px Title: 14px / 700 / #334155 / display flex / alignItems center / gap 8px / marginBottom 16px ``` **Chart bar row** ``` display flex alignItems center gap 10 marginBottom 10 Label: 13.6px / #334155 / minWidth 150px Track: flex 1 / height 10px / bg #F1F5F9 / radius 5px Fill: height 100% / radius 5px / [colour] Value: DM Mono / 13.6px / 700 / #334155 / minWidth 30px / textAlign right ``` **Tab bar** ``` borderBottom: 1px solid #E2E8F0 marginBottom: 20px display flex Item: padding 12px 20px / fontSize 14px / fontWeight 600 Active: color #4F0F1F borderBottom: 2px solid #4F0F1F marginBottom: -1px Count badge: fontSize 11.5px / fontWeight 600 / padding 2px 7px / radius 20px Default: bg #F1F5F9 color #64748B Active: bg #FEE2E2 color #4F0F1F ``` **Breadcrumb bar** ``` height: 85px bg: #FFEAF0 padding: 0 60px display flex justifyContent space-between Left: fontSize 20px / fontWeight 500 / color #000 / gap 8px — icon color #4F0F1F Right: fontSize 13px / fontWeight 400 / color #626262 Home icon: color #4F0F1F / width 20px Separator: ">>" Current page: color #000 ``` **Modal** ``` width: 520px (Papar) / 560–620px (Kemaskini) maxWidth: 94vw maxHeight: 88–90vh borderRadius: 12px shadow: 0 20px 60px rgba(0,0,0,.25) overflow: hidden Overlay: rgba(0,0,0,.45) Header bg colours: Papar PKW: #4F0F1F Kemaskini PKW: #1847A8 Papar Peti Masuk: #0891B2 Kemaskini PTM: #0B5C7A Header subtitle: 10px / 600 / UPPER / letter-spacing .12em / rgba(255,255,255,.55) Header title: 15px / 700 / white (Papar) — 14px / 700 / white (Kemaskini) Close btn: bg rgba(255,255,255,.15) / 30×30px / radius 6px Modal row (mp-row): display flex / gap 12px / marginBottom 8px Label: 11px / 600 / #777 / minWidth 160px Value: 12.5px / 500 / #1A1A1A Footer: padding 14px 20px / borderTop 1px solid #EBEBEB / bg #FAFAFA / justifyContent flex-end / gap 8px Batal/Tutup: border 1px solid #DDD / bg white / radius 6px / 12px / 600 Simpan/Cetak: bg [modal header colour] / color white / same sizing ``` **Toast** ``` position: fixed bottom: 32px left: 50% transform: translateX(-50%) bg: #166534 color: white padding: 10px 24px borderRadius: 8px fontSize: 13px fontWeight: 600 zIndex: 9999 shadow: 0 4px 16px rgba(0,0,0,.2) auto-fade: 2.5s ``` **User dropdown** *(click profile in header)* ``` position: absolute right: 0 top: calc(100% + 4px) width: 302px bg: #4F0F1F borderRadius: 20px padding: 15px shadow: 0 4px 4px rgba(0,0,0,0.25) zIndex: 9999 gap: 15px Menu item: padding 10px 20px / radius 8px / fontSize 16px / 400 / white Hover: bg rgba(255,255,255,0.08) Log Keluar btn: bg white / radius 10px / padding 10px 15px / fontSize 16px / color black Hover: bg #f5f5f5 ``` **Mobile block** *(width < 1024px)* ``` Full screen bg: #4F0F1F centered column Show: logo + system name + title + monitor icon Message: "Sistem Ini Tidak Disokong pada Peranti Mudah Alih" Sub: guna komputer meja / komputer riba Badge: "Lebar minimum: 1024px" ``` **Info box** ``` bg: #EFF6FF border: 1px solid #BFDBFE borderRadius: 10px padding: 16px 20px Icon: 20px / color #1D4ED8 Text: 13.6px / 400 / #334155 / lineHeight 1.6 ``` **View toggle** *(list / card)* ``` Wrapper: bg #F1F5F9 / radius 7px / padding 3px / gap 2px Button: 32×28px / radius 5px Active: bg white / color #4F0F1F / shadow 0 1px 4px rgba(0,0,0,.1) ``` **Card view (PKW)** ``` bg white border: 1px solid #E2E8F0 borderRadius: 10px overflow hidden Top strip: height 4px / [category colour] Body padding: 14px Footer: padding 10px 14px / borderTop 1px solid #F1F5F9 / space-between Hover: boxShadow 0 4px 16px rgba(0,0,0,.1) / translateY(-2px) Category strip colours: Persekutuan #155DFC / Negeri #0D9488 / Badan Berkanun #7C3AED / Majlis Agama #D97706
Editor is loading...
Leave a Comment