Health & Wellness / iOS / Android / Web

Open Food Facts

Open Food Facts feels like paper packaging: a nine-step warm brown scale, orange for emphasis, and green, orange and red status colors that stand out on it.

Download
  • #85746C
  • #875737
  • #F2994A
  • #219653
  • #EB5757
  • #F6F3F0

Color

Every color token in the file, grouped by role.

Brand

  • primary#85746C
  • primary accent#875737
  • primary normal#A08D84
  • primary medium#EDE0DB
  • primary light#F6F3F0
  • primary dark#483527
  • primary semi dark#52443D
  • primary black#341100
  • primary ultra black#201A17
  • secondary#F2994A
  • secondary vibrant#FB8229
  • secondary light#EE8858
  • on primary#FFFFFF

Surfaces

  • paper#FFFFFF
  • amoled surface#000000

Text

  • contrast low text#969696
  • contrast mid text#CACACA

Status

  • success#219653
  • success background#DEEDD8
  • warning#FB8229
  • warning background#F2E2D6
  • error#EB5757
  • error background#F6E4E4

More

  • seed#99460D
  • blue legacy#2D9CDB
  • grey dark#666666
  • grey normal#6C6C6C
  • grey medium#8F8F8F
  • grey light#E0E0E0
  • row odd light#FAF8F6
  • row odd dark#2D251E

Typography

Each style is set with the file's own family, size, weight and spacing.

  • OpenSansOpen font, shown as published.
  • display large28px / 700 / 1.2

    Pack my box with five dozen liquor jugs

  • display medium24px / 700 / 1.2

    Pack my box with five dozen liquor jugs

  • display small18px / 700 / 1.3

    The quick brown fox jumps over the lazy dog

  • title16px / 700 / 1.3

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • label14px / 500 / 1.4

    Continue to checkout

Shape

Corner radius tokens.

  • button3px
  • angular8px
  • rounded20px
  • header30px
  • circular40px
  • max100px

Spacing

The spacing scale, drawn to size.

  • very small4px
  • small8px
  • balanced10px
  • medium12px
  • large16px
  • very large20px
  • icon24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • card
    card
  • success banner
    success-banner
  • warning banner
    warning-banner
  • error banner
    error-banner
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 129 lines
version: alpha
name: Open-Food-Facts-design-analysis
description: "A food scanner app with a distinctive warm brown palette (a Material 3 scheme seeded from #99460d, with the app primary at #85746c and an ultra-dark #201a17) and an orange secondary (#f2994a, vibrant #fb8229), plus green, orange and red status colors for scores. It uses OpenSans, large 20 and 30 pixel radii, an 8 point rhythm and offers light, dark and amoled themes with three contrast levels."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  seed: "#99460d"
  primary: "#85746c"
  primary-accent: "#875737"
  primary-normal: "#a08d84"
  primary-medium: "#ede0db"
  primary-light: "#f6f3f0"
  primary-dark: "#483527"
  primary-semi-dark: "#52443d"
  primary-black: "#341100"
  primary-ultra-black: "#201a17"
  secondary: "#f2994a"
  secondary-vibrant: "#fb8229"
  secondary-light: "#ee8858"
  success: "#219653"
  success-background: "#deedd8"
  warning: "#fb8229"
  warning-background: "#f2e2d6"
  error: "#eb5757"
  error-background: "#f6e4e4"
  blue-legacy: "#2d9cdb"
  grey-dark: "#666666"
  grey-normal: "#6c6c6c"
  grey-medium: "#8f8f8f"
  grey-light: "#e0e0e0"
  row-odd-light: "#faf8f6"
  row-odd-dark: "#2d251e"
  paper: "#ffffff"
  on-primary: "#ffffff"
  amoled-surface: "#000000"
  contrast-low-text: "#969696"
  contrast-mid-text: "#cacaca"

typography:
  display-large:
    fontFamily: "OpenSans, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
  display-medium:
    fontFamily: "OpenSans, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
  display-small:
    fontFamily: "OpenSans, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  title:
    fontFamily: "OpenSans, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
  body:
    fontFamily: "OpenSans, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.5px
  label:
    fontFamily: "OpenSans, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4

rounded:
  button: 3px
  angular: 8px
  rounded: 20px
  header: 30px
  circular: 40px
  max: 100px

spacing:
  very-small: 4px
  small: 8px
  balanced: 10px
  medium: 12px
  large: 16px
  very-large: 20px
  icon: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary-accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.button}"
    height: 48px
  button-secondary:
    backgroundColor: "{colors.secondary-vibrant}"
    textColor: "{colors.primary-black}"
    typography: "{typography.label}"
    rounded: "{rounded.button}"
    height: 48px
  card:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.primary-black}"
    typography: "{typography.body}"
    rounded: "{rounded.rounded}"
    padding: 16px
  success-banner:
    backgroundColor: "{colors.success-background}"
    textColor: "{colors.primary-black}"
    typography: "{typography.body}"
    rounded: "{rounded.angular}"
    padding: 12px
  warning-banner:
    backgroundColor: "{colors.warning-background}"
    textColor: "{colors.primary-black}"
    typography: "{typography.body}"
    rounded: "{rounded.angular}"
    padding: 12px
  error-banner:
    backgroundColor: "{colors.error-background}"
    textColor: "{colors.primary-black}"
    typography: "{typography.body}"
    rounded: "{rounded.angular}"
    padding: 12px

Overview

Open Food Facts is a food scanner that feels earthy and approachable instead of clinical. The whole theme is a family of warm browns (from a pale #f6f3f0 to a near-black #201a17) with an orange secondary, so the app reads like paper packaging, and the green, orange and red used for health and score indicators stand out clearly against it. [Measured]

Three decisions define the look:

  1. A nine-step brown scale. Primary tones run ultra-black #201a17, black #341100, dark #483527, semi-dark #52443d, tone #81756c, accent #875737, normal #a08d84, medium #ede0db and light #f6f3f0. The seed color for the generated scheme is #99460d. [Measured]
  2. Status colors have backgrounds. Success #219653 on #deedd8, warning #fb8229 on #f2e2d6 and error #eb5757 on #f6e4e4 appear as banners, with gradient partners for chart bars. [Measured]
  3. Contrast and theme are user settings. There are light, dark and AMOLED (pure black) themes, plus low, medium and high contrast text options (#969696, #cacaca, #ffffff) and a color picker with options such as cyan, green, magenta, red and rust. [Measured]

Source for this file: the public app source, read on 2026-10-06. The world.openfoodfacts.org site returned almost no readable styles. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkAMOLED
Primary#85746c#ffffffthe user's chosen color (default #85746c)
Secondary#ede0db#a08d84the chosen color
Surface#ffffff#201a17#000000
On surface#000000#ffffff#ffffff
Inverse primary#341100#ffffff#ffffff
Error#eb5757#eb5757#ea2b2b
Odd table row#faf8f6#2d251e
Even table row#ffffff#201a17

Brown scale: #201a17, #341100, #483527, #52443d, #81756c, #875737, #a08d84, #ede0db, #f6f3f0. Orange secondary family: #f2994a, #fb8229 and #ee8858. Status: success #219653 (gradient #499459, background #deedd8), warning #fb8229 (gradient #f2994a, background #f2e2d6), error #eb5757 (background #f6e4e4). Greys: #666666, #6c6c6c, #8f8f8f, #e0e0e0. Older constants remain: blue #2d9cdb, greens #219653 and #60ac0e, yellows #f2c94c and #c88f01, oranges #f2994a and #e07312, and reds #eb5757, #ffcbcb and #ff0000. All [Measured].

Typography

OpenSans across the app. Display styles are bold at 28, 24 and 18; titles bold at 16; body is 14 with 0.5 letter spacing; titles in the app bar use medium weight. [Measured]

Shape and spacing

  • Spacing: 4, 8, 10, 12, 16, 20. Default icon size 24. [Measured]
  • Radii: buttons 3, angular surfaces 8, standard rounded surfaces 20, headers 30, circular elements 40, and a maximum of 100. [Measured]

Corners are generously round on cards and headers but almost square on buttons, which gives buttons a firmer feel than the surfaces around them. [Measured]

Iconography and motion

Custom icon constants and score icons (Nutri-Score style). Duration constants exist for animations. [Measured]

Themes

Light, dark, AMOLED, system, three contrast levels and a user color choice. [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

The iOS back swipe works, and Cupertino-style icons are available. [Inferred]

Primary navigation

Expected on iOS: bottom tab bar, about five items.

A bottom navigation with scan, history and profile style tabs. Not verified in the files read. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

A prominent scan button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Material bottom sheets and dialogs. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Material controls with a user-chosen color. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Text follows the system scale. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: safe areas, status bar.

Handled by the platform. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom icon constants. [Measured]

Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

An optional Open Food Facts account for contributing. No third-party social login was found. Account deletion was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: system components and Dynamic Type.

Low fidelity: Material 3 on iOS. [Inferred]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

System back. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

A Material navigation bar. [Inferred]

Main action

Expected on Android: floating action button.

A prominent scan control. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Material sheets, dialogs and snackbars. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Material 3 controls with the brown scheme. [Measured]

Text sizing

Expected on Android: font scale.

Follows the system font scale. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not verified. [Inferred]

Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Custom icon constants. [Measured]

Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Optional account. Account deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

Uses Material 3 with a custom seeded scheme, an AMOLED theme and contrast options. [Measured]

Platform: Web

The world.openfoodfacts.org site. It returned almost no readable styles.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Not measured. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

Not measured. [Inferred]

Main action

Expected on Web: page-level button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: browser zoom.

Not measured. [Inferred]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Not measured. [Inferred]

Insets and system bars

Expected on Web: viewport, scrollbars.

Only two breakpoints (279px and 537px) were found. [Measured]

Icons

Expected on Web: any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

Not measured. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Not measured. The web product has its own visual identity that was not captured. [Inferred]

Cross-platform consistency

The two mobile apps look the same. The web product was not measured, so consistency with the apps is unknown. [Measured]

Do's and Don'ts

Do

  • Build the interface from the warm brown scale and keep the orange for emphasis.
  • Show status as green, orange and red with a matching soft background.
  • Offer light, dark and AMOLED themes with three contrast levels.
  • Keep buttons nearly square (3) and surfaces generously round (20 to 30).
  • Use OpenSans with bold headings and open body letter spacing.

Don't

  • Don't use cool grays. Stay in the warm brown family.
  • Don't use the legacy blue #2d9cdb for new work.
  • Don't put status colors directly on brown without their soft backgrounds.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • The world.openfoodfacts.org site returned almost no styles, so the Web layer is not measured.
  • Nutri-Score and Eco-Score badge colors were not extracted.
  • Navigation structure is inferred from product knowledge.
  • Account deletion and store policy rules were not verified.