Material demo // Core foundation
Tokens become matter when the page reveals them in motion.
This is the living substrate of Velora: calibrated surface values, readable ink, tuned accent energy and spacing rules that behave like physical components as the canvas scrolls.
oklch() calibrated
Theme aware
State ready
Act I // Swatches vivos
Color tokens should feel active, not archived.
Instead of static sample chips, each swatch behaves like a scene surface with contrast, metadata and editorial intent embedded in the card itself.
<!-- Token usage in any component --> <div style=" background: var(--vl-bg-surface); color: var(--vl-text-primary); border: 1px solid var(--vl-border-subtle); box-shadow: var(--vl-shadow-medium); "> Your content </div>
Change the editorial theme (data-editorial-theme="earth") and every token recalculates automatically. No component overrides needed.
Act II // Type system
Display, body and mono each carry a specific job.
Tokens are not only color variables. The page typography is orchestrated into a reading hierarchy that can pivot between manifesto language and technical detail without losing tone.
Technical presence with editorial force.
Hero72px / -0.03em
Scene Title48px / -0.02em
Readable under dim contrast, long-form explanation and denser system copy without collapsing the tone.
Body16px / 1.7
Meta12px / 0.18em
Used for labels, token names and values so technical data reads like instrumentation, not decoration.
Code12px / 0.08em
Rail10px / 0.22em
Act III // Easing bands
Motion tokens set pace, not just duration.
Entrance, emphasis and micro-feedback each get their own response curve. As the scene crosses the viewport, bars and curves reveal which transitions are meant to glide and which should snap.
Act IV // Layout primitives
Spacing, rails and grids complete the material system.
The same primitives driving these scenes can compose framework docs, demo pages and product surfaces with asymmetry, rhythm and clear zones for motion.