Buku Kasir — Style Guide & Docs

Warna

Palet warna utama seluruh platform

Primer — Teal

#f0fdfa

teal-50

Bg total bayar, bg "Ubah", toast sukses

#ccfbf1

teal-100

Bg avatar pemilik

#0d9488

teal-600

Badge ring, bar chart, info QRIS

#0f766e

teal-700

Tombol aksi utama, nav aktif, harga, FAB

#115e59

teal-800

Hover/active teal-700

Netral — Slate

#f1f5f9

slate-100

Bg halaman, bg icon aktif

#e2e8f0

slate-200

Divider, segment control, garis grid

#cbd5e1

slate-300

Border input, card, tombol outline

#94a3b8

slate-400

Teks nav nonaktif, teks sekunder, disabled

#64748b

slate-500

Teks body sekunder, label, subtitle

#475569

slate-600

Teks body, tombol sekunder

#334155

slate-700

Label kuat, teks input, judul section

#0f172a

slate-900

Teks utama (heading, harga, nama produk)

Semantik — Sukses / Emerald

#ecfdf5

emerald-50

Bg jumlah positif, pelanggan dikenal

#d1fae5

emerald-100

Bg icon sukses, status printer

#34d399

emerald-400

Border input pelanggan ditemukan

#10b981

emerald-500

Icon checklist pelanggan

#059669

emerald-600

Bg toast sukses, tombol stock-in

#047857

emerald-700

Teks uang kembali (change)

Semantik — Bahaya / Red

#fef2f2

red-50

Bg badge void, stock-out, stok menipis

#fecaca

red-200

Border tombol logout

#ef4444

red-500

Teks "Stok habis", stock-out

#dc2626

red-600

Tombol konfirmasi bahaya, toast error

Peringatan / Amber & Lainnya

#fffbeb

amber-50

Bg badge offline

#fef3c7

amber-100

Bg indikator offline

#f59e0b

amber-500

Banner offline

#b45309

amber-700

Teks badge offline

#f0f9ff

sky-50

Bg badge stok "set"

#0369a1

sky-700

Teks badge stok "set"

#16a34a

green-600

Tombol share WhatsApp

PWA: theme_color: '#0f766e', background_color: '#f1f5f9'.

Tipografi

Font system + skala ukuran per penggunaan

FONT STACK

font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

h1 Judul halaman20px800

text-xl font-extrabold

h2 Judul modal16px700

text-base font-bold

Judul card/section14px700

text-sm font-bold

Nama produk14px600

Kopi Susu Gula Aren

Harga14px700

Rp 20.000

Amount besar (laporan)30px800

Rp 2.457.500

Body / label14px500

text-sm font-medium

Teks sekunder12px400

text-xs text-slate-500

Label navigasi11px500

Beranda Kasir Produk

Teks badge10px700

VOID STOK ∞

TopBar title18px700

text-lg font-bold

Landing title24px800

text-2xl font-extrabold

Layout & Container

Mobile-first, container terpusat, safe-area

APP CONTAINER

<div class="relative mx-auto min-h-dvh w-full max-w-lg bg-slate-100 shadow-xl">

Semua halaman: max-w-lg (512px), center, mobile-first
Bottom padding: pb-24 (umum), pb-48 (halaman Kasir)
Header sticky: sticky top-0 z-20 bg-slate-100/95 px-4 pt-4 backdrop-blur
Konten: px-4

SAFE AREA & HIDE SCROLLBAR

.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

Komponen

Tombol, card, input, bottom sheet, toast, badge

Tombol

VARIASI UTAMA

Simpan Produk Batal Outline Teal Logout Hapus +

<button class="h-13 w-full rounded-xl bg-teal-700 py-3.5 font-bold text-white active:bg-teal-800 disabled:opacity-60">
<button class="h-12 rounded-xl border border-slate-300 font-semibold text-slate-700 active:bg-slate-50">
<button class="rounded-xl border border-teal-700 font-bold text-teal-700 active:bg-teal-50">
<button class="h-12 rounded-xl border border-red-200 font-bold text-red-600 active:bg-red-50">

CATEGORY PILL & QUICK AMOUNT

Minuman Makanan Snack

10.000 20.000 50.000

<button class="h-9 shrink-0 rounded-full bg-teal-700 px-4 text-sm font-semibold text-white shadow-sm"><!-- aktif -->
<button class="h-9 shrink-0 rounded-full bg-white px-4 text-sm font-semibold text-slate-600 shadow-sm"><!-- nonaktif -->
<button class="h-10 rounded-lg border border-teal-600/40 bg-teal-50 px-3 text-sm font-semibold text-teal-700 active:bg-teal-100">

Card

Info Card

Total transaksi bulan ini: Rp 12.450.000

Summary Card — Jumlah item: 24

Total Bayar

Rp 45.000

<!-- Product Card (grid) -->
<div class="relative select-none rounded-xl bg-white p-3 shadow-sm transition active:scale-[0.98]">

<!-- Info Card -->
<div class="rounded-2xl bg-white p-5 shadow-sm">

<!-- List Card -->
<div class="mx-4 divide-y divide-slate-100 rounded-2xl bg-white shadow-sm">

<!-- Summary Card -->
<div class="rounded-xl bg-slate-50 p-4 text-sm">

<!-- Payment Total -->
<div class="rounded-xl bg-teal-50 p-4 text-center">

Input & Label

Nama Produk

Cari Produk

Kategori

Aplikasikan ke semua produk

<input class="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-600/20" />
<input type="checkbox" class="h-6 w-6 accent-teal-700" />
<label class="block text-sm font-medium text-slate-700 mb-1.5">

Bottom Sheet, Toast, Badge, Segment

BOTTOM SHEET

<!-- Backdrop -->
<div class="fixed inset-0 z-40 bg-black/40" />

<!-- Sheet -->
<div class="fixed inset-x-0 bottom-0 z-50 flex justify-center">
  <div class="w-full max-w-lg rounded-t-2xl bg-white shadow-2xl">
    <div class="mx-auto mt-2 h-1.5 w-10 rounded-full bg-slate-200" />
    <div class="max-h-[80dvh] overflow-y-auto px-5 pb-6 pt-3 safe-bottom">

TOAST (3000ms auto-dismiss)

Transaksi berhasil disimpan

BADGE

VOIDNONAKTIF∞ STOKOffline

Void     : rounded bg-red-50 px-1.5 py-0.5 text-[10px] font-bold text-red-600
Nonaktif : rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-bold text-slate-500
Stok ∞   : rounded bg-teal-50 px-1.5 py-0.5 text-[10px] font-bold text-teal-600
Offline  : rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700

Segment control: grid grid-cols-2 gap-1 rounded-xl bg-slate-200/70 p-1; aktif bg-white text-slate-900 shadow-sm.

Preview di Frame HP

Semua Minuman Makanan

Kopi Susu

Rp 20.000

Teh Melati

Rp 5.000

Total Bayar

Rp 25.000

Beranda

Kasir

Produk

Riwayat

Akun

BOTTOM NAV

<nav class="fixed inset-x-0 bottom-0 z-30 mx-auto w-full max-w-lg border-t border-slate-200 bg-white safe-bottom">

TOP BAR

<header class="sticky top-0 z-20 border-b border-slate-200 bg-white">
  <div class="flex h-14 items-center gap-2 px-4">
    <!-- back: rounded-full text-slate-600 active:bg-slate-100 -->
    <!-- title: text-lg font-bold text-slate-900 -->

Shadow

Bayangan konsisten untuk card, button, toast

shadow-sm

Card, product item, segment tab, pill

shadow-lg

Toast, FAB

shadow-xl

App container, bottom sheet

teal/30

shadow-teal-700/30

Cart FAB CTA

teal/40

shadow-teal-700/40

Product FAB

ring

Focus ring

focus:ring-teal-600/20

Border Radius

Skala radius seluruh komponen

full

9999px

2xl

16px

xl

12px

lg

8px

md

6px

rounded-full → pill (category, search, back, load-more)
rounded-2xl → card, bottom sheet, list container
rounded-xl  → button, input, product card, receipt
rounded-lg  → increment/decrement, quick amount, tab aktif
rounded-md  → badge tipe pergerakan stok

Icon

Inline SVG gaya Heroicons (stroke-based)

POLA

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
  <path stroke-linecap="round" stroke-linejoin="round" d="..." />
</svg>

Elemen	Stroke Width
Icon umum	1.5 atau 2
Icon navigasi	1.8
Icon FAB plus	2.5

Transisi

Animasi bottom sheet, fade, dan kartu

/* Bottom Sheet */
.sheet-enter-active, .sheet-leave-active { transition: transform 0.25s ease; }
.sheet-enter-from, .sheet-leave-to { transform: translateY(100%); }

/* Fade */
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* Product Card Press */
active:scale-[0.98]

/* Spinner */
animate-spin

Tokens & Grid Pattern

Pola layout & aturan untuk fitur baru

GRID / LAYOUT PATTERN

Pattern	Kelas Tailwind
Grid produk	grid grid-cols-2 gap-3
Grid pembayaran	grid grid-cols-3 gap-2
Grid statistik	grid grid-cols-3 divide-x divide-slate-100
Grid form 2 kolom	grid grid-cols-2 gap-3
Scroll kategori	no-scrollbar flex gap-2 overflow-x-auto
List dengan divider	divide-y divide-slate-100
List item	flex items-center gap-3 px-4 py-3.5 active:bg-slate-50

Jangan perkenalkan warna baru tanpa persetujuan — teal primary, slate neutral, emerald/red/amber semantik. Tombol min h-12, input min font 16px (cegah iOS zoom). Currency id-ID: Rp 1.000.

Dokumentasi Markdown (AI-readable)

Dokumen yang bisa dibaca AI tanpa crawl

Dokumen AI-readable berisi seluruh aturan styleguide dalam satu file markdown, sehingga AI/agent (opencode, Claude, dsb.) dapat memahami sistem desain tanpa menjelajahi website.

Buka styleguide.md Platform bukukasir.biz.id

https://styleguide.bukukasir.biz.id/styleguide.md

Penerapan

Platform yang memakai sistem desain ini

Platform	Stack	URL
Buku Kasir (main app)	Vue 3 + Tailwind v4, mobile-first PWA	bukukasir.biz.id (production)
Buku Kasir (staging)	sama, environment terpisah	pos.batuteknologi.web.id
POS Superadmin	Tailwind v4 via CDN + Alpine.js	superadmin-pos.batuteknologi.web.id
Landing Page	landingpage.html (independen)	bagian dari bukukasir.biz.id

Style Guide Buku Kasir