KAUI CSS Kit — Design Tokens

Design Tokens Visualizer

Two-tier token architecture: Sass maps compiled into CSS Custom Properties (--k-*) at :root with dynamic overrides under [data-theme="dark"].

Color Palette

Primary Color Scale (Blue)

primary-50

#eff6ff

primary-100

#dbeafe

primary-200

#bfdbfe

primary-300

#93c5fd

primary-400

#60a5fa

primary-500

#3b82f6

primary-600

#2563eb

primary-700

#1d4ed8

Warm Palettes (Amber Yellow–Orange & Brown)

amber-500

#f59e0b (Yellow–Orange)

amber-700

#b45309 (Orange)

brown-500

#78716c

brown-800

#292524

Feedback & Status Colors

success-500

#10b981 (Success)

warning-500

#f59e0b (Warning)

error-500

#ef4444 (Error)

info-500

#0ea5e9 (Info)

Neutral Palette (Slate Grayscale 50–900)

neutral-100

#f1f5f9

neutral-300

#cbd5e1

neutral-500

#64748b

neutral-700

#334155

neutral-800

#1e293b

neutral-900

#0f172a

Typography Scale & Hierarchy

Display 4XL (2.25rem / 36px) — The quick brown fox jumps

.k-fs-4xl .k-fw-bold .k-lh-tight

Heading 3XL (1.875rem / 30px) — Over the lazy dog

.k-fs-3xl .k-fw-bold

Heading 2XL (1.5rem / 24px) — Modern responsive modular type scale

.k-fs-2xl .k-fw-semibold

Heading XL (1.25rem / 20px) — Clean typographic hierarchy

.k-fs-xl .k-fw-semibold

Heading LG (1.125rem / 18px) — Subheadings and featured callouts

.k-fs-lg .k-fw-medium

Body Base (1rem / 16px) — Standard reading body text with optimal line-height and contrast. Designed for long-form readability across all desktop and mobile devices.

.k-fs-base .k-fw-normal .k-lh-base

Body Small (0.875rem / 14px) and Extra Small (0.75rem / 12px) for captions, helpers, and meta tokens.

.k-fs-sm .k-text-muted

Spacing Scale (Harmonic 4px/8px Grid)

spacing-1 (0.25rem / 4px)

spacing-2 (0.5rem / 8px)

spacing-3 (0.75rem / 12px)

spacing-4 (1rem / 16px)

spacing-5 (1.25rem / 20px)

spacing-6 (1.5rem / 24px)

spacing-8 (2rem / 32px)

spacing-10 (2.5rem / 40px)

spacing-12 (3rem / 48px)

spacing-16 (4rem / 64px)

Border Radii & Elevation Shadows

radius-sm (4px)

radius-md (6px)

radius-lg (8px)

radius-full (9999px)

shadow-sm

shadow-md

shadow-lg

shadow-xl

Usage guide & code sample

Use semantic tokens such as --k-primary in custom properties only when no existing utility fits. Toggle dark mode with data-theme="dark".

<div style="color: var(--k-primary); background: var(--k-bg);">
  Token-powered content
</div>