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.
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
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.
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.”
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
The most user friendly, A .jpg file has a white background and can be placed in documents and emails.
A .png has a transparent background, and should only be placed over a light background, like “Cloud” or “Brown Paper.”