close

Design System Usage

This website is built using the Foot by Foot Orthotics fork of the 2H Design System by 2H Media.
Learn more about 2H Media

Introduction

What is a design system?

In very general terms, a design system is a component library paired with a set of usage instructions. Together, they can be used to rapidly develop new web content which is expandable and consistent.

Atomic Design

The 2H Design system by 2H Media is based on the principles of Atomic Design. The elements that make up an atomic design system include:

  • Containers: Elements that hold any number of other elements.
  • Atoms: Single Components
  • Molecules: Small groups of Atoms that do not stand alone - helpers for more complex elements.
  • Organisms: More complex groups of Atoms and Molecules that stand on their own - they do not require additional atoms or molecules to function.
  • Templates: Collections of organisms arranged to make up a complete webpage devoid of content.
  • Pages: Filled templates that are served to visitors of the website.

This usage guide walks through Containers, Atoms, Molecules, and Organisms. By understanding how they fit together, a designer can build a template that a copy writer can fill out to create a finished webpage.

Jump To Section

Containers

The Canvas of the Website

A Container is a full horizontal element which contains a collection of content. Atoms, Molecules and Organisms must always be placed within a Container. As the screen size gets smaller or larger, the content inside a Container adjusts to the width of the screen, making the website "responsive".

Types of Containers

The 2H Design system uses 4 types of Containers:

  • .thds-container The standard container for most content. It has wide margins on all sides allowing for optimal readability for written content.
  • .thds-container .thds-container_width_wide The wide container for most content. It inherits all styles from the standard container but has narrower left and right margins to accommodate molecules and organisms which may require more space.
  • .thds-container .thds-container_width_full The full-width container. It inherits all styles from the standard container but has no left and right margins, allowing for full-width elements such as hero images.
  • .thds-container .thds-container_width_full .thds-container_colorful The colorful container. It inherits all styles from the full width container and should contain a standard container or a wide container. It features a full-width colored background to visually represent a distinctly different section. The color can be chosen be adding any of the following classes:
    • .thds-container_colorful_Primary
    • .thds-container_colorful_Secondary
    • .thds-container_colorful_Tertiary
    • .thds-container_colorful_UI-2

Atoms

The building blocks of the website

An Atom represents the simplest type of element - it cannot be divided further into multiple meaningful elements. All visible and/or interactive parts of the website are made up of Atoms.

Types of Atoms

The 2H Design system uses several types of Atoms:

Typography

A uniform type system

To allow for a variety of different sized components, the design system includes several type styles that share a consistent sizing scheme.

Available Font Sizes & Weights

The following visual representations include all of the typography classes that can be used within the design system.

type-display-2xl

type-display-xl

type-display-l

type-display-m

type-display-s

type-heading

type-subheading

type-body-xl

type-body-l

type-body

type-body-s

Note that each of the above type styles can be applied to either a heading or a text block. The design is independent from the markup.

Cards

Create additional distinction

A Card is similar to a Container in that it contains a collection of content. However; a Card must always be placed within a Container, just like any other Atom. A card features a distinct border to separate or group specific types of content.

Types of Cards

The 2H Design system uses 3 types of Cards:

  • .thds-card The standard Card. It features a drop-shadow and slightly rounded corners.
  • .thds-card .thds-card_no-padding The no-padding Card. It inherits all styles from the standard Card but has no padding allowing for content such as images to fill the entire Card.
  • .thds-card .thds-card_clickable The clickable Card. It inherits all styles from the standard Card and features a subtle hover effect to indicate that it can be used as a call to action.

Lists

Group sets of related items

Lists can be used to improve information hierarchy and disrupt dense content. Additionally, lists can be used in layout elements such as side bars to create additional structure.

Types of Lists

The 2H Design system uses 2 families of lists. Unordered lists group any set of related items. Ordered lists group only sets of ordered items such as steps in a set of instructions.

Unordered Lists

  • .thds-list The standard List. It is displayed in a vertical style and has no decoration.
  • .thds-list .thds-list_bulleted The bulleted List. It inherits all styles from the standard List but includes square bullets.
  • .thds-list .thds-list_display_inline The inline List. It inherits all styles from the standard List but is displayed horizontally.
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Ordered Lists

  • .thds-list .thds-list_numbered The numbered List. It inherits all styles from the standard List but includes numbered markers.
  • .thds-list .thds-list_display_inline .thds-list_numbered The inline numbered List. It inherits all styles from the standard List and inline list, and includes numbered markers.
  1. List Item
  2. List Item
  3. List Item
  1. List Item
  2. List Item
  3. List Item

Buttons

Visible Call to Action

A Button is the most important call to action on the website. Buttons draw attention to the highest value links that visitors can interact with. Each page should include at least 1 button.

Types of Buttons

The 2H Design system uses 2 types of Buttons:

  • .thds-button The standard Button. It features a strong brand color to immediately draw the eye of a visitor.
  • .thds-button .thds-button_secondary The secondary Button. It creates differentiation when two buttons are displayed together. The secondary button has lower priority than the standard button.
Button Text Link
Button Text Link

Badges

Highlight Information

A badge is typically used in a more complicated list. Badges clearly separate small pieces of content from their surroundings.

Types of Badges

The 2H Design system uses 2 types of Badges:

  • .thds-badge The standard Badge. It features a border to create separation. Additionally badge content does not wrap.
  • .thds-badge .thds-badge_clickable The clickable Badge. It inherits all styles from the standard Badge. Additionally, it features a strong brand color and a hover effect to indicate that it doubles as a call to action.
Badge Clickable Badge Badge Clickable Badge

IMages

Worth a thousand words

Images are a crucial part of any design system. To maintain propper spacing while displaying images, give each image the "thds-image" style.

The most basic call to action

To ensure that all links are styled using brand styles and colors, give each link the "thds-link" class.

Note that inline links must be created within a "Rich Text" Oxygen element instead of a "Text" Element. Accompanying copy text should be wrapped in a paragraph with an appropriate text class. See the following example:

<p class="type-body>
Text here <a href="" class="thds-link">Link - Rich Text</a> and here.
</p>

Text here Link - Rich Text and here.

Icons

Give content personality

Where icons are required, it is recommended that streamline app be used to generate icon code which can be copied into a Rich Text Oxygen element.

All strokes and fills should be removed from the in-line code, and the "thds-icon" class should be applied to the icon. 

Molecules

Bonded Atoms working together

A Molecule consists of a small number of Atoms working in combination. A Molecule is more complex than an Atom but is still highly repeatable. Additionally, a Molecule typically requires other elements in order to serve a function.

Types of Molecules

The 2H Design system uses 2 types of Molecules:

Inline Entries

Lists with descriptions

An Inline Entry is a list of Badges and supporting text. Each badge represents a distinctly separate "object" such as a date, a class, etc. The supporting text further defines the object and provides added context. If additional information is required, the supporting text can also include a link.

Quotes

Highlight impactful statements

A quote is made up of two elements:
  • .thds-blockquote__quote The quote itself. This text represent what someone has said. It is bold and centre aligned.
  • .thds-blockquote__attribution The atribution. This text credits the person who said the quote. It is also centre aligned and has lower visual presence than the quote itself.
“A quote should be incredibly impactful.” — Matthew Herchel, Marketing Strategist

Organisms

Elements that function independently

An Organism is a collection of Molecules and/or Atoms that makes sense when viewed on its own. At the highest level, page content can consist of a small series of Organisms.

Types of Organisms

The 2H Design system uses several types of Organisms:

Hero Sections

Start off strong

A Hero Section introduces a webpage with a striking full-width image and the primary page header. This is the first impression visitors will have of any given webpage.

Components of a Hero Section

The hero section consists of three main elements:

  • .thds-hero .thds-hero_content_bottom A wrapper that contains the rest of the Hero content
  • .thds-hero__image The background image for the Hero Section.
  • .thds-hero__content A container that holds the primary page header and any additional Hero content.

Within the "thds-hero__content" container are the primary page header, a short introduction, and an optional call to action.

Header One - type-display-xl

Lorem ipsum is simply dummy text created for the typesetting industry.
Optional Button

Copy Sections

The most common type of page content

A Copy Section consists of a header, a subheader, and a paragraph. If additional text content is required, a Copy section can also include any number of additional subheaders and paragraphs.

Header

Subheader

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis. Aliquam ac blandit sem. Vivamus finibus pretium erat, at facilisis diam malesuada et. Nullam rutrum malesuada tempus. Sed et gravida leo, ut tristique lectus. Morbi nisl neque, placerat ut leo vel, congue dignissim libero.

Subheader

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis. Aliquam ac blandit sem. Vivamus finibus pretium erat, at facilisis diam malesuada et. Nullam rutrum malesuada tempus. Sed et gravida leo, ut tristique lectus. Morbi nisl neque, placerat ut leo vel, congue dignissim libero.

Intro Sections

Concise content delivery

An Intro Section consists of 3 columns. The columns contain a header, a short descriptive paragraph, and a list respectively. This creates a concise format for introducing a topic such as a service. Intro Sections can be used consecutively to create lists of topics.

Strategy

Building without strategy is risk. Let’s design a sprint that positions you in front of your audience today.

  • Branding & Positioning
  • Marketing & Business
  • Data Insights
  • Branding, Design, & Agile

Image Intro Sections

Expanded Content

An Image Intro Section is a variant of the Intro Section Organism. It features a more condensed layout with the header and short paragraph sharing a column. This allows for a square image to be included. Additionally, the column containing the list has an added header and includes links to additional resources.
knee-pain-foot-by-foot-pedorthists

Knees

The knee joint has an important role in walking and running and is specifically designed to hinge and move in a forward, not backward orientation.

Common Causes of Pain

shin-pain-foot-by-foot-pedorthists

Shins

The shin area consists of two bones including the Tibia and the Fibula, which support movement and stabilize the ankle.

Common Causes of Pain

heel-pain-foot-by-foot-pedorthists

Heels

The calcaneus is known as the heel bone which is the largest bone in the foot .It helps absorb the shock at heel strike in our walking pattern.

Common Causes of Pain

ankle-pain-foot-by-foot-pedorthists

Ankles

The ankle joint is made up of three bones called the tibia, fibula and talus. These three bones move like a hinge to allow up and down foot movement.

Common Causes of Pain

toes-ball-of-foot-forefoot-pain-foot-by-foot-pedorthists

Toes, Ball & Forefoot

The forefoot is the front part of the foot which includes the ball of the foot and the toes. The forefoot provides movement, and enhances balance.

Common Causes of Pain

Aside Sections

Break up pages with text and images.

An Aside Section consists of a series of rows, each containing a Copy Section and an image. The left/right position of the image relative to the Copy Section alternates from row to row to create a more dynamic page layout.

Header

Subheader

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis. Aliquam ac blandit sem. Vivamus finibus pretium erat, at facilisis diam malesuada et. Nullam rutrum malesuada tempus. Sed et gravida leo, ut tristique lectus. Morbi nisl neque, placerat ut leo vel, congue dignissim libero.

Header

Subheader

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tempus turpis in lobortis. Aliquam ac blandit sem. Vivamus finibus pretium erat, at facilisis diam malesuada et. Nullam rutrum malesuada tempus. Sed et gravida leo, ut tristique lectus. Morbi nisl neque, placerat ut leo vel, congue dignissim libero.

Primary Calls to Action

Direct visitors to specific actions

A Primary Call To Action consists of a singular card, a center aligned bold header, and a center aligned button. These elements work in combination to draw the reader into the Call To Action. With limited exceptions, all pages should end with a Primary Call to Action.

Types of Primary CTAs

There are two variants of the primary CTA. The standard variant features a single button to direct users to perform a specific action. The expanded variant features a secondary button to present a similar but alternative action. For example, "Call Now" and "Email Now".

Double-click this headline to edit the text.

More Realistic amount of text

Double-click this headline to edit the text.

This is a block of text. Double-click this text to edit it.

Secondary Calls to Action

Help visitors explore

A Secondary Call to Action consists of a series of 4 cards, each containing an icon, a link, and a description. The clickable cards encourage visitors to explore the different sections of the website without one Call to Action having visual priority over the others.

Location Maps

Enhance the contact page

The Location Map consists of a header and a subheader, the map itself, and a small collection of contact information including clickable telephone and email.

Contact Us

Head Office

28 Industrial Street, Toronto, Ontario
T: 1-519-240-7780
E: hello@2h.media

LOCATION Lists

Condensed location listings

A Location List consists of the most surface level information about a series of locations (address and services), and links to view more information.  This element can be used to allow visitors to view several locations at a glance.
City Name
123 fake street
Services
  • List Item
  • List Item
  • List Item
View full listing >
City Name
123 Fake Street
Services
  • List Item
  • List Item
  • List Item
View full listing >
City Name
123 Fake Street
Services
  • List Item
  • List Item
  • List Item
View full listing >

Team Members

View employee information

A Team member is represented by a card containing a staff photo, Employee Name, job title, location, and a toggleable biography. Additionally, each Team Member includes a list of fun facts, labeled "Get to know me".
generic person female
Employee Name
Employee Job Title
Employee Location
Get to know me
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Read My Bio

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
generic person female
Employee Name
Employee Job Title
Employee Location
Get to know me
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Read My Bio

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
generic person female
Employee Name
Employee Job Title
Employee Location
Get to know me
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Read My Bio

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
generic person female
Employee Name
Employee Job Title
Employee Location
Get to know me
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Read My Bio

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Values Sections

Selling points and ethics

A Values Section consists of 3 columns, each containing an icon, a heading, and a short description. The columns are wrapped in a colored container. This section can be used to visually display company values or product/service selling points.

Heading

Description


Heading

Description


Heading

Description

Timelines

Tell a story

A Timeline can be used to display very dense information organized by years. The linear collection of years each correspond to a toggleable card, limiting the vertical space occupied by the element.
2020
2019
2018
2014
2013
2007
2005
2020
Fresh Look
We are proud to announce our new website
2019
Here We Grow Again
We add some youth to the team with Ana Edey, C. Ped (C) who brings with her clinics in Brantford, Cambridge and Simcoe, for a total of 15 Foot by Foot clinics in the southwestern Ontario area.
2018
Stepping Up
Pedorthist International Conference in Toronto was attended by all resident Pedorthists of Foot by Foot.
2014
Foot by Foot Revamp
It was time to modernize Foot by Foot and so we rebranded the name and logo and created a new website and design.
2013
The Three Musketeers
Michelle McCrory, C. Ped (C) and Jane Cromwell C. Ped (C) joined forces to bring their years of expertise. Clinic locations grew to 12 - including Baden, Cambridge, Fergus, Guelph, Kitchener, Milton, Mitchell, St. Marys, Stratford, Waterloo
2007
Independence Day
Darlene Rempel, C. Ped (C) and Foot by Foot became an independent corporation of Woodstock, Guelph and Brantford locations.
2005
The Birth of Foot by Foot
Joint venture with Mike Forgrave - Foot by Foot was born. Woodstock clinic, being a “brick and mortar” clinic, was able to offer in stock orthopedic braces and compression as well as our main focus of custom made orthotics.