---
title: Theme Tokens
lastModified: "2026-10-08T11:48:02+01:00"
lastAuthor: Kaylee
---
|CSS variable|Theme key|Default|
|--|--|--|
|`--c15t-primary`|`colors.primary`|`hsl(228, 100%, 60%)`|
|`--c15t-primary-hover`|`colors.primaryHover`|`hsl(228, 100%, 55%)`|
|`--c15t-surface`|`colors.surface`|`hsl(0, 0%, 100%)`|
|`--c15t-surface-hover`|`colors.surfaceHover`|`hsl(0, 0%, 98%)`|
|`--c15t-border`|`colors.border`|`hsl(0, 0%, 90%)`|
|`--c15t-border-hover`|`colors.borderHover`|`hsl(0, 0%, 85%)`|
|`--c15t-text`|`colors.text`|`hsl(0, 0%, 10%)`|
|`--c15t-text-muted`|`colors.textMuted`|`hsl(0, 0%, 40%)`|
|`--c15t-text-on-primary`|`colors.textOnPrimary`|auto-derived from `colors.primary` when omitted|
|`--c15t-overlay`|`colors.overlay`|`hsla(0, 0%, 0%, 0.5)`|
|`--c15t-switch-track`|`colors.switchTrack`|`hsl(0, 0%, 85%)`|
|`--c15t-switch-track-active`|`colors.switchTrackActive`|`colors.primary`|
|`--c15t-switch-thumb`|`colors.switchThumb`|`hsl(0, 0%, 100%)`|
|`--c15t-font-family`|`typography.fontFamily`|`system-ui, -apple-system, sans-serif`|
|`--c15t-font-size-sm`|`typography.fontSize.sm`|`0.875rem`|
|`--c15t-font-size-base`|`typography.fontSize.base`|`1rem`|
|`--c15t-font-size-lg`|`typography.fontSize.lg`|`1.125rem`|
|`--c15t-font-weight-normal`|`typography.fontWeight.normal`|`400`|
|`--c15t-font-weight-medium`|`typography.fontWeight.medium`|`500`|
|`--c15t-font-weight-semibold`|`typography.fontWeight.semibold`|`600`|
|`--c15t-line-height-tight`|`typography.lineHeight.tight`|`1.25`|
|`--c15t-line-height-normal`|`typography.lineHeight.normal`|`1.5`|
|`--c15t-line-height-relaxed`|`typography.lineHeight.relaxed`|`1.75`|
|`--c15t-space-xs`|`spacing.xs`|`0.25rem`|
|`--c15t-space-sm`|`spacing.sm`|`0.5rem`|
|`--c15t-space-md`|`spacing.md`|`1rem`|
|`--c15t-space-lg`|`spacing.lg`|`1.5rem`|
|`--c15t-space-xl`|`spacing.xl`|`2rem`|
|`--c15t-radius-sm`|`radius.sm`|`0.25rem`|
|`--c15t-radius-md`|`radius.md`|`0.5rem`|
|`--c15t-radius-lg`|`radius.lg`|`0.75rem`|
|`--c15t-radius-full`|`radius.full`|`9999px`|
|`--c15t-shadow-sm`|`shadows.sm`|`0 1px 2px hsla(0, 0%, 0%, 0.05)`|
|`--c15t-shadow-md`|`shadows.md`|`0 4px 12px hsla(0, 0%, 0%, 0.08)`|
|`--c15t-shadow-lg`|`shadows.lg`|`0 8px 24px hsla(0, 0%, 0%, 0.12)`|
|`--c15t-duration-fast`|`motion.duration.fast`|`80ms`|
|`--c15t-duration-normal`|`motion.duration.normal`|`150ms`|
|`--c15t-duration-slow`|`motion.duration.slow`|`200ms`|
|`--c15t-easing`|`motion.easing`|`cubic-bezier(0.4, 0, 0.2, 1)`|
|`--c15t-easing-out`|`motion.easingOut`|`cubic-bezier(0.215, 0.61, 0.355, 1)`|
|`--c15t-easing-in`|`motion.easingIn`|`cubic-bezier(0.55, 0.055, 0.675, 0.19)`|
|`--c15t-easing-in-out`|`motion.easingInOut`|`cubic-bezier(0.645, 0.045, 0.355, 1)`|
|`--c15t-easing-spring`|`motion.easingSpring`|`cubic-bezier(0.34, 1.56, 0.64, 1)`|