Nourish 2.0 Look & feel guidelines · v1.0 May 2026

A regenerative future, told beautifully.

A working set of design guidelines for the new Nourish website: palette, typography, logo treatments, photography direction, reference-site mood boards, and four sample page layouts demonstrating the direction.

9
Brand colors defined
2
Type families paired
5
Reference sites studied
4
Sample layouts built
In this set

Six pages that make a design system.

01
Mood boards

Reference sites — what to learn from each.

Kiss the Ground, The Land Institute, Patagonia Provisions, Slow Food, and Rodale Institute, each annotated with the specific design move Nourish should take.

5 sites + synthesis →
02
Foundation

Color, typography, logo, photography direction.

The full token set: nine brand colors with contrast guidance, the Source Sans + Freight Display pairing, three logo treatments, photo art direction, cut-out botanical signature.

Style guide →
03
Layout 1 · Homepage

Split-screen hero, stats band, story grid, topic hub.

The flagship layout. Cinematic photo hero opens to a Fern-green stats band, three-up story grid, profile feature, dark color-coded topic hub, and a green newsletter CTA.

6 sections →
04
Layout 2 · Story

Full-bleed hero, two-column body, italic pull quotes.

The editorial home: photo-overlay hero with italic display headline, body + sidebar rhythm, large italic pull quotes with a Fern green left rule, leaf-divider footer.

Long-read template →
05
Layout 3 · Topic landing

Dark immersive header, filter pills, primer strip.

Topic entry point with a dark, photographic header, sticky filter pills, a 2/3+1/3 feature grid, a Lagoon teal Beginner’s Guide primer, and a deep three-column story grid.

Discovery surface →
06
Layout 4 · Curriculum

K-12 educator hub by grade band.

The free curriculum hub: hero with Free-for-classrooms badge, Middle School and Elementary tracks of lesson cards, a featured action-project spotlight, educator support, and a teacher newsletter.

Educator landing →
v1.5 · Four landings, two flavors each

Editorial vs. Quiet — side by side.

Each of the four landing pages exists in two parallel versions. Open A and B for any pair to compare. The Quiet versions apply the four guideline shifts: minimal text, color bands, 80/20 sans/serif, one burst per page.

Layout 1 · Home "What's the story of your food?" · Hero video
A
Editorial

Italic serif hero, split-screen photo.

Literary register. Long italic Freight Display headline, lede paragraph, photo split.

Open layout-home →
B
Quiet

Full-bleed video hero, one big question.

Autoplay video, "What's the story of your food?" headline, Fern stats with burst, photo-driven sections.

Open layout-home-quiet →
Layout 5 · Videos Films grid + collections + voices
A
Editorial

Italic serif hero with featured film card.

Two-column hero, italic Freight Display stories headline, story-grid below.

Open layout-videos →
B
Quiet

Full-bleed photo, two-word title, 12-up films grid.

"Cooking Together," 3 rows of 4 films, italic accent quote, Lagoon collections band, real voice headshots.

Open layout-videos-quiet →
Layout 3 · Explore Topic landing · filter pills · primer
A
Editorial

Dark immersive italic-serif header.

Animated leaf decorations, italic Freight Display headline with green em, full-color filter chips.

Open layout-topic →
B
Quiet

Photographic immersive hero, sans headline.

Sova-Farm hero, single sans line, Cream filter band, Lagoon primer with burst.

Open layout-topic-quiet →
Layout 4 · Learn K-12 curriculum hub · grade bands · lesson cards
A
Editorial

Split-screen italic serif hero, card-grid lessons.

Italic Freight Display headline with leaf decoration, photo+badge right side, lesson cards as info-cards.

Open layout-curriculum →
B
Quiet

Full-bleed kids-in-garden, photo-tile lessons.

Photographic hero with badge, Fern stats with burst, lesson cards as photo tiles (no card chrome).

Open layout-curriculum-quiet →
v1.3 + v1.4 archived

Past versions are preserved at versions/v1.3/ (current style across all 5 layouts) and versions/v1.4/ (Videos in Quiet, other 4 in Editorial). The current state is v1.5 — both directions live, ready for a stakeholder review.

Deliverables

Three formats, one design system.

Everything in this set is available in three formats — live HTML for the design team, a PDF for stakeholder review, and a slide deck for live design reviews.

H

Interactive HTML

The six pages you’re looking at now. Live type, live color, live grids. Best for the design team to inspect, screenshot, and iterate.

In this folder · 6 pages
P

PDF guidelines

A formal design guidelines PDF synthesizing palette, typography, logo, photography direction, mood boards, and all four Nourish layouts. Best for stakeholder review.

Nourish-Design-Guidelines.pdf
D

PowerPoint deck

A 20-slide design review deck covering criteria, palette, type, logo, mood boards, layouts, and recommended next steps. Best for live presentations.

Nourish-Design-Review.pptx
From here

What to do next.

The fastest path from these guidelines to a build-ready design system is roughly the following.

  1. 01

    Confirm typeface licensing — Freight Display Pro (Adobe Fonts/Typekit) + Source Sans Pro/Source Sans 3.

  2. 02

    Commission an original photography art direction brief: ECU specs, diversity casting, tone and color grading guidelines.

  3. 03

    Build mobile layout versions of all four page concepts (Homepage, Story, Topic, Curriculum).

  4. 04

    Define the illustration and icon style guide — how cut-out botanical forms are used consistently across pages and seasons.

  5. 05

    Present color palette and layout concepts to WorldLink stakeholders for feedback.

  6. 06

    Define content strategy: story categories, editorial calendar, contributor guidelines.

  7. 07

    Set up an accessible component library in Figma (or chosen design tool) with the tokens locked in.