Design systemJump to
{{ g.title }}
Component repo
Foodfeed · atomic design · 5 tiers
Atoms› Molecules› Organisms› Templates› Pages
1Atoms
The decisions, not the parts. Nothing below this divides any further.
Colour · 8 tokens
Ink
#1B1714
Ink soft
#514A45
Muted
#7C736D
Subtle
#8A817B
Hairline
#BEC3C9
Surface
#F0F2F5
Paper
#FFFFFF
Amber
#F2A93B
Type · Poppins for display, SF Pro for text
Foodfeeddisplay · 34/41
Zesty Shrimpheading-md · 22/28
Garlicky and butterybody · 17/22
35 min · 520 caldetail · 15/20
Reviewed 9 days agocaption · 12/16
Radius · one corner shown
18 · card
24 · field
30 · CTA
999 · pill
Elevation
card lift
tab lift
Icon · 26px stroke 2.1–2.3, or solid at 47 viewBox
Motion · one curve, cubic-bezier(.22,.61,.36,1)
ffScreen 200msffTurn 260ms.ffrail 300ms ffPopffFadeffStaggerffDot
2Molecules
Atoms bonded into one job. Each has a single state machine and no layout opinion.
Chip
rest · selected — chipStyle()
Ingredients Steps
Segmented tabs
active · rest — tabPill()
Search recipes
Search field
one flat pill, no border, no lift — .ffsearch
4.8·35 min
Meta row
star · rating · dot · time
Icon buttons
save · add feed · bell with unread
Continue
Secondary Compact
Button
CTA 54 · standard 50 · compact 40 — Poppins 400
3Organisms
Molecules assembled into a section that can stand on its own page.
Zesty Shrimp Linguine
4.8·35 min
Recipe card
image-slot + save button + title + meta row. The unit the whole feed is made of.
9:41
Status bar
live device clock, colour inverts per screen
Bottom nav
4 destinations, current one solid — shown on 6 of 15 screens
Foodfeed
🔥 Trending For you Dinner
Mediterranean · no peanuts · no cilantro Edit
Feed header
brand + bell · chip row · preference read-back
4Templates
Five skeletons carry all fifteen screens. Structure only — no copy, no photography.
{{ t.name }}
{{ t.note }}
{{ t.usedBy }}
5Pages
Templates with the real thing in them. Click any tile to open that screen — the one you are on is highlighted.
{{ p.label }}
{{ p.template }}
{{ statusTime }}
Foodfeed
{{ signinError }}
Forgot password?
New to Foodfeed? Create an account
Foodfeed
Already have an account? Sign in

Hey {{ greetName }} 👋

Three quick questions to tailor your feed.

Diet style
How you like to eat
Allergies
What to keep out of your feed
Eating goals
What you're cooking toward
Your preferences are private and secure.
Skip
Step 1 of 3

Choose your diet style

Pick any that fit how you like to eat.

Skip
Step 3 of 3

Any food allergies?

No matches found.
Ingredients you add will show up here.
Skip
Step 2 of 3

Any eating goals?

Coming soon
Now cooking
{{ recipe.name }}
{{ cookTimer }}
total time
1 {{ cookStepLabel }}
{{ cookStep1 }}
Guided cooking is on the way
We'll walk you through every step with timers that start themselves — so your hands stay on the food, not your phone.
Want early access? Notify me
Foodfeed
{{ prefSummaryLine }} Edit

{{ p.title }}

No recipes here yet
{{ p.emptyNote }}
{{ r.name }}
{{ r.rating }}·{{ r.timeLabel }}

What are you in the mood for?

Pin any of these and it becomes a tab on your feed.

Meal type
Cravings
Time
Goals
Dietary preferences
Synced with the diet style you picked when you signed up.

{{ recipe.name }}

{{ recipe.authorInitials }}
By {{ recipe.author }}
⏱️
{{ recipe.timeLabel }}
Total time
🍽️
{{ recipe.difficulty }}
Difficulty
🔥
{{ recipe.cal }}
Calories

{{ recipe.desc }}

Ingredients
{{ servings }} servings
{{ i.text }}
{{ stepCount }} steps
{{ s.n }}
{{ s.text }}
{{ recipe.rating }}
{{ recipe.reviews }} reviews
5
4
3
2
{{ rv.initial }}
{{ rv.user }}
YOU
{{ rv.when }}
{{ rv.stars }}
{{ rv.text }}
Leave a review
{{ reviewHint }}
Calories {{ recipe.cal }}kcal
{{ n.label }} {{ n.value }}
Percent values are based on a 2,000 calorie diet.
PEOPLE
FILTER BY INGREDIENT
Recently viewed
{{ r.name }}
{{ r.rating }}·{{ r.timeLabel }}
Cooking with
People
{{ discoverPeopleCount }}
{{ p.initials }}
{{ p.name }}
{{ p.handle }}
{{ p.stats }}
{{ p.bio }}
{{ r.name }}
{{ discoverResultsTitle }}
{{ discoverResultsCount }}
{{ r.name }}
{{ r.rating }}·{{ r.timeLabel }}
{{ r.matchLabel }}
Nothing matches that yet
Try one ingredient at a time, the name of a dish, or a cook's username.
🚫{{ discoverSkipNote }}
Cooks to follow
Search a name to find more
{{ p.initials }}
{{ p.name }}
{{ p.handle }}
{{ p.stats }}
{{ p.bio }}
{{ r.name }}
Sous
{{ assistStatus }}

{{ assistHeadline }}

Tell me what you’re in the mood for, what’s in your fridge, or a dish you want to nail.

SOUS
{{ m.text }}
{{ r.name }}
{{ r.rating }} · {{ r.timeLabel }} · {{ r.cal }} cal
{{ r.why }}
{{ m.noteIcon }}{{ m.note }}
Filtered for your allergies and dislikes.

Saved

{{ savedSummary }}

{{ c.sourceLabel }}
{{ c.name }}
{{ c.metaA }}·{{ c.metaB }}
Nothing saved yet
Tap the bookmark on any recipe and it lands here.
J
Jordan Lee
@jordancooks
{{ followerCount }}
Followers
{{ followingCount }}
Following
{{ myRecipeCount }}
Recipes
{{ c.name }}
{{ c.rating }}·{{ c.timeLabel }}

Notifications

{{ unreadNotifs }} new since you last looked

{{ n.initials }}
{{ n.who }} {{ n.action }} {{ n.subject }}
{{ n.body }}
{{ n.when }}
You're all caught up
Likes, comments and new followers land here.
Menu
My dietary preferences
My eating goals
My allergies
Log out