Stylogeny combining Neumorphism × HfG Ulm Systematic Design

Try

Style combination · Pairs well

Neumorphism × HfG Ulm Systematic Design

Model controls on Braun-style product design from the Ulm tradition: knobs, sliders and grilles that look moulded from one material.

From the research on Neumorphism

Mix them and make something Neumorphism HfG Ulm Systematic Design

SignalNeumorphism × HfG Ulm2019 · 1953
A sample layout drawn from the recipe: shapes from Neumorphism, their arrangement from Neumorphism, the finish from Neumorphism. 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.

Neumorphism HfG Ulm Systematic Design

Type from HfG Ulm Systematic Design
Colour from HfG Ulm Systematic Design
Form from Neumorphism
Composition from Neumorphism
Surface from Neumorphism

02

The type

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

Display · HfG Ulm Systematic Design

Signal

Inter Tight, standing in for Akzidenz-Grotesk

Text · Neumorphism

A short-lived interface trend in which controls are extruded from, or pressed into, a background of the same colour and modelled only by paired soft shadows. Sparked by Alexander Plyuto's 2019 Dribbble banking-app concept and named on UX Collective, it revived skeuomorphic tactility in a monochrome, minimal form, then faded quickly over its weak contrast and poor accessibility.

Jost; Neumorphism used Poppins and Nunito

03

The colours

The ground and leading colours come from HfG Ulm Systematic Design, with a counter-accent from Neumorphism. The ink reads on the ground at 4.5:1 or more.

Neumorphism HfG Ulm Systematic Design

  • #f4f4f1 ground · 36%
  • #1b1b1b ink · 14%
  • #f2b01e accent · 18%
  • #6c63ff accent · 14%
  • #8a8d8f accent · 10%
  • #a3b1c6 accent · 8%

As CSS

:root {
  --ground: #f4f4f1;
  --ink: #1b1b1b;
  --accent-1: #f2b01e;
  --accent-2: #6c63ff;
  --accent-3: #8a8d8f;
  --accent-4: #a3b1c6;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Jost", sans-serif;
}

04

The two styles

A pale blue meditation app screen titled “Calm Mode” shows a large circular 25-minute timer with a purple progress arc and a play button beneath it. Raised, softly shadowed controls include settings and bottom navigation for Focus, Sleep, Breathe, and Journal. 2019–2021 · Global / networked Neumorphism A short-lived interface trend in which controls are extruded from, or pressed into, a background of the same colour and modelled only by paired soft shadows. Sparked by Alexander Plyuto's 2019 Dribbble banking-app concept and named on UX Collective, it revived skeuomorphic tactility in a monochrome, minimal form, then faded quickly over its weak contrast and poor accessibility. A magazine cover titled “Urban Systems” features oversized black lettering above two geometric graphics on an off-white background. Rows of gray, navy and yellow circles sit beside a stylized navy street map with a yellow route and circular stops. 1953–1968 · Central Europe HfG Ulm Systematic Design The Hochschule für Gestaltung Ulm (1953–1968) was founded as the successor to the Bauhaus. Under Tomás Maldonado it turned that legacy into a scientific discipline: visual communication was treated as information design, governed by semiotics, ergonomics and methodical planning rather than artistic intuition. Its work for Braun and Otl Aicher's Lufthansa programme set the template for the corporate design system: a strict grid, one grotesque family, a coded colour palette and a manual governing every application.

05

More combinations

With Neumorphism

With HfG Ulm Systematic Design

Every style combination