Untuk dikonfirmasi
Keputusan & temuan dari kode
Kit v0.2 mengikuti kode di repo frontend, mobile, dan CMS. Bagian pertama adalah keputusan kit; bagian kedua adalah temuan di kode yang belum diputuskan siapa pun.
Keputusan kit
| Keputusan | Default di kit | Alasan | Perlu |
|---|---|---|---|
| Teal primary | 600 #00A896 | Dominan di kode (web 40, mobile 75) dan COLORS.primary di mobile | Ray |
| Fill tombol brand | 500 #00C7A6, teks putih | Persis Button mobile, tapi kontrasnya 2.16:1. Ditahan sebagai varian vc-btn--brand, bukan dihapus | Ray |
| Pasangan lulus AA | 800 #087F76 (vc-btn--accent, --vc-action) | Nilainya sudah ada di web sebagai hover; hover tombol aksi di kit naik ke 900 #06655E (usulan) | Ray |
| Font | Fraunces + Montserrat | Terkonfirmasi di web dan mobile. DM Sans di draf awal tidak dipakai di kode | Ray |
| Latar halaman | Putih murni | Sesuai kode. Warm off-white di draf awal tidak ada di kode | Ray |
| Shadow | Satu level float | Nilai nav bawah: 0 10px 35px rgba(27, 36, 48, 0.14) | — |
| Nilai kembar | Dilipat ke token terdekat | Lihat peta nilai di bagian Warna; kolom "Usulan" belum disetujui | Ray |
| Prefix class | vc- | Kode memakai vcd- dan vct-; vc- masih kosong. Komponen baru vc-, yang lama dimigrasi bertahap | Dev team |
| Rating | Tidak ada komponen | Belum ada data review nyata (aturan: tanpa data fiktif) | — |
| Copy status pembayaran | Draft | Harus cocok dengan status backend dan perilaku MonetaPay | Dev team |
Temuan di kode
| Temuan | Detail | Dampak |
|---|---|---|
| Kontras teks | Putih di teal-500 2.16:1; teal-600 di putih 2.98:1; muted #8A93A2 sekitar 3.1:1; placeholder lebih rendah; putih di merah #EF4444 pada teks 9px | Gagal WCAG AA untuk teks kecil, ada di tombol, harga, dan lokasi |
| Emoji di UI | Badge "Instant" di web memakai emoji api | Melanggar aturan design system (tanpa emoji di UI) |
| Glass dan gradient | expo-glass-effect dan gradient di 10 file mobile atau lebih | Melanggar aturan design system (tanpa glassmorphism dan gradient berat) |
| Skala oklch | Chroma di luar gamut sRGB, render ter-clamp | Warna di layar tidak sama dengan nilai di token |
| Hex hardcoded | Banyak komponen memakai hex langsung, melewati token | Perubahan token tidak merambat |
| Tiga skala tipografi | Token web, StylizedText mobile, dan override per halaman | Ukuran heading tidak konsisten antar platform |
| Dua keluarga ink | Navy dan forest-green berdampingan | Dua bahasa warna teks dalam satu produk |
| Sisa template | constants/theme.ts di mobile adalah bawaan template Expo | Terlihat seperti token tapi tidak dipakai |
| Berkas sensitif di git | Repo mobile melacak my-upload-key.keystore dan google-services* | Risiko keamanan, di luar lingkup desain, tapi perlu diteruskan ke dev team |
Peta ke kode
| Komponen kit | Web (frontend) | Mobile |
|---|---|---|
| Header | Header.svelte | app-header.tsx |
| Search bar | SearchBar.svelte, PropertySearchBar.svelte | — |
| Villa card | SearchVillaCard.svelte, PropertyCard.svelte | home-property-card.tsx |
| Nav bawah | MobileNav.svelte (.vct-mobile-nav) | bottom-navbar.tsx |
| Button | Utility Tailwind | ui/button.tsx |
| Ringkasan harga | booking-initiate.css | booking-summary.tsx |
| Toast | ToastContainer.svelte | — |
| Pembayaran dan transaksi | TransactionDetailDrawer | src/app/payment |
Batch berikutnya
Modal dan bottom sheet · toast · navigasi desktop · galeri foto · pola validasi form · peta lokasi · dan token turunan untuk Owner Dashboard (palet CMS: cyan #1BB3C5 dan hijau #00D6B5) yang berbagi fondasi yang sama.