For a one-week project, I was tasked with creating a style guide to be used as the primary design reference for the layout of two delicious recipes. These delicious recipes were provided by Maya and Nick, who needed a cohesive design system to properly display them in a way that's clear, concise, and easily readable.

recipes_mockup_sfwrecipes_mockup_sfw

STYLE GUIDE

Maya's Colors

#EAD9D9
R: 234 G: 217 B: 217
C: 3.69 M: 14.77 Y: 8.36 K: 0

#000000
R: 0 G: 0 B: 0
C: 100 M: 100 Y: 100 K: 100

Nick's Colors

#CEFBE9
R: 206 G: 251 B: 233
C: 23.49 M: 0 Y: 14.58 K: 0

#000000
R: 0 G: 0 B: 0
C: 100 M: 100 Y: 100 K: 100

Typefaces Header

Pull quotes: Georgia Bold Italic, 45.5/59pt.
Headlines: Avenir Heavy, 13.5/17pt.
Body Copy: Avenir Book, 9/13.5pt.

Page Number: Avenir Medium, 7/12pt.
Folio: Avenir Light, 7/12pt.

Standards

• All of the copy should be left-justified.

• The left page should always be black, while the right should be the secondary color.

• Use tabs to right-justify the number amount of every ingredient, as well as each numbered step in the directions to 0.1875 in.

• Use tabs to left-justify each ingredient name, as well as each direction to 0.375 in.

• The ingredient section should be covered with a black bar, while the copy uses be the primary color.

• The directions are ordered in a numbered list.

• Only the intro paragraph may use hyphenation if needed.

• The structure should be based on a 2 column, 6 row grid.

recipe1_mockup1_sfwrecipe1_mockup1_sfw
recipe2_mockup1_sfwrecipe2_mockup1_sfw