Lewati ke konten
linea

Linea UI

Sistem desain Linea

Satu kit komponen milik Linea sendiri. Semua halaman memakai komponen ini, jadi tombol, form, dan status selalu terlihat dan terasa sama. Halaman ini memakai komponen yang sama persis dengan aplikasi; yang kamu lihat di sini adalah yang dipakai di produksi.

Kode: app/components/ui/ · Aturan tertulis: DESIGN.md

Prinsip

Enam keputusan yang menjelaskan kenapa komponen terlihat seperti ini. Kalau ragu, kembali ke sini.

  1. 01

    Karya yang paling berwarna

    UI memakai putih, tinta, dan satu nila. Warna lain hanya untuk arti status.

  2. 02

    Satu aksi utama per layar

    Tombol nila muncul sekali. Sisanya sekunder atau tenang.

  3. 03

    Titik dan garis tahap

    Nama Linea berasal dari tahap yang terhubung garis. Motif itu muncul di label seksi, judul, panel, stepper, dan tombol utama.

  4. 04

    Pil untuk aksi, sudut untuk isi

    Tombol, chip, link header, dan badge berbentuk pil penuh. Field 10 px, panel 12 px, banner 24 px.

  5. 05

    Fungsi dulu, hiasan tidak

    Tidak ada ikon dekoratif, emoji, gradien, atau bayangan pada elemen diam.

  6. 06

    Satu skala tinggi

    Semua kontrol 32 / 40 / 48 px, jadi tombol dan field selalu sejajar.

Warna

Token warna berganti otomatis untuk tema gelap. Contoh di bawah mengikuti tema yang sedang aktif; nilai heksadesimal untuk terang dan gelap tertulis di tiap baris.

  • electric

    Electric Blue: Aksi utama, brand, identitas

  • lime

    Neon Lime: Selesai, aktif, stiker pop, checkpoint

  • tangerine

    Vivid Orange: Perhatian, antrean, peringatan

  • bg

    Latar halaman kanvas

  • surface

    Panel, kartu, menu

  • surface-2

    Isian, chip netral, hover

  • line

    Garis & border

  • ink

    Teks utama, judul

  • muted

    Teks sekunder, deskripsi

Aturan warna

Harga dan nominal uang memakai tinta tebal, tidak berwarna. Nila hanya untuk aksi utama, fokus, dan tahap aktif. Sage, oker, dan bata hanya untuk arti status. Semua pasangan teks/latar lolos WCAG AA.

Gradasi & Stiker Pop

Elemen visual berenergi tinggi yang terinspirasi dari street-pop culture Gen-Z ('hi酷', blind box, sticker badge, glowing card borders). Menggunakan perpaduan Neon Lime (#C1FE00), Electric Blue (#070AFF), dan Vivid Orange (#FB6D23).

BannerBadge

app/components/ui/primitives.tsx
Seniman pilihanBaru bukaEscrowNetralNetral gelap
  • Pakai
  • Pil penuh, warna solid, titik kecil di depan, huruf biasa
  • Pakai di atas gambar: banner beranda, kartu berlatar karya
  • Satu nada = satu makna: lime pilihan, orange baru, electric escrow
  • Jangan
  • Jangan dirotasi, diberi garis tebal, atau bayangan keras
  • Jangan lebih dari 2 label dalam satu banner

Mesh Gradients & Glow Card

app/globals.css
.bg-mesh-dark

Gradasi Radial Multi-Warna

Paduan #070AFF, #C1FE00, dan #FB6D23 di atas kanvas gelap #0A0C16.

.card-gradient-glow

Bingkai Gradasi Menyala

Aura neon aktif saat disentuh atau diarahkan kursor.

  • Pakai
  • Pakai .bg-mesh-dark hanya untuk bidang sorotan khusus; Launchpad dan panel fitur memakai panel biasa
  • Pakai .card-gradient-glow untuk kartu dengan aura menyala

Tipografi

Bricolage Grotesque untuk judul halaman dan seksi (otomatis untuk h1 dan h2), Instrument Sans untuk semua teks lain termasuk angka uang dengan angka sejajar.

  • Judul halamanPesananBricolage · 30 · 800
  • Judul seksiLayanan untukmuBricolage · 20 · 700
  • Judul kartuModel VTuber siap riggingInstrument · 15 · 700
  • Teks isiKarakter setengah badan, digambar dari nol.Instrument · 14 · 400
  • Label kecilPanel escrowInstrument · 11 · kapital
  • UangRp 1.575.000Instrument · tabular · 700

Bentuk & ruang

Empat radius, satu skala tinggi kontrol, jarak kelipatan 4 px, dan motif garis tahap.

rounded-xl

10 px · Field, thumbnail, tile kategori, item menu

rounded-2xl

12 px · Panel, kartu, gambar kartu

rounded-3xl

24 px · Banner beranda

rounded-full

Pil · Tombol, link header, chip filter, badge, avatar

SectionHeader · SectionLabel · TitleRule · StageLine

ui/nav-bits.tsx · ui/primitives.tsx

Judul halaman

Judul seksi

Aksi

Label kecil

Panel dengan garis tahap

Sketsa selesai, Lineart berjalan, Final tersisa.

  • Pakai
  • Judul seksi selalu lewat SectionHeader.
  • Panel yang mewakili tahap diberi stages.
  • Jangan
  • Menggambar garis/titik tahap manual di halaman.

Tombol

Pil penuh, satu ukuran (40 px, teks 14 px tebal). Lima varian dengan peran tetap, datar tanpa bayangan.

Button · ButtonLink

ui/button.tsx
Tautan sebagai tombol
  • Pakai
  • Satu primary per layar.
  • Label kata kerja + hasil: "Setujui Sketsa".
  • Pakai loading saat menunggu server.
  • Jangan
  • Dua tombol nila berdampingan.
  • Mengganti teks jadi "Mengirim…" (pakai loading).
  • Menambah ikon dekoratif di tombol.
  • Menimpa tinggi, padding, atau radius lewat className.

IconButton

ui/button.tsx
  • Pakai
  • Selalu beri label (tooltip & pembaca layar).
  • Jangan
  • Ikon tanpa fungsi jelas.

MilestoneDots

ui/button.tsx
Indikator memuat: tiga titik milestone dari logo, menyala bergantian.

Form

Field putih bergaris tegas, selalu dibungkus Field: label di atas, petunjuk atau error di bawah, penghitung karakter di kanan.

Field · Input · Textarea · Select

ui/field.tsx

5–80 karakter.

Rp

Kamu menerima 100%.

linea.id/@

Handle sudah dipakai seniman lain.

hari

33/1000

  • Pakai
  • Label pendek di atas field.
  • Tandai yang tidak wajib dengan "Opsional".
  • Awalan/akhiran untuk satuan (Rp, hari, %).
  • Jangan
  • Placeholder sebagai pengganti label.
  • <input> mentah di halaman (ditolak lint).

Pilihan

Pilihan aktif selalu bertanda tinta, bukan nila: nila disimpan untuk aksi.

ChoiceCard

ui/field.tsx
Lisensi
  • Pakai
  • Pilihan yang punya harga atau penjelasan.
  • Jangan
  • Lebih dari 4 kartu; pakai Select.

Segmented

ui/field.tsx
  • Pakai
  • 2–4 nilai yang langsung berlaku (status, tema).

Checkbox

ui/field.tsx

Status & badge

Pil lembut tanpa garis, bernada alami, dengan titik bulat. Status selalu berupa kata, tidak pernah hanya warna.

AvailabilityChip

ui/availability-chip.tsx
BukaDaftar tungguTutupBuka
  • Pakai
  • onImage di atas gambar karya.
  • Jangan
  • Huruf kapital semua atau warna neon.

Badge · CommissionStatusBadge · CategoryTag

ui/primitives.tsx · ui/status.tsx · ui/category.tsx
NetralNilaSageOkerBata
Menunggu senimanMenunggu pembayaranSedang dikerjakanSelesaiDalam sengketaDibatalkan
Live2DChibi & Emote

Panel & pemberitahuan

Panel bergaris tegas tanpa bayangan, bisa diberi garis tahap di tepi atas. Pemberitahuan berlatar lembut sesuai nada.

Card (Panel) · KeyValue

ui/primitives.tsx · ui/nav-bits.tsx

Ringkasan

Harga
Rp 450.000
Biaya layanan 5%
Rp 22.500
Total
Rp 472.500

Alert

ui/primitives.tsx
Tahap 1 disetujui dan terkunci untuk seniman.
Pembayaran berakhir dalam 12 jam.

Escrow

Dana ditahan sampai kamu menyetujui tiap tahap.

EmptyState

ui/primitives.tsx

Belum ada pesanan

Temukan layanan yang cocok dan kirim request pertamamu.

Jelajahi layanan
  • Jangan
  • Ilustrasi atau ikon besar.

Kartu & progres

Komponen khas Linea: kartu layanan tanpa kotak, dan stepper tahap escrow.

ServiceCard

components/service-card.tsx
Buka
Rian Art Studio

Model VTuber siap rigging

MulaiRp 1.500.000

Live2D
Daftar tunggu
Rian Art Studio

Rigging Live2D lengkap

MulaiRp 2.500.000

Live2D
  • Pakai
  • Gambar, seniman, judul, harga + hari, satu tag.
  • Jangan
  • Bio, skor, tombol, atau rating palsu di kartu.

ProgressStepper

ui/status.tsx
  1. Dibayar
  2. Sketsa
  3. 2Lineart & Warna Dasar
  4. 3Final

Ikon

Set ikon sendiri: grid 20×20, garis 1,6 px. Hanya untuk fungsi; kategori diwakili potongan karya.

  • ArrowLeft
  • ArrowUpRight
  • Chat
  • Check
  • ChevronDown
  • ChevronUp
  • External
  • Grid
  • Heart
  • List
  • Menu
  • Monitor
  • Moon
  • Pencil
  • Search
  • Sparkles
  • Sun
  • User
  • X
Ikon baru harus punya fungsi yang langsung dikenali, digambar di grid 20×20 yang sama, dan ditambahkan ke ui/icons.tsx.

Penulisan

Ramah seperti teman seniman, lugas seperti bank setiap kali menyangkut uang.

  • TombolSetujui SketsaOK / Lanjut
  • UangRp 1.500.000 cair setelah kamu menyetujui FinalDana aman!
  • ErrorGagal mengirim link masuk. Coba lagi dalam 1 menit.Terjadi kesalahan
  • IstilahSeniman · Klien · Pesanan · Tahap · Biaya layananArtist · Buyer · Order · Milestone · Fee