Maple

Maple is a variable-first, stack-agnostic CSS engine that generates atomic styles from utility classes only when they appear in the DOM.

Get Maple up and running in seconds. Whether you’re building with WordPress, Rails, React, Angular, or plain HTML, it works out of the box.

Maple transforms native CSS colors into a fully shaded OKLCH palette. Use familiar tone stops like 50-950, or reach for any intermediate scale value when you need finer control.

This component demonstrates how a single --l-shift variable can transform your entire interface for dark mode while maintaining perfect visual balance and contrast.

Apply rich motion using built-in aliases like fade-in , scale-in , or spin . Customize timing, delays, fill modes, and keyframe variables directly in markup.

Maple's grid system provides high-level abstraction over CSS Grid via shorthand syntax for columns, rows, spanning, and named areas. Build complex, responsive layouts with minimal markup.

Drop Maple into your project and style your interface right away. No build pipeline, no config files.