Style combination · Pairs well

Data Humanism × Generative

Let a generative system draw personal data portraits from people's own answers, as What Counts did, but give the code a hand-drawn grammar and a legend so the output reads as made by people.

From the research on Data Humanism

Mix them and make something Data Humanism Generative

A sample layout drawn from the recipe: shapes from Generative, their arrangement from Data Humanism, the finish from Data Humanism. Not a real work, and not an image of either style.

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.

Data Humanism Generative & Dynamic Identities

Type from Data Humanism: Hand-lettering
Colour from Generative: Full polychrome
Flat fields
Form from Generative: Non-representational
Geometric primitives
Composition from Data Humanism: Layered information
Repetition & rhythm
Surface from Data Humanism: Paper & letterpress bite

The type

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

Display · Data Humanism

Form

Caveat, standing in for The designer's own handwriting in pen or pencil for titles, legends and annotations (the Dear Data postcards; the red handwritten script of Lupi's Print manifesto, 2017)

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

The colours

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

Data Humanism Generative & Dynamic Identities

#ffffff ground · 36%
#111111 ink · 14%
#0091ff accent · 18%
#f2c14e accent · 14%
#ffd400 accent · 10%
#e0574a accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #111111;
  --accent-1: #0091ff;
  --accent-2: #f2c14e;
  --accent-3: #ffd400;
  --accent-4: #e0574a;
  --font-display: "Caveat", cursive;
  --font-text: "Inter", sans-serif;
}

Use it with care

Data Humanism: Data portraits are usually drawn from real people's lives (health, moods, relationships, locations): get consent and anonymise before publishing other people's personal data. Because the custom encodings cannot be read at a glance, give a plain-text summary and the key alongside the drawing for readers who use screen readers or are in a hurry.