💅

Olark Marketing Styleguide

This is a resource for designers, product managers, and developers, providing a common language around Olark’s UI patterns. We use it to maintain visual consistency across marketing materials.

Typography

Gibson Light 94px

Jumbotron

Gibson Semibold, 3em

Heading level 1

Gibson Semibold, 2em

Heading level 2

Gibson Semibold, 1.5em

Heading level 3

Gibson Semibold, 1.1em

Heading level 4

Gibson Semibold, 1em, Uppercase, 2px letter spacing
Heading level 5
p - Gibson Light, 1.2em, 24px line height

Typing Olark commands in a chat window gives your operators quick access to the most useful tools for creating leads, transferring chats and helping customers.

article-p - Gibson Light, 1.4em, 30px line height

Typing Olark commands in a chat window gives your operators quick access to the most useful tools for creating leads, transferring chats and helping customers.

Handwritten - Semringah
Use Semringah for people’s names, underscore the concept of humanity or to add a little fun to a line of text. Do not use Semringah for entire sentences. It should be limited to a few words at most.

Humanity

You may alternate colors for each letter when using Semringah. Keep them in this order: red600, orange600, green600, blue600, purple600, yellow600, repeat.

H u m a n i t y

Color

900
800
700
600
500
400
300
200
100
50

Links

Single text link
I'm all alone
Row of links, side by side
I'm with friends I'm with friends I'm with friends
Link in a paragraph

This text is here to show you what a link inside a paragraph should look like.

Buttons

@extends btn-jumbo-blue
@extends btn-standard-blue
@extends btn-junior-blue
@extends btn-micro-blue
@extends btn-nano-blue
@extends btn-standard-green
A green primary button should be used only in situations where there are two calls to action with no recommended action.
@extends btn-standard-secondary
A secondary button should be used when its action is not the recommended or default action.
button[disabled]

Containers

Backgrounds

Only three colors–in addition to white–should serve as background colors for large sections of the website: gray50, gray100,and gray900.
@extends $section-background-gray50
@extends $section-fullwidth
This is a full-width section background with gray50.
@extends $section-background-gray100
@extends $section-fullwidth
This is a full-width section background with gray100.
@extends $section-background-dark
@extends $section-fullwidth
This is a full-width section background with gray900.
The $section-fullwidth extension will round the section's borders once the viewport width of 1200px is reached. At narrower widths, it will keep the section's borders squared, touching either side of the viewport.
@extends $section-background-gray50
border-radius: $section-radius-flat-bottom
This is a full-width section with a section attached to the bottom.
This is a full-width section with a section attached to the top.
@extends $section-background-dark
border-radius: $section-radius-flat-top
Sometimes, sections with colored backgrounds need to touch each other with no space in between. In those cases, we use special flat-bottom and flat-top border radius extensions.

Cards

@extends $card
box-shadow: $card-shadow
This is the card title
This is the body of the card
Card header backgrounds can be purple500, blue500, green500 or red500. The background of the card body should always be white.

Photography

Olark uses two main styles of photography on its marketing website: Situational and Portraiture.

Situational

Situational photography should be given a warm, soft light treatment to give it a consistent and human look. A tutorial to achieve this effect can be found here.

Situational with type

Typography placed on top of situational photography should be placed inside bubbles whose border rounding follows the pattern of messages in an Olark chat, i.e. separations in the text blocks should have 5px border-radius where they touch, and 18px on the outer edges.

Get up-to-the-minute live chat metrics

Olark's detailed live chat reports refresh in real time, so you're always working with up-to-date info. Check in on chat volume, customer satisfaction, and agent activity as often as you need to make smart staffing and prioritization decisions — or have summary reports delivered straight to your inbox.

Take a look at our reports
A situational photo may also border a section with a background color. In this case, you may opt to leave no space between the sections. Use these extensions to accomplish that:
@extends $section-background-gray100
border-radius: $section-radius-flat-bottom
Here's a section with a color background
@extends $img-wrapper-fullwidth-flat-top
responsive-img (image-path)

Portrait

Portrait photography, often used to represent an Olark chat agent, should be representative of all ethnic backgrounds and ages. Download a collection of preapproved portraits here.

Forms

A series of inputs making up a form should always be stacked vertically in a single column, never side by side.

Importing the styles for forms and their labels is as simple as calling these two stylus functions. Note that these won't stack the label and text field–you'd need to add display: block and clear the float on the label in order to achieve the look here.
text-form-label()
text-form()
dropdown()
A button at the bottom of the form, most commonly a Save or Submit action, may be aligned left with the form fields, or it may take up 100% of the width of the text fields.

Logos

Download a .zip of design goodies