Buat agenda

Sistem desain

Ready Room

Fondasi visual LobbyQuest: permukaan netral ala shadcn/ui, satu warna sinyal Volt untuk momen "siap", label HUD monospace, dan ikon Lucide. Halaman ini menampilkan setiap token dan komponen dalam keadaan nyata.

Warna

Token semantik mengikuti struktur shadcn/ui. Nilainya berganti otomatis di tema gelap; semua pasangan teks lolos WCAG AA.

--background Latar halaman
--card Permukaan kartu
--muted Permukaan redup
--foreground Teks utama
--muted-foreground Teks pendukung
--primary Aksi utama netral
--brand Volt: momen penting
--brand-text Teks merek
--border Garis pemisah
--input Batas kontrol (≥3:1)
--ring Cincin fokus
--destructive Aksi berbahaya
--ready Status siap
--maybe Status mungkin
--absent Status absen
--afk Status AFK
--info Informasi
--chart-lead Bar sorotan

Tipografi

Geist untuk teks dan judul, Geist Mono untuk label HUD, angka, dan kode. Keduanya di-subset dan di-host sendiri.

Kumpulkan party-mu.

Push rank Sabtu malam

Hasil voting

Teks isi 16px dengan tinggi baris 1,6 agar nyaman dibaca di HP.

Teks pendukung 14px memakai warna muted-foreground.

Label HUD · Ready check 3/5

19.00–22.00 WIB · T-02:14:05

Ikon

Semua ikon berasal dari Lucide (set ikon shadcn/ui), dirender sebagai SVG inline dengan currentColor. Ukuran standar 16, 20, dan 24px.

  • arrow-left
  • arrow-right
  • ban
  • calendar
  • calendar-check
  • calendar-clock
  • calendar-plus
  • check
  • check-check
  • chevron-down
  • chevron-right
  • circle-alert
  • circle-check
  • circle-dashed
  • circle-help
  • circle-x
  • clock
  • code-xml
  • coffee
  • copy
  • crown
  • door-open
  • download
  • external-link
  • eye
  • eye-off
  • file-x
  • flag
  • gamepad-2
  • ghost
  • globe
  • hourglass
  • house
  • info
  • key-round
  • link
  • list-checks
  • lock
  • lock-open
  • log-in
  • log-out
  • map-pin
  • message-circle
  • minus
  • monitor
  • moon
  • palette
  • party-popper
  • plus
  • send
  • server-crash
  • share-2
  • shield-alert
  • shield-check
  • sparkles
  • sun
  • swords
  • timer
  • trash-2
  • triangle-alert
  • trophy
  • type
  • user-plus
  • user-x
  • users
  • vote
  • x
  • zap

Tombol

Form

Terlihat oleh siapa pun yang memiliki tautan.

Judul minimal 3 karakter.

Pilihan
Kontrol segmen (ready check)

Badge & status

Status selalu memakai ikon dan label; warna tidak pernah berdiri sendiri.

Default Primary Outline Brand Voting berlangsung Siap Mungkin Absen AFK

Alert & toast

Informasi

Siapa pun yang memiliki tautan dapat melihat agenda ini.

Pilihanmu tersimpan

Kamu bisa mengubahnya kapan saja dari browser ini.

Party hampir penuh

Tinggal 1 slot hadir lagi.

Konfirmasimu tersimpan

Teman-temanmu bisa melihat status ready-mu.

Dialog, tabs, tooltip

Buka dialog konfirmasi

Hapus agenda?

Tanpa JavaScript, isi ini tampil sebagai panel terbuka. Dengan JavaScript, isi ini menjadi dialog modal.

Jadwal

Panel pertama. Tanpa JavaScript, semua panel tampil berurutan.

Akses

Panel kedua. Tombol panah kiri/kanan berpindah tab.

Zona bahaya

Panel ketiga.

Avatar & data

ABC+2

Bar hasil voting (sorotan + netral)

Segmented bar ready check

Progress

Skeleton

Pola produk

  1. Voting
  2. Jadwal dikunci
  3. Selesai
Siap3
Mungkin1
Absen1
AFK1

Lobby masih kosong

Bagikan tautan agenda supaya teman-temanmu bisa gabung dan memilih waktu.