Stylogeny combining Material Design × International Typographic Style

Try

Style combination · Pairs well

Material Design × International Typographic Style

Lean on Swiss grid discipline and flush-left grotesque setting to keep card-heavy Material layouts calm and editorial.

From the research on Material Design

Mix them and make something Material Design International Typographic Style

FormMaterial Design × International Typographic
A sample layout drawn from the recipe: shapes from Material Design, their arrangement from Material Design, the finish from Material Design. 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.

Material Design International Typographic Style

Type from International Typographic Style
Colour from International Typographic Style
Form from Material Design
Composition from Material Design
Surface from Material Design

02

The type

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

Display · International Typographic Style

Form

Inter Tight, standing in for Akzidenz-Grotesk

Text · Material Design

Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021).

Inter; Material Design used Roboto and Google Sans

03

The colours

The ground and leading colours come from International Typographic Style, with a counter-accent from Material Design. The ink reads on the ground at 4.5:1 or more.

Material Design International Typographic Style

  • #f2f0e9 ground · 36%
  • #111111 ink · 14%
  • #e1251b accent · 18%
  • #ffc107 accent · 14%
  • #1f4e9c accent · 10%
  • #ff4081 accent · 8%

As CSS

:root {
  --ground: #f2f0e9;
  --ink: #111111;
  --accent-1: #e1251b;
  --accent-2: #ffc107;
  --accent-3: #1f4e9c;
  --accent-4: #ff4081;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Inter", sans-serif;
}

04

The two styles

A plant-care homepage titled Sproutly features a large “Greener Days” headline beside an illustrated potted plant and light, water, and growth indicators. Below are four feature links and four colorful plant-category cards showing tropical plants, a snake plant, a trailing plant, and a succulent. 2014–present · North America, Global / networked Material Design Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021). The words “Urban Systems” appear in large black and red lettering at the upper left of an off-white cover. Tall blue, black and grey rectangular blocks rise from the bottom, with fine vertical dividing lines and a red circle at the upper right. 1950–1975 · Central Europe International Typographic Style A post-war refinement of the New Typography in which the mathematical grid, objective photography and neo-grotesque sans-serifs were used to communicate with clarity and neutrality. Taught at the Basel and Zurich schools, it became the default language of international corporate and institutional communication.

05

More combinations

With Material Design

With International Typographic Style

All 97 combinations with International Typographic Style

Every style combination