FeedCo — Design System

Masthead

Wordmark-only, typeset never drawn. The logo is locked.

Locked

feedCollective

A Food Network For Everyone

Explored & retired

Playfair · was locked

Feed Co.

DM Serif

Feed Co.

Italiana

FEED CO.

Lockups & clear space

feedCollective

DM Sans across app & web — one friendly wordmark everywhere. Reversed for photo overlays. Clear space = cap-height. Min width 96px. The “Co.” is part of the mark.

Color

Ink on warm paper, with a rationed purple & orange accent pair.

Ink — text & structure

Ink

#1A1613

Masthead, primary text

Espresso

#2E2823

Headings, ink hover

Graphite

#6E6459

Secondary text

Ash

#A89E92

Tertiary, captions

Paper — surfaces

Ivory

#FBF7F0

App canvas

Porcelain

#FFFFFF

Cards, elevated

Linen

#F3ECE1

Subtle fills

Hairline

#E4DCD0

Borders & rules

Accents — purple & orange

Plum

#5E2A55

Primary · links · meals

Amber

#C9612C

Place · energy · membership

Plum Deep

#42203C

Pressed plum

Amber Deep

#A24A1E

Pressed amber

Tints

Plum Soft

#EFE2EC

Cool tint fills

Amber Soft

#F8E6D4

Warm tint fills

A cool plum against a warm amber. Plum leads (links, meals, Editor’s Pick); amber carries place, energy & membership. Resting state is always ink-on-ivory.

Typography

A friendly sans for voice, a neutral grotesque for utility, a tracked kicker as signature.

DM Sans

Display / Voice

Masthead, headlines, pull quotes. Low-contrast geometric sans — approachable, for the people.

Inter

Body / Interface

Reading text, labels, controls.

MastheadDM Sans · 44 · 600

FEED CO.

DisplayDM Sans · 34/40 · 700

Eat better, do good.

H1DM Sans · 28 · 700

The Sunday Roast issue

H2DM Sans · 22 · 600

A table worth keeping

BodyInter · 16/26 · 400

Soup dumplings worth the line. Order the crab roe ones and arrive before noon.

SmallInter · 14 · 400

Byline, metadata, secondary copy.

KickerInter · 11 · 600 · .22em

A Food Network For Everyone

Space & Shape

4px base, crisp corners, hairlines over shadows.

Spacing — 4px base

xs · 4

sm · 8

md · 12

lg · 16

xl · 24

2xl · 32

3xl · 48

4xl · 64

Radius & elevation

sm·4

md·8

lg·14

pill

Flat · card · float. Editorial favors the small end — cards at 8.

Components

Quiet controls. Ink does the work; accents mark meaning.

Buttons

Primary · member · outline · text · disabled

Join the table Become a member

Follow Read the issue →Disabled

Tags & labels

Endorsement, never criticism

Tastemaker Editor’s Pick Feeds 1 Meal Chinatown Members Only

Inputs

Default · focus · error

Handle

@maya.eats

Password

••••••

At least 8 characters.

Search & filters

Discovery controls

Search places, dishes, people

AllNear meTastemakersNew

Feed

Map

List rows

People & settings

Maya Patel

@maya.eats · Tastemaker

Joe’s Shanghai

Chinatown · 0.3 mi

›

Notifications

Weekly issue, mentions

›

Avatars

Tastemaker = amber ring

Counters

♡ 184❏ 62Feeds 1 Meal

Notices & toast

Feedback surfaces

A new issue is live. Five tables worth your weekend.

You fed 3 meals this week through your saves.

✓ Saved to your collection

Empty state

Calm, editorial

Nothing saved yet

Bookmark a table and it’ll live here, ready for your next reservation.

Explore the feed

Interaction states

Element	Default	Hover / Press	Selected	Disabled
Primary button	Ink	Espresso	—	Linen / Ash
Member button	Plum	Plum Deep	—	Linen / Ash
Chip / filter	Hairline	Ink text	Ink fill	Ash
Input	Hairline	—	Plum ring	Linen
Tab item	Ash	Ink	Ink	—

Patterns

The system assembled. Full screens live in Screens →

Feed card

Maya Patel

@maya.eats · Tastemaker

◷ Joe’s Shanghai · Chinatown

Soup dumplings worth the line

Order the crab roe ones and arrive before noon — the broth is brightest in the first seating.

♡ 184❏ 62Feeds 1 Meal

Mission lockup (WCK)

In partnership with feed collective

Donate meals

Tab bar — Instagram-style

Modern Instagram-style (2025 reorg): Home · Reels · DMs · Search · Profile. Icon-only, monochrome — active = ink filled glyph, rest = ash outline. Profile is the user’s avatar (ink ring when active). Create “+” moved out of the bar up to the top — no colored center button.

Mission & Relief

Activating the network for World Central Kitchen disaster relief — content, donations, restaurant activation.

WCK mark & status

Authentic red — mark + live status only

On the ground

Impact stats

Headline metric in plum

412,809

Meals

1,240

Restaurants

Zones

Donate — $ → meals

Selected = plum

$10

25 meals

$25

65 meals

$50

130

Donate meals

Restaurant activation

Amber = network / activation

Activate your restaurant

Join 1,240 kitchens cooking for relief.

Color discipline: red = WCK mark + live status · plum = donate / impact · amber = activation. Full relief flows in Screens →