Task 03 // System Modules Sequence
Velora breaks the framework into browser-native units that can be combined without losing texture, speed, or authorship. Tokens, structures, forms, dialogs, motion and utilities all stay visible as active layers instead of disappearing into a black box.
tokens -> structures -> forms/dialogs -> motion -> scenes
Scene 02 // Bento Orchestration
Each cell exposes a responsibility slice and how it hands control to the next layer in the framework.
A single scene can inherit color tiers, layout primitives, button states and transition hooks without a page-local runtime mediator.
All surfaces read from OKLCH variables so scenes stay tonally coherent under theme and display shifts.
Stages, rails, sidebars and fluid sections are treated as reusable geometry rather than page-specific one-offs.
Framework modules stay independently legible, but the payoff comes from the handoff chain across the page.
<!-- Framework handoff chain -->
<!-- 1. Tokens → semantic color, type, and spacing vars consumed by all layers -->
<!-- 2. Primitives → layout shells, grids, and editorial spacing contracts -->
<!-- 3. Components → buttons, inputs, surface atoms with state tokens -->
<!-- 4. Scenes → composed, motion-aware page sections -->
<section vl-effect="fade-up" vl-timeline="view">
<div class="vl-grid-feature">
<!-- components slot into scenes; scenes inherit tokens -->
</div>
</section>
Each layer can be upgraded independently. The handoff chain defines its boundaries so a token refactor never cascades into scene logic.
Scene 03 // Operational Metrics
The framework should feel premium because the underlying modules are cheap to compose, fast to paint and explicit about what they own.
Scene 04 // Inter-module Relations
Velora treats each module like a subsystem with a clear input, a surface contract, and a visible downstream effect.
Color, type, radius and motion values feed every downstream layer.
Stacks, grids and shells map the canvas before components arrive.
Input, focus and overlay logic inherit structure and tone without fragmenting the surface language.
Transitions, view states and targeted overrides finish the scene without taking over the stack.
Scene 05 // Next Routes
Follow the actual showcase routes that define the architecture shell, token calibration and motion contract behind these modules.