< back to mäd

Typography.

Note not all typography elements don't have classes. Because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

If you edit styles here it will change across the site

h1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h2

Lorem ipsum dolor sit amet.

h3

Lorem ipsum dolor sit amet.

h4

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.

paragraph

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.

paragraph - small
Block Quote
block quote

social icons

Lorem ipsum dolor sit amet.

text field label

Colors.

The colors have been created using Global Swatch. If you edit a Global Swatch, it will change every element that uses that color swatch.

Text colors.

font color - dark
#212121
font color - grey
#4a4a4a
font color - light
#737373

Main colors.

brand color - primary
#e3211a
brand color - grey
#f8fbfd

UI Elements.

Here are some common UI elements that can be copied.

Buttons.

primary
Button - primary
with icon
button - with icon
disabled
button - disabled

Cards.

Business.

Razor sharp strategy to move your business forward.

content card - v1

Strategy.

Nothing is a bigger waste of time and money than activity without proper strategic planning. Move with open eyes. We use all of the tools at our disposal to devise a strategy and plan that will work harder for you.

content card - v2
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
text field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
text field - area

Forms.

Here you can find form elements that are used across the Mäd website.

Fields.

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

Inputs.

Business

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

Technology

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

Design

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

Everything

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

Iconography.

The icons have been generated as a font through the icomoon web app. This allows for greater interaction control and flexibility.

Icons.

Mäd icon font
Mäd custom icons