[Logo]
i-Bilik · Sistem Reka BentukGaya Kaca · Perpustakaan Negara Malaysia
Asas Komponen Data Corak Skrin

Warna & token

Semua nilai adalah pemboleh ubah CSS — satu suis menukar mod terang/gelap.
Teras
--bg#E9EFF6 / #070D18
--ink#0B1F3A / #EAF0FA
--ink-2#33445F / #A9B6CC
--accent#1D4FD7 / #6D9BFF
--accent-2#0F766E / #5EEAD4
--accent-soft12% accent
--glasswhite 58% + blur
Aksen utama menandakan tindakan dan tempahan. Aksen kedua --accent-2 hanya untuk data sekunder: siri kedua pada carta, tag kategori blog, dan penanda ruang belajar. Jangan gunakannya pada butang. Status
--ok · Disahkan#15803D / #5BE39A
--warn · Menunggu#B45309 / #FBBF24
--danger · Ditolak#9B1C13 / #FCA5A5
--ink-4 · Dibatalkan#6B7488 / #76839A
Warna bilik
Bilik Mesyuarat Bilik Latihan Auditorium Bilik Perbincangan Study Carrel Ruang Acara Makmal Komputer

Tipografi

Poppins 300–700. JetBrains Mono untuk kod dan rujukan tempahan.
Display · 40/600/-0.035emTempah bilik dengan tenang
H1 · 28/600/-0.03emBilik Mesyuarat Aras 3
H2 · 22/600/-0.02emTempahan akan datang
H3 · 16/600Kemudahan dalam bilik
Body · 14/400/1.55Tempahan bilik kecil disahkan serta-merta. Auditorium dan ruang acara memerlukan kelulusan pentadbir dalam tempoh dua hari bekerja.
Label · 13/500Bilangan peserta
Caption · 12/400Dikemas kini 3 minit lalu
Mono · 12.5/500IB-2026-0918-0042

Ruang, jejari & kaca

Skala 4px. Jejari mengecil ke dalam: panel 28 → kad 24 → baris 18 → medan 14 → cip 8.
Skala ruang
4 · rapat
8 · dalam komponen
16 · antara kad
24 · padding panel
56 · antara seksyen
Jejari
8
14
18
24
28
999
Lapisan kaca
Kaca 58% · panel utama
Kaca 72% · panel terapung
Pejal · medan dan baris
blur(28px) saturate(160%)
shadow 0 24px 60px -30px

Kecerunan

Empat pilihan sahaja. Gunakan satu setiap skrin, sebagai latar — bukan pada teks.
Aura · lalairadial 120% at 20% 0%
Dalam · hero & jumbotron135deg #1D4FD7 → #0B1F3A
Kilau · permukaan kaca180deg white 85% → 35%
Jerebu · latar penuhdua blob + bg

Ikon

Lucide — 24×24, stroke 1.7, hujung bulat. Padanan tepat dengan mockup asal.
lucide-staticSaiz: 16 (dalam teks) · 17–18 (nav, butang) · 20 (tajuk kad) · 24 (keadaan kosong)
layout-grid
calendar
search
bell
sliders
user
users
clock
map-pin
building
monitor
wifi
coffee
mic
check
x
plus
filter
pencil
trash
download
paperclip
send
sparkles
qr-code
lock
eye
info
alert-triangle
log-out
menu
chevron-right