Completed Work: Volatyl WordPress Theme

Volatyl is built around one idea: a small amount of input should do a lot of work.

Pick a single hue and Volatyl generates a complete, coherent color palette — across multiple harmony schemes with fine-tuned controls for vibrancy, depth, and tint. One decision cascades into an entire visual system.

The same principle applies everywhere else. Layout responds to what's actually there. The block editor reflects the front end. Content uses standard WordPress blocks with no lock-in to proprietary formats or plugins. The goal is a theme that makes meaningful choices for you, so you can focus on what's unique about your site.

• OKLCH-based color system — pick one hue and Volatyl generates a complete, perceptually uniform palette across six harmony schemes (monochromatic, complementary, analogous, triadic, split-complementary, tetradic)
• Three independent palette controls: Palette Vibrancy, Background & Text Tint, and Dark Section Depth
• Adaptive layout — sidebars show when they have widgets and collapse when they don't; footer columns assemble based on content, not configuration
• Block native — no page builder, no proprietary content formats; design tools carry directly into the block editor with WYSIWYG fidelity
• Canvas templates strip the default wrapper so Group blocks can stack as independent full-page sections
• Per-page layout overrides for dark header, jumbo title, hidden sidebar, and minimal footer — every page can be completely unique

• Generating a coherent palette from a single hue meant defining rules for chroma, lightness, and harmony that hold up across any hue — a hue of 0° (red) and a hue of 200° (blue) should both produce palettes that feel intentional, not accidental.
• Making layout "adaptive" without being opinionated required distinguishing between what the theme should decide automatically and what the user should control — sidebar collapse and footer assembly are automatic; per-page overrides are explicit.
• Achieving true block editor fidelity — where dark blocks trigger the same text and button adaptations on the back end as on the front — required careful coordination between theme.json, editor styles, and the generated CSS custom properties.