Reference

Tokens

Every token the system exposes. Filter by tier and family, search by name or value, then jump into the family page for live previews and copy-ready snippets.

159 of 159

Blur

Family page

Token	Tier	Light value	Tailwind
--blur-lg	Tunable	`24px`	`blur-lg`
--blur-md	Tunable	`12px`	`blur-md`
--blur-sm	Tunable	`4px`	`blur-sm`

Color

Family page

Token	Tier	Light value	Tailwind
--color-destructive	Locked	`oklch(0.92 0.05 27.325)`	`bg-destructive`
--color-destructive-border	Locked	`oklch(0.82 0.13 27.325)`	`bg-destructive-border`
--color-destructive-foreground	Locked	`oklch(0.5 0.2 27.325)`	`bg-destructive-foreground`
--color-info	Locked	`oklch(0.94 0.04 240)`	`bg-info`
--color-info-border	Locked	`oklch(0.83 0.1 240)`	`bg-info-border`
--color-info-foreground	Locked	`oklch(0.45 0.17 240)`	`bg-info-foreground`
--color-ring-invalid	Locked	`oklch(0.5 0.2 27.325)`	`bg-ring-invalid`
--color-state-active	Locked	`color-mix(in oklch, var(--foreground) 12%, transparent)`	`bg-state-active`
--color-state-expanded	Locked	`color-mix(in oklch, var(--foreground) 4%, transparent)`	`bg-state-expanded`
--color-state-focus	Locked	`color-mix(in oklch, var(--foreground) 8%, transparent)`	`bg-state-focus`
--color-state-hover	Locked	`color-mix(in oklch, var(--foreground) 6%, transparent)`	`bg-state-hover`
--color-state-selected	Locked	`color-mix(in oklch, var(--foreground) 16%, transparent)`	`bg-state-selected`
--color-success	Locked	`oklch(0.93 0.06 145)`	`bg-success`
--color-success-border	Locked	`oklch(0.82 0.12 145)`	`bg-success-border`
--color-success-foreground	Locked	`oklch(0.45 0.15 145)`	`bg-success-foreground`
--color-warning	Locked	`oklch(0.94 0.07 80)`	`bg-warning`
--color-warning-border	Locked	`oklch(0.83 0.13 80)`	`bg-warning-border`
--color-warning-foreground	Locked	`oklch(0.5 0.14 80)`	`bg-warning-foreground`
--color-accent	Brand	`oklch(0.97 0 0)`	`bg-accent`
--color-accent-foreground	Brand	`oklch(0.205 0 0)`	`bg-accent-foreground`
--color-background	Brand	`oklch(1 0 0)`	`bg-background`
--color-border	Brand	`oklch(0.922 0 0)`	`bg-border`
--color-border-focus	Brand	`oklch(0.708 0 0)`	`bg-border-focus`
--color-border-input	Brand	`oklch(0.85 0 0)`	`bg-border-input`
--color-border-strong	Brand	`oklch(0.85 0 0)`	`bg-border-strong`
--color-border-subtle	Brand	`oklch(0.94 0 0)`	`bg-border-subtle`
--color-card	Brand	`oklch(1 0 0)`	`bg-card`
--color-card-foreground	Brand	`oklch(0.145 0 0)`	`bg-card-foreground`
--color-chart-1	Brand	`oklch(0.65 0.13 290)`	`bg-chart-1`
--color-chart-10	Brand	`oklch(0.55 0.14 35)`	`bg-chart-10`
--color-chart-11	Brand	`oklch(0.7 0.1 220)`	`bg-chart-11`
--color-chart-12	Brand	`oklch(0.65 0.09 5)`	`bg-chart-12`
--color-chart-2	Brand	`oklch(0.65 0.13 195)`	`bg-chart-2`
--color-chart-3	Brand	`oklch(0.7 0.15 50)`	`bg-chart-3`
--color-chart-4	Brand	`oklch(0.65 0.13 140)`	`bg-chart-4`
--color-chart-5	Brand	`oklch(0.7 0.13 15)`	`bg-chart-5`
--color-chart-6	Brand	`oklch(0.6 0.16 250)`	`bg-chart-6`
--color-chart-7	Brand	`oklch(0.78 0.13 90)`	`bg-chart-7`
--color-chart-8	Brand	`oklch(0.55 0.18 330)`	`bg-chart-8`
--color-chart-9	Brand	`oklch(0.5 0.13 155)`	`bg-chart-9`
--color-chart-axis	Brand	`oklch(0.85 0 0)`	`bg-chart-axis`
--color-chart-grid	Brand	`oklch(0.94 0 0)`	`bg-chart-grid`
--color-chart-tooltip-bg	Brand	`oklch(1 0 0)`	`bg-chart-tooltip-bg`
--color-chart-tooltip-fg	Brand	`oklch(0.145 0 0)`	`bg-chart-tooltip-fg`
--color-foreground	Brand	`oklch(0.145 0 0)`	`bg-foreground`
--color-foreground-disabled	Brand	`oklch(0.65 0 0)`	`bg-foreground-disabled`
--color-foreground-subtle	Brand	`oklch(0.4 0 0)`	`bg-foreground-subtle`
--color-input	Brand	`oklch(0.922 0 0)`	`bg-input`
--color-muted	Brand	`oklch(0.97 0 0)`	`bg-muted`
--color-popover	Brand	`oklch(1 0 0)`	`bg-popover`
--color-popover-foreground	Brand	`oklch(0.145 0 0)`	`bg-popover-foreground`
--color-primary	Brand	`oklch(0.205 0 0)`	`bg-primary`
--color-primary-foreground	Brand	`oklch(0.985 0 0)`	`bg-primary-foreground`
--color-ring	Brand	`oklch(0.708 0 0)`	`bg-ring`
--color-secondary	Brand	`oklch(0.86 0.07 292.88)`	`bg-secondary`
--color-secondary-foreground	Brand	`oklch(0.205 0 0)`	`bg-secondary-foreground`
--color-sidebar	Brand	`oklch(0.985 0 0)`	`bg-sidebar`
--color-sidebar-accent	Brand	`oklch(0.97 0 0)`	`bg-sidebar-accent`
--color-sidebar-accent-foreground	Brand	`oklch(0.205 0 0)`	`bg-sidebar-accent-foreground`
--color-sidebar-border	Brand	`oklch(0.922 0 0)`	`bg-sidebar-border`
--color-sidebar-foreground	Brand	`oklch(0.145 0 0)`	`bg-sidebar-foreground`
--color-sidebar-primary	Brand	`oklch(0.205 0 0)`	`bg-sidebar-primary`
--color-sidebar-primary-foreground	Brand	`oklch(0.985 0 0)`	`bg-sidebar-primary-foreground`
--color-sidebar-ring	Brand	`oklch(0.708 0 0)`	`bg-sidebar-ring`
--gradient-brand	Brand	`linear-gradient(135deg, var(--primary), var(--secondary))`
--slider-range	Brand	`oklch(0.205 0 0)`
--switch-track-on	Brand	`oklch(0.205 0 0)`
--code-bg	Tunable	`oklch(0.97 0 0)`
--code-fg	Tunable	`oklch(0.145 0 0)`
--color-muted-foreground	Tunable	`oklch(0.556 0 0)`	`bg-muted-foreground`
--color-overlay	Tunable	`color-mix(in oklch, oklch(0 0 0) 30%, transparent)`	`bg-overlay`
--kbd-bg	Tunable	`oklch(0.97 0 0)`
--kbd-border	Tunable	`oklch(0.85 0 0)`
--kbd-fg	Tunable	`oklch(0.145 0 0)`
--label-color	Tunable	`oklch(0.145 0 0)`
--link	Tunable	`oklch(0.205 0 0)`
--link-hover	Tunable	`oklch(0 0 0)`
--link-visited	Tunable	`oklch(0.4 0 0)`
--placeholder-color	Tunable	`oklch(0.65 0 0)`
--required-indicator-color	Tunable	`oklch(0.5 0.2 27.325)`
--scrollbar-thumb	Tunable	`color-mix(in oklch, var(--foreground) 20%, transparent)`
--scrollbar-track	Tunable	`transparent`
--selection-bg	Tunable	`oklch(0.86 0.07 292.88)`
--selection-fg	Tunable	`oklch(0.205 0 0)`
--skeleton-bg	Tunable	`color-mix(in oklch, var(--secondary) 35%, var(--muted))`
--skeleton-shimmer	Tunable	`color-mix(in oklch, var(--secondary) 60%, transparent)`
--slider-thumb	Tunable	`oklch(0.99 0 0)`
--slider-track	Tunable	`oklch(0.85 0 0)`
--switch-thumb	Tunable	`oklch(0.99 0 0)`
--switch-track-off	Tunable	`oklch(0.85 0 0)`

Density

Family page

Token	Tier	Light value
--density-card-padding	Locked	`1.5rem`
--density-control-h	Locked	`2.25rem`
--density-field-gap	Locked	`0.5rem`

Focus ring

Family page

Token	Tier	Light value	Tailwind
--ring-offset	Locked	`2px`
--ring-width	Locked	`3px`

Font

Family page

Token	Tier	Light value	Tailwind
--font-display	Tunable	`var(--font-schoolbell)`	`font-display`
--font-heading	Tunable	`var(--font-fredoka)`	`font-heading`
--font-mono	Tunable	`var(--font-fira-code)`	`font-mono`
--font-sans	Tunable	`var(--font-fredoka)`	`font-sans`

Form

Family page

Token	Tier	Light value	Tailwind
--field-gap	Tunable	`0.375rem`
--field-padding-x	Tunable	`0.75rem`

Layout

Family page

Token	Tier	Light value
--container-content	Tunable	`42rem`
--container-dashboard	Tunable	`80rem`
--container-prose	Tunable	`65ch`
--container-wide	Tunable	`90rem`
--sidebar-width	Tunable	`16rem`
--sidebar-width-icon	Tunable	`3rem`

Motion

Family page

Token	Tier	Light value	Tailwind
--duration-fast	Tunable	`100ms`	`duration-fast`
--duration-instant	Tunable	`0ms`	`duration-instant`
--duration-normal	Tunable	`200ms`	`duration-normal`
--duration-slow	Tunable	`300ms`	`duration-slow`
--duration-slower	Tunable	`500ms`	`duration-slower`
--ease-in-out	Tunable	`cubic-bezier(0.65, 0, 0.35, 1)`	`ease-in-out`
--ease-out	Tunable	`cubic-bezier(0.16, 1, 0.3, 1)`	`ease-out`
--ease-overshoot	Tunable	`cubic-bezier(0.68, -0.55, 0.265, 1.55)`	`ease-overshoot`
--ease-spring	Tunable	`cubic-bezier(0.34, 1.56, 0.64, 1)`	`ease-spring`

Opacity

Family page

Token	Tier	Light value
--opacity-disabled	Locked	`0.5`
--opacity-hover	Locked	`0.06`
--opacity-loading	Locked	`0.7`
--opacity-overlay	Locked	`0.3`
--opacity-pressed	Locked	`0.12`

Radius

Family page

Token	Tier	Light value	Tailwind
--radius-lg	Locked	`0.625rem`	`rounded-lg`
--radius-md	Locked	`calc(var(--radius) - 2px)`	`rounded-md`
--radius-sm	Locked	`calc(var(--radius) - 4px)`	`rounded-sm`
--radius-xl	Locked	`calc(var(--radius) + 4px)`	`rounded-xl`
--radius-button	Brand	`9999px`	`rounded-button`
--radius-card	Brand	`1.5rem`	`rounded-card`
--radius-chip	Brand	`9999px`	`rounded-chip`
--radius-dialog	Brand	`2rem`	`rounded-dialog`
--radius-input	Brand	`1.25rem`	`rounded-input`
--radius-popover	Brand	`1.5rem`	`rounded-popover`
--radius-sheet	Brand	`1.25rem`	`rounded-sheet`

Shadow

Family page

Token	Tier	Light value	Tailwind
--shadow-focus	Locked	`0 0 0 var(--ring-width) var(--ring)`	`shadow-focus`
--shadow-card	Tunable	`0 1px 2px oklch(0 0 0 / 0.04)`	`shadow-card`
--shadow-inset	Tunable	`inset 0 1px 2px oklch(0 0 0 / 0.06)`	`shadow-inset`
--shadow-overlay	Tunable	`0 24px 48px -16px oklch(0 0 0 / 0.24)`	`shadow-overlay`
--shadow-popover	Tunable	`0 8px 24px -8px oklch(0 0 0 / 0.18)`	`shadow-popover`

Sizing

Family page

Token	Tier	Light value
--size-avatar-lg	Locked	`3rem`
--size-avatar-md	Locked	`2.5rem`
--size-avatar-sm	Locked	`1.5rem`
--size-avatar-xl	Locked	`4rem`
--size-control-lg	Locked	`2.5rem`
--size-control-md	Locked	`2.25rem`
--size-control-sm	Locked	`2rem`
--size-icon-lg	Locked	`1.5rem`
--size-icon-md	Locked	`1rem`
--size-icon-sm	Locked	`0.75rem`
--size-touch-target	Locked	`2.75rem`

Z-index

Family page

Token	Tier	Light value	Tailwind
--z-index-base	Locked	`0`	`z-base`
--z-index-dropdown	Locked	`40`	`z-dropdown`
--z-index-modal	Locked	`60`	`z-modal`
--z-index-overlay	Locked	`50`	`z-overlay`
--z-index-popover	Locked	`60`	`z-popover`
--z-index-sticky	Locked	`30`	`z-sticky`
--z-index-toast	Locked	`80`	`z-toast`
--z-index-tooltip	Locked	`70`	`z-tooltip`

Search Kaotypr Design System

Blur

Color

Density

Focus ring

Font

Form

Layout

Motion

Opacity

Radius

Shadow

Sizing

Z-index