k8ordo UI uses a CSS variable-based design token system. It supports both light and dark modes and is easy to customize.
There are 10 base color families, each with 11 shades from 50 to 950.
Purpose-specific color tokens derived from the base colors. They automatically adapt when switching themes.
fg-base
Light gray-900 · Dark gray-50
Default text
fg-subtle
Light gray-600 · Dark gray-400
Faintest text such as placeholders
fg-mute
Light gray-700 · Dark gray-300
Supporting text such as descriptions and captions
fg-inverse
Light gray-50 · Dark gray-900
Text placed on inverse backgrounds (bg-inverse)
fg-info
Light blue-800 · Dark blue-200
Informational message text
fg-success
Light green-800 · Dark green-200
Success message text
fg-warning
Light yellow-800 · Dark yellow-200
Warning message text
fg-error
Light red-800 · Dark red-200
Error message text
bg-base
Light white · Dark gray-800
Primary surfaces such as cards
bg-raised
Light white · Dark gray-800
Elevated surfaces such as menus and popovers
bg-surface
Light gray-50 · Dark gray-950
The page background
bg-subtle
Light gray-100 · Dark gray-900
Recessed areas such as section backgrounds
bg-mute
Light gray-200 · Dark gray-700
Hover-state background
bg-emphasize
Light gray-300 · Dark gray-600
Active-state background
bg-inverse
Light gray-900 · Dark white
Inverse background, paired with fg-inverse
bg-info
Light blue-100 · Dark blue-900
Informational message background
bg-success
Light green-100 · Dark green-900
Success message background
bg-warning
Light yellow-100 · Dark yellow-900
Warning message background
bg-error
Light red-100 · Dark red-900
Error message background
border-base
Light gray-400 · Dark gray-600
Default borders such as form fields
border-subtle
Light gray-100 · Dark gray-700
Faintest hairline borders
border-mute
Light gray-200 · Dark gray-600
Subdued borders and separators
border-emphasize
Light gray-500 · Dark gray-500
Emphasized borders, e.g. on hover
border-inverse
Light gray-700 · Dark gray-300
Borders on inverse surfaces
border-info
Light blue-500 · Dark blue-400
Info borders, also used for focus rings
border-success
Light green-500 · Dark green-400
Success-state borders
border-warning
Light yellow-500 · Dark yellow-400
Warning-state borders
border-error
Light red-500 · Dark red-400
Error-state borders
Primary uses Teal and Secondary uses Cyan as their base brand colors.
primary-fg
Light teal-800 · Dark teal-300
Primary text and icons
primary-bg
Light teal-200 · Dark teal-800
Primary fill, e.g. solid buttons
primary-bg-subtle
Light teal-50 · Dark teal-950
Faintest primary background, e.g. selected states
primary-bg-mute
Light teal-100 · Dark teal-900
Muted primary background
primary-bg-emphasize
Light teal-300 · Dark teal-700
Emphasized primary background, e.g. on hover
primary-border
Light teal-500 · Dark teal-500
Primary borders and accent lines
secondary-fg
Light cyan-800 · Dark cyan-300
Secondary text and icons
secondary-bg
Light cyan-200 · Dark cyan-800
Secondary fill
secondary-bg-subtle
Light cyan-50 · Dark cyan-950
Faintest secondary background
secondary-bg-mute
Light cyan-100 · Dark cyan-900
Muted secondary background
secondary-bg-emphasize
Light cyan-300 · Dark cyan-700
Emphasized secondary background, e.g. on hover
secondary-border
Light cyan-500 · Dark cyan-500
Secondary borders
group-primary
Light teal-800 · Dark teal-200
Chart series color 1
group-secondary
Light cyan-800 · Dark cyan-200
Chart series color 2
group-tertiary
Light pink-800 · Dark pink-200
Chart series color 3
group-quaternary
Light purple-800 · Dark purple-200
Chart series color 4
Design tokens for text sizes, font weights, letter spacing, and line heights.
xsk8ordo0.75rem / 1.333smk8ordo0.875rem / 1.429mdk8ordo1rem / 1.5lgk8ordo1.125rem / 1.556xlk8ordo1.25rem / 1.42xlk8ordo1.5rem / 1.3333xlk8ordo1.875rem / 1.2emphasizek8ordo3rem / 1highlightk8ordo6rem / 1Design tokens for border radius values.
xs0.125remsm0.375remmd0.5remlg0.75remxl1rem2xl1.25remDesign tokens for box shadows.
2xs0 1px rgb(0 0 0 / 0.05)xs0 1px 2px 0 rgb(0 0 0 / 0.05)sm0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)xl0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)2xl0 25px 50px -12px rgb(0 0 0 / 0.25)The spacing scale. The base unit is 0.25rem (4px), and p-{n} or gap-{n} computes to n × 0.25rem.
0.50.125rem (2px)10.25rem (4px)20.5rem (8px)30.75rem (12px)41rem (16px)51.25rem (20px)61.5rem (24px)82rem (32px)102.5rem (40px)123rem (48px)164rem (64px)205rem (80px)Responsive breakpoints.
sm≥ 640px (40rem)md≥ 768px (48rem)lg≥ 1024px (64rem)xl≥ 1280px (80rem)2xl≥ 1536px (96rem)A three-tier scale that defines stacking order for overlay components. Anchored floating UI (Popover / DropdownMenu / ListBox / Tooltip) sits on overlay, Modal / Drawer on modal, and Toast on toast.
z-overlayPopover, DropdownMenu, ListBox, Tooltip1000z-modalModal, Drawer1300z-toastToast1500Add the dark class to the root element to enable dark mode. Semantic color tokens automatically switch to their dark mode values.
Every token is a CSS variable, so redefining the same variable in CSS loaded after the k8ordo UI stylesheet overrides it. The base color variables (such as --purple-200) are also defined, so swapping the references switches the whole brand color at once. Redefine the dark mode values under .dark.
You can also assign a raw value directly instead of referencing a shade.
mediumboldk8ordo700nonek8ordo0emnormalk8ordo0.025emnonetightsnugnormalrelaxedloose246rem (96px)// Enable dark mode
document.documentElement.classList.add('dark');
// Disable dark mode
document.documentElement.classList.remove('dark');/* app.css — import after the k8ordo UI stylesheet */
:root {
--primary-fg: var(--purple-800);
--primary-bg: var(--purple-200);
--primary-bg-subtle: var(--purple-50);
--primary-bg-mute: var(--purple-100);
--primary-bg-emphasize: var(--purple-300);
--primary-border: var(--purple-500);
}
.dark {
--primary-fg: var(--purple-300);
--primary-bg: var(--purple-800);
--primary-bg-subtle: var(--purple-950);
--primary-bg-mute: var(--purple-900);
--primary-bg-emphasize: var(--purple-700);
--primary-border: var(--purple-500);
}:root {
--primary-border: oklch(0.55 0.15 300);
}