Style guide

1. Typography2. Color3. Components4. Utilities5. LayoutMast Docs  ↗

Powered by Mast CSS framework, this style guide is your roadmap to creating a functional website. Dive into the  design system and branding principles to craft a digital presence that reflects your work.

1. Typography

Fonts

Inter Sans Tight

Headings & links

Weights: 400, 500

Switzer

Paragraphs

Weights: 400, 500

Headings

H1 Headings

All H1

H2 Headings

All H2

H3 Headings

All H3

H4 Headings

All H4

HTML headings tags

HTML tags define default Heading styles.

H1
Class
H2
Class
H3
Class
H4
Class

Heading classes

Heading classes when typography style doesn't match the default HTML tag.

Body

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All Unordered Lists
  • Example Unordered List
  • Example Unordered List
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List

Text HTML tags

HTML tags define default text styles.

Paragraph 1.5em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph 1.25em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Paragraph 1.1em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Paragraph 1em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph 0.9em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Blog Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Text styles

Text sizes classes when typography size doesn't match the default HTML tag.

2. Colors

Color backgrounds utilities

Black

#212121
U BG Black

White

WHITE
U BG White

Background grey

#f7f7f7
U BG Background Grey

Light grey

#d9dadb
U BG Light Grey

Medium grey

#8f8f8f
U BG Medium Grey

Grey

#565657
U BG Grey

Dark grey

#383838
U BG Dark Grey

Blue

#2742d1
U BG Blue

Color Swatches

Easily customize colors using variables. To change a container's background color, simply apply the class u-bg-'yourcolor'.

Text color utilities

Aa

Text Black

#212121
U Text Black
Aa

Text Dark Grey

#383838
U Text Dark Grey
Aa

Text Blue

#383838
U Text Blue
Aa

Text White

white
U Text White

3. Components

Button

Text

Text Link

All Links
Button

Default

Button
Button

Secondary

Button
CC Secondary

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

4. Utilities

Margin

Top

U Margin Top 0
margin-top: 0;
U Margin Top 1em
margin-top: 1em;
U Margin Top 2em
margin-top: 2em;
U Margin Top 3em
margin-top: 3em;
U Margin Top Auto
margin-top: auto;

Bottom

U Margin Bottom 0
margin-bottom: 0;
U Margin Bottom 1em
margin-bottom: 1em;
U Margin Bottom 2em
margin-bottom: 2em;
U Margin Bottom 3em
margin-bottom: 3em;

Other

U Margin 0
margin: 0;
U Margin LR Auto
margin: 0 auto; (centers element))
U Margin Right 1em
margin-right: 1em;
U Margin Left 1em
margin-left: 1em;

Padding

Top

U Padding Top 0
padding-top: 0;
U Padding Top 1em
padding-top: 1em;
U Padding Top 2em
padding-top: 2em;
U Padding Top 3em
padding-top: 3em;

Bottom

U Padding Bottom 0
padding-bottom: 0;
U Padding Bottom 1em
padding-bottom: 1em;
U Padding Bottom 2em
padding-bottom: 2em;
U Padding Bottom 3em
padding-bottom: 3em;

Other

u-p-0
padding: 0;
u-p-1
padding: 1em;

Alignment

U Text Center
text-align: center;
U Text Right
text-align: right;

Overflow

U Overflow Hidden
overflow: hidden;
U Overflow Visible
overflow: visible;

Display + position

U Display None
display: none;
U Display Block
display: block;
U Display Flex
display: flex;
U Position Relative
position: relative;

Size

U Width 100
width: 100%;
U Height 100
height: 100%;

Helpers

U Image Cover
Multiple properties
U Link Cover
Multiple properties
Open link
U Aspect 1x1
Multiple properties
U Z-Index 1
Multiple properties
U Screen Reader
Multiple properties
Screen Reader Only

5. Layout

Section

Section

Container

Container

Grid

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

Grid - Desktop

Column
Col Large 1
Column
Col Large 11
Column
Col Large 2
Column
Col Large 10
Column
Col Large 3
Column
Col Large 9
Column
Col Large 4
Column
Col Large 8
Column
Col Large 5
Column
Col Large 7
Column
Col Large 6
Column
Col Large 6
Column
Col Large 12

Grid - Tablet

Column
Col Med 1
Column
Col Med 11
Column
Col Med 2
Column
Col Med 10
Column
Col Med 3
Column
Col Med 9
Column
Col Med 4
Column
Col Med 8
Column
Col Med 5
Column
Col Med 7
Column
Col Med 6
Column
Col Med 6
Column
Col Md 12

Grid - Mobile Landscape

Column
Col Small 1
Column
Col Small 11
Column
Col Small 2
Column
Col Small 10
Column
Col Small 3
Column
Col Small 9
Column
Col Small 4
Column
Col Small 8
Column
Col Small 5
Column
Col Small 7
Column
Col Small 6
Column
Col Small 6
Column
Col Small 12

Grid - Mobile Portrait

Column
Col XSmall 1
Column
Col XSmall 11
Column
Col XSmall 2
Column
Col XSmall 10
Column
Col XSmall 3
Column
Col XSmall 9
Column
Col XSmall 4
Column
Col XSmall 8
Column
Col XSmall 5
Column
Col XSmall 7
Column
Col XSmall 6
Column
Col XSmall 6
Column
Col XSmall 12

Align columns

Row
Row Align Center
Column
Column
Column
Row
Row Align End
Column
Column
Column

Justify columns

Row
Row Justify End
Column
Column
Row
Row Justify Center
Column
Column
Row
Row Justify Around
Column
Column
Row
Row Justify Between
Column
Column

Reorder columns

Column
Col Large First
Column
Col Med First
Column
Col Small First
Column
Col XSmall First
Column
Col Large Last
Column
Col Med Last
Column
Col Small Last
Column
Col XSmall Last

Other columns modifiers

Shrink Column

Column
Col Shrink
Column

Gutterless Column

Row
Row No Gutters
Column
Col No Gutters
Column
Col No Gutters
Column
Col No Gutters
Column
Col No Gutters