Style guide
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
Switzer
Paragraphs
Headings
All H1
All H2
All H3
All H4
HTML headings tags
HTML tags define default Heading styles.
Heading classes
Heading classes when typography style doesn't match the default HTML tag.
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Example Unordered List
- Example Unordered List
- Example Ordered List
- Example Ordered List
Text HTML tags
HTML tags define default text styles.
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.
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.
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.
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.
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.
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
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
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
White
Background grey
Light grey
Medium grey
Grey
Dark grey
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
Text Black
Text Dark Grey
Text Blue
Text White
4. Utilities
Margin
Top
Bottom
Other
Padding
Top
Bottom
Other
Alignment
Overflow
Display + position
Size
Helpers
![](https://cdn.prod.website-files.com/66583f38976bf1e061ae36cb/66583f38976bf1e061ae3752_hassaan-qaiser-bKfkhVRAJTQ-unsplash.jpg)