Stylogeny combining Generative × HfG Ulm Systematic Design

Try

Style combination · Pairs well

Generative × HfG Ulm Systematic Design

Use Ulm's parameter-driven manual as the rule set behind a generative identity, so variation stays inside a coded system.

From the research on HfG Ulm Systematic Design

Mix them and make something Generative HfG Ulm Systematic Design

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

Generative & Dynamic Identities HfG Ulm Systematic Design

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

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

Grid

Inter Tight, standing in for Akzidenz-Grotesk

Text · Generative

Identity systems designed as rules rather than fixed marks: logos and graphics generated by code, data or parameters so that they vary endlessly while staying recognisable. Anticipated by Karl Gerstner's Designing Programmes (1964) and launched by projects such as Sagmeister's Casa da Música (2007) and TheGreenEyl's MIT Media Lab identity (2011), the approach now spans responsive, data-driven and AI-assisted brands.

Inter; Generative used Neue Haas Grotesk and Variable fonts

03

The colours

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

Generative & Dynamic Identities HfG Ulm Systematic Design

  • #f4f4f1 ground · 36%
  • #1b1b1b ink · 14%
  • #f2b01e accent · 18%
  • #0091ff accent · 14%
  • #8a8d8f accent · 10%
  • #ffd400 accent · 8%

As CSS

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

05

More combinations

With Generative

All 15 combinations with Generative

With HfG Ulm Systematic Design

Every style combination