Fondasi
Spacing & bentuk
Spacing (grid 4/8)
space-14px
space-28px
space-312px
space-416px
space-524px
space-632px
space-740px
space-848px
space-964px
space-1080px
space-1196px
Selaras Tailwind di web dan konstanta mobile (gutter halaman 16, jarak antar section 28, jarak isi section 16). Token space-section = 28px.
Radius
sm · 8px
chip kecil, tag
chip kecil, tag
md · 14px
foto dan kartu, input
foto dan kartu, input
lg · 20px
section booking, item nav
section booking, item nav
xl · 30px
nav bawah mengambang
nav bawah mengambang
pill
tombol, search bar, badge
tombol, search bar, badge
Di kode: --radius 10px, lalu Tailwind rounded-xl = 14px, 2xl = 18px, 3xl = 22px, ditambah 20px dan 30px di CSS kustom. Nilai 18 dan 22 masih muncul di web tapi belum punya token kit.
Elevation
Flat
default: kartu, panel, header
default: kartu, panel, header
Float
nav bawah, search bar
nav bawah, search bar
Satu level: 0 10px 35px rgba(27, 36, 48, 0.14), nilai persis dari nav bawah di web dan mobile. Booking summary di mobile memakai bayangan kedua yang sangat tipis; kit menggantinya dengan border.
Layout & sentuh
| Token | Nilai | Catatan |
|---|---|---|
| --vc-header-h | 64px, lalu 88px mulai 768px | Sama dengan --site-header-height di web |
| --vc-nav-w | 440px | Lebar maksimum nav bawah mengambang; jarak ke tepi bawah 12px plus safe area |
| --vc-container | 1200px | Gutter 16 / 24 (≥ 768) / 40 (≥ 1024) |
| --vc-tap-min | 44px | Target sentuh minimum (tombol mobile memakai min-h-11 = 44px) |
| Breakpoint | 640 · 768 · 1024 · 1280 | Selaras Tailwind di kode |