The Design System · v0.2

The high-end food network. An editorial system on ink-and-ivory, a Didot masthead, and a rationed purple-and-orange accent pair.

Curated·Trusted·Good
02

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.

03

Typography

A Didone for voice, a grotesque for utility, a tracked kicker as signature.

Playfair Display
Display / Editorial
Masthead, headlines, pull quotes. Didot on iOS.
Inter
Body / Interface
Reading text, labels, controls.
MastheadPlayfair · 44 · .18em
FEED CO.
DisplayPlayfair · 34/40 · 800
Eat better, do good.
H1Playfair · 28 · 700
The Sunday Roast issue
H2Playfair · 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
The High-End Food Network
04

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.

05

Components

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

Buttons

Primary · member · outline · text · disabled

Tags & labels

Endorsement, never criticism
Tastemaker Editor’s Pick Feeds 1 Meal Chinatown Members Only

Inputs

Default · focus · error
@maya.eats
••••••
At least 8 characters.

Search & filters

Discovery controls
AllNear meTastemakersNew
Feed
Map

List rows

People & settings
Maya Patel
@maya.eats · Tastemaker
Follow
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
ElementDefaultHover / PressSelectedDisabled
Primary buttonInkEspressoLinen / Ash
Member buttonPlumPlum DeepLinen / Ash
Chip / filterHairlineInk textInk fillAsh
InputHairlinePlum ringLinen
Tab itemAshInkInk
06

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)
WCK
In partnership with
World Central Kitchen
Donate meals
Tab bar
Home
Discover
+
Saved
Profile

Active = ink, rest = ash. Center post = plum (the one filled element).