There's a certain coldness to modern web design. Dark modes, glass morphism, relentless purple gradients — it all starts to look the same. Clay UI is my attempt at a warmer, more tactile alternative.
The foundation is a cream canvas (#faf9f7) instead of white or grey. It sounds minor but the effect is immediate: the page feels less like software and more like paper. Paired with warm typographic colours (charcoal #55534e for body text), the reading experience is noticeably more relaxed.
The colour palette uses food-inspired names — Matcha, Slushie, Lemon, Ube, Pomegranate — each with a full tonal range. This naming convention is deliberate: it makes palette decisions feel intuitive rather than arbitrary. "Use Matcha for success states, Pomegranate for errors" is easier to remember than hex codes.
The signature interaction is the button hover: rotateZ(-8deg) translateY(-5px) with a hard box-shadow offset. It's playful without being childish, and it communicates affordance clearly. Every interactive element should feel like it wants to be touched.
For implementation, I use Tailwind v4's @theme {} block to define tokens as CSS custom properties, then build components as plain CSS classes. This keeps the design system framework-agnostic while still getting Tailwind's utility ergonomics where useful.
The result is a design language that feels human. Not perfectly polished, not aggressively minimal — just warm, characterful, and honest.