Colors
Define once, scale everywhere
Color Primitive System
Gunakan struktur Primitives langsung tanpa semantic tokens tambahan (seperti bg-primary, text-success). Ini memudahkan handover ke Webflow atau Framer.
Lean Setup
Declare hanya warna yang benar-benar digunakan dalam design. Tidak perlu memaksa variable Primary atau Secondary jika tidak membutuhkannya.
Contoh: White, Black, Grey 100, Grey 200 (sesuai kebutuhan.)
Scale Naming
Gunakan standar 100–900 untuk setiap shade:
- 100 = paling terang
- 500 = mid-tone
- 900 = paling gelap
Format: [ColorName] [Scale] (contoh: Grey 100, Blue 700)
Alpha & Opacity
Primitive Level Only
Warna dengan opacity < 100% harus di-declare sebagai variabel terpisah di Primitives.
Contoh: Black (100%) dan Black 50% adalah variabel berbeda.
Layer Opacity Restriction
Jangan ubah opacity pada layer atau komponen (Figma: Layer Pass Through/Opacity). Semua styling transparan harus menggunakan Color Styles atau Variables yang sudah terdefinisi.
Ini menjaga konsistensi color swatch saat deploy ke Webflow atau Framer.