Style combination · Contrasts

Dark Tech Minimalism × Data Humanism

The dark dashboard shows a few clean metrics at a glance; data humanism draws the messy, qualitative data a dashboard leaves out. Put one hand-drawn data portrait beside the KPIs to show the people behind the numbers.

From the research on Data Humanism

Mix them and make something Dark Tech Minimalism Data Humanism

A sample layout drawn from the recipe: shapes from Data Humanism, their arrangement from Dark Tech Minimalism, 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.

Dark Tech Minimalism Data Humanism

Type from Dark Tech Minimalism: Grotesque & neo-grotesque
Monospace
Colour from Dark Tech Minimalism: Dark ground
Monochrome

Data Humanism avoids dark ground: this is where the two pull against each other, which is the point of the contrast.
Form from Data Humanism: Squiggles & confetti
Geometric primitives
Composition from Dark Tech Minimalism: Cards & bento tiles
Generous white space

Data Humanism avoids cards & bento tiles: this is where the two pull against each other, which is the point of the contrast.
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 · Dark Tech Minimalism

Order

Inter, standing in for Inter

Text · Data Humanism

An information-design approach that draws data rather than charting it, treating numbers as personal, approximate and human. Named by Giorgia Lupi in Print (2017) after Dear Data (2014–15), her year of weekly hand-drawn postcards with Stefanie Posavec, it invents a visual code for each dataset: many small hand-made marks whose shape, colour and orientation each encode a variable, decoded through a custom legend and handwritten notes. Dense and layered, it asks to be read slowly, against Isotype's standard signs and at-a-glance dashboards; Federica Fragapane carries it into vector work.

Caveat; Data Humanism used The designer's own handwriting in pen or pencil for titles, legends and annotations and Giorgia Lupi, a custom typeface made at Pentagram from Lupi's handwriting (2019), used in What Counts

The colours

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

Dark Tech Minimalism Data Humanism

#08090a ground · 36%
#f7f8f8 ink · 14%
#a855f7 accent · 18%
#f2c14e accent · 14%
#5e6ad2 accent · 10%
#e0574a accent · 8%

As CSS

:root {
  --ground: #08090a;
  --ink: #f7f8f8;
  --accent-1: #a855f7;
  --accent-2: #f2c14e;
  --accent-3: #5e6ad2;
  --accent-4: #e0574a;
  --font-display: "Inter", sans-serif;
  --font-text: "Caveat", cursive;
}

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.