Logo of BeanThere

Style Guide for BeanThere

This is a style guide for IAT 339 P1 by Christine An. The company that I chose is a made up coffee company called BeanThere, and their main service is to sell coffee beans.

The font that was selected is a font called "Flaviotte". This serif font gives the branding a retro and also sophisticated mood. The colour palette for BeanThere also reflect a colourful and retro vibe, and the use of brown being the main colour alludes to the coffee beans.

Font: Flaviotte

Interactive Elements

In-text link

There are four main types of coffee beans: Arabica, Robusta, Liberica, Excelsa. Learn more about the differences here

Navigation Link

CSS selector:

.button-nav

Rendered element:

Default Button

Text Input Field with Label





Image as a Link

coffee bean bag with pink packaging

Text Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Numbered Lists: Bean Types

  1. Arabica: "Bean in Love"
  2. Robusta: "Jumping Bean"
  3. Liberica: "Done That"

Combined Elements

Main Navigation

Product/Service Listing

coffee bean bag with pink packaging

"Bean In Love" Beans

Add To Cart

Citations