Clay is a design system built on organic shapes, soft gradients, and art-directed layouts. Break free from rigid grids and create experiences that breathe.
Exploring how organic forms and soft gradients can create more human, more memorable digital experiences.
A design philosophy that embraces imperfection, warmth, and visual storytelling.
Organic, fluid shapes that break away from rigid rectangles. Use CSS border-radius tricks or SVG paths for natural-looking forms.
Peach-to-lavender, sage-to-cream gradients that feel warm and inviting. Multi-stop gradients with subtle transitions for depth.
Break the grid when it matters. Asymmetric compositions, overlapping elements, and editorial-style layouts that guide the eye naturally.
Serif headings paired with clean sans-serif body text. Variable fonts with personality that complement organic visual elements.
Easing curves inspired by nature. Spring physics, smooth deceleration, and micro-interactions that feel satisfying not jarring.
Create depth through layered translucent shapes, soft shadows, and frosted glass effects. Every element feels like it has physical presence.
Clay design tokens, components, and templates are open source and ready to use in your next project.