Stylogeny combining Material Design × Nutri-Score

Try

Style combination · Pairs well

Material Design × Nutri-Score

Rounded tiles, a fixed colour ramp and one raised selected state behave like a UI rating chip; Material's elevation and state rules suit screen versions of the grade in shopping apps.

From the research on Nutri-Score (Front-of-Pack Colour-Grade Label)

Mix them and make something Material Design Nutri-Score

FORMMaterial Design × Nutri-Score2014 · 2017
A sample layout drawn from the recipe: shapes from Nutri-Score, 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 Nutri-Score (Front-of-Pack Colour-Grade Label)

Type from Nutri-Score
Colour from Material Design
Form from Nutri-Score
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 · Nutri-Score

Form

Jost, standing in for The logo's own lettering: a heavy geometric sans in capitals for the grey 'NUTRI-SCORE' heading and the white and tinted A–E grades, supplied only as vector outlines in the charter's Illustrator files; the charter's rule is 'Don't change fonts'

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 Material Design, with a counter-accent from Nutri-Score. The ink reads on the ground at 4.5:1 or more.

Material Design Nutri-Score (Front-of-Pack Colour-Grade Label)

  • #fafafa ground · 36%
  • #212121 ink · 14%
  • #ffc107 accent · 18%
  • #ee8100 accent · 14%
  • #ff4081 accent · 10%
  • #e63e11 accent · 8%

As CSS

:root {
  --ground: #fafafa;
  --ink: #212121;
  --accent-1: #ffc107;
  --accent-2: #ee8100;
  --accent-3: #ff4081;
  --accent-4: #e63e11;
  --font-display: "Jost", sans-serif;
  --font-text: "Inter", sans-serif;
}

Use it with care

Nutri-Score (Front-of-Pack Colour-Grade Label): Nutri-Score is an EU trade mark of Santé publique France, licensed to food firms only under its conditions of use, and a grade printed on a pack is a nutrition claim. Do not put the real logo or a convincing imitation on products, mock-ups or generated images in a way that could pass for a genuine score; for fictional or teaching work, change the name or say clearly that the grade is illustrative, and check the current algorithm before showing any real product's letter.

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). A poster headed “BALANCED BOWL” shows an overhead illustration of a bowl filled with leafy greens, carrot strips, chickpeas, sliced tomatoes, cucumbers and grains. Below it is a green-to-red A–E rating scale with B highlighted, followed by five circular food icons. 2017–present · Western Europe, Central Europe, Southern Europe Nutri-Score (Front-of-Pack Colour-Grade Label) A small, fixed public-health sign that grades a whole food instead of warning about one nutrient. A white rounded box holds a grey 'NUTRI-SCORE' heading in heavy geometric capitals over five tiles from dark green A to dark orange E; the product's own letter swells into a taller capsule with a white keyline while the other four letters fade to tints. Owned as a trade mark by Santé publique France and voluntary, it is built from fixed modules, six fixed colours and a minimum size, and sits in the lower third of the pack front.

05

More combinations

With Material Design

With Nutri-Score

Every style combination