Skip to main content

NUI Theme Tokens Reference

This document lists all available NUI design tokens with their default values. Users can override semantic tokens to customize the theme.

1. Primitive Tokens (Internal Palette)​

Neutral​

TokenDefault
--nui-white#FFFFFF
--nui-black#000000
--nui-slate-50#F8FAFC
--nui-slate-100#F1F5F9
--nui-slate-200#E2E8F0
--nui-slate-300#CBD5E1
--nui-slate-400#94A3B8
--nui-slate-500#64748B
--nui-slate-600#475569
--nui-slate-700#334155
--nui-slate-800#1E293B
--nui-slate-900#0F172A
--nui-slate-950#020617

Brand​

TokenDefault
--nui-brand-50#EFF6FF
--nui-brand-100#DBEAFE
--nui-brand-500#3B82F6
--nui-brand-600#2563EB
--nui-brand-700#1D4ED8

State​

TokenDefault
--nui-red-500#EF4444
--nui-red-600#DC2626
--nui-amber-500#F59E0B
--nui-green-500#10B981

2. Semantic Tokens (Customizable)​

Background​

  • --nui-bg-page: var(--nui-white)
  • --nui-bg-surface: var(--nui-white)
  • --nui-bg-subtle: var(--nui-slate-50)
  • --nui-bg-muted: var(--nui-slate-100)
  • --nui-bg-overlay: rgba(0, 0, 0, 0.4)
  • --nui-bg-selected: color-mix(in srgb, var(--nui-color-primary) 8%, transparent)
  • --nui-bg-selected-hover: color-mix(in srgb, var(--nui-color-primary) 12%, transparent)

Foreground​

  • --nui-fg-default: var(--nui-slate-900)
  • --nui-fg-subtle: var(--nui-slate-500)
  • --nui-fg-inverse: var(--nui-white)
  • --nui-fg-disabled: var(--nui-slate-400)

Borders​

  • --nui-border-default: var(--nui-slate-200)
  • --nui-border-hover: var(--nui-slate-300)
  • --nui-border-focus: var(--nui-brand-500)

Primary​

  • --nui-color-primary: var(--nui-brand-600)
  • --nui-color-primary-fg: var(--nui-white)
  • --nui-color-primary-hover: var(--nui-brand-700)

Feedback​

  • --nui-color-danger: var(--nui-red-500)
  • --nui-color-danger-fg: var(--nui-white)
  • --nui-color-success: var(--nui-green-500)
  • --nui-color-success-fg: var(--nui-white)
  • --nui-color-warning: var(--nui-amber-500)
  • --nui-color-warning-fg: var(--nui-white)

3. Layout & Typography​

Spacing​

  • --nui-space-1: 0.25rem
  • --nui-space-2: 0.5rem
  • --nui-space-3: 0.75rem
  • --nui-space-4: 1rem
  • --nui-space-5: 1.25rem
  • --nui-space-6: 1.5rem
  • --nui-space-8: 2rem
  • --nui-space-12: 3rem

Radius​

  • --nui-radius-sm: 0.25rem
  • --nui-radius-md: 0.375rem
  • --nui-radius-lg: 0.5rem
  • --nui-radius-full: 9999px

Typography​

  • --nui-font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif
  • --nui-text-xs: 0.75rem
  • --nui-text-sm: 0.875rem
  • --nui-text-base: 1rem
  • --nui-text-lg: 1.125rem
  • --nui-text-xl: 1.25rem
  • --nui-weight-medium: 500
  • --nui-weight-bold: 600

Z Index​

  • --nui-z-base: 0
  • --nui-z-docked: 10
  • --nui-z-dropdown: 1000
  • --nui-z-sticky: 1100
  • --nui-z-modal: 1300
  • --nui-z-tooltip: 1500

4. Dark Mode Overrides​

  • --nui-bg-page: var(--nui-slate-950)
  • --nui-bg-surface: var(--nui-slate-900)
  • --nui-bg-subtle: var(--nui-slate-800)
  • --nui-bg-muted: var(--nui-slate-800)
  • --nui-bg-overlay: rgba(0, 0, 0, 0.7)
  • --nui-bg-selected: color-mix(in srgb, var(--nui-color-primary) 20%, transparent)
  • --nui-bg-selected-hover: color-mix(in srgb, var(--nui-color-primary) 30%, transparent)
  • --nui-fg-default: var(--nui-slate-50)
  • --nui-fg-subtle: var(--nui-slate-400)
  • --nui-fg-inverse: var(--nui-slate-900)
  • --nui-fg-disabled: var(--nui-slate-600)
  • --nui-border-default: var(--nui-slate-800)
  • --nui-border-hover: var(--nui-slate-700)
  • --nui-color-primary: var(--nui-brand-500)
  • --nui-color-primary-hover: var(--nui-brand-600)

Customization Guidance​

  • Override semantic tokens only
  • Import overrides after NUI styles
  • Support both light and dark theme overrides