Design Tokens — Fondasi Design System

Design tokens adalah nilai-nilai desain yang disimpan sebagai variabel — warna, spacing, typography, border-radius, shadow. Tokens memastikan konsistensi di seluruh produk.

Mengapa Tokens Penting?

Tanpa tokens, kamu mungkin punya:

• #2563EB di halaman A, #2461E8 di halaman B (mirip tapi beda)
• padding: 16px di satu tempat, padding: 15px di tempat lain
• Mengubah warna brand berarti find-replace di ratusan file

Dengan tokens:

:root {
  /* Color tokens */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F9FAFB;
  --color-border: #E5E7EB;
  --color-error: #EF4444;
  --color-success: #10B981;

  /* Spacing tokens */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography tokens */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Border radius tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Shadow tokens */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
}

Semantic Tokens

Level di atas raw tokens — menghubungkan token ke fungsi:

:root {
  /* Raw tokens */
  --blue-600: #2563EB;
  --gray-100: #F3F4F6;

  /* Semantic tokens — menggunakan raw tokens */
  --color-action: var(--blue-600);
  --color-surface: var(--gray-100);
}

Keuntungan: saat ganti theme (dark mode), cukup ubah semantic tokens tanpa mengubah semua komponen.

Tips

1. Mulai dari yang ada — Tailwind CSS default sudah punya token system yang baik
2. Naming convention — --[category]-[property]-[variant] (misal: --color-text-secondary)
3. Jangan terlalu granular — tokens harus mengurangi keputusan, bukan menambah
4. Document — tokens hanya berguna jika tim tahu cara menggunakannya