UGArden Herbs Style Guide

We built our style guide using a mixture of fonts and colors already being used by UGArden, and additional elements we created. The goal of our style guide is to create a cohesive visual identity for the medicinal herb program.


Colors

Our color scheme is based on some of the colors already used on the garden’s branding (All green shades, Muted Brown, Charcoal and Cloud) and colors inspired by important elements of the garden (Paper Bag, Tulsi, Calendula, Rose, Echinacea).

Primary colors should be used for major elements like backgrounds.

Dusty Green: HEX #CFDE80

Muted Brown: HEX #787063

Secondary colors are appropriate for smaller elements. Cloud and Charcoal are appropriate for contrasting backgrounds, and Leaf Green and Paper Bag are better suited for icons and smaller visual elements.

Cloud White: HEX #FFFFFF

Leaf Green: HEX #889E53

Brown Paper: HEX #D9CFC6

Charcoal: HEX #000000

Tertiary colors should be used sparingly for accents only, which can include small elements and items such as links.

Rose: HEX #D40424

Echinacea: HEX #C3729B

Meadow Green: HEX #B8D443

Calendula: HEX #FFCC01

Tulsi: HEX #D0C2D4


Fonts used
Font sizes

Typography

Creating a cohesive brand identity includes sticking with a few fonts across all platforms. Our typography scheme is simple and straightforward.

“Muli” (Regular weight) should be used for body text, which includes tabs, product descriptions and other large bodies of text. This font is also available through Google Fonts.

Substitutes: Open Sans

“Futura PT Condensed” (Bold weight) corresponds to “Herbs” in the herb garden logo, Futura BdCn BT, which is a slight variation.) This font should be used for all headings.

Substitutes: Oswald, Balboa

“Muli” and “Futura PT Condensed” are both available on Adobe Fonts.


Logos

We added “Herbs” to the existing UGArden logo. This gives more weight to the herb garden as it’s own entity. The illustration above “Ugarden” is a stylized Tulsi (or Holy Basil) leaf, an herb featured in many of the teas and a nod to the subject of Noelle’s master thesis. The shades are “Leaf Green” and “Muted Brown.”

.eps

An .eps will only open with Adobe Illustrator. A designer can use this type of file to edit colors and other parts of the logo.

Can be accessed here: https://drive.google.com/file/d/1JSt1eyFrG9CILFNDNokW1LqrO4W2CdrX/view?usp=sharing

https://drive.google.com/file/d/1J_jKJHEoQR_qtSQ89I7y1VKkiUPZrgcj/view?usp=sharing

.jpg

The most user friendly, A .jpg file has a white background and can be placed in documents and emails.

.png

A .png has a transparent background, and should only be placed over a light background, like “Cloud” or “Brown Paper.”