---
title: "Foodnoms design system"
variant: extended
source: https://foodnoms.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/foodnoms-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Foodnoms · Design System

> Clear nutrition tracking with a fresh, friendly feel.

**Theme:** light · **Industry:** health · **Source:** https://foodnoms.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Foodnoms introduces its nutrition-tracking app through a calm, spacious landing page centered on real product screens. Bright orange accents, rounded feature panels, and a long run of user reviews give the page an approachable, trustworthy character.

## North star

Keep the product interface prominent and the page calm: use generous white space, dark rounded typography, and orange only for meaningful emphasis.

## Overview

The page uses a white canvas as its dominant visual field, with soft light-gray panels separating feature cards and review tiles. Near-black headings provide strong contrast, while the measured orange accent marks the brand, key calls to action, and small interface highlights. Aquawax Pro gives the page a distinctive rounded, friendly voice: bold display and heading styles anchor the hero and section titles, while the medium weight carries smaller navigation and supporting text. The hero is centered and restrained, with a short two-line headline, compact explanatory copy, and an app-store badge above a wide row of phone screens. Lower sections alternate product-feature cards, trust statements, reviews, and a device lineup, keeping the app visible throughout. Generous whitespace separates these blocks, while rounded card corners and pill-like actions soften the otherwise crisp, product-focused presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Gray | `#f2f2f2` | `--color-soft-gray` | surface | Pale gray card and feature-panel fill against the white page canvas. |
| Near Black | `#0d0d0d` | `--color-near-black` | neutral | Primary headings and high-contrast body text. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Main page canvas, open section backgrounds, and light text on the orange footer. |
| Charcoal Gray | `#333333` | `--color-charcoal-gray` | neutral | Secondary body copy and supporting navigation or link text. |
| Citrus Orange | `#ff5407` | `--color-citrus-orange` | accent | Brand wordmark, hero emphasis, primary calls to action, and selected interface highlights. |
| Muted Slate | `#666666` | `--color-muted-slate` | semantic | Quieter navigation and secondary links, including the News link. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Soft Gray) · `--color-surface` → `#ffffff` (Clean White) · `--color-text` → `#0d0d0d` (Near Black) · `--color-text-muted` → `#333333` (Charcoal Gray) · `--color-text-subtle` → `#666666` (Muted Slate) · `--color-accent` → `#ff5407` (Citrus Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d0d0d` | `#f2f2f2` | 17.36:1 | AAA |
| `#0d0d0d` | `#ffffff` | 19.44:1 | AAA |
| `#333333` | `#f2f2f2` | 11.29:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#666666` | `#f2f2f2` | 5.13:1 | AA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#ff5407` | `#f2f2f2` | 2.88:1 | fail |
| `#ff5407` | `#ffffff` | 3.22:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aquawax Pro Bold | `--font-body` | webfont | 700 | Display, page and section headings, and prominent bold copy. | Nunito Sans |
| Aquawax Pro Medium | `--font-aquawax-pro-medium` | webfont | 500 | Navigation, links, captions, and supporting copy. | Nunito Sans |

- **Aquawax Pro Bold:** Bold weight; rounded, friendly forms. Use mixed case and neutral tracking.
- **Aquawax Pro Medium:** Medium weight for smaller text; keep case natural and tracking neutral.

### Type scale — Major Third (ratio ≈ 1.255, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.1 | 0 | — | Aquawax Pro Bold | Large hero headline and high-impact page statements. |
| h1 | 36px | 700 | 1.2 | 0 | — | Aquawax Pro Bold | Primary page heading where a display-scale title is not used. |
| h2 | 28px | 700 | 1.2 | 0 | — | Aquawax Pro Bold | Section titles such as feature and review headings. |
| h3 | 24px | 700 | normal | 0 | — | sans-serif | Compact feature-card headings. |
| h4 | 22px | 700 | 1.4 | 0 | — | Aquawax Pro Bold | Smaller subsection titles and supporting callouts. |
| body | 18px | 700 | 1.4 | 0 | — | Aquawax Pro Bold | Prominent explanatory copy and feature descriptions. |
| caption | 16px | 500 | 1.6 | 0 | — | Aquawax Pro Medium | Secondary explanatory text and review details. |
| link | 15px | 500 | 1 | 0 | — | Aquawax Pro Medium | Navigation, inline actions, and footer links. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11", "dlig", "ss01", "ss02", "ss03", "ss07"`, `"blwf", "cv03", "cv04", "cv09", "cv11", "dlig", "ss01", "ss02", "ss03"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 8, 10, 12, 20, 24, 32, 40, 48 px.
- Section rhythm 32px · element gap 8px · card padding 32px · max content width 1376px.

The hero is centered, followed by a wide, edge-spanning row of phone mockups. Content then moves through a press logo band, a two-column feature-card grid, a three-part trust row, horizontally arranged testimonial cards, and a centered device-led CTA. The measured page max width is 1376px, with a compact density, 8px base spacing unit, and 32px section gap. Keep content aligned and orderly, but allow product imagery and review rows to extend broadly.

## Shape & elevation

- Radius: button `9999px` · card `25px` · link `9999px` · xs `25px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The measured system has no prominent shadows or border colors. Cards read as flat, pale-gray panels with 25px measured corner radii; buttons and links use pill-like rounding. Build hierarchy through whitespace, background contrast, and image overlap rather than strong outlines or layered shadows.

## Imagery

Use crisp product screenshots framed inside realistic smartphone mockups as the primary imagery. The hero presents several phones side by side; feature panels pair concise copy with individual device screens, and the closing CTA shows multiple Apple devices together. Keep screenshots legible and colorful, while the surrounding page remains restrained. Small icons and press marks support the content rather than defining the brand palette.

## Components

### Primary app action

A compact orange pill-shaped action with white label and arrow in the header; use the measured accent #ff5407.

### Hero

Centered two-line headline with orange emphasis on the first line, muted supporting sentence, and an App Store badge.

### Phone showcase

A wide horizontal row of tall app-screen mockups, cropped at the viewport edges to make the product feel expansive.

### Feature cards

Rounded light-gray panels pair short colored feature titles and copy with a phone screen; the measured card radius is 25px.

### Trust and press bands

Compact press logos and privacy or control claims sit between product sections, with centered alignment and ample surrounding white space.

### Review cards

Repeated rounded pale-gray cards use orange star ratings, short user quotes, and attribution; show them in horizontally flowing rows.

### Footer

A broad orange panel groups the wordmark and link columns, followed by a small legal row on white.

### Measured component styles

- **Primary button** (“Get the App ↗”): background #ff5406 · text #0000ee · radius 20px · padding 12px 18px · 400 12px sans-serif
- **Secondary button** (“Download the App ↗”): background #f2f2f2 · text #0000ee · radius 20px · padding 12px 18px · 400 12px sans-serif
- **Link** (“Download ↗”): transparent background · text #ffffff · radius 0px · padding 0px · 500 15px Aquawax Pro Medium
- **Card** (“"Just hit 5 years with FoodNoms. Nothing”): background #f2f2f2 · text #000000 · radius 25px · padding 32px · 400 12px sans-serif

## Do

- Use white as the dominant page background.
- Reserve orange for brand emphasis and key actions.
- Use rounded bold headings and medium-weight supporting text.
- Show real app screens prominently in device frames.
- Separate content with generous whitespace.
- Use soft gray fills for cards and review panels.

## Don't

- Do not introduce unmeasured brand colors.
- Do not make the page feel dark or visually dense.
- Do not replace product screens with abstract decorative art.
- Do not rely on heavy shadows or strong borders.
- Do not scatter orange across large areas without purpose.
- Do not use sharp, square card corners.

## Agent prompt

Build a new Foodnoms-style page with a calm white canvas and clear product-first hierarchy. Use Clean White (#ffffff) for open sections, Soft Gray (#f2f2f2) for rounded cards, Near Black (#0d0d0d) for headings, Charcoal Gray (#333333) and Muted Slate (#666666) for supporting copy and quieter links, and Citrus Orange (#ff5407) for the wordmark and important actions. Use a rounded sans-serif close to Nunito Sans, with bold headings and medium supporting text. Center the opening message, show authentic app screens in phone frames, and arrange features, trust claims, reviews, and a device-led CTA in distinct spacious blocks. Keep surfaces flat, corners rounded, and decoration subordinate to the product.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Four link columns accompany the brand mark in a broad orange panel, with a separate centered legal row below. | Grouped navigation, External-link indicators, Legal links | Orange footer panel, Multi-column links, White brand mark, Compact legal row |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/foodnoms-com