Token Desain

Seluruh nilai visual berasal dari src/styles/tokens.css. Primitif mendefinisikan nilai, semantik menentukan peran, dan token komponen menjaga konsistensi. Mengikuti convention NestUI; @theme inline menjadi jembatan Tailwind.

Cobalt blue

Aksi utama, fokus, dan suara Aksesin. Anchor: #3454D1 pada langkah 600.

100

200

300

400

500

600

700

800

900

950

Lime

Semangat dan kebersamaan. Anchor: #D6ED65 pada langkah 300; gunakan teks gelap.

100

200

300

400

500

600

700

800

900

950

Neutral

Warm white dan forest ink: permukaan hangat, hierarki teks jelas, tanpa abu-abu yang terasa dingin.

100

200

300

400

500

600

700

800

900

950

1000

Alias Semantik

Lapisan yang benar-benar dirujuk komponen. Mode gelap hanya mengarahkan ulang alias ini — tidak ada utilitas yang ditulis dua kali.

Permukaan

background

surface

card

muted

canvas

Merek

primary

primary-subtle

secondary

secondary-subtle

accent

Status

success

warning

destructive

border

ring

Gradien Merek

Gradien cobalt untuk kebutuhan terbatas. Permukaan utama produk memakai warna solid untuk menjaga fokus.

Skala Tipografi

Poppins 400 / 500 / 600 / 700 untuk seluruh UI. Monospace sistem hanya untuk kode dan nilai token. Font disimpan lokal melalui Fontsource.

text-xs12pxAksesin — akses setara untuk semua

text-sm14pxAksesin — akses setara untuk semua

text-base16pxAksesin — akses setara untuk semua

text-lg18pxAksesin — akses setara untuk semua

text-xl20pxAksesin — akses setara untuk semua

text-2xl24pxAksesin — akses setara untuk semua

text-3xl30pxAksesin — akses setara untuk semua

text-4xl36pxAksesin — akses setara untuk semua

Ruang, sentuhan & gerak

Grid 4 px seperti NestUI. Jeda memberi ruang untuk memahami satu keputusan pada satu waktu.

4px

8px

12px

16px

20px

24px

32px

48px

44–56 px
Target sentuh. CTA utama 56 px.

120 / 200 / 360 ms
Respons / transisi / masuk layar.

Reduced motion
Waveform dan orbit berhenti mengikuti preferensi perangkat.

Kontrak komponen

Layer ketiga mengikat kebutuhan komponen ke token semantik.

Komponen	Token	Alias
Button	--button-primary-background	--primary
Input	--input-border	--input
VoiceOrb	--voice-wave	--secondary
PlaceCard	--place-status-background	--success-subtle
ChoiceCard	--choice-selected-border	--primary
BottomNav	--nav-active	--primary
ChatMessage	--chat-user-background	--primary
ChatComposer	--chat-composer-background	--card
InlineReportCard	--chat-report-accent	--primary-subtle

Radius

xs

sm

md

lg

xl

2xl

3xl

full

Elevasi

xs

sm

md

lg

xl