MUUDS

Curated catalog of analyzed web design.

More Nutrition

Vibrant, health-conscious, and approachable. A rich monochromatic palette of matcha greens establishes an earthy yet fresh tone, energized by tightly tracked condensed headlines and playful handwritten callouts. 3D packaging renders and circular stat callouts keep the product narrative focused and touchable.

Visit site

Rated

6.7/ 10

From 14 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged
8.5
Systemmeasured
4.8
Distinctionmeasured
6.0
on the grid
19%
vertical rhythm
54%
type on a scale
42%
contrast passing AA
80%
unlike the library
0.82
model craft
7.5/10
model deviation
5.5/10

Colour

Background#e8efe4
Text#335c30
Accent#335c30
Surface#ffffff
Muted#90b96d

Typefaces

Display
Founders Grotesk Condensed
Body
Founders Grotesk Condensed
Mono
Source
unknown
Scale
18 · 20 · 22 · 24 · 25 · 26

Layout

Grid
12 columns
Container
1360px
Spacing base
5px
Radius
20px · 999px

Capture

Category
food
Sections
14
Captured
2026-09-16
Rhythm
pale green x3 → dark green → pale green x2

Type rules

  • display headlines set in compressed uppercase with tight negative tracking
  • body text remains compact and sentence-case for fast visual scanning

Colour rules

  • monochromatic green palette layered across sage, olive, and forest tones
  • pure white reserved for circular stat badges, comparison cards, and high-contrast callouts

Voice rules

  • use witty matcha puns across full-width marquee ribbons
  • keep body copy concise and under 40 characters per line

Holds it together

  • orbit key quantitative benefits around product imagery inside circular white badges
  • use dark forest green pill buttons with white text and an arrow icon for all primary actions
  • layer casual handwritten annotations and doodles alongside structured typographic blocks

Contrast

text on background6.6:1 AA
muted text on background1.9:1 fail
text on surface7.7:1 AAA
accent on background6.6:1 AA
background on accent6.6:1 AA

Type, measured

Body
18px / 0.92
Measure
36 characters
Display
240px / 0.76
Tracking
-0.03em display
Scale ratio
1.91

Voice

Tone
playful, punchy, benefit-driven
Sentences
short
Person
second
Vocabulary
plain
Calls to action
buy, shop

Built with

Builder
webflow
Framework
Motion
gsap, swiper
WebGL
Nav
Length
15.9 screens
Mode

Sections in page order

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

  1. 00

    hero

    Strong

    Earthy and fresh matcha-green hero section pairing playful oversized typography with a centered product bottle and radial nutrition callouts.

    Mood
    grounded + playful
    Layout
    2 col · split · balanced
    Open section →
    Earthy and fresh matcha-green hero section pairing playful oversized typography with a centered product bottle and radial nutrition callouts.
  2. 01

    hero

    Fresh and spirited matcha promotional hero blending UGC smartphone video cards with bold condensed typography in leafy green hues.

    Mood
    playful + grounded
    Layout
    2 col · asymmetric · balanced
    Open section →
    Fresh and spirited matcha promotional hero blending UGC smartphone video cards with bold condensed typography in leafy green hues.
  3. 02

    feature

    Gentle matcha-toned feature section pairing clean packaging 3D renders with a tilted card and organic curves.

    Mood
    serene + grounded
    Layout
    2 col · asymmetric · airy
    Open section →
    Gentle matcha-toned feature section pairing clean packaging 3D renders with a tilted card and organic curves.
  4. 03

    feature

    Fresh and playful matcha benefit spotlight pairing a 3D product tub with a floating sage green card and handwritten script.

    Mood
    playful + grounded
    Layout
    2 col · split · airy
    Open section →
    Fresh and playful matcha benefit spotlight pairing a 3D product tub with a floating sage green card and handwritten script.
  5. 04

    feature

    A light and soothing health product highlight pairing 3D packaging with a soft green benefit card along a flowing graphic path.

    Mood
    serene + playful
    Layout
    2 col · split · airy
    Open section →
    A light and soothing health product highlight pairing 3D packaging with a soft green benefit card along a flowing graphic path.
  6. 05

    feature

    Playful and fresh product feature spotlighting health benefits with a tilted card, friendly badge, and soft matcha-green tones.

    Mood
    playful + grounded
    Layout
    2 col · split · airy
    Open section →
    Playful and fresh product feature spotlighting health benefits with a tilted card, friendly badge, and soft matcha-green tones.
  7. 06

    other

    Strong

    Quiet, floating 3D canister product visual set against a calm, pale sage backdrop with a sweeping white trail.

    Mood
    serene + grounded
    Layout
    1 col · asymmetric · airy
    Open section →
    Quiet, floating 3D canister product visual set against a calm, pale sage backdrop with a sweeping white trail.
  8. 07

    statement

    A calm, matcha-toned statement section layering bold condensed typography behind a 3D product canister.

    Mood
    serene + grounded
    Layout
    1 col · centered · airy
    Open section →
    A calm, matcha-toned statement section layering bold condensed typography behind a 3D product canister.
  9. 08

    feature

    Fresh and playful matcha product lineup featuring tall condensed typography, floating flavor ingredients, and casual handwritten annotations on a soft green background.

    Mood
    playful + grounded
    Layout
    1 col · stacked · balanced
    Open section →
    Fresh and playful matcha product lineup featuring tall condensed typography, floating flavor ingredients, and casual handwritten annotations on a soft green background.
  10. 09

    comparison

    Clean, healthy minimalist comparison layout featuring a scoop of green matcha powder beside a structured benefits table.

    Mood
    serene + reassuring
    Layout
    2 col · split · balanced
    Open section →
    Clean, healthy minimalist comparison layout featuring a scoop of green matcha powder beside a structured benefits table.
  11. 10

    testimonial

    Crisp natural sunlight and creamy matcha photography create an earthy, refreshing, and appetizing customer review showcase.

    Mood
    grounded + serene
    Layout
    3 col · stacked · balanced
    Open section →
    Crisp natural sunlight and creamy matcha photography create an earthy, refreshing, and appetizing customer review showcase.
  12. 11

    feature

    Fresh, playful supplement feature pairing matcha latte with chunky flavour powder against a soft sage background.

    Mood
    playful + grounded
    Layout
    2 col · split · balanced
    Open section →
    Fresh, playful supplement feature pairing matcha latte with chunky flavour powder against a soft sage background.
  13. 12

    logo bar

    A playful trust banner featuring floating circular payment badges along an organic curve with charming handwritten delivery callouts against a soft mint backdrop.

    Mood
    playful + reassuring
    Layout
    1 col · asymmetric · airy
    Open section →
    A playful trust banner featuring floating circular payment badges along an organic curve with charming handwritten delivery callouts against a soft mint backdrop.
  14. 13

    footer

    Strong

    Earthy green tones frame a layered matcha product showcase resting over an oversized brand logotype and minimal footer links.

    Mood
    grounded + serene
    Layout
    2 col · split · balanced
    Open section →
    Earthy green tones frame a layered matcha product showcase resting over an oversized brand logotype and minimal footer links.

More like this

by shared mood