MSCDirect.com Style Guide

Guiding principles

The foundation of a styleguide. These are a set of living principles used by designers and developers to build consistent products and experiences.

Useful

The experience/design needs to be useful, fill a need, and provide clear direction.

Trustworthy

The experience should create and establish trust, pushing people to see MSC as a trusted advisor and source of knowledge.

Usable

The experience/design should be familiar and easy to understand.

Desirable

The visual aesthetics need to be attractive and easy to translate - minimal and to the point.

Findable

The experience needs to be findable and easy to navigate.

Accessible

The experience/design should be a single experience combining content, design, interactions, and performance across multiple devices to ensure usability and consistency so that even users with a disability can be successful.

Visual Language

Colors

Bold Blue

HEX #0057B8

Dark Blue

HEX #012169

Bright Blue

HEX #00A3E0

Red

HEX #FF3333

Black

HEX #000000

Medium Gray

HEX #959595

Light Gray

HEX #D2D2D2

16 Column Grid System

Standard

Doubling

Stackable

Headings & Copy

No max characters, AP style title case unless the heading is a punctuated sentence. If the heading is a punctuated sentence, use sentence case. Use sentence case for subheadings regardless of end punctuation. (How to Correctly Use AP Style Title Case, Title Case Conversion Tool)

Heading - H1 - 2rem/28px - Lato Bold - #000000

Heading - H2 - 1.714rem/24px - Lato Bold - #000000

Heading -H3 - 1.286rem/18px - Lato Bold - #000000

Heading -H4 - 1.071rem/15px - Lato Bold - #000000

Heading - H5 - 1rem/14px - Lato Bold - #000000

Standard font - 1rem/14px - Gotham - #000000

Reference: rem conversion calculator (HTML font-size base - 14px)

Buttons / CTA's

25 characters max, sentence case

Primary

Learn about metalworking, Shop fasteners, Submit

Code to implement Primary Button:

<a href="#" alt="Alternative Text"><button class="ui primary button">Primary - content</button></a>

Shopping / add to cart

Add to cart only

Code to implement Shopping Button:

<a href="#" alt="Alternative Text"><button class="ui button red">Primary - shopping</button></a>

Cancel, Back to shopping cart

<a href="#" alt="Alternative Text"><button class="ui secondary button">Secondary</button></a>

<a href="#" alt="Alternative Text"><button class="ui disabled button">Disabled</button></a>

Standard text link - no max character count

<a href="#" alt="Alternative Text">Standard text link - no max character count</a>

Layout Elements

Paragraph

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.

Horizontal Rule

Lists

Ordered lists

First ordered list item
Second ordered list item
Third ordered list item

Unordered lists

First unordered list item
Second unordered list item
Third unordered list item

Table

Cell text can be Center, Left or Right aligned

Column Title	Column Title	Column Title
Lorem Lipsum ipsum	Lorem Lipsum ipsum	Lorem Lipsum ipsum
Lorem Lipsum ipsum	Lorem Lipsum ipsum	Lorem Lipsum ipsum
Lorem Lipsum ipsum	Lorem Lipsum ipsum	Lorem Lipsum ipsum
Column Footer	Column Footer	Column Footer