Overridden by layout density variants: data-layout="compact" (denser) anddata-layout="presentation" (roomier).
Border Radius
Token
Value
--vl-radius-sm
0.375rem
--vl-radius-md
0.5rem
--vl-radius-lg
0.75rem
--vl-radius-xl
1rem
--vl-radius-2xl
1.5rem
--vl-radius-full
999px — pill shape
Shadows
Token
Purpose
--vl-shadow-sm
Subtle surface lift (1px blur)
--vl-shadow-md
Cards and interactive elements
--vl-shadow-lg
Modals and overlays
--vl-shadow-glow
Primary color halo — hover states
--vl-shadow-dramatic
Deep cinematic shadow for hero media
--vl-shadow-inner
Inset shadow for inset surfaces
--vl-shadow-float
Floating card shadow with green tint
Motion Tokens
Easing
Token
Value
Character
--vl-ease-cinematic
cubic-bezier(0.2, 0.8, 0.2, 1)
Signature Velora easing — fast out, smooth settle
--vl-ease-out-soft
cubic-bezier(0.16, 1, 0.3, 1)
Gentle deceleration for reveals
--vl-ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1)
Bouncy overshoot — scale/pop effects
--vl-ease-in-out-smooth
cubic-bezier(0.45, 0, 0.55, 1)
Balanced in/out for loops and wipes
--vl-ease-elastic
cubic-bezier(0.68, -0.55, 0.265, 1.55)
Strong elastic snap
--vl-ease-smooth-out
cubic-bezier(0, 0.55, 0.45, 1)
Smooth deceleration
Duration
Token
Value
Use
--vl-duration-instant
80ms
Flash feedback, focus rings
--vl-duration-fast
150ms
Micro interactions, hover
--vl-duration-normal
300ms
Standard transitions
--vl-duration-slow
500ms
Entrance animations
--vl-duration-slower
800ms
Cinematic reveals and scenes
Motion System Properties
These are used internally by the vl-* attribute system and can be overridden per-element:
Token
Default
Controls
--vl-motion-duration
--vl-duration-normal
Animation duration for current effect
--vl-motion-distance
1.25rem
Translation distance for slide/fade effects
--vl-motion-ease
--vl-ease-cinematic
Easing function for current effect
--vl-stagger-step
45ms
Delay between staggered children
<!-- Override per element -->
<div
vl-enter="fade-up"
vl-timeline="view"
style="--vl-motion-distance: 2rem; --vl-motion-duration: 600ms;">
Custom depth and speed
</div>
Transition Shorthands
Token
Value
--vl-transition-fast
150ms ease-out-soft
--vl-transition-normal
300ms ease-cinematic
--vl-transition-slow
500ms ease-cinematic
View Transition Tokens
Token
Default
Controls
--vl-vt-root-duration
0.55s
Root page transition speed
--vl-vt-shared-duration
0.58s
Shared element transition speed
Layout Tokens
Token
Value
--vl-container-max
72rem — standard content width
--vl-container-max-narrow
42rem — prose / focused content
--vl-container-max-wide
90rem — full-bleed sections
--vl-container-gutter
1rem — horizontal padding
--vl-measure-prose
65ch — optimal reading width
Z-Index Scale
Token
Value
Use
--vl-z-base
0
Default content layer
--vl-z-dropdown
100
Menus and popovers
--vl-z-sticky
200
Sticky headers and pinned elements
--vl-z-modal
500
Dialogs and modals
--vl-z-toast
800
Toast notifications
Focus / Accessibility Tokens
Token
Value
--vl-focus-ring-width
2px
--vl-focus-ring-offset
2px
--vl-focus-ring-color
65% primary + transparent
Glass / Backdrop
Token
Value
--vl-backdrop-blur
12px
--vl-glass-bg
85% surface + transparent (light); 72% (dark)
Theming
<!-- Follow OS preference (default) -->
<html>
<!-- Force light mode -->
<html data-theme="light">
<!-- Force dark mode -->
<html data-theme="dark">
<!-- Compact layout density -->
<html data-layout="compact">
<!-- Presentation mode (larger spacing) -->
<html data-layout="presentation">
data-layout="compact" reduces base font size to 15px and tightens spacing.data-layout="presentation" increases to 17px with looser leading — ideal for projectors and keynotes.
