Live Docs

Navigation

Foundations /

stable

Colors

7 semantic tones (primary/secondary/accent/info/success/warning/error) + surface tokens. Setiap tone punya pair light/dark + content color untuk text on-color.

Semantic Tones

Pakai tone berdasarkan makna, bukan warna. Bila brand berubah, satu update token cukup.

Primary

--color-primary

Light / Dark

#2D7BFF / #3B82F6

Aksi utama, link, brand emphasis

Secondary

--color-secondary

Light / Dark

#F1F5F9 / #1E293B

Background subtle, neutral fill, surface alternatif

Accent

--color-accent

Light / Dark

#06B6D4 / #22D3EE

Highlight, callout, gradient pair dengan primary

Info

--color-info

Light / Dark

#0EA5E9 / #38BDF8

Informational state, tooltip neutral

Success

--color-success

Light / Dark

#10B981 / #34D399

Confirmasi, success toast, status hijau

Warning

--color-warning

Light / Dark

#F59E0B / #FBBF24

Caution, pending state, perlu perhatian

Error

--color-error

Light / Dark

#EF4444 / #F87171

Destructive, error message, validasi gagal

Surface & Text

Background, surface alternatif, text & border baseline.

App Background

--bg-app
#F8FAFC / #070A13

Background utama halaman

Surface

--bg-surface
#FFFFFF / #0D1324

Card, modal, panel

Text Main

--text-main
#0F172A / #F1F5F9

Body text, heading

Text Muted

--text-muted
#64748B / #94A3B8

Secondary text, label, caption

Border Subtle

--border-subtle
rgba(226,232,240,0.8) / rgba(30,41,59,0.7)

Divider, border default

Interactive States

Primary tone punya derived state untuk hover & active. Auto-computed di Theme Builder.

Auto-derived hover/active

--color-primary-hover dan --color-primary-active di-derive dengan shade ±18/±36 dari primary base. Light mode darken, dark mode lighten.

--color-primary
--color-primary-hover
--color-primary-active

Cara Pakai

Selalu pakai CSS variable, jangan hard-code hex.

/* ✅ Pakai token */
.my-button {
  background: rgb(var(--color-primary));
  color: rgb(var(--color-primary-content));
}

/* ❌ Hindari hard-code */
.my-button {
  background: #2D7BFF;
  color: #FFFFFF;
}