Specimen Sistem Desain PolaPlay

Implementasi komponen React dan token CSS dari acuan kanonik docs/design/polaplay-design-system.html.

Mode Specimen Demonstrasi — Seluruh interaksi di halaman ini adalah contoh visual untuk verifikasi desain, bukan fitur multiplayer aktif.

Tombol & Status Interaksi

Tombol kapsul dengan kilau atas, tepi 2 px, dan pijakan bawah 3 px. Mendukung status default, hover, ditekan, fokus keyboard, dan nonaktif.

Varian interaktif

Klik salah satu tombol untuk mencoba umpan balik.

Specimen status visual

Default

Hover (naik 2 px)

Ditekan (turun & memadat)

Fokus Keyboard (cincin 3 px)

Nonaktif (disabled)

Panel, Input, & Dialog Aksesibel

Preferensi Tempat

Bahasa / Language

Senang kamu mampir.

Nama tampilan (specimen input)

Masukkan nama yang ingin ditampilkan (minimal 2 karakter).

Balon Kata & Tag Nama (Specimen)

Contoh tampilan balon obrolan di atas kepala avatar dan penanda nama pemain. Obrolan waktu nyata baru diaktifkan setelah M0.

NadiaSore! Boleh duduk di sini?

RakaEh, kamu datang juga! Teh hangatnya baru diseduh.

RakaNadiaKamu

Specimen dialog aksesibel

Escape menutup dialog, fokus tetap di dalam dialog selama terbuka, lalu kembali ke tombol pemicu.

Status Loading & Pesan Error

Loader empat titik kelopak (menghormati prefers-reduced-motion) dan tampilan pesan kendala yang jelas.

Menyiapkan tempat…

Belum bisa membuka ruangan

Terjadi kendala saat menyiapkan kanvas dunia. Silakan coba muat ulang tempat ini.

Toolbar Masa Depan (Specimen Pasca-M0)

Ketujuh tombol aktivitas di bawah ini adalah specimen desain untuk milestone mendatang. Tidak ditampilkan di /play pada M0 agar tidak membingungkan pemain.

Specimen Only · Post-M0

Pilih ikon di dock contoh untuk membaca fungsinya.

Token Warna & Palet

Sumber tunggal variabel CSS di polaplay-tokens.css. Teks selalu memakai tinta cokelat kakao (--pp-ink) demi kontras baca yang nyaman.

Dasar UI

#43322E

Ink--pp-inkSemua teks

#7A625A

Ink Soft--pp-ink-softMetadata

#F7F7F6

Ground--pp-groundLatar halaman

#FFFFFF

White--pp-whitePanel, balon

#DCDCDB

Line Strong--pp-line-strongGaris kontrol

Palet karakter (Avatar Base v1.0)

#4E3B36

Cocoa--pp-cocoaRambut, nametag

#8B6553

Mocha--pp-mochaPakaian, kayu

#F3D0AE

Peach--pp-peachKulit, dinding

#FBE8D6

Cream--pp-creamHeader panel, lantai

#C8DBF5

Sky--pp-skyAksi kedua

#DCCDEC

Lilac--pp-lilacAksen kecil saja

#5E4541

Lineart--pp-lineartGaris cokelat hangat

Aksen kelopak

#F48FBF

Pink--pp-pinkAksi utama

#79B6F0

Blue--pp-blueNavigasi, info

#FFCD5E

Sun--pp-sunSorotan

#FFAB62

Orange--pp-orangeIkon judul, hal baru

Status

#2F6FC0

Focus--pp-focusCincin fokus 3 px

#C0365F

Error--pp-errorGaris & teks error

#2F7A52

Success--pp-successTeks berhasil

Tipografi & Geometri

Keluarga huruf Nunito (400–900) dengan sudut membulat lembut, garis 1,5–2 px, dan target klik minimal 44 × 44 px.

Wordmark · Nunito 900 (tracking −2,5%)

PolaPlay

Judul, panel, tombol · Nunito 800

Senang kamu mampir.

Body & chat · Nunito 600–700 (15 / 21 px)

Eh, kamu datang juga! Teh hangatnya baru diseduh.

Contoh Lokalisasi (ID / EN)

PolaPlay menampilkan satu bahasa pada satu waktu. Mengubah bahasa langsung memperbarui teks antarmuka tanpa memuat ulang dunia.

Kunci	Indonesia (id)	English (en)
`world.welcome`	Senang kamu mampir.	Glad you stopped by.
`chat.placeholder`	Sapa teman di sini…	Say hello…
`nav.travel`	Jelajah	Explore
`nav.home`	Rumah	Home
`nav.style`	Gaya	Style
`nav.friends`	Teman	Friends
`nav.emotes`	Ekspresi	Emotes
`nav.bag`	Tas	Bag
`nav.shop`	Toko	Shop
`network.reconnecting`	Menyambungkan kembali…	Reconnecting…