Style combination · Contrasts
Claymorphism × Emoji Pictographic Language
Microsoft's 3D Fluent set comes close to claymorphism's soft rendered forms, and the atlas's claymorphism entry counts the 3D Fluent set among its sources; but claymorphism builds whole interface scenes from inflated pastel shapes, while an emoji stays one sign at text size on a transparent ground. Pair a 3D emoji with clay cards only when it plays the role of an icon, not of a scene.
Mix them and make something Claymorphism Emoji Pictographic Language
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 Emoji Pictographic Language
- Type from Claymorphism
- Colour from Emoji Pictographic Language
- Form from Emoji Pictographic Language
- Composition from Claymorphism
- Surface from Claymorphism
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Claymorphism
Yay!
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 · Emoji Pictographic Language
Pictographs typed as characters and set inline in running text. Born on Japanese mobile phones (J-Phone's 90 monochrome signs of 1997, the 176 single-colour signs that Shigetaka Kurita led for NTT DoCoMo's i-mode in 1999, on 12 x 12 pixel grids) and encoded in Unicode in 2009-2010, each emoji is one face, hand, object, food or flag centred on a square em with no ground. Unicode fixes the code point and name; each vendor draws its own full-colour version, flat, glossy or rendered in 3D, so one sign circulates in many visual dialects.
Shippori Mincho; Emoji Pictographic Language used The 12 x 12 dot external-character (gaiji) glyphs in which Japanese carriers first delivered emoji, typed into mobile mail and i-mode pages beside kana and kanji and Apple Color Emoji (2008)
03
The colours
The ground and leading colours come from Emoji Pictographic Language, with a counter-accent from Claymorphism. The ink reads on the ground at 4.5:1 or more.
Claymorphism & Soft 3D Emoji Pictographic Language
-
#ffcc4dground · 36% -
#664500ink · 14% -
#f4a223accent · 18% -
#8b7cf6accent · 14% -
#dd2e44accent · 10% -
#ff9fb6accent · 8%
As CSS
:root {
--ground: #ffcc4d;
--ink: #664500;
--accent-1: #f4a223;
--accent-2: #8b7cf6;
--accent-3: #dd2e44;
--accent-4: #ff9fb6;
--font-display: "Bagel Fat One", sans-serif;
--font-text: "Shippori Mincho", serif;
}Use it with care
Emoji Pictographic Language: Reuse emoji artwork only from the open sets and on their terms (Twemoji graphics CC BY 4.0 with attribution, OpenMoji CC BY-SA 4.0, Noto fonts SIL OFL 1.1, Fluent Emoji MIT); the platform sets are their vendors' own artwork, so do not lift their drawings into a logo or print. Remember too that a code point reaches each reader in that reader's vendor drawing, which may differ in detail, colour or even meaning from the one you chose.
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.
- Glassmorphism Pairs well · 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.
- 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.
With Emoji Pictographic Language
- Bitmap & Pixel Graphics Pairs well · Kurita's i-mode set was drawn on a 12 x 12 pixel grid; redraw a set on a coarse grid in a few flat colours for an early-keitai look, or set pixel emoji beside a bitmap font.
- Isotype Pictorial Statistics Contrasts · Isotype repeats identical pictograms in rows to count quantities; an emoji stands in for a word or a tone of voice inside a sentence. Use Isotype when the signs must count, emoji when they must talk.
- Kawaii Design Pairs well · The atlas counts emoji among the channels through which kawaii went global (Kurita's set is a kawaii exemplar), and Pen magazine writes that kawaii culture 'gave birth to emojis'; the two share round faces and hearts. But emoji also cover neutral objects, hands, flags and symbols in saturated full colour, and live inside running text. Borrow kawaii's pastel tints and blushing cheeks to soften an emoji set for a children's product.
- Story Manga (Postwar Japanese Comics) Pairs well · Kurita took manga's symbols for feeling (manpu), such as the sweat drop for nerves; lift more of manga's visual shorthand, speed lines, anger marks, sparkles, into a set's faces.
- Flat Design Pairs well · Twemoji and Fluent Flat use flat fills with no gradients or outlines, like flat UI icons; choose a flat set when emoji must sit inside a flat interface, a glossy or 3D set when they must stand out from it.
- VTuber Avatar and Stream Graphics Pairs well · Reduce the character and its motifs to small square pictographs for channel emotes and membership badges, so the community can type the persona into chat.
- Japanese Dense Web Design Pairs well · Emoji came out of Japan's phone web (J-Phone in 1997, i-mode in 1999), which commentators also credit with keeping these pages text-heavy; small pictographs set inline with text links add colour and signal to a dense list without taking space.
- Chat Reaction-Sticker Cartooning (LINE) Contrasts · Emoji are standardised, encoded pictographs; the shared trait is a pictorial reply, but these are authored, larger character performances.