Style Guide Template

Interactive Elements

In-text link

Sample code:

<p>Here is a <a href="http://randomcolour.com/"> link to fun website!</a></p>

Rendered element:

Here is a link to fun website!

Navigation Link

CSS selector:

.button-nav

Sample code:

<a class="button" href="#">Navigation Button</a>

Rendered element:

Navigation Button

Text Input Field with Label

CSS selector:

.form-section

Sample code:


          <form method="post" action"#" class="form-section">
            <label for"comment-form">Let us know what you think!</label>
            <input type="text" id="comment-form" placeholder="Leave a comment">
            <button>Post</button>
          </form>

Rendered element:

Image as a Link

CSS selector:

.img-link

Sample code:


          <figure>
          <a href ="https://www.breka.ca/our-selection" class="img-link"><img src="img/coffeecombo.png" width="500" height="500" alt="https://www.breka.ca/our-selection"></a>
          <figcaption>click to find out more about our current beverage and food promotions!</figcaption>
          </figure>

Rendered element:

https://www.breka.ca/our-selection — click to find out more about our current beverage and food promotions!

Text Elements

Headings

Sample code:


          <h2>Heading 2</h2>
          <h3>Heading 3</h3>
          <h4>Heading 4</h4>
          <h5>Heading 5</h5>

Rendered element:

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

Sample code:


          <p>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.</p>

Rendered element:

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

Sample code:


          <ol> 
            <li><p>List item one</p></li>
            <li><p>List item two</p></li>
            <li><p>List item three</p></li>
          </ol>

Rendered element:

List item one
List item two
List item three

Combined Elements

Main Navigation

CSS grid:

.grid .two-column-nav .four-column-nav

CSS selector:

.button-nav

Sample code:


          <nav class="grid two-column-nav four-column-nav">
            <a href="[...]" class="button-nav">Home</a>
            <a href="[...]" class="button-nav">Menu</a>
            <a href="[...]" class="button-nav">About</a>
            <a href="[...]" class="button-nav">Contact</a>
          </nav>

Rendered element:

Product/Service Listing

CSS grid:

.grid .two-column-item

CSS selector:

.product-item

Sample code:


          <section class="grid two-column-item">
          <section class="product-item">
          <h3>Caramel Pudding</h3>
          <h4>6.95</h4>
          <figure>
            <img src="img/pudding.png" width="500" height="500" alt="Pixelated drawn caramel pudding">
          </figure>
          </section>
          </section>

Rendered element:

Caramel Pudding

6.95

Black Coffee

2.95

Product/Service Description

Written Description

The service would be an open late internet cafe. The cafe would serve a mixture of beverages, snacks and afforable appetizers.It combines a home-y / gamified style to have an overall retro feel to appeal to students and encourage a sense of community.

Colour Palettes & Fonts

Colour Palette

Cream: rgb(245, 245, 218)
Off Black: rgb(44, 52, 57)
Soft Yellow: rgb(253, 218, 125)
Orange: rgb(246, 160, 59)
Green: rgb(135, 177, 172)

Fonts used

Headings/ titles

FK Raster Grotesk

Paraprahs/ other text

FK Grotesk

Art Direction & Imagery

Overall Art Direction:

Aimed to create a style/ branding that aligns with the unique aspect of the service (being an open late internet cafe) through referencing a gaming design aspects. To make a bit more eye-catching and unique, create a retro gaming theme. (As seen in the reference images below) More references can be found on my figma moodboard https://www.figma.com/file/w8XSmtikDBohwgZB7DPmAt/Project-1-Art-Direction?type=design&node-id=0%3A1&mode=design&t=E07yO47fqPNBfAxt-1

Game over text with pacman icons surrounding

90s retro themed rectangles, one blue and one green

Citations

Bert Bos. (Author). (2021). Centering Things [Website]. Retrieved from https://www.w3.org/Style/Examples/007/center.en.html#:~:text=Centering%20a%20block%20or%20image&text=The%20way%20to%20do%20that,width%3A%208em%20%7D%20%E2%80%A6.
Coolvector. (n.d.). Hand drawn flat nostalgic 90’s instagram posts. Freepik. Freepik Company S.L. Retrieved from //www.freepik.com/free-vector/hand-drawn-flat-nostalgic-90-s-instagram-posts_17539259.htm?query=social+media+post+++social+post&epik=dj0yJnU9akhxNGNmMHBGUWZaVHlDdlZLYmdHSkJkZHZvWVlhc3cmcD0wJm49WXM4Q21TQkZVTWZoYkE3R0xpY3RLdyZ0PUFBQUFBR1VmdVpr.
Google Developers. (publisher). (n.d.). Styling forms [Website]. Retrieved from https://web.dev/learn/forms/styling/.
Květoslav Bartoš. (Designer). (2018). FK Grotesk [Typeface]. Retrieved from https://fonts.floriankarsten.com/fk-grotesk.
Květoslav Bartoš. (Designer). (2019). FK Raster Grotesk [Typeface]. Retrieved from https://fonts.floriankarsten.com/fk-raster-grotesk.
MacDonald, K. (2020). Pac-man. The Guardian. Guardian Media Group. Retrieved from //www.theguardian.com/games/2020/may/29/from-street-fighter-to-sonic-the-hedgehog-10-of-the-best-retro-games?CMP=fb_gu&utm_medium=Social&utm_source=Facebook&fbclid=IwAR30PhAJOlYWtaNts3fZy17y10_81ka-f0u6eh2ZRf97YiVLkh1uBVz1H4A#Echobox=1590766578.
Mozilla. (Publisher). (1998-2023). drop-shadow() [Website]. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow.
Pinterest, Inc. (n.d.). Pinterest. Retrieved from //www.pinterest.ca/pin/809240626819717282/.
Pinterest, Inc. (n.d.). Pinterest. Retrieved from https://www.pinterest.ca/pin/809240626819717267/.
Pinterest, Inc. (n.d.). Pinterest. Retrieved from //www.pinterest.ca/pin/809240626819717271/.

Interactive Elements

In-text link

Sample code:

Rendered element:

Navigation Link

CSS selector:

Sample code:

Rendered element:

Text Input Field with Label

CSS selector:

Sample code:

Rendered element:

Image as a Link

CSS selector:

Sample code:

Rendered element:

Text Elements

Headings

Sample code:

Rendered element:

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

Sample code:

Rendered element:

Numbered Lists

Sample code:

Rendered element:

Combined Elements

Main Navigation

CSS grid:

CSS selector:

Sample code:

Rendered element:

Product/Service Listing

CSS grid:

CSS selector:

Sample code:

Rendered element:

Caramel Pudding

6.95

Black Coffee

2.95

Product/Service Description

Written Description

Colour Palettes & Fonts

Colour Palette

Cream: rgb(245, 245, 218)

Off Black: rgb(44, 52, 57)

Soft Yellow: rgb(253, 218, 125)

Orange: rgb(246, 160, 59)

Green: rgb(135, 177, 172)

Fonts used

Headings/ titles

FK Raster Grotesk

Paraprahs/ other text

Art Direction & Imagery

Overall Art Direction:

Citations