Style combination · Pairs well
Claymorphism × Glassmorphism
Set opaque clay icons on or behind frosted glass panes: the blur gives the toys a layered backdrop, and the solid objects anchor translucent cards that would otherwise drift.
01
What each style brings
Each part of the design comes from the style with the stronger say in it, and each style gives at least two.
Claymorphism & Soft 3D Glassmorphism
- Type from Claymorphism
- Colour from Glassmorphism
- Form from Claymorphism
- Composition from Claymorphism
- Surface from Glassmorphism
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Claymorphism
Orbit
Bagel Fat One, standing in for Rounded sans-serifs with soft terminals, such as Nunito (Vernon Adams) or VAG Rounded, only for the most childlike or playful products: they echo the inflated shapes but add to the toy-like feel that the minimal type is meant to balance
Text · Glassmorphism
An interface style of translucent, frosted panels floating over vivid, blurred backgrounds, so that depth and hierarchy come from layered transparency. Rooted in Windows Aero glass, the blur layers of iOS 7 and Fluent Design's Acrylic, it was named in 2020 around the launch of macOS Big Sur and returned in 2025 as Apple's refractive Liquid Glass.
Inter; Glassmorphism used SF Pro and Segoe UI Variable
03
The colours
The ground and leading colours come from Glassmorphism, with a counter-accent from Claymorphism. The ink reads on the ground at 4.5:1 or more.
Claymorphism & Soft 3D Glassmorphism
-
#1b1a33ground · 36% -
#ffffffink · 14% -
#2cb1fcaccent · 18% -
#ffd36eaccent · 14% -
#7f5af0accent · 10% -
#ff6ac1accent · 8%
As CSS
:root {
--ground: #1b1a33;
--ink: #ffffff;
--accent-1: #2cb1fc;
--accent-2: #ffd36e;
--accent-3: #7f5af0;
--accent-4: #ff6ac1;
--font-display: "Bagel Fat One", sans-serif;
--font-text: "Inter", sans-serif;
}04
The two styles
05
More combinations
With Claymorphism
- Neumorphism Contrasts · Neumorphism presses monochrome controls out of a same-coloured surface with paired outer shadows; claymorphism inflates them into separately coloured objects that cast one drop shadow, so switch to it when soft relief loses contrast and every control starts to look like a button.
- Kawaii Design Pairs well · Kawaii's oversized heads, minimal faces and scattered sparkles translate directly into clay volumes; use its character rules for mascots and emoji so the 3D figures stay simple and readable at small sizes.
- Corporate Memphis Contrasts · It does the same friendly job in tech marketing with flat vectors; render the figures as volumes to escape the over-familiar flat look, or go back to flat when 3D production is too slow or icons must work at tiny sizes.
- Y2K Futurism Contrasts · Both float rounded 3D renders on pale grounds, but Y2K is chrome, liquid metal and translucent candy plastic sold as the future; keep claymorphism opaque, soft and cute, with satin or matte surfaces and at most a soft highlight, and borrow chrome only for a retro-tech joke.
- Neo-Brutalism Contrasts · Neo-brutalism's black outlines and hard, unblurred offset shadows are the crisp counterpart to clay's soft blurred ones; borrow a solid outline for focus states when the inflated cards need sharper edges.
- Low Poly Illustration Contrasts · Both float one rendered object on a pale ground, but clay is inflated, rounded and softly shaded while low poly is cut into hard facets with stepped tones; choose clay for warmth and touch, low poly for crispness and a constructed, mineral feel.
- Biobrand (Organic Biotech CGI) Contrasts · Both float soft 3D forms on pale grounds, but clay is opaque, cute and interface-bound, while the biobrand is translucent, intricate and biological; use clay for friendlier app icons.
- Isometric Tech Illustration Contrasts · Soft, inflated 3D forms against crisp axonometric blocks: the same toy worlds, rendered rather than projected.
With Glassmorphism
- Dark Tech Minimalism Pairs well · On near-black grounds, a single glass pane with a 1px light border and a soft glow adds depth without clutter.
- Brutalist Web Design Contrasts · Brutalism's opaque, bordered boxes are the antidote when stacked translucency starts to hurt legibility.
- Risograph & Indie Print Culture Contrasts · Riso grain and misregistered spot inks offer a tactile print counterpoint to pristine digital translucency.
- Y2K Futurism Pairs well · Add Y2K iridescent sheen and chrome icons to frosted panes for a playful retro-future variant.
- Fantasy User Interface (FUI) & Sci-Fi HUD Contrasts · Glassmorphism's frosted, rounded panes are soft and meant to be used. FUI's clear glass carries hard hairlines and brackets. Take glassmorphism's blur behind an FUI panel when real users have to read it.
- Metro (Microsoft Design Language) Contrasts · Translucent depth against opaque flat colour blocks; use blur sparingly to soften an overly stark tile wall.
- Frutiger Aero Pairs well · Glassmorphism is its flatter heir; reintroduce a touch of Aero gloss and nature photography to warm up frosted-glass UI.
- Material Design Pairs well · Replace opaque sheets with frosted panes at the highest elevations (dialogs, navigation) so the stack stays legible over imagery.