Fondasi
Tipografi
Fraunces untuk heading dan harga, Montserrat untuk body dan UI. Terkonfirmasi di kode: @fontsource-variable/fraunces dan montserrat di web, serta file font yang sama di mobile (Montserrat 400-800, Fraunces 400-700, plus Fraunces Italic 600). DM Sans tidak dipakai di mana pun.
Skala kit
Heading mengikuti yang benar-benar dirender di halaman web: Fraunces 600, tracking -0.02 sampai -0.025em, h1 halaman booking clamp(28px, 2.4vw, 36px), h2 section 22px.
Your story begins somewhere beautiful
Find a stay that fits the plan
Enjoy a different kind of experience
Review your booking
Villa name
Curated villas in Indonesia for moments that matter
Body text is set in Montserrat at 16 px on a 24 px line height.
Secondary information such as helper text and button labels.
Caption, supplementary only. Never the sole carrier of key information.
Dua skala referensi di kode
| Web: token di layout.css (heading 600) | ||
|---|---|---|
| Token | Ukuran | Line height |
| h1 | 60px | 80px |
| h2 | 48px | 64px |
| h3 | 36px | 48px |
| h4 | 30px | 40px |
| h5 | 24px | 32px |
| h6 | 20px | 28px |
| body-lg | 18px | 24px |
| body-sm | 16px | 24px |
| caption-lg | 14px | 20px |
| caption-sm | 12px | 18px |
| caption-xs | 10px | 14px |
| Mobile: StylizedText (heading bold, Fraunces) | ||
|---|---|---|
| Varian | Ukuran | Line height |
| h1 | 32px | 40px |
| h2 | 24px | 32px |
| h3 | 20px | 28px |
| h4 | 18px | 24px |
| h5 | 16px | 22px |
| h6 | 14px | 20px |
| subtitle1 / 2 (medium) | 16 / 14px | 24 / 22px |
| body1 / body2 | 16 / 14px | 24 / 20px |
| caption | 12px | 16px |
| overline (huruf besar) | 10px | 16px |
Halaman web tidak memakai token skala besar itu apa adanya: h1 beranda dirender 28px, h1 booking 28 sampai 36px. Komponen mobile juga memakai ukuran di luar kedua skala (9, 11, 13, 15px). Kit mempertahankannya pada komponen terkait (kartu villa) supaya sama dengan app, dan menandainya sebagai kandidat dirapikan.