--- 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 | Role | Light | Dark | AMOLED | |------|-------|------|--------| | Primary | `#85746c` | `#ffffff` | the user's chosen color (default `#85746c`) | | Secondary | `#ede0db` | `#a08d84` | the 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.