01 · Foundation

The look & feel of Nourish.

A working design system for the Nourish website — rooted in the logo’s teal-green core, extended with warm accents, and committed to art over information.

Design philosophy

Art and beauty — not "educational."

Our mission is food system literacy, but our medium is design. Nourish should radiate the artistic quality of a magazine cover, a poster show, or a beautifully printed cookbook — never a school worksheet or an institutional explainer. Every page should feel like something a designer would screenshot.

What we are

A photo-driven editorial publication.

Italic Playfair Display headlines. Generous white space. Beautiful photography that earns its real estate. Quiet sans-serif body type that lets the imagery breathe. Sophisticated, optimistic, slightly literary.

What we are not

An institutional educational website.

No tag-cloud sidebars. No multi-colored CTAs competing for attention. No stock-feel clipart of fruit baskets or smiling families pointing at things. No "Learn More!" buttons that shout. Information density elevated by editorial restraint.

02 · Color

Palette.

Five core colors carry the brand. Three warm accents solve light-green legibility on white. Soil replaces black for body type. The orange burst variant unlocks Harvest and Ember as authentic brand voices, not just accents.

#3E8C50
Fern
Primary · headlines, UI, CTAs
#6AB47A
Meadow
Secondary green · gentle accents
#A8D4AE
Mist
Soft background, dividers
#2A8A88
Lagoon
Secondary brand · links, info
#72BAB8
Sea Glass
Cool background, panels
#E07830
Harvest
Warm accent · highlights, alt brand
#C94E2A
Ember
CTA accent · urgent moments
#F2C06A
Honey
Highlight on dark backgrounds
#3D3D35
Soil
Body type · dark surfaces, anchors
03 · Typography

Two voices.

The serif carries emotion. The sans carries information.

Display · Italic only
Aa

Playfair Display

Used for hero headlines, pull quotes, featured story headers, section titles. Always italic for warmth. Open-source via Google Fonts.
Body sans — humanist warmth
Aa

Source Sans Pro / Source Sans 3

Light (300) for body. Regular (400) for UI. Semibold (600) for hierarchy. Uppercase with wide tracking for eyebrows and category tags.
Pairing example · Pull quote

“Soil isn’t the bottom of the food system — it’s the beginning of every meal we eat.”

— Elena Ramirez, Soil Ecologist
04 · Logo

Two primary treatments.

The horizontal lockup is the everyday workhorse. The burst-over-i is reserved for large-format and signature brand moments. The standalone burst is a versatile graphic element.

Nourish horizontal logo
Horizontal · preferred
Nourish burst-over-i logo
Burst over the "i" · signature
Burst mark · standalone
Reversed · on Soil
Reversed · on Fern
One-color · Soil for print
04b · Color variants

The burst speaks in more than green.

Approved color variants of the standalone burst. The orange/red palette unlocks Harvest and Ember as legitimate brand voices — useful for warm contexts, summer campaigns, or any moment that wants energy more than calm.

Greens · default
Harvest gradient
White · on Soil
White · on Fern

Do

+ Default to the horizontal lockup for headers, footers, signatures.

+ Use the burst-over-i for large-format prints, posters, hero moments.

+ Reverse to white on Fern, Soil, or rich photography.

+ Keep clear space equal to the height of the burst all the way around.

Don't

Stack the burst on top of the wordmark vertically — legacy treatment only.

Recolor the wordmark to anything other than Fern, Soil, or white.

Place the logo on a photo without sufficient contrast or scrim.

Add a tagline outside of the "food + community" signature lockup.

05 · Photography

Photography is the primary medium.

Four modes carry the brand. Diversity of people and places is non-negotiable. Photography earns its size — never cropped just to fill a grid cell.

ECU · botanical
Hands · honest light
Portrait · diverse casting
Wide · cinematic landscape
05b · Corner philosophy

Straight corners or rounded?

Both, deliberately. Each choice carries an emotional register.

Straight corners.

Editorial. Architectural. Magazine. Use for photos, hero panels, story cards in the main editorial grid. Conveys seriousness, restraint, art-direction. This is the default for the website’s editorial body.

Border-radius: 0

Rounded corners (sparingly).

Welcoming. Approachable. Hand-touched. Use for badges, pill filters, avatar circles, and curriculum contexts where students and educators land. Rounded type-and-color combinations signal "this is for you."

Border-radius: 8–16px
06 · Logo riffs

The burst as a graphic device.

Instead of a separate ornament system, Nourish riffs on its own logo. The burst gets blown up large, reversed out, broken into single petals, or used as a photographic mask. The brand becomes its own decoration — coherent, unmistakable.

Riff 01

Oversized watermark.

Bleed the burst off the canvas edge at 400–800px with 12–20% opacity. Quiet brand presence behind editorial content.

Riff 02

Single petals as ornament.

Pull one petal from the burst, scatter at varying rotations and sizes. A brand-specific dingbat. Use as section divider, eyebrow accent, or marginalia.

Riff 03

Reversed, centered.

White burst on Soil for hero closes, footer signatures, "pause" moments between long sections. Quiet, ceremonial.

Riff 04

Photographic mask.

Clip a photograph through the burst silhouette. Used for special editorial moments — a tribute, a feature opener, a campaign image.

The restraint rule

One burst moment per page.

The burst is powerful precisely because it’s scarce. Each layout module gets to choose one burst riff — oversized watermark, single petal, reversed-on-Soil, or photographic mask. Stack more than one and the page stops being a magazine and becomes a moodboard.

Stats bands

Fern band, watermark in the corner. The most common riff.

Article dividers

Single petal between editorial blocks. Replaces the old leaf-SVG accents.

Hero closes

Reversed burst on Soil for closing CTAs, newsletter moments, footers.

Not here

Hero photos already doing emotional work. Photography wins.

07 · Icons & illustrations

Two systems, one voice.

For utility we draw on Google’s Material Symbols — clean, dependable, universal. For warmth and personality we use the custom hand-drawn illustrations developed across previous Nourish work.

Utility · Material Symbols

Clean. Recognizable. Quiet.

Used for UI affordances: navigation, search, share, bookmark, filter, video play. Outlined weight at 32–40px. Colored using the palette — never default gray.

Personality · Custom Nourish illustrations

Warm. Hand-drawn. Specific.

The orange-line illustrations from the Family Kit project. Used for educator content, recipe ephemera, classroom kits, and any moment where the brand wants to feel handmade rather than corporate.

07b · Supplementary icon sets

Licensing candidates.

In addition to Google Material Symbols (for UI utility) and the Family Kit illustrations (for personality), Nourish is evaluating these supplementary icon sets to extend the visual vocabulary for food, farming, and classroom content. Watermarked previews shown — full sets pending license.

Color food icons
Candidate A · Bold flat color

Mucho-style food icons.

Geometric flat-color illustrations on dark backgrounds. Strong personality, instantly recognizable. Best for: campaigns, posters, social, hero moments where the brand wants energy.

Flat colorGeometricHero use
Healthy vegan food icons
Candidate B · Geometric collage

Healthy Vegan Food collage.

Tile-grid composition of green/yellow flat-color food icons. Best for header strips, footer ornaments, editorial-section openers.

Flat colorCollageEditorial
Organic farming icons
Candidate C · Duotone

Organic Farming · blue duotone.

Two-color (blue + cream) circular icons in a structured grid. Best for educator/curriculum materials, certification-style badges, K-12 lesson covers.

DuotoneBadge-styleCurriculum
Farm icons monochrome A
Candidate D · Monochrome silhouette

Farm + agriculture icons (A).

Black silhouette set: seeds, tractor, animals, crops, tools. Best for inline UI accents, lesson-card thumbnail keys, info-graphic legends. Stylistically consistent with Material Symbols.

SilhouetteUI · accentInfo-graphic
Fruit and vegetable icons
Candidate E · Monochrome produce

Fruit & vegetable silhouettes.

30+ produce silhouettes — apples, berries, brassicas, melons, citrus. Best for lesson tags ("Seasonal, Local Food"), recipe-related content, ingredient labels.

SilhouetteProduceTags
Farm tools and animals
Candidate F · Farm tools & animals

Tools, animals, structures.

Pitchfork, wheelbarrow, fence, shovel, carrot; pig, cow, chicken, sheep; barn, milk-jug, hay-bale. Best for curriculum spreads and animated-lesson primers.

SilhouetteCurriculumSpreads

Recommendation

The brand can comfortably hold two supplementary sets: one flat-color set (Candidate A or B) for personality moments and editorial flourishes; one monochrome silhouette set (D, E, or F) for utility/UI accents that don't compete with photography. Three sets risks visual chaos. The duotone "Organic Farming" set (C) sits between modes and may not be necessary if we have one of each.

Nourish is the magazine the food movement wishes it had — photographic, optimistic, deeply reported. Information delivered with such craft that the design itself argues for the work.

— Design principle · v1.2