Webflow
Styling
Standar typography mapping dan penggunaan warna menggunakan variable dan global swatch di Webflow.
Typography Mapping
Aturan Wajib
- Semua elemen teks harus menggunakan properti dari design system
- Tidak diperbolehkan melakukan styling teks secara manual
Properti yang Wajib Menggunakan Variable
Seluruh properti berikut harus menggunakan variable Webflow:
| Properti | Keterangan |
|---|---|
| Font size | Ukuran teks |
| Font weight | Ketebalan teks |
| Letter spacing | Jarak antar huruf |
| Line height | Gunakan satuan em |
| Font color | Warna teks |
Penyesuaian Khusus
Jika terdapat ukuran teks khusus (misalnya pada hero section), buat variable baru yang spesifik:
Heading Hero → ukuran heading di hero section
Heading Section → ukuran heading standar di section lainTidak diperbolehkan melakukan styling teks langsung tanpa penggunaan variable pada elemen teks manapun.
Penggunaan Warna
Aturan Wajib
- Semua warna harus menggunakan variable Webflow
- Tidak diperbolehkan menggunakan kode hex secara manual
Penggunaan warna manual akan menyebabkan inkonsistensi pada sistem desain dan mempersulit perubahan tema secara global.
Cara Kerja
Dengan menggunakan variable, perubahan pada satu warna akan otomatis diterapkan ke seluruh elemen yang menggunakan variable tersebut — tanpa perlu mengubah satu per satu.