Token

Sumber: design-tokens.json → css/tokens.css. Nama custom property = nama variabel yang disarankan di Core Framework.

Brand: teal (dipertahankan dari situs lama)

brand-50
#EAF5F6

brand-100
#CDE8EB

brand-200
#9ED0D6

brand-300
#67B2BB

brand-400
#33919C

brand-500
#1A7783

brand-600
#17606D

brand-700
#134E59

brand-800
#0F3D46

brand-900
#0A2A31

Promo: oranye bata (harga & aksi beli saja)

promo-50
#FFF4EC

promo-100
#FFE2CC

promo-300
#FFA66B

promo-500
#EE6A1F

promo-600
#D95A12

promo-700
#C2410C

promo-800
#9A3412

Neutral

neutral-0
#FFFFFF

neutral-50
#F5F6F7

neutral-100
#EEF0F2

neutral-200
#E1E4E8

neutral-300
#C9CED4

neutral-400
#9AA1A9

neutral-500
#6B737C

neutral-600
#4B535C

neutral-700
#343B43

neutral-800
#22282E

neutral-900
#14181C

Feedback & semantik (ikut tema aktif)

bg-page
#F5F6F7

bg-surface
#FFFFFF

text
#22282E

text-muted
#6B737C

text-brand
#17606D

text-price
#C2410C

border
#E1E4E8

flash
#DC2626

flash-strong
#B91C1C

flash-bg
#FEE2E2

success
#15803D

success-bg
#DCFCE7

warning
#B45309

warning-bg
#FEF3C7

info
#1D4ED8

info-bg
#DBEAFE

rating
#F5A524

Kontras (WCAG 2.2 AA)

Pasangan	Rasio	Status
AaTeks utama / putih	14.88:1	AA ✓
AaPutih / brand-600 (header)	7.17:1	AA ✓
AaPutih / promo-700 (Beli)	5.18:1	AA ✓
Aapromo-700 / putih (harga)	5.18:1	AA ✓
Aaneutral-500 / putih (sekunder)	4.81:1	AA ✓
Aaflash-strong / flash-bg	5.30:1	AA ✓
Aasuccess / success-bg	4.57:1	AA ✓
Aawarning / warning-bg	4.51:1	AA ✓
Aainfo / info-bg	5.49:1	AA ✓
AaPutih / promo-500 (dilarang)	3.13:1	Gagal
Aaneutral-400 / putih (dilarang untuk teks)	2.61:1	Gagal

Tipografi: Plus Jakarta Sans + Lora

3xl · 30Judul produk desktop

2xl · 24Rp96.750

xl · 20Judul halaman mobile

lg · 18Rekomendasi Untukmu

md · 16Sinopsis & body panjang

base · 14Body UI, judul kartu desktop

sm · 13Judul kartu mobile

xs · 12★ 4,9 · 1,2rb terjual

2xs · 10RIBBON · BADGE

editorial · Lora“Petualangan tak terduga menunggu di halaman-halaman novel kami.”

Spasi (basis 4px)

space-0.52px

space-14px

space-28px

space-312px

space-416px

space-520px

space-624px

space-832px

space-1040px

space-1248px

space-1664px

Radius

xs · 2

sm · 4

md · 8

lg · 12

xl · 16

pill · ∞

Elevasi

card

sticky

hover

sheet

Breakpoint (container query pada .app)

< 480	Grid 2 kolom · bottom nav · sticky action bar · filter di bottom sheet
≥ 480	Grid 3 kolom
≥ 768	Grid 4 · header lengkap · sidebar filter/akun · ringkasan di kolom kanan · bottom nav hilang
≥ 1024	Grid 5 · PDP 3 kolom (galeri · info · ringkasan sticky)
≥ 1180	Grid 6