The style guide.


Design Goals

Mobify.com looks different, doesn't it? Sure does! In an effort to create a cohesive look across our services as well as update our look to appeal the big decision makers of e-commerce, we've shook things up.

Visually, that means using a more constricted colour pallete, making the site "lighter" overall for easier reading, splitting up content into skimable chunks, and using more photography for our assets.

Typography

As you probably know already, we use Dagny for our primary typeface. We use the regular weight for our body text, and light for most of our headers and titles, within reason or unless otherwise specified. Bolded/heavy titles are right out.

Section Title (h2)

Sub-Section Title (h3)

Ut lacinia, elit id tristique mollis, lectus odio venenatis felis, at dignissim elit dui eu orci. Sed a eros non turpis condimentum pharetra. Sed in vulputate dui, nec fermentum justo. Donec et venenatis nisi. Nullam ipsum ligula, pulvinar vel nibh ut, porta interdum justo. Suspendisse potenti. In tempor, arcu non adipiscing pharetra, dolor erat ultrices sapien, in tristique urna risus eu enim. Curabitur justo odio, aliquam eget elit et, suscipit commodo massa.

Sub-Section Title (h4)

Nulla hendrerit dolor nunc, quis tristique dui aliquam eu. Ut id metus et mi luctus cursus non et tortor. In volutpat hendrerit vehicula. Curabitur rhoncus dictum erat quis blandit. Proin faucibus porttitor tellus, et dapibus arcu scelerisque eget. Suspendisse potenti. Donec luctus consequat volutpat. Suspendisse tempor auctor risus.

Sub-Section Title (h5)

Since we're now using the light version of Dagny for our titles, there is a point in which light doesn't work — this is it. h5 has therefore reverted to the regular weight of Dagny.

  • Nullam nec consectetur turpis.
  • Nullam nec consectetur turpis.
  • Nullam nec consectetur turpis.

Aside Title (h4)

Donec et venenatis nisi. Nullam ipsum ligula, pulvinar vel nibh ut, porta interdum justo. Suspendisse potenti.

  1. Nullam nec consectetur turpis.
  2. Nullam nec consectetur turpis.
  3. Nullam nec consectetur turpis.
Box Title (h5)

Ut lacinia, elit id tristique mollis, lectus odio venenatis felis, at dignissim elit dui eu orci. Sed a eros non turpis condimentum pharetra. Sed in vulputate dui, nec fermentum justo.

Brand Colours

We've reduced the the number of colours used across the site to combat fracturing, and to create a more cohesive, easier to understand pallette.

Primary

Used site-wide for CTAs and links.

Primary

Used site-wide for CTAs and links.

Primary

Used site-wide for CTAs and links.

Primary

Text color

...

Border color

...

Page background

...

Section background

White

Reverse text

Sections & Schemes

One of the primary changes was to seperate colours from the elements themselves, and dictate them through classes on the parent section element. This was done to make things easier for our marketing comrades, so they can build sections without fretting about using our colours correctly.

Just change the parent class and text, links, buttons, and boxes will change to suit the pre-determined scheme. These can be edited in the sections_schemes scss component.

Primary choices for content are scheme--white and scheme--light. You should alternate between the two to break up the content into "easy-to-chew" sections. These can be interspersed with stronger coloured sections, for added emphasis.

Scheme Modifier Classes
.scheme--white
.scheme--light
.scheme--teal
.scheme--navy
.scheme--photo
.scheme--teal-navy
.scheme--navy-teal

Colour Usage for Emphasis

This is a really strong section, huh? It really draws your eye. Well, that's definitely the intent!

These bold coloured sections are great for emphasizing a call to action, or a particuarly important piece of content. As such, they are to be used sparingly! Obviously, if you use it too much, it loses its effect and the page is going get very busy very fast.

Try and make sure its not directly next to another strongly coloured section.

Emphasis Schemes
.scheme--teal
.scheme--navy

Buttons and Calls-to-Action (CTAs)

Buttons for this iteration of Mobify are flexible, with a set of modifier classes to give you control over both colour and size.

With such bold colour usage, we are limiting the variety of types of CTAs to maintain simplicity.

Button colours

Button colours are meant to be bold and contrast our regular body/header typography, while acting as a subtle wayfinding system.

Buttons progressively darken in steps to indicate :hover and :active states.

Learn More

Main Call-to-Action

Read Article

Blog Call-to-Action

Download Now

Resources Call-to-Action



Button sizes

Large Button Medium Button Small Button

.btn--block makes the button the full width of its container.

I'm a wide button! Look how wide I am!

Button Modifiers

Any of these can be paired with the regular .btn class, but cannot be used on their own.

Colours

.btn--blog
.btn--resources

Sizes

.btn--block
.btn--large
.btn--small

Photo Backgrounds

As we're moving back towards photography for our assets, this will be a importnant section to put to use. However, to use this effect, you need to have quite a bit of text so that the section is tall enough and not just a weird short strip.

Content should never go directly into this section. It should always be wrapped in a .box container, like this, because otherwise it'd be impossible to read.

To use, apply the .scheme--photo class to the section element, and then add a background image in your page specific CSS file.

If the focus of the photo is at the bottom of the image, combine with the class .scheme--photo-bottom so the alignment of the image aligns properly on mobile.

Note: When adding a background image in the CSS, remember to use background-image, otherwise you'll override the other background settings for this section.

Scheme: White

To use this scheme, add .scheme--white to the parent <section>.

Praesent viverra pharetra molestie. Ut scelerisque feugiat enim, in facilisis tellus tempor at. Donec gravida velit id risus vehicula venenatis. Sed ornare egestas est quis faucibus. Phasellus quis placerat sapien, egestas congue mauris. Donec a urna elit. Nulla sed dui vel libero ornare facilisis id et dui. Pellentesque et vulputate nisi, et blandit purus.

Nulla magna risus, gravida ut tristique ut, sagittis eu turpis. In ut tincidunt elit, at accumsan risus. Ut condimentum, sapien vitae tincidunt adipiscing, augue nisi adipiscing sapien, vel porta est dui et urna.

Regular Button Regular Button Primary Button Regular Button

Boxes

This is what the box component looks like in this scheme.

To use the box component, add the following classes to any .span# child of the .grid:

.box
.box--padding
Boxes with Icon

These are great for multiple columns/buckets that you want to add a graphic to accompany.

To use expand box component, add the following classes to the same element you applied the .box class:

.box--with-icon

Then include another element inside the .box with the image inside it, and apply this class:

.box-icon
Boxes with Large Icon

Just as with the smaller bubble, you add the following classes to the same element you applied the .box class:

.box--with-big-icon

Then add this class to the .box-icon element:

.icon--big

Scheme: Light Neutral

To use this scheme, add .scheme--light to the parent <section>.

Praesent viverra pharetra molestie. Ut scelerisque feugiat enim, in facilisis tellus tempor at. Donec gravida velit id risus vehicula venenatis. Sed ornare egestas est quis faucibus. Phasellus quis placerat sapien, egestas congue mauris. Donec a urna elit. Nulla sed dui vel libero ornare facilisis id et dui. Pellentesque et vulputate nisi, et blandit purus.

Nulla magna risus, gravida ut tristique ut, sagittis eu turpis. In ut tincidunt elit, at accumsan risus. Ut condimentum, sapien vitae tincidunt adipiscing, augue nisi adipiscing sapien, vel porta est dui et urna.

Regular Button Regular Button Primary Button Regular Button

Boxes

This is what the box component looks like in this scheme.

To use the box component, add the following classes to any .span# child of the .grid:

.box
.box--padding
Boxes with Icon

These are great for multiple columns/buckets that you want to add a graphic to accompany.

To use expand box component, add the following classes to the same element you applied the .box class:

.box--with-icon

Then include another element inside the .box with the image inside it, and apply this class:

.box-icon
Boxes with Large Icon

Just as with the smaller bubble, you add the following classes to the same element you applied the .box class:

.box--with-big-icon

Then add this class to the .box-icon element:

.icon--big

Scheme: Navy

To use this scheme, add .scheme--navy to the parent <section>.

Praesent viverra pharetra molestie. Ut scelerisque feugiat enim, in facilisis tellus tempor at. Donec gravida velit id risus vehicula venenatis. Sed ornare egestas est quis faucibus. Phasellus quis placerat sapien, egestas congue mauris. Donec a urna elit. Nulla sed dui vel libero ornare facilisis id et dui. Pellentesque et vulputate nisi, et blandit purus.

Nulla magna risus, gravida ut tristique ut, sagittis eu turpis. In ut tincidunt elit, at accumsan risus. Ut condimentum, sapien vitae tincidunt adipiscing, augue nisi adipiscing sapien, vel porta est dui et urna.

Regular Button Regular Button Primary Button Regular Button

Boxes

This is what the box component looks like in this scheme.

To use the box component, add the following classes to any .span# child of the .grid:

.box
.box--padding
Boxes with Icon

These are great for multiple columns/buckets that you want to add a graphic to accompany.

To use expand box component, add the following classes to the same element you applied the .box class:

.box--with-icon

Then include another element inside the .box with the image inside it, and apply this class:

.box-icon
Boxes with Large Icon

Just as with the smaller bubble, you add the following classes to the same element you applied the .box class:

.box--with-big-icon

Then add this class to the .box-icon element:

.icon--big

Device Rotation Carousel.

Mobile shopping patterns.

Shopping is about exploring. It's about hunting for the perfect product - and the feeling you get when you find it.

On mobile, it's possible to make discovery easy, intuitive and fun.

Navigation
Search
Filtering

Mobile shopping patterns — Reversed.

Shopping is about exploring. It's about hunting for the perfect product - and the feeling you get when you find it.

On mobile, it's possible to make discovery easy, intuitive and fun.

Navigation
Search
Filtering

6 reasons to partner with Mobify

  1. Service your existing customers
  2. Attract new leads
  3. Open a new recurring revenue stream
  4. Level up on mobile development
  5. Always on, 24/7 support
  6. Lightning-fast onboarding