Reference

Field-guide design system

The visual grammar behind Cocktail Pokédex — a restrained naturalist palette, editorial typography, and small components that make AI-drafted recipes feel trustworthy and worth keeping.

← Back to prototype

Palette

Foxed paper, ink, forest, oxblood, tobacco, sage. No purple, no glass.

Paper#F2EADA
Paper deep#E5D9BF
Ink#141210
Ink soft#4A3F35
Forest#2F4A37
Oxblood#7A2A2A
Tobacco#A67A3D
Sage#B8C2A8

Typography

Fraunces (display) + Inter (UI). Small-caps for taxonomy. Italic Fraunces for hand-annotation.

Display H1 · Fraunces
Jungle Bird
Display H2 · Fraunces
Mistah Shojo, Brooklyn
Body · Inter

Bitter, smoky, not sweet. The Campari cuts through the blackstrap.

Taxonomy · small-caps
Family · Method · Glass
Annotation · italic Fraunces
↳ Menu reads "bitter red liqueur" — Campari assumed.
Specimen number
№ 014

Confidence + AI review

Three states. Needs-review fields earn the oxblood band and an italic annotation.

CocktailHigh
Jungle Bird
GarnishMedium
Pineapple frond, lime wheel
Bitter redNeeds review
¾ oz Campari
Menu reads 'bitter red liqueur' — Campari assumed.
HighMediumNeeds review

Trust comes from showing the work: every AI guess carries a chip, and review-state fields make the user the editor, not the receiver.

Buttons, chips, rating, step indicator

AllStirredShakenTiki
4 of 5
Photo
2
Menu
3
Review

Specimen card anatomy

01№ stamp

Specimen number in serif, oxblood, top-left.

02Hero photo

4:5 plate. Falls into paper via gradient.

03Taxonomy row

Family · Method · Glass in small-caps.

04Ingredient list

Numbered, serif, hairline separators.

05Field notes

Italic Fraunces — sounds like your voice.

06Rating + tags

Coupe glasses, never stars.

States

Missing photo, empty Dex slot, needs-review banding.

Photo unavailable
№ ???
Needs review
Bitter red liqueur?
↳ Tap to confirm or replace.