Living reference

Satu bahasa desain untuk semua produk OBARA.

Token, tipografi, dan komponen yang dipakai bersama di OBARA OS, Member, Crew, dan Back Office — supaya setiap app terasa satu keluarga dan dibangun lebih cepat.

OSMemberCrewBack Office

Sumber token

@obara/ui

tokens.css

Brand invarian

#C8391A

light + dark

Tema

Dual

light default

Warna

Palet inti OBARA. Setiap warna punya peran tetap — jangan pakai di luar konteksnya.

Brand

Permukaan & Border

Teks

Status

Kategori

Lakukan

#C8391A untuk aksi & aksen utama. Konsisten di semua app.

Hindari

Teal = warna lockout (brand Fikri). Jangan dipakai sebagai aksen brand OBARA.

Warna status membawa arti tetap — hijau lunas/live, kuning pending, merah batal/error.
Teks di atas warna: pakai putih pada #C8391A, jangan abu-abu di atas latar berwarna.
Warna kategori (Move/Breathe/Meditate) hanya untuk klasifikasi konten, bukan aksi.

Dual-theme. Semua token punya varian dark (opt-in via data-theme="dark"). #C8391A invarian di kedua tema. Teal = lockout (brand Fikri) — jangan dipakai sebagai aksen brand.

Tipografi

Dua family: Rubik untuk display, Open Sauce Two untuk seluruh body & UI.

Display · Rubik

Aa Bb Cc

Heading besar

Sub-heading

Judul (h1–h4), angka besar, wordmark. Weight 600–700, tracking rapat.

Body · Open Sauce Two

Teks isi ukuran besar untuk paragraf utama.

Teks isi standar — nyaman dibaca, 65–75ch.

Teks sekunder untuk label & keterangan.

Caption / micro-label

Seluruh body & UI. Muted ≥ #6B6862 untuk kontras AA di atas putih.

Spacing & Radius

Skala 4px sebagai basis ritme. Radius konsisten membuat permukaan terasa satu sistem.

Spacing (4px base)

4px

8px

12px

16px

24px

32px

48px

Radius

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-full

full

Elevation

Empat tingkat bayangan. Naik tingkat = makin dekat ke pengguna (chip → card → popover → modal).

shadow-sm

Chips, hover lifts

shadow

Cards, tiles

shadow-md

Popovers, dropdowns

shadow-lg

Modals, sheets

Icon Tiles

Pasangan bg/fg untuk ikon modul & kategori. Selalu berpasangan supaya kontras terjaga.

Aa

red

#FDECE8 · #C8391A

Aa

blue

#E8F1FD · #1D6FE0

Aa

amber

#FFF4E5 · #D9820A

Aa

green

#EAF7EE · #1B9E4B

Aa

purple

#F3ECFB · #7A3FD0

Aa

teal

#E9F6F6 · #0E8C8C

Aa

indigo

#E7F0FF · #3257C8

Aa

slate

#EEF0F2 · #5B6470

Foto & Imagery

OBARA memakai foto asli — bukan ilustrasi. Visual dari pustaka aset OBARA, fokus manusia nyata yang sedang bergerak.

gym

dance

wellness

court

martialarts

Selalu foto asli — jangan ilustrasi vektor, kartun, atau stok generik.
Subjek manusia nyata sedang beraktivitas, natural light, bukan pose kaku.
Rasio 4:5 (potret) untuk kartu, 16:9 untuk hero & banner.
Overlay teks butuh scrim gelap 40–60% supaya kontras tetap aman.

Buttons

Aksi utama layar. Satu Primary per tampilan; sisanya Secondary atau Ghost.

Varian

Ukuran

State

Default

Hover

Focus

Loading

Disabled

Anatomi

1 Container · radius-xl, tinggi 44–48px2 Ikon opsional (kiri label)3 Label · weight 500, kata kerja

Panduan

Satu Primary per layar untuk aksi paling penting.
Danger (outline merah) hanya untuk aksi destruktif yang sulit dibatalkan — hapus, batalkan.
Label kata kerja + objek: “Simpan perubahan”, bukan “OK”.
Target sentuh minimum 44px di mobile.

Lakukan

Satu aksi utama yang jelas, label kata kerja.

Hindari

Jangan dua Primary bersebelahan — pengguna bingung mana yang utama.

Status & Badge

Warna status membawa arti tetap — hijau lunas/live, kuning pending, merah batal.

LiveLunasPendingDibatalkanDraftOpen

Alert / Callout

Pesan kontekstual dalam 4 nada. Full border + tint + ikon (bukan garis samping) supaya terbaca di light & dark.

Butuh verifikasi

Lengkapi data KTP sebelum mengaktifkan pembayaran.

Pembayaran diterima

Invoice #INV-2043 sudah lunas dan tercatat di Buku Kas.

Kuota hampir habis

Sisa 2 sesi PT bulan ini. Perpanjang membership untuk lanjut.

Gagal memproses

Transaksi kedaluwarsa setelah 1 jam. Buat ulang link pembayaran.

Form Controls

Kontrol input bersama — combobox creatable, stepper, dan toggle dipakai lintas app.

Text input

Creatable combobox

Number stepper

Bulan

Toggle switch

Checkbox & Radio

Pilihan diskret. Checkbox untuk banyak pilihan, radio untuk satu dari beberapa.

Checkbox — fasilitas termasuk

Radio — siklus tagihan

Tabs

Segmented control untuk berpindah tampilan tanpa reload. Tab aktif = permukaan putih terangkat.

Konten tab Ringkasan tampil di sini.

Accordion

Panel lipat untuk FAQ & detail sekunder. Satu terbuka sebagai default.

Buka app member → Membership → Perpanjang, lalu bayar via link DUITKU. Kuota sesi otomatis diperbarui.

Avatar

Inisial berwarna dari palet icon-tile. Grup bertumpuk dengan sisa +N untuk daftar member.

RPBSSMAN

RPBSSMAN+8

Progress

Bar kemajuan untuk kuota sesi, onboarding, dan target. Warna brand, trek muted.

Kuota sesi PT8/12

Onboarding tenant3/5

Target member Q362/100

Cards & Stats

Kartu metrik: label kecil di atas, angka display besar, delta hijau/merah di bawah.

Member Aktif

1.284

+12% bulan ini

Nilai Pipeline

Rp 48jt

estimasi open

Konversi

62%

won / total

Empty State

Layar kosong yang mengarahkan, bukan mentok. Ikon lembut + ajakan aksi jelas.

Belum ada lead

Lead baru dari form publik & manual akan muncul di sini. Mulai dengan menambah satu manual.