Cara Marketer Indonesia Pasang CSS Relative Color Syntax di Next.js untuk Pangkas Design Token dari 47 ke 9 Variable dan Dark Mode Otomatis di 2026

TL;DR: CSS Relative Color Syntax (rgb/oklch from var(--brand) ...) memungkinkan derivasi shade warna runtime tanpa preprocessor. Refactor design token Atmo LMS dari 47 CSS variable warna ke 9 base variable. Dark mode jadi otomatis, maintenance brand token turun dari 4 jam ke 30 menit per perubahan brand color.

Di awal 2026, saya audit design system Atmo LMS (platform e-learning klien) yang punya 47 CSS variable warna manual untuk handle light mode, dark mode, dan 5 brand color (primary, secondary, accent, success, danger) masing-masing dengan 5 shade (50, 100, 500, 700, 900). Setiap perubahan brand color jadi mimpi buruk: ubah satu hex, harus regenerate 9 shade lain, update Figma token, sync ke Tailwind config.

CSS Relative Color Syntax menyelesaikan ini secara elegan. Per Mei 2026, fitur ini sudah Baseline di semua browser modern.

Masalah: Design Token Bloat

Struktur lama design token di Atmo LMS:

:root {
  --brand-primary-50: #eff6ff;
  --brand-primary-100: #dbeafe;
  --brand-primary-500: #3b82f6;
  --brand-primary-700: #1d4ed8;
  --brand-primary-900: #1e3a8a;
  /* Diulang untuk secondary, accent, success, danger */
  /* Lalu diulang lagi untuk dark mode dengan nilai berbeda */
}

Total 47 variable warna. Setiap kali product owner Atmo minta tweak brand primary (sering terjadi saat A/B test landing), saya harus update 5 shade + 5 shade dark = 10 nilai manual. Plus sync ke design tool.

Solusi: 9 Base Variable + Derive Runtime

Pendekatan baru pakai oklch untuk perceptual uniformity:

:root {
  --brand: oklch(60% 0.18 240);
  --secondary: oklch(70% 0.15 180);
  --accent: oklch(75% 0.20 30);
  --success: oklch(65% 0.17 145);
  --danger: oklch(60% 0.22 25);
  --neutral: oklch(50% 0 0);
  --bg: oklch(98% 0 0);
  --fg: oklch(15% 0 0);
  --lightness-shift: 0.1;
}

.button-primary {
  background: var(--brand);
  color: white;
}
.button-primary:hover {
  background: oklch(from var(--brand) calc(l - var(--lightness-shift)) c h);
}
.button-primary:active {
  background: oklch(from var(--brand) calc(l - 0.2) c h);
}
.bg-brand-soft {
  background: oklch(from var(--brand) calc(l + 0.3) calc(c * 0.4) h);
}

Dark mode jadi cukup ganti --bg dan --fg, sisanya derived otomatis menyesuaikan kontras.

Implementasi: 5 Hari Refactor

Hari 1-2: Inventarisasi semua tempat warna dipakai (tabel, button, badge, alert, card). Mapping ke 5 brand color base.

Hari 3: Refactor token utama. Pakai @supports untuk fallback browser lama:

@supports not (background: oklch(from red l c h)) {
  /* Fallback ke static hex */
  .button-primary:hover { background: #2563eb; }
}

Hari 4: Test dark mode toggle. Ternyata cuma ganti --bg dan --fg, semua komponen auto-adapt karena derive dari base + lightness shift.

Hari 5: Test cross-browser. Validasi kontras WCAG AA pakai axe DevTools. Lihat juga css-cascade-layers untuk struktur design system yang lebih scalable.

Hasil: 81 Persen Lebih Sedikit Token

Studi referensi web.dev relative colors menyebutkan pattern ini sudah jadi best practice di design system modern.

Studi Kasus Vetmo: Tema Multi-Brand

Pendekatan sama saya pakai untuk Vetmo yang punya 3 sub-brand (pet care general, dog-focused, cat-focused). Sebelum migrasi, masing-masing sub-brand butuh 47 token sendiri. Setelah migrasi: cukup 5 base variable per sub-brand, total 15 variable untuk 3 brand. Komponen sama, tinggal switch root variable.

Aksesibilitas Bonus

Karena oklch perceptually uniform, kontras antar shade lebih konsisten secara visual. Saat saya tweak --lightness-shift, otomatis kontras WCAG di semua komponen ikut menyesuaikan. Ini lebih aman daripada manipulasi hex manual yang sering bikin kontras AA broken di salah satu shade.

Pertanyaan Umum

Apakah harus pakai oklch atau rgb juga oke?

Untuk derivasi shade, oklch lebih superior karena perceptually uniform. RGB calc lightness sering bikin shade terlihat tidak konsisten (terlalu gelap atau terlalu pucat).

Bagaimana sinkronisasi dengan Figma design tokens?

Pakai plugin Tokens Studio yang support oklch sejak 2024. Atau export variable Figma ke CSS dan derive di kode. Pendekatan Atmo: source of truth di CSS, Figma sinkron lewat plugin.

Apakah ada performance penalty untuk derive runtime?

Tidak. Browser modern menghitung warna sekali saat parse CSS. Tidak ada overhead saat scroll atau interaction. Lihat INP di proyek Atmo tidak berubah setelah migrasi.

Bagaimana fallback untuk browser yang tidak support?

Pakai @supports query untuk define static hex sebagai fallback. Browser modern pakai derive, browser lama pakai hex. Tidak ada layout break.

Apakah teknik ini berlaku untuk Tailwind CSS?

Ya. Tailwind v4 (rilis 2025) sudah native support relative color syntax di custom utility. Saya pakai Tailwind v4 di Atmo LMS pasca refactor.

Insight Aplikatif

Bukan setiap design token harus eksplisit. Mathematic relationship antar warna (hover = base 10% lebih gelap) bisa dideklarasikan satu kali pakai relative color, daripada diulang di puluhan token. Mulai dari satu komponen, ukur dampak ke maintenance velocity, lalu rollout.