Styleguide

This page lists out all the design tokens and elements used on this website.

Table of Contents

  1. Design Tokens
    1. Colours
    2. Sizes
    3. Fonts
  2. Design Elements
    1. Headings
    2. Paragraph
    3. Inline Elements
    4. Tables
    5. Lists
  3. Components
    1. Notice Component
    2. Card Component
    3. Titled List Component
    4. Image Grid Component
    5. Auto Grid Component

# Colours back to TOC

  • Black

    #000000

  • 80%

  • 60%

  • 40%

  • 20%

  • Pea Green

    #5c604f

  • 80%

  • 60%

  • 40%

  • 20%

  • Red

    #cc0000

  • 80%

  • 60%

  • 40%

  • 20%

  • Yellow

    #ffb133

  • 80%

  • 60%

  • 40%

  • 20%

  • Off White

    #f8f7f1

  • 80%

  • 60%

  • 40%

  • 20%

  • White

    #ffffff

  • 80%

  • 60%

  • 40%

  • 20%

# Sizes back to TOC

Gigantic
Large
Medium
Small
Tiny
What are these?

Rather than refer to pixel amounts when describing or talking about the size of design elements, a handful of named sizes have been chosen and are used consistently through the design for padding, margins, borders, etc.

They have been defined such that they will scale with the visitor’s device, presenting plenty of breathing room for wide monitors and conserving whitespace for smaller screens.

Fluid Size Scale values

Values generated using clamp() Calculator with the following values:

Root Font Size
16px
Viewport Widths
700px – 1600px
Sizes (px)
64 – 72
36 – 42
20 – 24
10 – 12
 5 –  6

# Fonts back to TOC

Proxima Vara
Proxima Vara
Proxima Vara
Proxima Vara
Proxima Vara
Proxima Vara
Proxima Vara
Proxima Vara
Proxima Vara
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms
TT Norms

# Headings back to TOC

Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Why these font sizes?

One component of a strong design is to establish a hierarchy of content on a given page. More often than not, this is done through the use of headings to denote sections, subsections, etc. of content.

As a result, it is important that headings be presented clearly and that their size indicates their importance to the page in relation to the content and other headings. What helps in establishing this visual hierarchy is to use a type scale, or a ratio that is shared between each step in the hierarchy. This ensures a natural step in visual importance for each section and associated heading.

For this website, one type scale (1.2) is employed for the minimum sizes and another (1.414) is employed for the maximum sizes. This means that towards smaller screens, there is less variance between each step, and towards wider screens, more variance, appropriately taking advantage of space.

With a type scale of 1.2 and a starting font size of 16, the resulting hierarchy of font sizes are:

  • 16
  • 19.2    (1.2 × 16)
  • 23.04    (1.2 × 19.2)
  • 27.648    (1.2 × 23.04)

With a type scale of 1.414 and a starting size of 20, the resulting hierarchy of font sizes are:

  • 20
  • 28.28    (1.2 × 20)
  • 40    (1.2 × 28.28)
  • 56.56    (1.2 × 40)

So, top-level headings, for example, will display at a minimum size of 27.648 pixels, maximum size of 56.56 pixels, and, depending on the width of the browser, will display at a size equal to or between the minimum and maximum. And because the font sizes are dynamic, this means that a clear visual hierarchy is established whether the visitor is using a small screen, wide screen, or anything in between.

Fluid Type Scale values

Values generated using clamp() Calculator with the following values:

Root Font Size
16px
Viewport Widths
700px – 1600px
Type Scales
Min: Minor Third (1.2)
Max: Augmented Fourth (1.414)
Font Sizes (px)
27.65 – 56.56
23.04 – 40.00
19.20 – 28.28
16.00 – 20.00
14.00 – 16.00 (Custom)

# Paragraph back to TOC

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

# Inline Elements back to TOC

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

This text is deleted and This text is inserted

This text has a strikethrough

This text has been highlighted

This text is smaller

Abbreviation: BMI

Acronym: Amrap

Quotation: a short inline quotation

Definition: calorie

Underlined text

Circle #1

Circle #2

# Tables back to TOC

Heading A Heading B Heading C
Subheading 1 Cell A-1 Cell B-1 Cell C-1
Subheading 2 Cell A-2 Cell B-2 Cell C-2
Subheading 3 Cell A-3 Cell B-3 Cell C-3
Foot A Foot B Foot C

# Lists back to TOC

Unordered

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Ordered

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

# Notice Component back to TOC

Information

We are happy to let you know that ________!

Notice

Unfortunately, ________.

Critical!

We will be closed on ________!

# Card Component back to TOC

  1. About Us

  2. Memberships

  3. Visit Us

  4. Training Programs

# Titled List Component back to TOC

Default

  1. Fat Loss

  2. Maintenance

  3. Muscle Gain

With Images

  1. Fat Loss

  2. Maintenance

  3. Muscle Gain

# Image Grid Component back to TOC

This component works best with 12 items (divides cleanly by 4, 3, 2):

# Auto Grid Component back to TOC

Aside & Content

40%
60%

Aside & Content Variation: grid spacing = page spacing

40%
60%

2-column Grid

4-column Grid

6-column Grid

Combination Grid