Memuat ALUSNA…

ALUSNA — Bagusnya dimulai di sini.

Design Token dan Theme Generator

Buat token light, dark, dan high-contrast dengan preview WCAG lalu ekspor ke DTCG 2025.10, Tailwind v4, CSS, SCSS, atau React Native.

Cara menggunakan Design Token dan Theme Generator

Design token menerjemahkan keputusan visual menjadi nama dan nilai yang dapat dipakai lintas desain serta kode. ALUSNA memisahkan shade primitive, peran semantik, dan alias komponen agar tema menjelaskan fungsi, bukan hanya nilai mentah.

Langkah penggunaan

  1. Tentukan prefix token, mode tema, unit spacing, dan radius dasar.
  2. Periksa preview komponen dan hasil kontras WCAG sebelum meninjau setiap kelompok token.
  3. Unduh DTCG 2025.10, Tailwind v4, CSS, SCSS, atau React Native lalu review sebelum dipakai di produksi.

Cocok digunakan untuk

  • Tema light dan dark
  • Handoff Figma dan developer
  • Token multi-platform

Catatan penting

  • Pisahkan nilai primitive, keputusan semantik, dan alias komponen ke lapisan berbeda.
  • Beri versioning dan review pada file token yang dipakai oleh lebih dari satu produk.

Alat terkait