FarmTable Design System

FarmTable Design System mockup preview
Click to expand

FarmTable is a rustic, farm-to-table design system built for local food sourcing and farm-to-table platforms. It embraces authenticity and honesty through earthy tones, sturdy slab-serif typography, and a flat-with-borders elevation model. Every element reflects the transparency and groundedness of knowing where your food comes from.

Primary#92400E
Secondary#4D7C0F
Tertiary#0284C7
Background#FAFAF5
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Arvo · 30px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Arvo · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Arvo · 20px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Arvo · 16px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyOpen Sans · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallOpen Sans · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoFira Code · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

FarmTable is a rustic, farm-to-table design system built for local food sourcing and farm-to-table platforms. It embraces authenticity and honesty through earthy tones, sturdy slab-serif typography, and a flat-with-borders elevation model. Every element reflects the transparency and groundedness of knowing where your food comes from.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterIn SeasonLimitedOut of SeasonCertified

Elevation & Depth

sm
md
lg
focus

Do's & Don'ts

Do

use Arvo slab-serif for all headings to convey the sturdy, honest character of the brand.
relly on borders rather than shadows for card elevation — flat design reinforces authenticity.
display farm origin, distance, and certifications prominently on every product card.
use the tertiary sky blue exclusively for links and informational badges, never as decoration.
include map or distance indicators when displaying farm/source information.
use monospace for weights, lot numbers, and pricing to ensure legibility and alignment.

Don't

introduce glossy gradients or high-contrast neon colors; they contradict the earthy palette.
hide seasonal availability information — it should be visible as a status chip at all times.
overcrowd product listings; each item should have space for farm name, location, and description.
auto-crop farm photography — show the authentic context of the product origin.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.5 KB
Downloads 0
clean food landing-page organic warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/farmtable and implement it in my code

Don't have the MCP? Install it here