Overview

Product Mission & Vision

Our product team’s mission is to build the most powerful mobile marketing solutions for small businesses to help them grow. We empower any company to connect with their customers where they are, on their mobile devices.


Typography

Primary Font

Open Sans

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ &

*Use for headlines

Headlines

Open Sans Light

Color: #666666
Size: 24px

*Use for page titles

Subheads

Open Sans Semi Bold

Color: #666666
Size: 20px

*Use for emphasis

Paragraph

Open Sans Regular

Color: #666666
Size: 15px

*Use for body copy


Colors

Color Palette

#1486ab

Brand Blue

#1E9AC2

UI Blue

#04C4AD

Workflow Green

#FF9900

Transaction Orange

#F44199

Notification Pink

#FFFFFF

Text White

#F44157

Warning Red

#2A3E52

UI Bar Dark

#34495E

UI Bar Medium

#485F75

UI Bar Light

#666666

Text Grey

#F7F7F7

Background Grey


Iconography

CMS Icons

icon

Account

icon

Grow

icon

Notification

icon

Settings

icon

Dashboard

icon

Add Ons

icon

Edit

icon

Get Started

icon

Publish

icon

My Apps

icon

Manage

icon

Client's View

For brand and product consistency it’s important to use a similar approach to iconography across all user touchpoints. Only use icons when it makes the task easier to understand. Don’t repeat icons or clutter the UI with too many.

Mobile Icons

icon

Events

icon

Menu

icon

Ordering

icon

Rewards

icon

Location

icon

Reservations

icon

Newsletter

icon

Comments

icon

Social Media

icon

About Us

icon

Gallery

icon

Sign in

icon

Music

icon

News

icon

Reviews

icon

Listings

icon

Booking

icon

Calculator

icon

Program

icon

Schedule

icon

Content

icon

Shop


UI Patterns

Buttons

Transactional

Start Free Trial
  • Use for purchasing
  • Marketing website main CTA

Loading

  • Use as loading indicator
  • Confirms transaction

Hover

Start Free Trial
  • background: #FFAB00

Workflow

Setup
  • Grabs attention
  • Begins task

Progressive

Next
  • Grabs attention
  • Goes to next task

Disabled

Next
  • Used as a task confirmation
  • Disabled until task is complete
  • Opacity: 40%

Hover

Setup
  • background: #27D6C1

Secondary Action

Cancel
  • Use for less emphasis
  • Use as a second option
  • Lighter visual weight

Management

Manage
  • Shows item is enabled
  • Action has been taken

With Icon

Configure
  • Shows item is enabled
  • Action has been taken

Hover

Cancel
  • background: #1E9AC2