Stylogeny combining Claymorphism × Y2K Futurism

Try

Style combination · Contrasts

Claymorphism × Y2K Futurism

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.

From the research on Claymorphism & Soft 3D

Mix them and make something Claymorphism Y2K Futurism

HelloClaymorphism × Y2K Futurism2020 · 1997
A sample layout drawn from the recipe: shapes from Claymorphism, their arrangement from Claymorphism, the finish from Y2K Futurism. Not a real work, and not an image of either style.

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 Y2K Futurism

Type from Y2K Futurism
Colour from Claymorphism
Form from Claymorphism
Composition from Claymorphism
Surface from Y2K Futurism

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Y2K Futurism

Hello

Michroma, standing in for Eurostile Extended

Text · Claymorphism

A soft, toy-like 3D look from product design around 2020, given the name 'claymorphism' in a December 2021 article by Michał Malewicz. Icons, emoji, avatars and interface cards are modelled as fat, rounded volumes, as if made of clay or inflated vinyl, softly lit and floated alone on pale grounds in candy and pastel colours. Open 3D sets such as 3dicons and Microsoft's 3D Fluent Emoji carry the same look; in interfaces it is faked with two inner shadows and one large drop shadow.

Jost; Claymorphism used Geometric sans-serifs such as Poppins (Indian Type Foundry, 2014), kept to a few weights; Malewicz (quoted by Smashing Magazine) and LogRocket both advise minimal, restrained typography beside the clay forms, to counter their childlike feel and Rounded sans-serifs with soft terminals, such as Nunito (Vernon Adams) or VAG Rounded, only for the most childlike or playful products

03

The colours

The ground and leading colours come from Claymorphism, with a counter-accent from Y2K Futurism. The ink reads on the ground at 4.5:1 or more.

Claymorphism & Soft 3D Y2K Futurism

  • #f3eefc ground · 36%
  • #3b3355 ink · 14%
  • #8b7cf6 accent · 18%
  • #1f6fff accent · 14%
  • #ff9fb6 accent · 10%
  • #0095b6 accent · 8%

As CSS

:root {
  --ground: #f3eefc;
  --ink: #3b3355;
  --accent-1: #8b7cf6;
  --accent-2: #1f6fff;
  --accent-3: #ff9fb6;
  --accent-4: #0095b6;
  --font-display: "Michroma", sans-serif;
  --font-text: "Jost", sans-serif;
}

05

More combinations

With Claymorphism

All 12 combinations with Claymorphism

With Y2K Futurism

All 15 combinations with Y2K Futurism

Every style combination