7. Design System & Tokens

Design System adalah fondasi visual aplikasi kita. Semua nilai desain seperti Colors (Warna), Spacing (Jarak), Typography (Tipografi), dan Border Radius wajib menggunakan tokens yang terdaftar secara resmi di tailwind.config.ts dan/atau globals.css melalui CSS variables.

Prinsip Utama (Golden Rules)

1. Single Source of Truth: Semua token dikelola secara terpusat. Perubahan nilai pada token akan otomatis memperbarui seluruh UI tanpa perlu mengubah file komponen secara individual.
2. Dilarang Keras Hardcoding: Penggunaan kode hex manual (seperti color: #4F46E5), inline style untuk warna/jarak, atau arbitrary values Tailwind (seperti bg-[#4F46E5] atau p-[17px]) sangat dilarang, kecuali untuk visualisasi dinamis yang nilainya didapat dari database.
3. Mendukung Mode Gelap (Dark Mode): Gunakan CSS variables untuk warna-warna utama agar transisi tema gelap dan terang berjalan secara mulus tanpa penulisan kelas yang redundan.

Kategori & Spesifikasi Tokens

A. Spacing & Layout

Gunakan skala spacing bawaan Tailwind yang berbasis kelipatan 4px (0.25rem) untuk menjaga konsistensi vertikal dan horizontal grid.

Hindari nilai custom seperti p-[15px] atau m-[7px]. Selalu bulatkan ke skala terdekat.

B. Colors (Warna) & Semantic Tokens

Pembagian warna diatur menjadi beberapa kelompok demi menjaga struktur UI yang jelas:

1. Brand Colors: Identitas korporat (Primary: Indigo/Indigo-like).
2. Neutral Colors: Slate/Gray untuk background, border, teks dasar, dan bayangan.
3. Semantic Colors: Warna dengan arti khusus:
   • Success (Hijau): Untuk sukses, checklist, status aktif.
   • Warning (Kuning/Oranye): Untuk peringatan, status pending.
   • Error / Danger (Merah): Untuk error, tombol hapus, pembatalan.
   • Info (Biru): Untuk pesan informatif.

Integrasi CSS Variables & Tailwind

Untuk mendukung transisi tema (Multi-theme/Dark Mode) yang seamless, kita memetakan CSS variables di globals.css ke dalam tailwind.config.ts.

1. Definisi Variable (app/globals.css)

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --sidebar: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --primary: #4f46e5;
  --muted: #475569;
}

.dark {
  --background: #020617;
  --foreground: #f8fafc;
  --sidebar: #0f172a;
  --card: #1a1f2e;
  --border: #1e293b;
  --primary: #6366f1;
  --muted: #94a3b8;
}

2. Pemetaan di Tailwind Config (tailwind.config.ts)

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        sidebar: "var(--sidebar)",
        border: "var(--border)",
        primary: {
          DEFAULT: "var(--primary)",
          50: "#eef2ff",
          100: "#e0e7ff",
          200: "#c7d2fe",
          300: "#a5b4fc",
          400: "#818cf8",
          500: "#6366f1",
          600: "#4f46e5",
          700: "#4338ca",
          800: "#3730a3",
          900: "#312e81",
        },
        muted: "var(--muted)",
      },
    },
  },
  plugins: [],
};
export default config;

Contoh Penerapan pada Komponen

Berikut adalah perbandingan penulisan kode yang Salah (mengabaikan token) dan yang Benar (menggunakan token & semantic class).

❌ Contoh Salah (Bad Practice):

// Menulis hex code langsung, menggunakan arbitrary spacing, dan merusak dukungan dark mode.
export const CardComponent = () => {
  return (
    <div style={{ backgroundColor: '#ffffff', padding: '17px', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
      <h3 style={{ color: '#0f172a', fontSize: '18px', fontWeight: 'bold' }}>Judul Kartu</h3>
      <p style={{ color: '#475569', marginTop: '9px' }}>Ini adalah deskripsi.</p>
      <button style={{ backgroundColor: '#4f46e5', color: '#ffffff', padding: '9px 15px', marginTop: '15px' }}>
        Aksi
      </button>
    </div>
  );
};

Contoh Benar (Best Practice):

// Menggunakan utilitas Tailwind yang merujuk pada token di tailwind.config.ts dan global CSS variable.
export const CardComponent = () => {
  return (
    <div className="bg-card p-4 rounded-lg border border-border shadow-sm">
      <h3 className="text-foreground text-lg font-bold">Judul Kartu</h3>
      <p className="text-muted mt-2 text-sm">Ini adalah deskripsi yang rapi.</p>
      <button className="bg-primary text-white hover:bg-primary/90 px-4 py-2 mt-4 rounded-md transition-colors">
        Aksi
      </button>
    </div>
  );
};