Overview
In May 2021, when Google unveiled the next generation of Material Design, particularly highlighting the dynamic palette feature, I was excited about implementing this into my projects. My initial attempt was with a pilot open-source project for Android, where I implemented custom support for dynamic palettes before material team custom implementation.
Transitioning to primarily working with web development in 2022, I began thinking how to create a tool to help me achieve a similar effect but with the styling philosophy of Tailwind CSS. This led to the inception of Whirlombre.
Objectives
The primary objectives for the future library and tool (which can also serve as a website tool for generating palettes) were focused on achieving a lightweight bundle size and optimal performance. Additionally, the goal was to generate palettes on the fly, aiming to achieve something similar to Material 3's dynamic generation. Simple implementation into projects and comprehensive documentation to facilitate integration into various scenarios were also key objectives.
Solution
To produce smooth shades, I was using the HSL (Hue, Saturation, Lightness) color model, because it's much easier to pick good color using just a hue, and then simply calculate saturation and lightness and voilà — cool-looking shades is ready!
In line with the core principle of "easy implementation" i've structured the core function to accept hue and lightness as arguments, simplifying Developer Experience (DX).
For development stack for website i was using Nuxt 3, Nuxt Content for docs and blog posts, UnoCSS for styling, and Headless UI for some of components and some another useful libs (eslint with a lot of configs).
But let's shift our focus from boring code to design, shall we?
Typography
Whirlombre employs a combination of three distinct typefaces: Dela Gothic One for headlines, Inclusive Sans for body text, and Noto Sans Cypro Minoan as it's identic font. The typography sizes are set according to the Tailwind CSS preset for UnoCSS.
Cypro-Minoan syllabary as identic looks very interesting combined with smooth shades.
Colors
As Whirlombre is a library to generate shades, the color palette comprises two shades: accent and surface. Both are generated by the library at compile time but also can be changed by library in runtime, with a hue of 35 and lighting dependent on the theme preference. For the light theme, it will be more saturated, and for the dark theme, it will be desaturated. This creates a coral-like color palette:
Shape
In Whirlombre, the design system uses almost square shapes, and this is reflected in the value wl.corner-radius.small, which is set to 2px. This radius value contributes to the overall aesthetic and consistency of the interface elements, components across the website.
Results
This is was my first try to create a typescript library combined with website. Whirlombre's inception represents a fusion of Material Design dynamics with Tailwind CSS philosophy.
In essence, Whirlombre emerges as a versatile solution, bridging design principles with development practices, offering developers a potent tool for dynamic color management and cohesive design implementation.
