Design tokens

Single source of truth for the visual language: palettes, spacing, radii, typography, motion, layering, and breakpoints. Every value below is exported from kovax-react and accessible through themeToken("…").

Color palettes

Each palette uses the 50 → 900 ladder. Use 50–200 for surfaces, 300–500 for accents, 600–900 for text and focus.

primary

colors.primary

50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a

secondary

colors.secondary

50
#f8fafc
100
#f1f5f9
200
#e2e8f0
300
#cbd5e1
400
#94a3b8
500
#64748b
600
#475569
700
#334155
800
#1e293b
900
#0f172a

success

colors.success

50
#ecfdf5
100
#d1fae5
200
#a7f3d0
300
#6ee7b7
400
#34d399
500
#10b981
600
#059669
700
#047857
800
#065f46
900
#064e3b

warning

colors.warning

50
#fffbeb
100
#fef3c7
200
#fde68a
300
#fcd34d
400
#fbbf24
500
#f59e0b
600
#d97706
700
#b45309
800
#92400e
900
#78350f

error

colors.error

50
#fef2f2
100
#fee2e2
200
#fecaca
300
#fca5a5
400
#f87171
500
#ef4444
600
#dc2626
700
#b91c1c
800
#991b1b
900
#7f1d1d

Base colors

baseColors

white#ffffff

black#000000

Typography

Type ramp, weights, line-heights, and tracking. Components consume these via the same string tokens.

Font size scale

text.xs
The quick brown fox
0.75rem
text.sm
The quick brown fox
0.875rem
text.base
The quick brown fox
1rem
text.lg
The quick brown fox
1.125rem
text.xl
The quick brown fox
1.25rem
text.2xl
The quick brown fox
1.5rem
text.3xl
The quick brown fox
1.875rem
text.4xl
The quick brown fox
2.25rem
text.5xl
The quick brown fox
3rem

Font weight ladder

fontWeight.thin
Aa Bb Cc 123
100
fontWeight.extralight
Aa Bb Cc 123
200
fontWeight.light
Aa Bb Cc 123
300
fontWeight.regular
Aa Bb Cc 123
400
fontWeight.medium
Aa Bb Cc 123
500
fontWeight.semibold
Aa Bb Cc 123
600
fontWeight.bold
Aa Bb Cc 123
700
fontWeight.extrabold
Aa Bb Cc 123
800
fontWeight.black
Aa Bb Cc 123
900

Line height

lineHeight.none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.
1
lineHeight.tight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.
1.15
lineHeight.snug
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.
1.3
lineHeight.normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.
1.5
lineHeight.relaxed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.
1.65
lineHeight.loose
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit fringilla, dictum lorem at, sollicitudin lectus.
1.85

Letter spacing

letterSpacing.tighter
KOVAX REACT
-0.04em
letterSpacing.tight
KOVAX REACT
-0.02em
letterSpacing.normal
KOVAX REACT
0em
letterSpacing.wide
KOVAX REACT
0.02em
letterSpacing.wider
KOVAX REACT
0.04em
letterSpacing.widest
KOVAX REACT
0.08em

Spacing scale

Inset and stack rhythm. Bars below show the actual rem width — the bar at 5xl is 96px on the default root.

spacing.none0rem
spacing.2xs0.25rem
spacing.xs0.5rem
spacing.sm0.75rem
spacing.md1rem
spacing.lg1.5rem
spacing.xl2rem
spacing.2xl2.5rem
spacing.3xl3rem
spacing.4xl4rem
spacing.5xl6rem

Border radius

Composable radii — pair smaller values for compact UI and larger for cards / marketing surfaces.

borderRadius.none0
borderRadius.xs0.25rem
borderRadius.sm0.375rem
borderRadius.md0.5rem
borderRadius.lg0.75rem
borderRadius.xl1rem
borderRadius.2xl1.25rem
borderRadius.3xl1.5rem
borderRadius.full9999px

Shadows

Elevation ladder plus utility shadows: an inner shadow for sunken surfaces and a focus ring for accessibility.

shadow.nonenone
shadow.xs0 1px 1px 0 rgb(0 0 0 / 0.04)
shadow.sm0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow.md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
shadow.lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
shadow.xl0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
shadow.2xl0 25px 50px -12px rgb(0 0 0 / 0.25)
shadow.innerinset 0 2px 4px 0 rgb(0 0 0 / 0.06)
shadow.focusRing0 0 0 3px rgb(59 130 246 / 0.35)

Motion

Pair duration and easing tokens for transitions. Legacy <code>transition.*</code> strings remain for back-compat.

Duration

duration.instant · easing.standard
0ms · cubic-bezier(0.2, 0, 0, 1)
duration.fast · easing.standard
120ms · cubic-bezier(0.2, 0, 0, 1)
duration.normal · easing.standard
200ms · cubic-bezier(0.2, 0, 0, 1)
duration.slow · easing.standard
320ms · cubic-bezier(0.2, 0, 0, 1)
duration.slower · easing.standard
500ms · cubic-bezier(0.2, 0, 0, 1)

Easing

duration.slow · easing.linear
320ms · linear
duration.slow · easing.standard
320ms · cubic-bezier(0.2, 0, 0, 1)
duration.slow · easing.decelerate
320ms · cubic-bezier(0, 0, 0.2, 1)
duration.slow · easing.accelerate
320ms · cubic-bezier(0.4, 0, 1, 1)
duration.slow · easing.bounce
320ms · cubic-bezier(0.34, 1.56, 0.64, 1)

Legacy composite transitions

transition.defaultall 0.2s ease-in-out
transition.fastall 0.1s ease-in-out
transition.slowall 0.3s ease-in-out

Z-index ladder

Predictable stacking for overlays. Higher value renders above lower one.

Token	Value	Used for
`zIndex.hide`	`-1`	Hidden below content
`zIndex.base`	`0`	Default flow
`zIndex.docked`	`10`	Pinned UI (sidebars, FAB)
`zIndex.dropdown`	`1000`	Menus, comboboxes
`zIndex.sticky`	`1100`	Sticky headers
`zIndex.banner`	`1200`	Site-wide banners
`zIndex.overlay`	`1300`	Backdrop / overlays
`zIndex.modal`	`1400`	Modal dialogs
`zIndex.popover`	`1500`	Popovers, dropdowns over modals
`zIndex.skipLink`	`1600`	Skip-to-content link
`zIndex.toast`	`1700`	Transient notifications
`zIndex.tooltip`	`1800`	Tooltips on top of everything

Breakpoints

Em-based viewport breakpoints — they scale with the user's root font size for better accessibility.

Token	Value	Media query
`breakpoint.sm`	`30em`	@media (min-width: 30em)
`breakpoint.md`	`48em`	@media (min-width: 48em)
`breakpoint.lg`	`62em`	@media (min-width: 62em)
`breakpoint.xl`	`80em`	@media (min-width: 80em)
`breakpoint.2xl`	`96em`	@media (min-width: 96em)