Color System
Token berbasis oklch untuk konsistensi warna di seluruh komponen Aidash — dari primary hingga semantic colors.
Sistem warna Aidash dibangun di atas CSS custom properties dengan format oklch untuk kontrol presisi atas lightness, chroma, dan hue. Setiap token dirancang agar saling harmonis dan mudah di-override sesuai brand project kamu.
Palette Lengkap
Semua warna yang tersedia dalam sistem Aidash, dikelompokkan berdasarkan fungsi.
Klik swatch manapun untuk copy CSS variable ke clipboard. Setiap warna memiliki variasi lightness untuk kebutuhan hover, active, dan disabled state.
Primary
Elemen interaktif utama — CTA, link, focus ring
Accent
Highlight, badge, dan elemen yang butuh perhatian ekstra
Surface & Neutral
Background, border, dan elevation layers
Ink (Typography)
Warna teks — heading, body, muted, disabled
Semantic
Feedback — success, warning, error, info. Hanya untuk status dan notifikasi.
Kapan Pakai Warna Apa
Panduan praktis penerapan setiap kategori warna di komponen dan layout.
Primary
Elemen interaktif utama — button CTA, link aktif, focus ring. Primary adalah warna brand utama yang menarik aksi dari user.
Accent
Highlight dan badge yang butuh perhatian ekstra. Accent melengkapi primary tanpa bersaing — gunakan untuk tag, notification dot, dan secondary highlight.
Surface
Background berlapis — alternate antara surface dan surface-alt agar section punya ritme visual. Gunakan border token untuk divider dan card edges.
Semantic
Khusus untuk feedback — jangan gunakan semantic color sebagai dekorasi. Success untuk konfirmasi, warning untuk perhatian, error untuk masalah, info untuk panduan.
Heading — text-(--text)
Secondary text — text-(--text-muted)
Disabled label — text-(--text-muted)
Inverse — text-white
Ink
Ink untuk heading dan body utama, ink-muted untuk secondary text dan placeholder. Ink-disabled untuk elemen non-aktif. Ink-inverse untuk teks di atas dark background.
Tip: Primary untuk elemen interaktif utama — button CTA, link aktif, focus ring. Accent untuk highlight dan badge yang perlu perhatian ekstra. Surface tokens untuk background berlapis. Semantic colors khusus untuk feedback — jangan gunakan sebagai dekorasi. Ink tokens untuk teks.
CSS Tokens Reference
Daftar lengkap variabel CSS yang tersedia — copy langsung ke project kamu.
Semua token didefinisikan dalam @theme block Tailwind CSS v4. Gunakan sebagai Tailwind class (bg-primary, text-(--text-muted)) atau akses langsung via var(--color-primary) dalam custom CSS. Override token di @theme project kamu untuk mengganti seluruh color scheme sekaligus.
1@import "tailwindcss";2@theme {4--text-muted)"> /* ── Primary ── */5--color-primary: oklch(55% 0.25 265);6--color-primary-hover: oklch(48% 0.25 265);7--color-primary-light: oklch(92% 0.05 265);8--color-primary-muted: oklch(65% 0.15 265);9--text-muted)"> /* ── Accent ── */11--color-accent: oklch(78% 0.15 195);12--color-accent-hover: oklch(70% 0.15 195);13--color-accent-light: oklch(94% 0.04 195);14--color-accent-muted: oklch(72% 0.12 195);15--text-muted)"> /* ── Surface & Neutral ── */17--color-surface: oklch(99% 0.005 265);18--color-surface-alt: oklch(96% 0.015 265);19--color-border: oklch(90% 0.02 265);20--color-border-hover: oklch(80% 0.04 265);21--text-muted)"> /* ── Ink (Typography) ── */23--color-ink: oklch(20% 0.08 270);24--color-ink-muted: oklch(50% 0.04 270);25--color-ink-disabled: oklch(70% 0.02 270);26--color-ink-inverse: oklch(98% 0.005 0);27--text-muted)"> /* ── Semantic ── */29--color-success: oklch(60% 0.18 145);30--color-success-light: oklch(95% 0.04 145);31--color-warning: oklch(75% 0.18 80);32--color-warning-light: oklch(96% 0.04 80);33--color-error: oklch(55% 0.22 25);34--color-error-light: oklch(96% 0.03 25);35--color-info: oklch(60% 0.2 250);36--color-info-light: oklch(96% 0.03 250);37}
Token Reference Table
| Token | Tailwind Class | Value |
|---|---|---|
--color-primary | bg-primary / text-primary | oklch(55% 0.25 265) |
--color-primary-hover | hover:bg-primary-hover | oklch(48% 0.25 265) |
--color-primary-light | bg-primary-light | oklch(92% 0.05 265) |
--color-primary-muted | text-primary-muted | oklch(65% 0.15 265) |
--color-accent | bg-accent / text-accent | oklch(78% 0.15 195) |
--color-accent-hover | hover:bg-accent-hover | oklch(70% 0.15 195) |
--color-accent-light | bg-accent-light | oklch(94% 0.04 195) |
--color-accent-muted | text-accent-muted | oklch(72% 0.12 195) |
--color-surface | bg-surface | oklch(99% 0.005 265) |
--color-surface-alt | bg-(--surface-sunken) | oklch(96% 0.015 265) |
--color-border | border-(--border) | oklch(90% 0.02 265) |
--color-border-hover | hover:border-(--border)-hover | oklch(80% 0.04 265) |
--color-ink | text-(--text) | oklch(20% 0.08 270) |
--color-ink-muted | text-(--text-muted) | oklch(50% 0.04 270) |
--color-ink-disabled | text-(--text-muted) | oklch(70% 0.02 270) |
--color-ink-inverse | text-white | oklch(98% 0.005 0) |
--color-success | bg-success / text-success | oklch(60% 0.18 145) |
--color-success-light | bg-success-light | oklch(95% 0.04 145) |
--color-warning | bg-warning / text-warning | oklch(75% 0.18 80) |
--color-warning-light | bg-warning-light | oklch(96% 0.04 80) |
--color-error | bg-error / text-error | oklch(55% 0.22 25) |
--color-error-light | bg-error-light | oklch(96% 0.03 25) |
--color-info | bg-info / text-info | oklch(60% 0.2 250) |
--color-info-light | bg-info-light | oklch(96% 0.03 250) |
Override: Untuk mengganti seluruh color scheme, cukup redefine token di @theme block project kamu. Semua komponen Aidash otomatis menggunakan warna baru tanpa perlu modifikasi apapun.