Design Tokens

Complete reference of all CSS custom properties that power Luminary UI.

Luminary UI is driven by 40+ CSS custom properties defined on :root. These tokens control every visual aspect of the framework — from blur intensity to accent colors — and automatically adapt between light and dark modes via prefers-color-scheme.

Typography

Token	Default	Description
`--glass-font-family`	`-apple-system, BlinkMacSystemFont, ...`	System font stack
`--glass-font-size-base`	`16px`	Base font size for `body`
`--glass-line-height`	`1.5`	Default line height

Transitions

Token	Default	Description
`--glass-transition-speed`	`0.3s`	Duration for all transitions
`--glass-transition-ease`	`cubic-bezier(0.16, 1, 0.3, 1)`	iOS-style fluid spring easing

Border Radius

Token	Default	Used On
`--glass-radius-sm`	`8px`	Tooltips, small elements
`--glass-radius-md`	`14px`	Buttons, inputs, nav, badges
`--glass-radius-lg`	`22px`	Cards, containers, stat blocks
`--glass-radius-xl`	`32px`	Modals, tab bars

Glass Material (Light Theme)

Token	Default	Description
`--glass-bg`	`rgba(255, 255, 255, 0.2)`	Default glass background
`--glass-bg-hover`	`rgba(255, 255, 255, 0.35)`	Hover state background
`--glass-bg-active`	`rgba(255, 255, 255, 0.15)`	Active/pressed background
`--glass-border`	`rgba(255, 255, 255, 0.3)`	Default border
`--glass-border-hover`	`rgba(255, 255, 255, 0.45)`	Hover state border

Specular & Shadow

Token	Default	Description
`--glass-glare`	`rgba(255, 255, 255, 0.5)`	Top-edge specular highlight
`--glass-shadow`	`rgba(0, 0, 0, 0.06)`	Ambient drop shadow
`--glass-shadow-hover`	`rgba(0, 0, 0, 0.1)`	Hover drop shadow
`--glass-shadow-inset`	`rgba(255, 255, 255, 0.2)`	Bottom-edge interior shade

Text Colors

Token	Light	Dark
`--glass-text`	`rgba(0,0,0,0.85)`	`rgba(255,255,255,0.95)`
`--glass-text-secondary`	`rgba(0,0,0,0.5)`	`rgba(255,255,255,0.6)`
`--glass-text-muted`	`rgba(0,0,0,0.35)`	`rgba(255,255,255,0.4)`

Semantic Colors

Token	Light	Dark	Usage
`--glass-accent`	`#007aff`	`#0a84ff`	Links, focus rings, vibrant modifier
`--glass-success`	`#34c759`	`#30d158`	Success alerts, switch checked state
`--glass-warning`	`#ff9500`	`#ff9f0a`	Warning alerts
`--glass-error`	`#ff3b30`	`#ff453a`	Error alerts, invalid inputs

Each semantic color also has an -rgb variant (e.g., --glass-accent-rgb: 0, 122, 255) used for rgba() compositions in modifiers and glows.

Blur Strengths

Token	Default	Usage
`--glass-blur`	`20px`	Standard material blur (cards, navs)
`--glass-blur-thin`	`8px`	Lightweight blur (buttons, badges, inputs)
`--glass-blur-thick`	`40px`	Heavy blur (modals, dropdowns, tab bars)
`--glass-saturate`	`220%`	Color saturation boost for vibrancy

Body Background

Token	Light	Dark
`--glass-body-bg`	`radial-gradient(circle at 10% 20%, rgba(243,201,228,1) 0%, rgba(206,217,243,1) 90%)`	`radial-gradient(circle at 10% 20%, #1a1a24 0%, #0d0d11 90%)`

Overriding Tokens

You can override any token in your own CSS:

:root {
  --glass-accent: #e74c3c;
  --glass-accent-rgb: 231, 76, 60;
  --glass-radius-md: 8px;
  --glass-blur: 30px;
}

See the Customization page for theming strategies.