Home Interactive Elements Text Styling Combined Elements Product Branding Ideas Brand Components Citations

P01 Style Guide

Interactive Elements

In-text Link

This is an in-text link.

Sample Code

<a href="#">This is an in-text link.</a>

Navigation Link

Sample Code

<nav>
     <a href="#">Navigation 1</a>
     <a href="#">Navigation 2</a>
     <a href="#">Navigation 3</a>
</nav>

Submit and Reset Button

Sample Code

<input class="submit-button" type="submit" />
<input class="reset-button" type="reset" />

Text Input Field and Label

Sample Code

<label for="input">Last Name</label>
<input class="input" type="text">

Radio Button and Label

Visa Master AMEX

Sample Code

<input type="radio" name="method" value="visa" checked>Visa
<input type="radio" name="method" value="Master">Master
<input type="radio" name="method" value="AMEX">AMEX

Image as a Link

Sample Code

<a href="#home"><img src="image/home.png"/></a>

Text Styling

Four Levels of Headings

Heading 1 (Page title)

Heading 2 (Section title)

Heading 3 (Sub-section title)

Heading 4 (Secondary sub-section title)

Sample Code

<h1>Heading 1 (Page title)</h1>
<h2>Heading 2 (Section title)</h2>
<h3>Heading 3 (Sub-section title)</h3>
<h4>Heading 4 (Secondary sub-section title)</h4>

A Paragraph

This company offers all kinds of loose tea leaf / tea bags and other tea products and this website is an online store for customers shopping online and receiving at home. The potential customers are tea lovers who have passion for all kinds of tea and are tired of traditonal tea. This company offers creative kinds of tea that are different from tradional single-flavoured ones. The product contains thousands kinds of tea, either single flavour or mixed flavour.

Sample Code

<p>This company offers all kinds of loose tea leaf / tea bags and other tea products and this website is an online store for customers shopping online and receiving at home. The potential customers are tea lovers who have passion for all kinds of tea and are tired of traditonal tea. This company offers creative kinds of tea that are different from tradional single-flavoured ones. The product contains thousands kinds of tea, either single flavour or mixed flavour.</p>

Numbered List

  1. This company offers all kinds of loose tea leaf / tea bags and other tea products and this website is an online store for customers shopping online and receiving at home.
  2. The potential customers are tea lovers who have passion for all kinds of tea and are tired of traditonal tea.
  3. This company offers creative kinds of tea that are different from tradional single-flavoured ones. The product contains thousands kinds of tea, either single flavour or mixed flavour.

Sample Code

<ol>
     <li>This company offers all kinds of loose tea leaf / tea bags and other tea products and this website is an online store for customers shopping online and receiving at home.</li>
     <li>The potential customers are tea lovers who have passion for all kinds of tea and are tired of traditonal tea.</li>
     <li>This company offers creative kinds of tea that are different from tradional single-flavoured ones. The product contains thousands kinds of tea, either single flavour or mixed flavour.</li>
</ol>

Combined Elements

Main Navigation

Home Interactive Elements Text Styling Combined Elements Product Citations

Sample Code

<div class="navbar">
     <a href="#home">Home</a>
     <a href="#interactive-elements">Interactive Elements</a>
     <a href="#text-style">Text Styling</a>
     <a href="#combined">Combined Elements</a>
     <a href="#product">Product</a>
     <a href="#citation">Citations</a>
</div>

Product List

Loose Tea Leaf

Mug

Billing Address




Payment

Visa
Master
AMEX

Cart 4

Product 1 $15

Product 2 $5

Product 3 $8

Product 4 $2

Total $30

Branding Ideas

  1. This company offers all kinds of loose tea leaf / tea bags and other tea products and this website is an online store for customers shopping online and receiving at home.
  2. The potential customers are tea lovers who have passion for all kinds of tea and are tired of traditonal tea.
  3. This company offers creative kinds of tea that are different from tradional single-flavoured ones. The product contains thousands kinds of tea, either single flavour or mixed flavour.

Brand Components

Fonts

Barlow Semi Condensed

Regular, Bold

Colors

Background

Main Headings

Headings

Code Block Color

Art Direction

Citations