Stylogeny combining Biobrand × Data Humanism

Try

Style combination · Contrasts

Biobrand × Data Humanism

Data humanism draws organic forms by hand to encode real observations; the biobrand renders them as promotional objects. Borrow its honest encoding when a render risks overclaiming.

From the research on Biobrand (Organic Biotech CGI)

Mix them and make something Biobrand Data Humanism

HomeBiobrand × Data Humanism2021 · 2014
A sample layout drawn from the recipe: shapes from Biobrand, their arrangement from Biobrand, the finish from Biobrand. 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.

Biobrand (Organic Biotech CGI) Data Humanism

Type from Data Humanism
Colour from Data Humanism
Form from Biobrand
Composition from Biobrand
Surface from Biobrand

Data Humanism avoids gloss & highlights: this is where the two pull against each other, which is the point of the contrast.

02

The type

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

Display · Data Humanism

Home

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 · Biobrand

The visual language of biotech and biomaterial start-ups: rendered cells, coral-like structures, terrariums and mycelial growth become a single glossy product metaphor, set apart on a quiet ground beside restrained sans or serif information type. Kazior frames it as replacing the cold look of Silicon Valley tech minimalism with squishy, bodily, living forms.

Inter; Biobrand used Louize (serif) and Basile Grotesque Pro, as reported in It's Nice That's coverage of the Geltor identity and Small factual sans-serif labels under a serif product name, as on the Geltor HumaColl21 packaging

03

The colours

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

Biobrand (Organic Biotech CGI) Data Humanism

  • #f7f3ec ground · 36%
  • #3a3a3a ink · 14%
  • #f2c14e accent · 18%
  • #5c8fa8 accent · 14%
  • #e0574a accent · 10%
  • #e6a8a0 accent · 8%

As CSS

:root {
  --ground: #f7f3ec;
  --ink: #3a3a3a;
  --accent-1: #f2c14e;
  --accent-2: #5c8fa8;
  --accent-3: #e0574a;
  --accent-4: #e6a8a0;
  --font-display: "Caveat", cursive;
  --font-text: "Inter", sans-serif;
}

Use it with care

Biobrand (Organic Biotech CGI): Do not let a beautiful organic render stand in for evidence: Kazior describes the idealisation of microbes as a speculative, profit-driven proposition and cautions against believing it will solve environmental problems; he also notes that biotech firms simplify complex science to persuade consumers and investors, and describes Seed's transparency as carefully crafted. Avoid green-nature or medical-efficacy implications you cannot substantiate.

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.

05

More combinations

With Biobrand

With Data Humanism

Every style combination