Next Typography

Warna

Palet warna lengkap: primary, secondary, accent, semantik, dan dark mode.

Teks

The quick brown fox
--color-primary · #18181B
The quick brown fox
--color-secondary · #52525B
The quick brown fox
--color-tertiary · #71717A
Light Theme — pada background terang
The quick brown fox
--color-primary-dark · #FAFAFA
The quick brown fox
--color-secondary-dark · #D4D4D8
The quick brown fox
--color-tertiary-dark · #A1A1AA
Dark Theme — pada background gelap

Accent — Dark

✓ Disalin
--color-accent-d1 #020617 blue-black
✓ Disalin
--color-accent-d2 #082F49 cyan-950
✓ Disalin
--color-accent-d3 #0C4A6E sky-900
✓ Disalin
--color-accent-d4 #172554 blue-950
✓ Disalin
--color-accent-d5 #1E3A8A blue-900
✓ Disalin
--color-accent-d6 #1E40AF blue-800
✓ Disalin
--color-accent-d7 #1D4ED8 blue-700
✓ Disalin
--color-accent-d8 #2563EB blue-600

Accent — Bright

✓ Disalin
--color-accent-b1 #3B82F6 blue-500
✓ Disalin
--color-accent-b2 #60A5FA blue-400
✓ Disalin
--color-accent-b3 #38BDF8 sky-400
✓ Disalin
--color-accent-b4 #0EA5E9 sky-500
✓ Disalin
--color-accent-b5 #22D3EE cyan-400
✓ Disalin
--color-accent-b6 #67E8F9 cyan-300
✓ Disalin
--color-accent-b7 #7DD3FC sky-300
✓ Disalin
--color-accent-b8 #BAE6FD sky-200

Semantik

Success
✓ Disalin
Success Konfirmasi, submit berhasil, validasi OK --color-success · #22C55E · green-500
Warning
✓ Disalin
Warning Peringatan, perlu perhatian pengguna --color-warning · #EAB308 · yellow-500
Error
✓ Disalin
Error Kesalahan, aksi gagal, validasi gagal --color-error · #EF4444 · red-500
Info
✓ Disalin
Info Informasi netral, hint, tooltip --color-info · #3B82F6 · blue-500

Background — Dark

--color-bg-d1 100% dark — true black
#000000
--color-bg-d2 96% dark
#0A0A0A
--color-bg-d3 92% dark
#141414
--color-bg-d4 88% dark
#1F1F1F
--color-bg-d5 84% dark
#292929
--color-bg-d6 80% dark
#333333

Background — Bright

--color-bg-b1 100% light — white murni
#FFFFFF
--color-bg-b2 96% light
#F5F5F5
--color-bg-b3 92% light
#EBEBEB
--color-bg-b4 88% light
#E0E0E0
--color-bg-b5 84% light
#D6D6D6
--color-bg-b6 80% light
#CCCCCC

DaisyUI — Theme Colors

Token warna dari DaisyUI v5 theme yang sedang aktif. DaisyUI v5 memakai CSS utility class (bg-primary, text-primary-content) dan CSS variable --color-primary dalam format oklch lengkap. Nilai computed di bawah terbaca live dari theme yang aktif.

Brand

✓ Disalin
Aa
--color-primary primary Warna utama brand — button, link, CTA
✓ Disalin
Aa
--color-secondary secondary Warna pendukung — secondary button, label
✓ Disalin
Aa
--color-accent accent Highlight, badge, focus ring
✓ Disalin
Aa
--color-neutral neutral Surface netral — card, input, divider

State

✓ Disalin
Aa
--color-success success Alert hijau, validasi sukses
✓ Disalin
Aa
--color-warning warning Alert kuning, perlu perhatian
✓ Disalin
Aa
--color-error error Alert merah, validasi gagal
✓ Disalin
Aa
--color-info info Alert biru, informasi netral

Base Surface

✓ Disalin
Aa
--color-base-100 base-100 Background utama halaman
✓ Disalin
Aa
--color-base-200 base-200 Background card, sidebar, panel
✓ Disalin
Aa
--color-base-300 base-300 Background input, tabel, divider
✓ Disalin
Aa
--color-base-content base-content Teks default di atas base surface

Foreground (content)

Aa
--color-primary-content primary-content Teks/ikon di atas warna primary
Aa
--color-secondary-content secondary-content Teks/ikon di atas warna secondary
Aa
--color-accent-content accent-content Teks/ikon di atas warna accent
Aa
--color-neutral-content neutral-content Teks/ikon di atas warna neutral
Aa
--color-success-content success-content Teks/ikon di atas warna success
Aa
--color-warning-content warning-content Teks/ikon di atas warna warning
Aa
--color-error-content error-content Teks/ikon di atas warna error
Aa
--color-info-content info-content Teks/ikon di atas warna info

DaisyUI v5 — oklch penuh, utility class

Di DaisyUI v5, gunakan utility class bg-primary atau CSS variable var(--color-primary) — keduanya membaca dari theme aktif. Ganti theme via atribut data-theme di elemen manapun.

Cara Pakai

Token CSS kustom
.btn-primary {
  background: var(--color-accent-d8);
  color: var(--color-primary-dark);
}

.alert-success {
  background: var(--color-success);
  color: #fff;
}
DaisyUI oklch token
/* Selalu bungkus oklch() */
.card {
  background: oklch(var(--b2));
  color: oklch(var(--bc));
  border: 1px solid oklch(var(--b3));
}

/* Opacity via / */
.overlay {
  background: oklch(var(--p) / 0.15);
}
Tailwind arbitrary value
<!-- Token CSS kustom -->
<div class="bg-[var(--color-accent-d8)]
            text-[var(--color-primary-dark)]">

<!-- DaisyUI token -->
<span class="text-[oklch(var(--er))]">
  Error message
</span>
14

Typography

Font scale, headings H1–H6, body, overline, caption, and code.

Spacing

Spacing scale, padding, margin, grid gap, and section rhythm.

Border Radius

Radius tokens xs–full for cards, inputs, buttons, and badges.

Shadow

Shadow tokens xs–xl for element depth and elevation.

Grid System

12-column grid documentation, breakpoints, and layout rules.

Breakpoints

Responsive breakpoint scale: xs, sm, md, lg, xl, 2xl.

Animation

Keyframe animations: fade, slide, scale, bounce, and spin presets.

Transition

Duration, easing, and transition presets for UI animations.

Z-Index

Layer stacking context: base, dropdown, sticky, modal, tooltip.

Dark Mode

Dark theme system: tokens, toggle, and implementation strategy.

HSThemeSwitch

Design Tokens

Unified design token reference: color, spacing, radius, shadow, typography.

CSS Variables

CSS custom property definitions and usage patterns.

Theme Engine

Runtime theming system: token override, scoped themes, and cascade strategy.

Theme Presets

Ready-made theme presets: default, minimal, bold, earthy, and more.
Next Typography