Style combination · Contrasts

Front-of-Pack Warning Octagons × Nutri-Score

The Latin American seals warn in black, one nutrient at a time, by law; Nutri-Score grades the whole food on a coloured five-step scale and is voluntary in most countries. Choose the octagon to stop a purchase and the colour scale to steer a comparison.

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

Mix them and make something Front-of-Pack Warning Octagons Nutri-Score

A sample layout drawn from the recipe: shapes from Front-of-Pack Warning Octagons, their arrangement from Nutri-Score, the finish from Front-of-Pack Warning Octagons. 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.

Front-of-Pack Warning Octagons (Latin American Food Warning Seals) Nutri-Score (Front-of-Pack Colour-Grade Label)

Type from Nutri-Score: Geometric sans
All caps
Colour from Front-of-Pack Warning Octagons: Monochrome
Flat fields
Form from Front-of-Pack Warning Octagons: Geometric primitives
Emblems & badges
Composition from Nutri-Score: Single focal point
Repetition & rhythm
Surface from Front-of-Pack Warning Octagons: Flat

The type

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

Display · Nutri-Score

Order

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 · Front-of-Pack Warning Octagons

A state warning system stacked on commercial food packs. Under Chile's Law 20.606 and Decree 13 (in force 27 June 2016), every packaged food with added sugars, sodium or saturated fat that exceeds the limits for those nutrients or for calories carries one black octagon per nutrient: a stop-sign shape with a white margin, 'ALTO EN' and the nutrient in white Arial Bold capitals, signed by the health ministry and clustered near the top right of the front. The brand design survives, but sealed packs lose child-directed characters and toys. Peru, Uruguay, Mexico, Argentina and Colombia followed.

Inter; Front-of-Pack Warning Octagons used Arial Bold (Robin Nicholas and Patricia Saunders for Monotype, 1982) and Arial Bold in Mexico's NOM-051, Appendix A (A.2.2)

The colours

The ground and leading colours come from Front-of-Pack Warning Octagons, with a counter-accent from Nutri-Score. The ink reads on the ground at 4.5:1 or more.

Front-of-Pack Warning Octagons (Latin American Food Warning Seals) Nutri-Score (Front-of-Pack Colour-Grade Label)

#000000 ground · 36%
#ffffff ink · 14%
#ffcc00 accent · 18%
#ee8100 accent · 14%
#e30613 accent · 10%
#e63e11 accent · 8%

As CSS

:root {
  --ground: #000000;
  --ink: #ffffff;
  --accent-1: #ffcc00;
  --accent-2: #ee8100;
  --accent-3: #e30613;
  --accent-4: #e63e11;
  --font-display: "Jost", sans-serif;
  --font-text: "Inter", sans-serif;
}

Use it with care

Front-of-Pack Warning Octagons (Latin American Food Warning Seals): The octagons are legal instruments owned by health ministries, and imitating them on real products, in advertising or in generated images can mislead shoppers about a food's composition or pass for an official warning. Use the visual language for health communication, research or clearly fictional work, check each country's current specification before reproducing a seal, and do not turn the warning into decoration or a parody that could make a sign meant to discourage consumption appealing again.

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.

The two styles

2016–present · Latin America & Caribbean Front-of-Pack Warning Octagons (Latin American Food Warning Seals) A state warning system stacked on commercial food packs. Under Chile's Law 20.606 and Decree 13 (in force 27 June 2016), every packaged food with added sugars, sodium or saturated fat that exceeds the limits for those nutrients or for calories carries one black octagon per nutrient: a stop-sign shape with a white margin, 'ALTO EN' and the nutrient in white Arial Bold capitals, signed by the health ministry and clustered near the top right of the front. The brand design survives, but sealed packs lose child-directed characters and toys. Peru, Uruguay, Mexico, Argentina and Colombia followed.

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.

More combinations

With Front-of-Pack Warning Octagons

With Nutri-Score

Every style combination