MX Marketing Modules

Style Guide

Colors, Fonts, Links Heros Features Text Blocks Carousels Collections & Grids Players, Embeds, Utilities Legacy Modules

Colors

Primary Pink #FF50C6 --c-primary-pink

Secondary Yellow #FFE900 --c-secondary-yellow

Light Pink #FF69A6 --c-accent-lightpink

Salmon #FF7D8C --c-accent-salmon

Dark Orange #FF956D --c-accent-darkorange

Orange #FFA757 --c-accent-orange

Light Orange #FFBC3B --c-accent-lightorange

Dark Yellow #FFD41C --c-accent-darkyellow

Black #000000 --c-black

White #FFFFFF --c-white

Grey Base #4B4A4B --c-grey-base

Grey Muted #D9D9D9 --c-grey-muted

Grey - Subtle #F0EFEB --c-grey-subtle

Grey - Transparent #000000, 80% --c-grey-transparent

Disabled #E8E8E8 --c-disabled

Gradient 0° --gradient-0deg

Gradient 45° --gradient-45deg

Gradient 90° --gradient-90deg

Gradient 180° --gradient-180deg

Gradient 225° --gradient-225deg

Gradient 270° --gradient-270deg

For a full list of variables, including hover and active colors, click here.

Typography

Headlines

Futura PT

ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
123456789 123456789

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Light - 300

Class: .fw-light

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Book - 400

Class: .fw-headlines-book

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Medium - 500

Class: .fw-medium

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Demi - 600

Class: .fw-demi

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Heavy - 700

Class: .fw-headlines-heavy

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Bold - 800

Class: .fw-headlines-bold

Body

AvenirNext

ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
123456789 123456789

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: UltraLight - 100

Class: .fw-ultralight

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Thin - 200

Class: .fw-thin

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Light - 300

Class: .fw-light

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Regular - 400

Class: .fw-body-regular

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Medium - 500

Class: .fw-medium

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Demi - 600

Class: .fw-demi

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Bold - 700

Class: .fw-body-bold

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Weight: Heavy - 800

Class: .fw-body-heavy

Typography/Headings

Note: Sizing is and styling is mobile first.

Colossus 1

Size: 64px / 96px^1024px / 120px^1400px

Weight: Book - 400

Letter Spacing: -0.02em

Line Height: 1

Class: .colossus-1

Colossus 2

Size: 54px / 72px^1024px / 100px^1400px

Weight: Medium - 500

Letter Spacing: -0.02em

Line Height: 1

Class: .colossus-2

Colossus 3

Size: 50px / 64px^1024px / 90px^1400px

Weight: Medium - 500

Letter Spacing: -0.02em

Line Height: 1

Class: .colossus-3

Uber 1

Size: 46px / 58px^1024px / 80px^1400px

Weight: Medium - 500

Letter Spacing: -0.02em

Line Height: 1

Class: .uber-1

Uber 2

Size: 46px / 58px^1024px / 80px^1400px

Weight: Medium - 500

Letter Spacing: -0.02em

Line Height: 1

Class: .uber-2

Uber 3

Size: 42px / 52px^1024px / 72px^1400px

Weight: Medium - 500

Letter Spacing: -0.02em

Line Height: 1

Class: .uber-3

Display

Size: 42px / 64px^1024px

Weight: Medium - 500

Letter Spacing: -0.02em

Line Height: 1.1

Class: .h-display

Heading 1

Size: 42px / 46px^1024px

Weight: Medium - 500

Letter Spacing: -0.01em

Line Height: 1.1

Class: .h1

Heading 2

Size: 30px / 36px^1024px

Weight: Medium - 500

Letter Spacing: -0.01em

Line Height: 1.13

Class: .h2

Heading 3

Size: 28px / 30px^1024px

Weight: Medium - 500

Letter Spacing: -0.01em

Line Height: 1.14

Class: .h3

Heading 4

Size: 20px / 24px^1024px

Weight: Medium - 500

Letter Spacing: -0.01em

Line Height: 1.1

Class: .h4

Heading 5

Size: 18px / 20px^1024px

Weight: Medium - 500

Letter Spacing: -0.01em

Line Height: 1.2

Class: .h5

Heading 6

Size: 16px

Weight: Medium - 500

Letter Spacing: 0.002em

Line Height: 1.25

Class: .h6

Typography/Subheadings

Subhead XXL

Size: 40px / 42px^1400px

Weight: Medium - 500

Letter Spacing: -0.02em

Line Height: 1.1

Class: .subhead-xxl

Subhead X Large

Size: 32px

Weight: Medium - 500

Letter Spacing: 0

Line Height: 1.12

Class: .subhead-xlarge

Subhead Large

Size: 28px

Weight: Medium - 500

Letter Spacing: 0

Line Height: 1.14

Class: .subhead-large

Subhead

Size: 20px

Weight: Medium - 500

Letter Spacing: 0

Line Height: 1.5

Class: .subhead

Subhead Small

Size: 18px

Weight: Medium - 500

Letter Spacing: 0

Line Height: 1.22

Class: .subhead-small

Subhead X Small

Size: 16px

Weight: Medium - 500

Letter Spacing: 0

Line Height: 1.25

Class: .subhead-xsmall

Typography/Body

Default Body Paragraph Large

Size: 20px / 24px^1024px

Weight: Light - 300

Line Height: 1.33

Class: .paragraph-large

Light Body Paragraph

Size: 18px

Weight: Light - 300

Line Height: 1.33

Default Body Paragraph Small

Size: 16px

Weight: Light - 300

Line Height: 1.4

Class: .paragraph-small

Default Body Paragraph X Small

Size: 12px

Weight: Light - 300

Line Height: 1.4

Class: .paragraph-xsmall

Default Body Paragraph Tiny

Size: 8px

Weight: Light - 300

Line Height: 1.4

Class: .paragraph-tiny

Medium Body Paragraph Large

Size: 20px / 24px^1024px

Weight: Medium - 500

Line Height: 1.33

Class: .paragraph-large

Medium Body Paragraph Default

Size: 18px

Weight: Medium - 500

Line Height: 1.33

Medium Body Paragraph Small

Size: 16px

Weight: Medium - 500

Line Height: 1.4

Class: .paragraph-small

Medium Body Paragraph X Small

Size: 12px

Weight: Medium - 500

Line Height: 1.4

Class: .paragraph-xsmall

Medium Body Paragraph Tiny

Size: 8px

Weight: Medium - 500

Line Height: 1.4

Class: .paragraph-tiny

Bold Body Paragraph Large

Size: 20px / 24px^1024px

Weight: Bold - 700

Line Height: 1.33

Class: .paragraph-large

Bold Body Paragraph Default

Size: 18px

Weight: Bold - 700

Line Height: 1.33

Bold Body Paragraph Small

Size: 16px

Weight: Bold - 700

Line Height: 1.4

Class: .paragraph-small

Bold Body Paragraph X Small

Size: 12px

Weight: Bold - 700

Line Height: 1.4

Class: .paragraph-xsmall

Bold Body Paragraph Tiny

Size: 8px

Weight: Bold - 700

Line Height: 1.4

Class: .paragraph-tiny

Unordered List Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus vehicula velit non tellus sollicitudin, id varius lacus gravida.
- Lorem ipsum dolor sit amet.
- Amet consectetur adipisicing elit. Suscipit, illo!
Suspendisse potenti. Nam nec nulla quis leo vehicula efficitur.

Ordered List Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse potenti. Nam nec nulla quis leo vehicula efficitur.
1. Lorem ipsum dolor sit amet.
2. Amet consectetur adipisicing elit. Suscipit, illo!
Maecenas sit amet velit eget ex consequat lobortis.

Buttons & Links

Lorem ipsum dolor sit amet consectetur adipisicing elit doloribus illo commodi.

Primary Button

Class: .button

Primary Button

State: Hover

Primary Button

State: Active

Primary Disabled

State: Disabled

Primary Small

Class: .button .button--small

Primary Small

State: Hover

Primary Small

State: Active

Primary Small

State: Disabled

Primary Button

Class: .button

Primary Button

State: Hover

Primary Button

State: Active

Primary Disabled

State: Disabled

Primary Small

Class: .button .button--small

Primary Small

State: Hover

Primary Small

State: Active

Primary Small

State: Disabled

Secondary Button

Class: .button--secondary

Secondary Button

State: Hover

Secondary Button

State: Active

Secondary Button

State: Disabled

Secondary Small

Class: .button--secondary .button--small

Secondary Small

State: Hover

Secondary Small

State: Active

Secondary Small

State: Disabled

Secondary Button

Class: .button--secondary

Secondary Button

State: Hover

Secondary Button

State: Active

Secondary Button

State: Disabled

Secondary Small

Class: .button--secondary .button--small

Secondary Small

State: Hover

Secondary Small

State: Active

Secondary Small

State: Disabled

Text Button

Class: .button--text

Text Button

State: Hover

Text Button

State: Active

Text Button

State: Disabled

Text Small

Class: .button--text .button--small

Text Small

State: Hover

Text Small

State: Active

Text Small

State: Disabled

Text Button

Class: .button--text

Text Button

State: Hover

Text Button

State: Active

Text Button

State: Disabled

Text Small

Class: .button--text .button--small

Text Small

State: Hover

Text Small

State: Active

Text Small

State: Disabled

Spacing

XS

Size: 8px

Class: --s-xs

SM

Size: 16px

Class: --s-sm

SM-MD

Size: 24px

Class: --s-smmd

MD

Size: 32px

Class: --s-md

LG

Size: 48px

Class: --s-lg

LG-XL

Size: 64px

Class: --s-lxl

XL

Size: 96px

Class: --s-xl

2XL

Size: 176px

Class: --s-2xl

3XL

Size: 240px

Class: --s-3xl

Form Elements

See form styling examples >