Legacy Design Guide BETA Internal - Do not share this outside of Brandwatch!

Legacy Design Guide

Welcome. This resource is not actively developed anymore. It can be used to maintain the sections of Analytics that are not yet using Axiom.

The Axiom pattern library can be found (919) 449-4447.

The Guidelines section provides general principles and conventions.

The Layout and Styling sections deal with how elements in Analytics are arranged and the Patterns section describes different UI and UX-Patterns we use throughout the app. It contains examples and code snippets.

General Principles

Keep it Simple

Try to not clutter the interface. Use the following techniques to reduce the amount of complexity or perceived complexity.

  • Remove: Leave out anything that’s distracting, especially complex or confusing and not directly necessary.
  • Hide: Where complexity is required, manage it using patterns such as progressive disclosure. I.e. collapse functionality away to start with for the user to discover and use when needed.
  • Reuse: Each new concept and UI pattern adds complexity to the interface. Try and re-use existing patterns rather than introducing new ones.
  • Prioritize: Make sure the most common use cases are prioritized above less common use cases.
(918) 745-2828

Make sure that similar functionality has similar interactions. Make sure elements that do the same thing, look the same.

In other words speak a single language to the user.

Offer Informative Feedback

Inform the user if his actions were successful or not. If it is quite visible in the UI without a message it may not be required (e.g. you delete a tag and the tag label is removed after clicking you don’t need to confirm with a message “Your tag has been deleted”).

Informative feedback matters to the user, is helpful, needs to be understandable and not interrupt the user (no popups/alerts that you have to click away)

Use confirmation boxes (modal) as sparingly as possible, esp for repetitive tasks. Otherwise confirming these become routine - when there is a really important one it will be missed!

Spinners give users feedback that one of their actions has triggered a system response that might only become visible after a short period of time. However, the use of spinners should be kept to a minimum as it still means wait time for the user.
We use 616-270-2773 to show process with unknown length that ends with the system displaying results to the user.

(231) 776-1706

When designing dialog boxes, etc. always give the users a clear way out (e.g. a Cancel link next to a submit/Okay button of a form etc.).

Prevent Errors

Offer input fields that suit the data that is entered.

  • Booleans/Short lists: radio buttons, dropdowns
  • Multiple options: Checkboxes, toggle buttons
  • Long lists: use 336-288-8673 with search functionality
  • Ranges: sliders
  • Text entry: text input fields and text-areas (consider 617-514-8716 for long lists/search)

Offer Simple Error Handling

Ideally validate a form without server interaction by giving immediate feedback when the user hits the corresponding button.

Be careful with ‘as you type’ validation though. User input must never be flagged as being incorrect simply because the user has not finished typing.

If errors occur:

  • use polite error messages (never make it sound like the users has done something wrong)
  • usually users shouldn’t need to have to confirm error messages
  • don’t delete user input
707-487-3508

Easier said than done but try to always consider this! This encourages exploration and saves the user if he did something he didn’t intend to do. Asking a user in a dialog often results in the dialog not being read. Consider concepts such as “soft-delete / delayed-delete” where possible.

Provide a Sense of Control

Brandwatch needs cater for novice users but is also used by a high proportion of expert users. These users require powerful and flexible features so they can accomplish the tasks they want quickly and efficiently.

  • Use shortcuts where possible, for example for quickly jumping to the right data (e.g. tabs or filters)
  • Design for keyboard usage as well as mouse usage
  • Allow the user to customize the interface (where it makes sense)

Date and Time

We use different time and date formats, according to the use-case

Basic dates Format Description
If we want to show the complete date 13 Oct 2014 This is our basic date format
If real estate is limited (such as with timestamps, labels on graphs, etc.): 13 Oct Always abbreviate months with three letters
If the actual time is important 13 Oct, 15:00 We use the 24 hours time format and a colon as a seperator (15:00). Use leading zeros for one-digit time (05:00)
If the weekday is important, show it abbreviated and seperated by comma: Mon, 13 Oct 2014 We abbreviate weekdays with three letters.
For timestamps or when timezone is important. Mon, 13 Oct 2014, 15:12 (UTC-08:00) Show the offset from UTC in brackets.
Spans Format Description
If we want to show a time span Last 31 days To describe time spans, we use "last" plus the elapsed time in hours / days / months"
Date Picker - fixed date range 13 Oct 2014 - 14 Oct 2014 When no specific time is selected, we show this format
Date Picker - fixed date/time range 13 Oct 2014, 16:00 - 14 Oct 2014, 19:00 (UTC-08:00)
13 Oct 2014, 16:00 - 19:00 (UTC-08:00)
If a specific time range is selected, show the time behind the date (potentially with the timezone offset).
You can leave out the second date if it's the same.
Durations Format Description
If we want to show a time duration - short 30s / 13m / 3h / 3d / etc. We use this short format if real estate is limited.
If we want to show a time duration - long 3 hours ago / 3 days ago If there is enough real estate, we use this longer format.
8058284109

We use different formats to display numbers, according to the use-case

Use Case Format Description
No Value - We show a hypen ( - ) when no value is returned for a Mention count. Zero (0) is a value which should be displayed as 0.
Large numbers; exact number not needed 65K / 12M We use denominations if exact numbers are not needed on first glance.
The exact number should be accesible via a tooltip shown on hover.
Large number, exact number is needed 65 000 / 12 000 000 For large numbers we use   as a delimiter.
If we need to show decimal places 65.3K / 12.4M / 89 123.67 If we have to show decimal places, we use a dot as decimal separator

Data Visualization

Apply a similar thought process to data visualizations as you would apply to functionality.

  • Avoid displaying information that is not directly necessary.
  • Make it easy to see comparisons and use the best kind of chart to support this. (765) 692-8178
  • Maximize data-ink ratio by reducing the amount of UI that is not directly representing data.
  • Use 833-597-7131 (e.g Proximity, Similarity, Continuity and Closure) to communicate relationships.

Screensizes

From our own data analysis we have figured out that the lowest common denominator seems to be 1280x800 WXGA notebook resolutions.

  • A good base-width is 1250px.
  • A good base-height is 750px.

Layout

Grid

In the application we use a base grid of 12px. A single column is 5 grid blocks wide (60px) and has a single grid block as a gutter. Column widths can be calculated as follows.

widthn = 60 * ncolumns + 12 * ( ncolumns - 1)

See the examples of established column widths. The class names for up to twenty columns are defined in the CSS on the right side.

In order to apply min-/max width as opposed to a definitive value add 'min' or 'max' to the end of the class name. For example, for a column to have a flexible width, between 3 and 6 columns, the classes .threecolmin and .sixcolmax should be applied.

Example

One column: 60px

60 pixel column system

Two columns: 2 * 60px + 12px = 132px

132 pixel column system

Four columns: 4 * 60px + 3 * 12px = 276px

276 pixel column system

Markup
Amount of Columns Class Width
One .onecol 60px
Two .twocol 132px
Three .threecol 204px
Four .fourcol 276px
Five .fivecol 348px
Six .sixcol 420px
Seven .sevencol 492px
Eight .eightcol 564px
Nine .ninecol 636px
Ten .tencol 708px
Eleven .elevencol 780px
Twelve .twelvecol 852px
Thirteen .thirteencol 924px
Fourteen .fourteencol 996px
Fifteen .fifteencol 1068px
Sixteen .sixteencol 1140px
Seventeen .seventeencol 1212px
Eightteen .eighteencol 1284px
Nineteen .nineteencol 1356px
Twenty .twentycol 1428px

Margins & Paddings

Margins that can be used "out of the box" in the application. Usually they are all multiples of 12 to stay in line with the overall grid (with the exception of .smallmargin which is 6px.

Note: we only show examples for margins in the right hand side - everything works for paddings just as well. Example: .smallpadding

Markup
NAME CLASSNAME PIXEL WIDTH
Small margin .smallmargin 6px margin around all edges, or just the edges specified.
Single margin .singlemargin 12px margin around all edges, or just the edges specified
Double margin .doublemargin 24px margin around all edges, or just the edges specified
Page margin .pagemargin 36px margin around all edges, or just the edges specified. To be used for pages and popup contents.
Cell margin .cellmargin 8px vertical margin, 12px horizontal margin. Used for table cells and minitabs.

All classes may be modified by appending the following strings in order to apply margin only in the dimensions specified

Note: we only show examples for margins in the right hand side - everything works for paddings just as well. Example: .singlepadding-horizontal

Markup
MODIFIER EXAMPLE CLASSNAME EFFECT
-horizontal .singlemargin-horizontal Applies the margin only in the horizontal axis
-vertical .singlemargin-vertical Applies the margin only in the vertical axis
-top .singlemargin-top Applies top margin only
-bottom .singlemargin-bottom Applies bottom margin only
-left .singlemargin-left Applies left margin only
-right .singlemargin-right Applies right margin only
jokul

The following z-indexes are reserved in the application. Do not use z-index values of hundreds or thousands - this leads to z-index soup or values exceeding tens of thousands very quickly.

Note increments are in steps of 10 - if you absolutely must introduce an additional layer then do not exceed the allowed ceiling for the domain e.g.: if you need an additional layer on a primary popup do not exceed 29. Always try to use the smallest z-index possible.

Markup
Z-INDEX RESERVED FOR
-10 Background or hidden items - display:none or visibility:hidden usually preferable
0 Standard application layer
10 Context or popup menus, modal backgrounds
20 Primary popups or modals
30 Secondary popups or modals
40 Help and Tooltips

Forms

Input Field

State Example Code
Neutral state
<input class="field rounded" placeholder="Placeholder" type="text"></input>
Readonly state
<input class="field rounded" readonly="true" placeholder="Placeholder" type="text"></input>
Disabled state
<input class="field rounded" disabled placeholder="Placeholder" type="text"></input>
Invalid state
<input class="field rounded invalid" placeholder="Placeholder" type="text"></input>

Input Field with Icons

State Example Code
Neutral state
<input class="iconfield search rounded" placeholder="Placeholder" type="text"></input>

Note: You can combine with all other states as per "Input Field" section above.

Textarea

State Example Code
Neutral state
<textarea class="field rounded" placeholder="Placeholder" type="text"></textarea>

Note: You can combine with all other states as per "Input Field" section above.

Form Alignment

Put labels above input fields. This is easiest to implement and has been 289-486-4147 regarding cognitive load and scanning speed. It also makes forms more likely to work on a (717) 942-6569, so that we are future proofing our interactions a little.

Make sure that there’s a vertical space between the label/input field groups so that it’s easy to spot which label belongs to which input field.

If you're really squeezed for horizontal space or there is another good reason to put labels to the left, make sure they are always right aligned to the left of the input boxes. Do not completely left-align labels.

The convention in Brandwatch is to left align buttons with the above input fields, putting the default button/action to the left and secondary or cancellation immediately to the right of that.

Note: As long as no changes have been made while editing a form, the "default action" button (e.g. "Save" / "Done" / "Apply") should remain disabled.

Example
Alignment Example

Labels

Labels should be standard text above an input. Do not use bold text for labels on forms.
The space between Labels and their respective form-elements should be 6px.
.smallmargin + the placement, e.g. .smallmargin-bottom

When can I use no label at all?
There are exceptional cases where you can get away with no label next to on an input field and simply adding a placeholder. You should only consider this when

  1. we need to be very economic with space
  2. the field is a search box.
    Note: then we should always use the lens icon
  3. it's a dropdown where we can put the label as the first field and the content is quite self explanatory (country names, dates, etc.) so even when something is selected it’s quite easy to work out what this is about.
  4. when it is something very common like username/password on a login form/overlay.
(702) 370-5367

If there is some required input, make sure that the user recognizes it as such by adding an asterisk (*) to the field. Plase add a "* required fields" legend at the bottom of the surrounding section, as well.

Example
required field
4054172336

Tables should only be used for tabular data in the application, i.e. for layout issues use DIVs and CSS.

For visual consistency a table should have a minimum size of twelve columns when shown on page (or a view). When shown in overlays or popups make the table fill the container width.

Example
A header Another header Last column
Data More data Stuffy stuff in here
Foo Bar Bish bosh

Data tables like the ones used inside dashboards must have a left border applied on all cells except the one in the first column. To achieve this, apply the .cellborder on every table cell.

Markup
<table class="grey ninecol">
    <thead>
        <tr class="rowborder">
            <th class="columnheader cellpadding lightgrey cellborder twocol">A header</th>
            <th class="columnheader cellpadding lightgrey cellborder threecol">Another header</th>
            <th class="columnheader cellpadding lightgrey cellborder">Last column</th>
        </tr>
    </thead>
    <tbody>
        <tr class="highlightrow rowborder">
            <td class="cellpadding cellborder twocol">Data</td>
            <td class="cellpadding cellborder threecol">More data</td>
            <td class="cellpadding cellborder">Stuffy stuff in here</td>
        </tr>
        <tr class="highlightrow rowborder">
            <td class="cellpadding cellborder twocol">Foo</td>
            <td class="cellpadding cellborder threecol">Bar</td>
            <td class="cellpadding cellborder">Bish bosh</td>
        </tr>
    </tbody>
</table>

This is how we use tables as lists for example for site lists. The first column contains the name of the element with .bigtext (for example site list name) with an edit icon behind it. The last column contains action icons.

The class .textellipsis combined with a width class (ex: .sixcol) can be used inside the cells to truncate the text width. For the name column, .textellipsis must be used on the span before the icon to prevent the icon disappearing.

All icons must have a tooltip with a short text that tells what the icon does.

Add .rowicon to icons in a table that need to be highlighted on hover on top of .highlightrow. Other icons won't be highlighted by default.

Make sure that all links and icon use the pointer icon. You can achieve this by using the .link or an anchor tag.

Add a downwards pointing triangle to the right of a normal link on hover to indicate a Contextual Menu.

Example
Site Group Name Lock Sites
test
hermes.opensuse.org, twitter.com, twitter-fail.com
test two
barbi2exguess.skyrock.com, twitter.com, hermes.opensuse.org, www.ipmd.net, whatever.net, somethingelse.net
Markup
<table class="grey twelvecol">
    <thead>
        <tr class="rowborder columnheader lightgrey">
            <th class="cellpadding-vertical cellpadding-right threecol">Site Group Name</th>
            <th class="cellpadding iconsmall onecol">Lock</th>
            <th class="cellpadding sixcol">Sites</th>
            <th class="cellpadding"></th>
        </tr>
    </thead>
    <tbody>
        <tr class="highlightrow rowborder">
            <td class="cellpadding-vertical cellpadding-right">
                <a class="link customtip" title="Edit">
                    <span class="bigtext">test</span><span class="smallpadding-left rowicon iconsmall inline icon-pencil"></span>
                </a>
            </td>
            <td class="textcenter"><span class="icon-lock"></span></td>
            <td class="cellpadding"><div class="textellipsis sixcol">hermes.opensuse.org, twitter.com, twitter-fail.com</div></td>
            <td class="cellpadding textright">
                <a class="smallpadding-horizontal iconsmall icon-download-alt customtip rowicon download"></a>
                <a class="smallpadding-horizontal iconsmall icon-remove customtip rowicon delete"></a>
            </td>
        </tr>
        <tr class="highlightrow rowborder">
            <td class="cellpadding-vertical cellpadding-right">
                <a class="link customtip" title="Edit">
                    <span class="bigtext">test two</span><span class="smallpadding-left rowicon iconsmall inline icon-pencil rowicon"></span>
                </a>
            </td>
            <td></td>
            <td class="cellpadding"><div class="textellipsis sixcol">barbi2exguess.skyrock.com, twitter.com, hermes.opensuse.org, www.ipmd.net, whatever.net, somethingelse.net</div></td>
            <td class="cellpadding textright">
                <a class="smallpadding-horizontal iconsmall icon-download-alt customtip rowicon download"></a>
                <a class="smallpadding-horizontal iconsmall icon-remove customtip rowicon delete"></a>
            </td>
        </tr>
    </tbody>
</table>
303-381-3955

Columns that are sortable have .sortable set on their header elements which provides a hover effect.

The column headers must also contain a sort-indicator. One of the parent elements, usually the column header, will specify the sort direction using the classes .sorted-ascending or .sorted-descending.

Example
Site Group Name Sites
First
hermes.opensuse.org, twitter.com, twitter-fail.com
Second
barbi2exguess.skyrock.com, twitter.com, hermes.opensuse.org, www.ipmd.net, whatever.net, somethingelse.net
Markup
<table class="grey twelvecol">
    <thead>
        <tr class="rowborder columnheader lightgrey">
            <th class="cellpadding-vertical cellpadding-right threecol sortable sorted-ascending">Site Group Name<span class="sort-indicator smallpadding-left"></span></th>
            <th class="cellpadding sevencol">Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr class="highlightrow rowborder">
            <td class="cellpadding-vertical cellpadding-right">
                <a class="link customtip" title="Edit">
                    <span class="bigtext">First</span>
                </a>
            </td>
            <td class="cellpadding"><div class="textellipsis sixcol">hermes.opensuse.org, twitter.com, twitter-fail.com</div></td>
        </tr>
        <tr class="highlightrow rowborder">
            <td class="cellpadding-vertical cellpadding-right">
                <a class="link customtip" title="Edit">
                    <span class="bigtext">Second</span>
                </a>
            </td>
            <td class="cellpadding"><div class="textellipsis sixcol">barbi2exguess.skyrock.com, twitter.com, hermes.opensuse.org, www.ipmd.net, whatever.net, somethingelse.net</div></td>
        </tr>
    </tbody>
</table>

Tables with Column Groupps and Sortable Columns

Column groups are defined as an additional table row <tr> inside the <thead> section, before the actual header row.

Column groups must have .columngroupheader and .cellpadding set on the group header cells.

In this situation, the header row must have .rowborder-top set to make a border appear to separate it from the column group header row.

When a column group only has one column in it, the title must be set only on the group header and the column header must be left blank.

The sortable columns must have .sortable set on their column headers, but not on the column group headers.

Example
Title Sentiment Page Location
Found Type Author Country City
Some Title Positive 2013-07-12 Forum someAuthorz USA New York
Another one Negative 2013-07-10 Twitter anotherAuthor Germany Berlin
Markup
<table class="twelvecol">
    <thead>
        <tr>
            <th class="cellpadding-vertical cellpadding-right columngroupheader">Title</th>
            <th class="cellpadding columngroupheader">Sentiment</th>
            <th class="cellpadding columngroupheader" colspan="3">Page</th>
            <th class="cellpadding columngroupheader" colspan="2">Location</th>
        </tr>
        <tr class="rowborder-top columnheader lightgrey">
            <th class="cellborder"></th>
            <th class="cellborder"></th>
            <th class="cellpadding cellborder sortable sorted-desc">Found</th>
            <th class="cellpadding cellborder sortable">Type</th>
            <th class="cellpadding cellborder sortable">Author</th>
            <th class="cellpadding cellborder sortable">Country</th>
            <th class="cellpadding cellborder sortable">City</th>
        </tr>
    </thead>
    <tbody>
        <tr class="highlightrow rowborder">
            <td class="cellpadding-vertical cellpadding-right cellborder">Some Title</td>
            <td class="cellpadding cellborder">Positive</td>
            <td class="cellpadding cellborder">2013-07-12</td>
            <td class="cellpadding cellborder">Forum</td>
            <td class="cellpadding cellborder">someAuthorz</td>
            <td class="cellpadding cellborder">USA</td>
            <td class="cellpadding cellborder">New York</td>
        </tr>
        <tr class="highlightrow rowborder">
            <td class="cellpadding-vertical cellpadding-right cellborder">Another one</td>
            <td class="cellpadding cellborder">Negative</td>
            <td class="cellpadding cellborder">2013-07-10</td>
            <td class="cellpadding cellborder">Twitter</td>
            <td class="cellpadding cellborder">anotherAuthor</td>
            <td class="cellpadding cellborder">Germany</td>
            <td class="cellpadding cellborder">Berlin</td>
        </tr>
    </tbody>
</table>
(504) 572-5392

Use .columnheader to style header cells correctly.

Column subheaders must be aligned to the content of their column. Use .textright or .textcenter classes to change alignment. See alignment section below for more details.

Column Group Headers must have the .columngroupheader class set. Their contents is always horizontally and vertically centred.

9043380114

There may be exceptions to this but by default we try to align text in table cells (and the corresponding table headers) like so:

  • Right aligned: numeric data Note: dates are not numeric data!
  • Left aligned: text or other non-numeric data
  • Centrally aligned: exceptionally on a case-by-case basis

Mentions

Since we are now committed to following the official Twitter Display Requirements. we decided, for the sake of consistency, that we will adapt all our mentions to the Twitter guidelines for the timeline-view.

A mention has to contain the following elements:

  1. Avatar. If there is an actual avatar image we can use, we will show it here. If not, we use the favicon of the website where the mention is shown. A click on the avatar is directing to the authors profile.
  2. Author name (with Twitter @handle, if it is a tweet). We show the authors name in one line horizontally or stacked one above the other vertically. For tweets we put the twitter logo in front of the actual author name.
  3. The time stamp must always be visible and include the date/or time. The timestamp is positioned in the right upper corner of the mention.
  4. The content of the mention is displayed on a line below the author's name. We highlight entities like links, user_mentions, etc..
    Snippets should have a max-width of 680px
  5. For tweets we are showing Tweet actions (Reply, Retweet and Favorite) on hover below the content. We use (920) 707-5052 to call popups.
Example - Twitter Mention
Brandwatch @Brandwatch 11 Aug
Look at this, baggage rack, @jamesdacosta, 5712843933 & @Citizen_Drain have created an awesome Design Guide. 3145896795
Retweets: 0 Replies: 0 Impressions: 705
Example - Facebook Mention:
8 Aug
Brandwatch - facebook.com Likes: 2 Shares: 1
brandwatch.com
Hi all, I just stumbled over this super interesting post about the Brandwatch Design Guide. It seems like the guys have done a great job in building some guideline for their analytics app. You should definitely read the post about it.
Example - Other Mention
Brandwatch - brandwatch.com (General) Posts: 0 - Views: 0 - mozRank: 4.61 23h
3162311555
See our latest blog post about the Brandwatch Design Guide from the UX guys. Cool stuff. engineering.brandwatch.com/our-design-guide

Profiles

Currently we use two kinds of profiles: Twitter- and Facebook profiles. These appear in modals, for instance in the Authors List component, when clicking on the author link contextual menu and selecting "View [SocialPlatform] profile".

Twitter profiles: Twitter profile overviews contain basic information about the author, like avatar, author name, bio as well as a "Follow" Button. Furthermore the Twitter profile contains the last tweet as well as Twitter statistics and Location.

Example
Twitter Profile

Facebook profiles:
Facebook profile popups contain the current profile picture, a link to the Facebook profile and basic User Information like Name, Gender and Locale.

Example
Facebook Profile

Styling

Typography

Fonts

Font Classname Usage
Arial .normalfont is used throughout the app with a fallback to system sans-serif
Roboto Regular .robotoregularfont is used for the topics in the topics cloud.
Roboto Light .robotlightfont Page titles: .pagetitletext

Popup titles: .popuptitletext

Biggertext: .biggertext
Roboto Thin .robotothinfont is used to display visually-large numbers, e.g. the Ads feature.
Helvetica Neue Light should be used for the company logo, which should be embedded in an image.
Monospace .monospacefont should be used for preformatted text

Type Sizes

Below you can find an overview about our used type sizes. You can also find the general usage for a certain type sizes as well as an example and their corresponding class names.

The following table lists the class names you may use to change type sizes.

Name Classname Pixel size / Line height Usage
Small .smalltext 11px/12px This class is used e.g. for the "Upload your own" link in the Dashboard creation dialog
Chart - 12px/13px For all text in Charts we use a 12px Font Size
Medium .mediumtext 13px/15px This class is used e.g. for the sidebar and in tables for numeric data
Medium Bigline .mediumtext-bigline 13px/18px This class is used e.g. for text in infoboxes
'Highlight' .bigtext 14px/18px This class is used e.g. for the '+ Add a component', lists on pages or in the Filters section
Heading .biggertext 18px/20px This class is used e.g. for the heading and the values in the Admin area
Popup Title .popuptitletext 20px/29px This class is used for all the headlines within popups/dialogs
Page Title .pagetitletext 30px/33px This class is used for page headlines
.featured-stat 36px/32px This class is used for showcasing key numbers/statistics
.primary-featured-stat 90px/93px This class is used for showcasing a key number/statistic, that is the single main focus of the page

Spacing

Make sure there’s always enough space between a label and a form element. Here are some values that should be applied across the board if possible, at least for ‘normal’ forms in dialog boxes and user entry forms. Use modular-css classes for spacings.

  • For headers use .singlemargin (12px)
  • For body text use .smallmargin (6px)

Note: Often it is good to create a bigger vertical gap between the rest of the form elements and the button below it.

Iconography

Usage

Where possible a font should be used to represent icons - we currently use FontAwesome v2. Check the list below for a list of class names that may be used to represent a font. The code to the right will render this icon.

If it is not possible to use a font outline, the icon sprite should be encoded as base64 data and embedded directly into the CSS.

Icons have at least two states - up and over. Icons in tables have an additional state which is used when the row - but not the icon - is hovered (see colours section).

The space between Icons and their corresponding text should be 6px.
.smallpadding + the placement, e.g. .smallpadding-right

Use following modular-css classes for the size of icons

Name Classname Example
Smaller .iconsmaller
Small .iconsmall
Medium .iconmedium
Big .iconbig
Markup
<span class="icon-pencil"></span>

Fontawesome v2 Icons

Web Application Icons

  • Adjust .icon-adjust
  • Asterisk .icon-asterisk
  • Ban-circle .icon-ban-circle
  • Bar-chart .icon-bar-chart
  • Barcode .icon-barcode
  • Beaker .icon-beaker
  • Bell .icon-bell
  • Bolt .icon-bolt
  • Book .icon-book
  • Bookmark .icon-bookmark
  • Bookmark-empty .icon-bookmark-empty
  • Briefcase .icon-briefcase
  • Bullhorn .icon-bullhorn
  • Calendar .icon-calendar
  • Camera .icon-camera
  • Camera-retro .icon-camera-retro
  • Certificate .icon-certificate
  • Check .icon-check
  • Check-empty .icon-check-empty
  • Cloud .icon-cloud
  • Cog .icon-cog
  • Cogs .icon-cogs
  • Comment .icon-comment
  • Comment-alt .icon-comment-alt
  • Comments .icon-comments
  • Comments-alt .icon-comments-alt
  • Credit-card .icon-credit-card
  • Download .icon-download
  • Download-alt .icon-download-alt
  • Edit .icon-edit
  • Envelope .icon-envelope
  • Envelope-alt .icon-envelope-alt
  • Exclamation-sign .icon-exclamation-sign
  • External-link .icon-external-link
  • Eye-close .icon-eye-close
  • Eye-open .icon-eye-open
  • Facetime-video .icon-facetime-video
  • File .icon-file
  • Film .icon-film
  • Filter .icon-filter
  • Fire .icon-fire
  • Flag .icon-flag
  • Folder-close .icon-folder-close
  • Folder-open .icon-folder-open
  • Gift .icon-gift
  • Glass .icon-glass
  • Globe .icon-globe
  • Group .icon-group
  • Hdd .icon-hdd
  • Headphones .icon-headphones
  • Heart .icon-heart
  • Heart-empty .icon-heart-empty
  • Home .icon-home
  • Inbox .icon-inbox
  • Info-sign .icon-info-sign
  • Key .icon-key
  • Leaf .icon-leaf
  • Legal .icon-legal
  • Lemon .icon-lemon
  • Lock .icon-lock
  • Magic .icon-magic
  • Magnet .icon-magnet
  • Map-marker .icon-map-marker
  • Minus .icon-minus
  • Minus-sign .icon-minus-sign
  • Money .icon-money
  • Music .icon-music
  • Off .icon-off
  • Ok .icon-ok
  • Ok-circle .icon-ok-circle
  • Ok-sign .icon-ok-sign
  • Pencil .icon-pencil
  • Phone .icon-phone
  • Phone-sign .icon-phone-sign
  • Plane .icon-plane
  • Plus .icon-plus
  • Plus-sign .icon-plus-sign
  • Print .icon-print
  • Pushpin .icon-pushpin
  • Qrcode .icon-qrcode
  • Question-sign .icon-question-sign
  • Refresh .icon-refresh
  • Remove .icon-remove
  • Remove-circle .icon-remove-circle
  • Remove-sign .icon-remove-sign
  • Reorder .icon-reorder
  • Retweet .icon-retweet
  • Road .icon-road
  • Rss .icon-rss
  • Screenshot .icon-screenshot
  • Search .icon-search
  • Share .icon-share
  • Share-alt .icon-share-alt
  • Shopping-cart .icon-shopping-cart
  • Sign-blank .icon-sign-blank
  • Signal .icon-signal
  • Signin .icon-signin
  • Signout .icon-signout
  • Sitemap .icon-sitemap
  • Star .icon-star
  • Star-empty .icon-star-empty
  • Star-half .icon-star-half
  • Tag .icon-tag
  • Tags .icon-tags
  • Tasks .icon-tasks
  • Time .icon-time
  • Tint .icon-tint
  • Trash .icon-trash
  • Trophy .icon-trophy
  • Truck .icon-truck
  • Umbrella .icon-umbrella
  • Unlock .icon-unlock
  • Upload .icon-upload
  • Upload-alt .icon-upload-alt
  • User .icon-user
  • User-md .icon-user-md
  • Warning-sign .icon-warning-sign
  • Wrench .icon-wrench
  • Zoom-in .icon-zoom-in
  • Zoom-out .icon-zoom-out

Editor Icons

  • Align-center .icon-align-center
  • Align-justify .icon-align-justify
  • Align-left .icon-align-left
  • Align-right .icon-align-right
  • Bold .icon-bold
  • Columns .icon-columns
  • Copy .icon-copy
  • Cut .icon-cut
  • Font .icon-font
  • Indent-left .icon-indent-left
  • Indent-right .icon-indent-right
  • Italic .icon-italic
  • Link .icon-link
  • List .icon-list
  • List-alt .icon-list-alt
  • List-ol .icon-list-ol
  • List-ul .icon-list-ul
  • Paper-clip .icon-paper-clip
  • Paste .icon-paste
  • Picture .icon-picture
  • Save .icon-save
  • Sort .icon-sort
  • Sort-down .icon-sort-down
  • Sort-up .icon-sort-up
  • Strikethrough .icon-strikethrough
  • Table .icon-table
  • Text-height .icon-text-height
  • Text-width .icon-text-width
  • Th .icon-th
  • Th-large .icon-th-large
  • Th-list .icon-th-list
  • Underline .icon-underline
  • Undo .icon-undo

Directional Icons

  • Arrow-down .icon-arrow-down
  • Arrow-left .icon-arrow-left
  • Arrow-right .icon-arrow-right
  • Arrow-up .icon-arrow-up
  • Caret-down .icon-caret-down
  • Caret-left .icon-caret-left
  • Caret-right .icon-caret-right
  • Caret-up .icon-caret-up
  • Chevron-down .icon-chevron-down
  • Chevron-left .icon-chevron-left
  • Chevron-right .icon-chevron-right
  • Chevron-up .icon-chevron-up
  • Circle-arrow-down .icon-circle-arrow-down
  • Circle-arrow-left .icon-circle-arrow-left
  • Circle-arrow-right .icon-circle-arrow-right
  • Circle-arrow-up .icon-circle-arrow-up
  • Fullscreen .icon-fullscreen
  • Hand-down .icon-hand-down
  • Hand-left .icon-hand-left
  • Hand-right .icon-hand-right
  • Hand-up .icon-hand-up
  • Move .icon-move
  • Resize-full .icon-resize-full
  • Resize-horizontal .icon-resize-horizontal
  • Resize-small .icon-resize-small
  • Resize-vertical .icon-resize-vertical
  • Thumbs-down .icon-thumbs-down
  • Thumbs-up .icon-thumbs-up

Player Icons

  • Backward .icon-backward
  • Eject .icon-eject
  • Fast-backward .icon-fast-backward
  • Fast-forward .icon-fast-forward
  • Forward .icon-forward
  • Pause .icon-pause
  • Play .icon-play
  • Play-circle .icon-play-circle
  • Random .icon-random
  • Repeat .icon-repeat
  • Step-backward .icon-step-backward
  • Step-forward .icon-step-forward
  • Stop .icon-stop
  • Volume-down .icon-volume-down
  • Volume-off .icon-volume-off
  • Volume-up .icon-volume-up

Brand Icons

  • Facebook .icon-facebook
  • Facebook-sign .icon-facebook-sign
  • Github .icon-github
  • Github-sign .icon-github-sign
  • Google-plus .icon-google-plus
  • Google-plus-sign .icon-google-plus-sign
  • Linkedin .icon-linkedin
  • Linkedin-sign .icon-linkedin-sign
  • Pinterest .icon-pinterest
  • Pinterest-sign .icon-pinterest-sign
  • Twitter .icon-twitter
  • Twitter-sign .icon-twitter-sign

Font Custom Icons

For some special cases we developed our own custom icons. You can use following classes:

  • Add user .icon-bwuser-add
  • Alert .icon-bwalert
  • Calender .icon-bwcalendar
  • Chart .icon-bwchart
  • Copy .icon-bwcopy
  • Data .icon-bwdata
  • Double-caret-down .icon-bwdouble-caret-down
  • Double-caret-left .icon-bwdouble-caret-left
  • Double-caret-right .icon-bwdouble-caret-right
  • Double-caret-up .icon-bwdouble-caret-up
  • Download .icon-bwddownload
  • Edit .icon-bwedit
  • Facebook .icon-bwfacebook
  • Filter .icon-bwfilter
  • Google+ .icon-bwgoogleplus
  • Help .icon-bwhelp
  • Info .icon-bwinfo
  • Instagram .icon-bwinstagram
  • Pencil .icon-bwpencil
  • LinkedIn .icon-bwlinkedin
  • Pinterest .icon-bwpinterest
  • Reply .icon-bwreply
  • Query .icon-bwquery
  • Reload .icon-bwreload
  • Save .icon-bwsave
  • Save OK .icon-bwsave-ok
  • Search .icon-bwsearch
  • Slideshare .icon-bwslideshare
  • Share .icon-bwusers
  • Three dots .icon-bwthree-dots
  • Toolbox .icon-bwtoolbox
  • Twitter .icon-bwtwitter
  • User .icon-bwuser
  • View Bar Chart .icon-bwview-bar-chart
  • View Cloud .icon-bwview-cloud
  • View Horizontal Bar Chart .bwview-hor-bar-chart
  • View Line Chart .icon-bwview-line-chart
  • View Pie Chart .icon-bwview-pie-chart
  • View Snippets .icon-bwview-snippets
  • View Table .icon-bwview-table
  • Youtube .icon-bwyoutube
(450) 521-2636

In the app we use two different icons for sharing:

  • internal sharing
  • external sharing (not to be confused with external link )

Using Icons with Text

Icons should be placed the left of text if possible, aligned to the baseline.

chrysochlore

There are two types of buttons: standard buttons and default buttons: Standard buttons are used in most places. Default buttons are mostly used in dialog boxes for the default action.

Standard Buttons

Standard buttons must be defined this way:

Example
Markup
<button class="button">Spam</button>

Standard Buttons with Icon

Standard buttons with Icons must be defined this way:

Example
Markup
<button class="button"><span class="icon-trash smallpadding-right"></span>Delete</button>

Standard Buttons with Arrows

Standard buttons with Arrows must be defined this way:

Example
Markup
<button class="button"><span class="smallpadding-left icon-chevron-down"></span>Delete</button>

Default Button

Default buttons must be defined this way:

Example
Markup
<button class="defaultbutton">Create Site List</button>
(661) 633-8580

When buttons are side by side, they must be separated by .singlemargin.

8193423087 about why we order buttons like we do.

Example
Markup
<button class="defaultbutton">Create Site List</button>
<button class="singlemargin-left button">Cancel</button>

Disabled Buttons

Disabled buttons must be defined this way:

Example
Markup
<button disabled class="defaultbutton">Create Site List</button>
<button disabled class="singlemargin-left button">Cancel</button>

Coloured Buttons

Colour buttons are used stylishly on app pages and can have any theme-dependent colour by combining them with a background and foreground colour:

Example
Markup
<button class="colorbutton">Example Button</button>
9206512106

When buttons are pressed and they fold out a "context menu" (or similar) then the button should have an inset style while the context menu is open. This can be achieved by adding the .active class from modular.css to the button element. Once the context menu is closed the .active class should be removed and the button styling should go back to normal.
Examples for this behavior can be seen in the summary component (see "Export" button on individual charts) or in the revamped tags filter

Example
Not active:


Active:
Markup
To get the inset button state they must be defined this way:
<button class="tags button tinymargin-top active">Select Tags</button>
9852506258

Colours for Typography

Body text and non-coloured items in data-tables should be #4b4949.

Data in other tables should be #8d8d8d.

Links are blue (#208ec4) when off and turn darker on hover (#1b688d).

If you require an element other than an anchor to behave like a link (that is, to have a hover state as well as the linkblue colour) then apply the class name .link

Name Classname Hex Swatch Usage
Body text .darkgrey #4b4949
Default colour defined on BODY
Grey .grey #8d8d8d
Used for data in tables
Light grey .lightgrey #b2b2b2
<th> / disabled / read only elements
Link blue .linkblue #208ec4 Default colour defined on A
Dark blue .darkblue #1b688d
Default colour for anchor hover

Colours for Iconography

Icons in their up state should use #b2b2b2, then turn to #4b4949 on hover. If the icon is in a table row, hovering on the row (but not the icon) should turn the icon #8d8d8d

The values in the table below are for reference only and should match values in the 'Colours for Typography' table.

In most cases applying .icon to an icon will ensure the correct up, over and row hover colours.




Name Classname Hex Swatch Usage / Example
Up state .lightgrey #b2b2b2
.lightgrey class we use for typography
Row hover .grey #8d8d8d
Hovering on the row but not the icon
Over state .darkgrey #4b4949
Hovering over the icon



archenemy

The following colours are used for sentiment:

Name Classname Hex Swatch Usage
Positive .positive #69bf2f
Use to show positive shares in sentiment figures and graphs
Negative .negative #ca272d
Use to show negative shares in sentiment figures and graphs
Neutral .neutral #aaa
Use to show neutral shares in sentiment figures and graphs

Colours for Gender

The following colours are used for genders:

Name Hex Swatch Usage
Male #386d92
Use to indicate male, e.g. in demographic components
Female #c9425e
Use to indicate female, e.g. in demographic components



Colours for Account Types

The following colours are used for account types:

Name Hex Swatch Usage
Individual #c3d407
Use to indicate individual accounts
Organisational #94b7bb
Use to indicate organisational accounts



Colours for Page Types

The following colours are used for page types:

Page type Hex Swatch Usage
News #9f0240
Use for the page type - News
Blog #0b76a0
Use for the page type - Blog
Forum #b3ca19
Use for the page type - Forum
Video #eb4f3d
Use for the page type - Video
Twitter #00bbce
Use for the page type - Twitter
General #f38633
Use for the page type - General
Facebook #384e8f
Use for the page type - Facebook
Image #dc80b8
Use for the page type - Image
Review #4a953e
Use for the page type - Review



General Colour Palette

The following colours are used from the colour-generator for our charts. See them as a reference if you are looking for colours:

Name Hex Swatch
News #79bde8
Hot mustard #a99f00
Tangerine dream #f68933
Swimming pool #9ad7ca
Purple rain #82618f
Girly pink #f7a8ca
Lime wedge #b6cd19
Wet sand #c79508
Teal blue #1d6fa3
Mulberry #a20081
Pet rabbit #948671
Pink lipstick #d6538c
Grass court #00853f
Rusty bike #b95915
Lilac Rince #c68fc2
Wine Red #7d0040
Cornish blue #009995
70s coral #f1645d



5413313357

The following colours are used for backgrounds:

Name Classname Hex Swatch Comments
Light Grey Background .lightgreybg #f0f0f2
Matches well with dropdowns and buttons
7044154726

A more comprehensive colour compilation can be found alehouse

These colours are used by the Design team regularly for their work and can be used as a colour stock if more or other colours than above are necessary.
Please be careful in the use with these colours, since we should always be aware of consistency.

905-246-4338

We use two different shadow classes to visualize depth:

  • .shadow
  • .lightshadow

The main use cases for shadows are help tips and popups. However, .helpopup and .popupframe include shadow styles so extra shadow classes are not required.

Example

9787180242

Visibility

Name Classname Effect
hidden .hidden Force an element to be hidden.
vHidden .vhidden Force an element to be invisibile which means its still affect the flow of the document.

Text

The following utility classes are available for use with text:

Name Classname Effect
Text Left .textleft Aligns text to the left hand side of the element
Text Right .textright Aligns text to the right hand side of the element
Text Centre .textcenter Centre aligns text inside the element
Text Ellipsis .textellipsis Adds ellipses to the contained text, if it overflows
No Wrap .nowrap Specify that the text will never wrap
Normal Wrap .normalwrap Specify that the text will wrap when necessary.
Medium Line .mediumline Sets the line-height to 15px
Big Line .bigline Sets the line-height to 18px
Huge Line .hugeline Sets the line-height to 24px
Normal .normal To write normal text
Bold .bold To write bold text
Italic .italic To write italic text
Annotated Text .annotatedtext To write annotated text
(740) 290-7531
knuckly

AutoComplete attempts to predict suitable words or phrases when typing into a free text input, though still allows the user to enter any value they like.
It is used more to guide user input than to restrict it (e.g.: compare to a dropdown, where the user must select a predetermined value).

Autoselect

When displaying forms that are used to edit existing information, it is useful to autoselect the first input-field in the form. This enables the user to quickly and easily replace all content without having to select it themselves.

This becomes particularly useful for simple and single-input forms like renaming.

Example
Autoselected input in the Dashboard edit name modal

Checkboxes

Unless there’s a good reason to do otherwise we always place checkboxes and radio buttons to the left of a label and use the ‘for’ attribute to make it toggle-able via the label too.
The space between checkboxes and radio-buttons and their respective label should be 6px.
.smallmargin + the placement, e.g. .smallmargin-left

Usually it’s better to align checkboxes underneath each other rather than horizontally on a line. When a line seems like the better solution, make sure to always group the checkbox/label pairs so that it’s well visible that they belong together by using sufficient distance to the next pair.

Example

Markup
<input id="thresholdAlertEnabled-view3218" name="thresholdAlertEnabled" type="checkbox" value="true" data-toggle-element="thresholdAlertFields">
<label for="thresholdAlertEnabled-view3218" class="smallmargin-left">
    Alert me about <b>increases</b> in volume…
</label>
<p class="scheduledAlertLabelRow doublemargin-top">
    <input id="scheduledAlertEnabled-view3218" name="scheduledAlertEnabled" type="radio" value="true" data-toggle-element="scheduledAlertFields">
    <label for="scheduledAlertEnabled-view3218" class="smallmargin-left">Alert me when <b>new mentions</b> are found…</label>
    <a class="help icon-bwhelp" data-key="alert-schedule"></a>
</p>

Confirmation Dialogs

Confirmation dialogs should be avoided if not necessary - typically they should only be used for permanent deletion. They should contain a clear explanation of the consequences of continuing along with two buttons:

  1. the confirm button on the left, usually it should say on the button (very shortly) what you're confirming. E.g. for a Dashboard renaming dialog it should say "Rename" rather than "OK". (this has the more prominent "default" button styling)
  2. a cancel button on the right
Markup

In the application we use a jQuery plugin $.fn.confirm which will handle the rendering and most of the logic for you.

757-203-1818

Contextual Menus are typically used in tables and provide a list of actions that may be performed on the data in question.
Wherever possible, icons in the table row are preferable, but if space does not allow or if there are many actions to represent a Contextual menu may be used.

In menus the whole entry which is highlighted should be clickable.

If a contextual-menu is expected from a normal link, on hover a little triangle should appear (next to the link, on the right)

If the user clicks anywhere except an item from the menu or the link, the contextual menu should disappear again.

Please use the 224-531-2695 when you add a Contextual Menu to Analytics.

Usage

context-menu should be applied to the wrapping element. context-menu--item should be used for any items in the menu.

The default item in a context menu should be identified by adding the class .default to the item.

Separators are typically used to denote group boundaries or to isolate the default action - add an empty item to the menu and give it the class name of .separator.

Example

Markup
Typical implementations of context menus consist of lists of anchors wrapped in divs, for example:
<nav class="context-menu popupframe threecol">
    <ul>
        <li class="context-menu--item default">View Mentions</li>
        <li class="context-menu--item separator"></li>
        <li class="context-menu--item">Another Action</li>
        <li class="context-menu--item">Delete Mention</li>
        <li class="context-menu--item disabled">Disable Item</li>
        <li class="context-menu--item separator"></li>
        <li class="context-menu--item">More</li>
        <li class="context-menu--item">Stuff</li>
    </ul>
</nav>
8089632247

Menus with icons must indent all items using the .iconindent class.
The icons themselves must also have .singlepadding-left.
Icons in menus must always have the .lightgrey colour.

Example


Markup
<nav class="context-menu popupframe threecol">
    <ul>
        <li class="context-menu--item default iconindent">View Mentions</li>
        <li class="context-menu--item separator iconindent"></li>
        <li class="context-menu--item iconindent"><span class="icon-remove-sign lightgrey singlepadding-left smallpadding-right"></span>Delete Mention</li>
        <li class="context-menu--item disabled iconindent">Disabled Item</li>
        <li class="context-menu--item disabled iconindent"><span class="icon-beaker lightgrey singlepadding-left smallpadding-right"></span>Another Disabled Item</li>
        <li class="context-menu--item iconindent"><span class="icon-wrench lightgrey singlepadding-left smallpadding-right"></span>Another Action</li>
        <li class="context-menu--item separator iconindent"></li>
        <li class="context-menu--item iconindent">More</li>
        <li class="context-menu--item iconindent">Stuff</li>
    </ul>
</nav>
718-314-0757

Menus can have a title for certain sections. Additional information can be displayed in the section footer.
Titles must be at the top of the menu or below a separator. Footer must be the last item in the menu or before a separator.

Example


Markup
<nav class="context-menu popupframe threecol">
    <ul>
        <li class="context-menu--item default">View Mentions</li>
        <li class="context-menu--item separator"></li>
        <li class="context-menu--section-header">View Mentions by Query</li>
        <li class="context-menu--item">Query 1 (40)</li>
        <li class="context-menu--item">Query 2 (61)</li>
        <li class="context-menu--item">Query 3 (81)</li>
        <li class="context-menu--item">Query 4 (21)</li>
        <li class="context-menu--section-footer">(Showing first 4 Queries)</li>
        <li class="context-menu--item separator"></li>
        <li class="context-menu--item">Zoom Into</li>
        <li class="context-menu--item">View on Graph</li>
        <li class="context-menu--item">Delete Topic</li>
    </ul>
</nav>
(304) 218-0274

Wherever possible do not use 'vanilla' dropdowns in the application - if the list in the dropdown is of significant length then we should use (our own!) Selleckt plugin. If the list is short then another input type is likely to be more appropriate, e.g.: mutually exclusive (radio) buttons / switches.

State Example Code
Neutral state
<select class="selectfield">…</select>
Disabled state
<select class="selectfield" disabled>…</select>
Invalid state
<select class="selectfield invalid">…</select>

Empty States

The most occurring case of an empty state in the app is shown in lists. As long as the list is empty, we show the user a simple sentence at the bottom of the list. The sentence should explain that there is no entry yet and should give the user the possibility to create one.

Example
List entry for a an empty list

Exclusive Buttons

'Switches for dropdowns' - mutually exclusive buttons are normally presented as a horizontal list of options, of which only one can be selected at a time.

Have the advantage over dropdowns that all options can be seen at once and have the disadvantage of taking up more space on the screen. Also useful for navigation - tabs are an example of mutually exclusive buttons.

9169487684

Within the app we use help popups to give the user additional information about certain functionalities. The corresponding class is .helppopup
We indicate an existing help popup with a little icon:
If the user clicks on the icon, we show the help popup.
The space between the help icon and their respective text should be 3px.
.tinymargin-left

Example

Author
his column group contains common twitter author metrics including a new metric, impact.
Impact
The Impact Score shows you the potential impact of an author, site or mention. It’s a logarithmic scale between 0-100 normalized for your data to help you find what's most interesting.

Markup
<div class="modular helppopup helptextcolor infoboxbgcolor mediumtext-bigline doublepadding breakword fivecol">
    <a class="icon-remove iconsmaller floatright doublemargin-left singlemargin-bottom lightgrey"></a>
    <p>
        <b>Author</b>
    </p>
    <p>
        This column group contains common twitter author metrics including a new metric, <b>impact</b>.
    </p>
    <p>
        <b>Impact</b>
    </p>
    <p>
        The Impact Score shows you the potential impact of an author, site or mention. It’s a logarithmic scale between 0-100 normalized for your data to help you find what's most interesting.
    </p>
</div>

Infoboxes

Infoboxes are used in summary- and overview pages (e.g. Dashboard overview, Tools section) and in certain modals (e.g. Create New Dashboard) to describe the usage of a feature and provide context for the user.

Generally infoboxes are displayed to the right of the content on the page/modal.
But as they are responsive, on viewports smaller than the width of the content + the infobox itself, they will be displayed above the page content.
Please use infobox--XXXcol that corresponds to the width of the content.
e.g. infobox--tencol or infobox--twelvecol

Example
Appearance at a width of 1284px and above
What’s a Dashboard?

Dashboards are your windows onto data. They are interactive reports that let you see charts, summaries and analyze your mentions.

Appearance at a width below 1284px

Dashboards are your windows onto data. They are interactive reports that let you see charts, summaries and analyze your mentions.

Markup
<section class="infobox infobox--tencol infobox--topspace infoboxtextcolor infoboxbgcolor mediumtext singlepadding-vertical doublemargin-bottom tencolmax">
    <header class="infobox--header hidden normal doublepadding-horizontal singlemargin-bottom">What’s a Dashboard?</header>
    <p class="mediumtext-bigline doublepadding-horizontal">
        Dashboards are your <b>windows onto data</b>.
        They are<b>interactive reports</b> that let you see charts,
        summaries and analyze your mentions.
    </p>
</section>
(210) 715-8928

We currently use waitmask.js for loading indicators in the application. Waitmask is a special wrapper around Spin.js.

You can embed Waitmask by referencing src/packages/waitmask in your HTML.

Example
Loading indicator
Markup
define([
    'src/packages/waitmask'
], function(
    waitmask
) {
    / ...
    view.$el.showWaitmask({
        text: 'Loading...'
    });
    / ...
    view.$el.hideWaitmask();
};
660-334-3113

Minitabs are used for switching modes of a view, usually a table.

Example
  • Active
  • Paused

Notifications

The following notifications are available in the application:

Type Example Classname Usage
Error Notification
Error
.notification-error Use this messages for inadvertent and unexpected errors within the app, e.g. Server errors. Be polite, as transparent about the error as possible and say "sorry" in such cases - normally the app should prevent users from even seeing error messages.
Further reading
Warning Notification
Warning
.notification-warning Use Warning-notifications to inform the user about important aspects, e.g. Overrun your daily allowance
Info Notification
Info
.notification-info Use Info-notifications to give the user supplementary information, e.g. information about a deleted Query
Success Notification
Success
.notification-success Use Confirmations when you are responding to user actions, e.g. successfully created a Dashboard

To get an idea of where and how we are using notifications you can look at this spreadsheet (note not being kept up-to-date): 704-268-1893

The styled examples above are using the following classes in addition to the .notification-* class:

  • .rounded
  • .smallpadding-vertical
  • .singlepadding-horizontal
Example
Query Nike created  Create Another?   View in Dashboard

Markup
<div class="notification-success rounded smallpadding-vertical singlepadding-horizontal">
    Success
</div>

The notification-* classes have a line-height of 12px so that when using them in combination with the .smallpadding-vertical class the resulting notification will have a total height of 24px (as we have for other UI elements like buttons, input-fields, etc.). Of course, this only works when you have a single-line notification.

When you have a notification which will stretch over multiple lines you should also add the .mediumline class to reset the line-height to 15px and have proper spacing between the lines.

Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam tempus metus, sed facilisis erat congue id. Mauris non libero felis, nec hendrerit erat.

Markup
<div class="notification-success rounded smallpadding-vertical singlepadding-horizontal mediumline">
    Success
</div>
venosinal

In some cases it is necessary to separate information into a sequence of pages. Therefore we use pagination when it is appropriate.

The 'jump to page' and 'show X mentions / page' parts are optional and should be used, when it's not possible to predict a small amount of results.

Pagination can be found at the creating a query process, in the "Mentions"-component or when you have many queries or many rules you should see pagination there, too.

Example
Example of pagination with a 'jump to page' functionality
Markup
<td colspan="5">
    <ol class="pager">
        <li data-page="0" class="current first"><a href="">1</a></li>
        <li data-page="1" class=""><a href="">2</a></li>
        <li data-page="2" class=""><a href="">3</a></li>
        <li data-page="3" class=""><a href="">4</a></li>
        <li data-page="4" class=""><a href="">5</a></li>
        <li data-page="5" class=""><a href="">6</a></li>
        <li data-page="726" class="last skipped"><a href="">727</a></li>
        <li data-page="1" class="next"><a href="">Next</a></li>
    </ol>
    <p class="pageSize">
        <label for="tabler-pageSize1838">Show</label>
        <select id="tabler-pageSize1838">
            <option value="10">10</option>
            <option value="20" selected="">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        <span>mentions / page</span></p><p class="jumpToPage">
        <label for="tabler-jumpToPage1839">Jump to page</label>
        <input id="tabler-jumpToPage1839" type="text">
        <button>Go</button>
    </p>
<td>

Placeholder

Placeholders give the user guidance on what sort of data to enter into a free text field (typically single line inputs). It should not be used as an alternative to a label as it is only visible when the field is empty. Therefore, placeholder values should contain a short nonessential hint that compliments the label.

HTML5 provides a 'placeholder' attribute for INPUT elements. Simply provide a value for this attribute like so:

Example
First Name


Markup
<input type="text" name="fname" placeholder="First name" />
(519) 376-2200

Popups should be one of the following sizes:

Name Pixel width Definition Classname
Tiny 276px (fourcol) Used for small dialogs like $.prompt and $.confirm .tinypopup
Small 420px (sixcol) Used for Confirmation dialogs and simple notices / alerts .smallpopup
Standard 564px (eightcol) Good for lists, editing settings, etc. .standardpopup
Wide 708px (tencol) For more involved popups that have e.g.: multiple views .widepopup
Huge 852px (twelvecol) Very complicated views, e.g.: create query popup. If you find you need to use one of these, first consider inserting the content directly into the page instead. .hugepopup

Modal Popups

Modal popups are popups that block the UI behind them, usually with a translucent black background.

Modals should conform to the same widths defined for regular popups (see popups page).

The pop ups must use the .popupframe.

The header has a .singlemargin-bottom and is formatted using .normal (non-bold) and .biggertext

The footer (buttons bar) has .doublemargin-top and usually contain the dialog buttons.

Example
Markup
<div class="popup popupframe tinypopup">
    <a class="close icon-remove iconsmall pagemargin-right customtip" title="Close"></a>
    <h1 class="normal biggertext singlemargin-bottom">Dialog Title</h1>
    <div>Dialog content</div>
    <div class="doublemargin-top">
        <button class="defaultbutton">OK</button>
        <button class="singlemargin-left button">Cancel</button>;
    </div>
</div>

Scrolling Lists

If you are using our standard table size, the following class can be applied to the container in order to ensure a consistent scrolling behaviour: .scrolling-list

Note: When adding a new item to a list, the list should scroll automatically to the bottom of the list

Example:
Foo
Bar
Bish
Bash
Bosh
Foo
Bar
Bish
Bash
Bosh
Markup
<div class="scrolling-list sixcol">
    <table class="grey sixcol">
        <tbody>
            <tr class="highlightrow rowborder">
                <td class="cellpadding-vertical cellpadding-right">Foo</td>
            </tr>
            <tr class="highlightrow rowborder">
                <td class="cellpadding-vertical cellpadding-right">Bar</td>
            </tr>
            ...
            <tr class="highlightrow rowborder">
                <td class="cellpadding-vertical cellpadding-right">Bosh</td>
            </tr>
        </tbody>
    </table>
</div>
(616) 622-2198

Shadowscrollers are scrollable areas which show a shadow on any edges that are overflowing, .shadowscroll.

For example, if a container has a horizontal scrollbar and is at 0 scroll in X, there will be a shadow on the right hand side only. If the user scrolls to the right, both edges will have a shadow. And if the user has scrolled all the way to the right, just the left edge will have a shadow.

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat vitae justo facilisis tempor. Mauris scelerisque varius enim non interdum. Quisque elit ligula, consequat ut bibendum non, fringilla dapibus leo. Cras volutpat, turpis sed congue pellentesque, tortor risus dictum massa, sed sodales nulla arcu eu arcu. Etiam at erat et lectus fringilla ornare. Ut dignissim neque sed mauris porttitor commodo. Cras auctor, urna et elementum suscipit, augue turpis congue orci, et porttitor ante urna eu diam. Nunc vel magna eget urna adipiscing ornare vulputate quis libero. Ut nulla erat, ultrices quis ullamcorper vel, mattis eu massa. Integer dolor diam, ullamcorper nec sollicitudin a, vestibulum at velit. Sed eget nisi ac eros lacinia condimentum. Ut nibh magna, iaculis vitae sollicitudin sit amet, varius a nisi. In gravida cursus diam nec molestie. Etiam arcu velit, euismod et rutrum ut, dapibus vel quam. Quisque ac diam vitae sapien tempor pellentesque ut a sapien. In laoreet orci id lorem dignissim sit amet interdum quam posuere. Donec porta felis eget libero rhoncus tincidunt. Sed tempor congue velit sit amet sollicitudin. Phasellus eros ligula, volutpat sit amet ullamcorper in, condimentum quis dui. Proin quis dolor risus, nec auctor eros. Curabitur placerat nunc sed sapien ornare ornare. Nullam rhoncus pulvinar consectetur. Praesent sed elit urna, et tempor nisi. Vestibulum iaculis laoreet nisi, id imperdiet mauris aliquet quis. Etiam lacinia tempus scelerisque. Vivamus vel sapien sed nisl posuere malesuada molestie ut lacus. In hac habitasse platea dictumst. Vestibulum aliquam rutrum mattis. Mauris et eros quis est porta ultrices. Nunc ut neque libero. Nullam eget tristique erat. Nam felis nibh, tincidunt et bibendum in, iaculis tincidunt neque. Phasellus dictum, neque id imperdiet malesuada, lorem enim facilisis nisl, eget vestibulum massa nunc et ipsum. In lacinia luctus augue quis posuere. Ut ultrices convallis nibh nec commodo. Fusce non urna dui, feugiat pulvinar eros. Aliquam at euismod lectus. In id mi et augue cursus auctor. Aliquam vitae aliquet odio. Suspendisse sagittis orci a tortor porta egestas. Suspendisse a dui sit amet magna auctor porttitor. Proin a augue sapien. Fusce non mollis nisl. Praesent adipiscing nibh at nisi aliquet eget cursus tortor varius. Aenean sodales, lectus quis tempus ullamcorper, purus diam rutrum odio, semper viverra erat velit non augue. Aliquam erat volutpat. Etiam dui lorem, consectetur nec cursus et, lacinia sit amet libero. Sed turpis massa, rutrum at ullamcorper et, convallis vitae purus. Donec placerat accumsan neque quis fringilla. Nullam erat quam, vestibulum et aliquam quis, sodales ut leo. Sed pharetra nulla ut metus dapibus auctor. Donec lacus est, feugiat vel luctus in, placerat eget nisl. Aenean ultricies, ligula quis vehicula ultrices, orci eros luctus nisi, pharetra convallis diam libero ut nisi. Aenean ullamcorper vehicula aliquam. Proin viverra, purus sed rhoncus consectetur, dui massa porta urna, et dapibus ipsum nibh eget elit. Suspendisse leo mauris, eleifend in mollis vitae, accumsan ac erat. Vestibulum sed ligula id justo lobortis faucibus id id urna. Suspendisse quis bibendum turpis. Donec viverra, turpis quis ultrices molestie, augue lorem molestie libero, fringilla malesuada orci diam non risus. Ut vitae elementum tellus. Nunc et diam justo. Fusce dictum justo nec nulla scelerisque at ultrices mauris pulvinar. Nunc iaculis velit eu purus malesuada molestie. Ut velit neque, tincidunt sit amet vulputate vitae, vehicula vel lorem. Suspendisse non velit felis. Phasellus dolor purus, convallis in blandit eget, semper ut lacus. Quisque suscipit consequat risus a lacinia. Donec tempor adipiscing lectus ac imperdiet. Praesent a lectus id est tempor facilisis non non erat.

Markup
<div class="shadowscroll">
    <p>
        Lorem ipsum...
    </p>
</div>

For containers with only horizontal scrolling, the following class should be used in addition: .shadowscroll-horizontal.

The right edge shadow is thinner on this class as there should be no vertical scrollbar.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat vitae justo facilisis tempor. Mauris scelerisque varius enim non interdum. Quisque elit ligula, consequat ut bibendum non, fringilla dapibus leo. Cras volutpat, turpis sed congue pellentesque, tortor risus dictum massa, sed sodales nulla arcu eu arcu. Etiam at erat et lectus fringilla ornare. Ut dignissim neque sed mauris porttitor commodo. Cras auctor, urna et elementum suscipit, augue turpis congue orci, et porttitor ante urna eu diam. Nunc vel magna eget urna adipiscing ornare vulputate quis libero.

Markup
<div class="shadowscroll shadowscroll-horizontal">
    <p>
        Lorem ipsum...
    </p>
</div>

Tab Navigation

Navigation within a section is accomplished by using Tab Navigation, which is a list of mutually-exclusive buttons with three states - up, over and down.

Usage

horizontal-navigation--item should be applied to each item and horizontal-navigation should be applied to the wrapping element.

Markup
<nav class="horizontal-navigation">
    <a class="horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Site Lists</a>
    <a class="active horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Location Lists</a>
    <a class="horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Categories</a>
    <div class="clearleft"></div>
</nav>
glucide
Markup
<nav class="horizontal-navigation fivecol floatleft">
    <a class="horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Site Lists</a>
    <a class="horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Location Lists</a>
    <a class="horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Author Lists</a>
    <a class="horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Categories</a>
    <a class="active horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Rules</a>
    <a class="horizontal-navigation--item navbuttonshade singlepadding-left singlepadding-right db floatleft">Downloads</a>
    <div class="clearleft"></div>
</nav>

Tabs with Contextual-menu

Example
Tabs with Centextual-menu
Markup
<ul class="tabs pagepadding-horizontal horizontal-navigation">
    <li class="dragHandle horizontal-navigation--item navbuttonshade dib current active">
        <a class="textellipsis fourcolmax dib singlepadding-left open customtip">Summary</a>
        <a class="js-tabcontextmenu icon-chevron-down fadeopacity singlemargin-right"></a>
    </li>
    ...
</ul>
See Contextual Menus on details of the menus itself.
513-530-9053

Never use vanilla browser tooltips in the app - instead please give the element a TITLE attribute, set the .customtip class and use the jquery.customtip plugin: $.fn.customtip. You can embed it with src/packages/customtip.

In the app, the tooltip predelay is set to 150ms by default. In some cases where we don't want the tooltip to appear too fast to not annoy the user (ex: like the tooltips for the dashboard tabs), the predelay must be set to 1s (one second).

Example

Markup
<div class="customtip" title="Help for this">Some text</div>
7085971956

If input is missing (e.g. in a form or the filters section), the area where the input is missing will be highlighted with a red frame. While hovering over the red-framed area a red-tinted custom tip is appearing. The custom tip explains why this hasn't passed validation (e.g. wrong type of input).

In some cases there will be an additional error-notification
See also the section about error handling

If a selection from a dropdown-menu is required, the one where the input is missing will be tinted red.

As long as no changes have been made while editing a form, the "Save" / "Done" / "Apply" button will stay disabled (e.g. as long as no dashboard and Data Source is selected, the "Open Dashboard" Buttons stays disabled)

Example
error-highlighted area
A error tooltip which explaines the error

When Adding New Features

Features can be released in various stages:

Closed beta
  • for internal staff
  • optionally, for a few selected clients as well
  • the functionality is subject to significant changes
  • some of these changes may make historical data incompatible
  • the feature may be pulled altogether

Open beta
  • for all clients (sometimes at a cost)
  • the functionality is still subject to significant changes

The beta-releases (soft launch) should have a BETA lozenge
You can use the class .betaIcon

Full launch
  • for all clients (sometimes at a cost)
  • the functionality is not expected to change significantly in the short term

For the Full launch releases we use a NEW lozenge for two weeks
You can use the class .newIcon

Modular CSS

Modular CSS is an approach to authoring CSS that defines styles in terms of reusable and portable modules defined by class names.

Just as we do with javascript, favour composition over inheritance with CSS - the style of an element should be defined by combinations of classes working together. This strongly lends itself towards reusable and maintainable CSS.

Try to avoid coupling your styles to the DOM - i.e.: avoid tag names in selectors and try to remain agnostic about the element that it is being applied to. Ideally you should be able to apply a class to any element and it will look the same.

It will also be much easier for us to move to CSS preprocessors like LESS or SASS if the majority of our CSS is already defined in modules.

Further reading:
603-773-0341

Markup

As well as avoiding coupling your CSS to the DOM structure, try to keep selectors as flat as possible, e.g.: don't do this:

.someList li li > a+span {
    color: red;
}

when you could just do this:

.highlight {
    color: red;
}

Remember that CSS selectors are interpreted right-to-left, not left-to-right.

Kubera

UI Text Guidelines

Keep line-lengths short for better legibility
To provide a consistent and good legibility we should try to not exceed the optimal line length of 50-75 characters per line even if there is more horizontal screen estate (compare the Google search results page for a good example of this).

Emphasize important words in short help texts
Make important words in help texts bold so users can skim through them more easily. You can use the utility classes for this. Try to highlight the words that embody the message best.

Full stops
For the use of full stops, we have a simple policy.
If it is a sentence, it has full stop.
Titles, incomplete sentences, bullet lists or enumerations don't have a full stop.

UI Casing Conventions
Title Casing - not only the first word is capitalized but all
(except ‘small’ words like “and”, “to”, “for” or “the”).
e.g.: “Create New Project”

Title Casing should be used in
  • Utility bar / window titles
  • Menu entries
  • Tab titles
  • Html header title
  • Main navigation links
  • Buttons

Sentence casing - just like a sentence: first word capitalized.
e.g.: “Get an email when there's a sudden increase in discussion[...]”

Sentence casing should be used for
  • Placeholder (watermark) text in input fields
  • Form labels (next to or above text inputs, checkboxes etc.)
  • ‘activity’ links, e.g. “Create one”, “Collapse list”
  • Messages of all sorts (“Please wait…” or longer stuff)
  • Entries in (filter) drop downs
  • Help texts
786-725-5149

We would like to be remembered for our art as well as our science, meaning there is a real need for a unified, memorable Brandwatch voice.
Art doesn’t follow a rulebook. If it did, it wouldn’t be art.

That’s why our voice guidelines are about shared principles instead. It’s about using your initiative and adapting your style to something that sounds unmistakably Brandwatch. It’s a shared, collective feeling, not a strict set of rules that must be followed at all times.

Our writing exists to inform, to engage and to inspire.

These themes invite our audience to think differently, whether it’s learning something useful, engaging them in an absorbing tale or provoking a new way of thinking about things.

Our Character

  • We are curious, questioning and challenging of everything. This approach to knowledge applies to novel trends as well as conventional wisdom. Everything becomes an invitation to absorb new information.
  • We are transparent and honest to the core. There’s nothing we’re trying to hide and we’re not afraid to be frank about the truth.
  • We’re knowledgeable and reliable. It makes us inherently authoritative and it means that we know what we are talking about. We’re comfortable speaking about the ideas behind copy we publish. We know why we wrote them and are confident in our answers when confronted with alternatives.
  • We’re witty, but not hilarious: we seek knowing smiles, not raucous laughter.
  • We’re positive, but not excitable: our audience feels upbeat, not fanatical.
  • We’re conversational, but not colloquial: copy is delivered like speech, but without slang.
  • We don’t rock, we’re not awesome and we’re certainly not gurus. There’s a deep level of sophistication in what we write and it commands a level of respect and intrigue that becomes lost when the language doesn’t mirror that ethos.

Writing Style

Typically, all copy should be written in the first person plural.

Brandwatch, like other products and companies, is singular.

We are direct with our message and our content is top-loaded.

Our paragraphs are short, rarely more than a sentence or two.

The use of underlining and upper case is all but forbidden, but justifiable on exception. Go easy on the use of bold.

Make liberal use of headings and subtitles.

Speak plainly as if you were speaking to a peer.

Address an individual with your copy. Speak to an imagined ‘you’.

Write as though our audience know a thing or two.

If in doubt, use your common sense.

Flair & Tagline

Remember that our writing exists to inform, to engage and to inspire.
The manifestation of this can be thought of as producing an experience that leaves the reader coming away from every interaction with Brandwatch having learnt something new.

This reinforces the meaning behind our tagline: now you know.

Almost every bit of copy produced is an opportunity to share knowledge and leave the reader feeling like they have learnt something new.

Example

You could do this in a tweet …

Flair example in tweet
Example

in a piece of sales collateral

Flair example in sales collateral
Example

on the website …

Flair example on website
Example

In our content …

Flair example in content

… and even in product updates, in the platform, in press releases and in support emails.

use every form of communication as an opportunity to inform, engage and inspire. Share statistics. Depart knowledge. Give them a reason to care.
Now you know.

(614) 822-8980

We reject the approach of being pedantic to the English language and to other brands’ guidelines. That means we opt for tweet over Tweet. It also means we prefer data and social media to exist as single entities.
We provide enterprise social intelligence. On rare occasions we are associated with social listening, social media monitoring or social analytics, but you must be prepared to justify why.

Like Google or Salesforce, Brandwatch is the name of our company but also the name of our main product.

Brandwatch Analytics is a platform.

We enjoy talking to, and about, our customers. And we like calling them that.

5035862713

When using different terms across Brandwatch’s various channels, it’s important to keep capitalization principles consistent.
The core principle to remember is that if something is a proper noun – a concept or name for something that Brandwatch or another company owns – then the word should be written in title case.

Here is a non-exhaustive list of some of the terms you may come across when writing for Brandwatch.

Title case
  • Academy
  • Alerts
  • Analyst+ (and other user roles)
  • Author (component)
  • Author List
  • Automated Reports
  • Boolean
  • Categories
  • Channels
  • Components
  • Custom Alerts
  • Dashboards
  • Demographic
  • Displays
  • Expert Hours
  • Facebook
  • Filters
  • Firehose
  • Groups
  • Help Center
  • Hindsight
  • Insights
  • Installation
  • Lists
  • Projects
  • Queries
  • Rules
  • Scenes
  • Signals
  • Site List
  • Tags
  • Threshold Alerts
  • Twitter Certified Product
  • Twitter
Lower case
  • administration
  • agency
  • analytics
  • app
  • assignment
  • authors
  • bulk processing
  • client
  • core account
  • data
  • device
  • enterprise social intelligence
  • like
  • login
  • mark-up
  • mention
  • operators
  • platform
  • priority
  • retweet
  • sentiment analysis
  • site
  • social listening
  • social media monitoring
  • starred
  • tab
  • tabs
  • tweet
  • user name
  • user
  • validation
  • workflow
Example

“Brandwatch uses data from Twitter to power the Demographic Insights component”

In this example, data and component are generic terms that could be used by any technology vendor. Demographic Insights is a unique product developed by Brandwatch, and Twitter is the name of a company.

Example

“There are a number of different mentions from authors that can be filtered by MozRank or the Impact Score”

This sentence includes the words mentions, authors and filtered, all of which are generic and refer to concepts that extend beyond Brandwatch IP. However, if we were referring to the Author component, or the Filters feature, we would have used title case.

kindle

Most grammar should go without saying. There’s no need for an exhaustive list of rules to follow, because you should know most of them already.
We write in American English for the spelling of words. Try to avoid any regional idioms, slang or phrases and go for globally acceptable writing, rather than something that only reads well in the US, for example ‘write me’ or ‘go share it’.

Ampersands (&) should never be used in general copy, and should only be encountered in headlines or titles.

There is no strict ruling on the usage of commas or the correct types of apostrophes and speech marks.

The semi-colon (;) is a sadly misunderstood piece of punctuation. If you have any doubt as to whether it is grammatically appropriate to use in your writing, then try rephrasing the sentence. Best practice is to avoid it altogether.

Job titles are written in lower-case, unless it is the title of an individual. Again, if you are in doubt about a word needing capitalization or not, opt for lower case.

Dates should be written with corresponding th or st. We write 15th March 2015 when we can. We never write March 15, or 15 March. Try to avoid numerical display of dates (eg. 15/03 or 03/15) but make a decision on which one to use based on the context.

Please be extremely careful when using exclamation marks. Refresh your mind with our voice principles. We are calm, sophisticated and knowing. We seek to inform, engage and inspire. There shouldn’t be a need to sound so excited at the same time!

Company Information

Corporate overview

Brandwatch is a global company headquartered in Brighton, UK.

We acquired social influencer analytics firm PeerIndex in December 2014.

We do not release financial information, apart from in exceptional circumstances. You can however, share the following data:

  • 2009-2013: 100% year on year revenue growth
  • 2014: Over 75% year on year revenue growth

You can also share the details of our funding rounds.

  • May 2014: $22M led by Highland Capital Partners Europe.
  • Mar 2012: $6M led by Nauta Capital
  • Nov 2010: $1.5M led by Durrants
  • Dec 2007: £600k angel investments
  • May 2006: £550k angel investments

Staff

We have over 300 staff globally. The following figures are not exact, but serve the purpose of accurate estimates for external use.

Total – 300+

  • Berlin – 30+
  • Brigthon – 180+
  • London – 10+
  • New York – 60
  • San Francisco – 15
  • Singapoure – 5
  • Stuttgart – 10+
5044549831

Highest score in the Customers subcategory in Forrester Wave report on Enterprise Listening (based on customer satisfaction, customer base and churn)

Highest rating for customer satisfaction in G2Crowd report, from reviews from verified LinkedIn members – 96 percent of users rated Brandwatch 4 or 5 stars

Brandwatch was also the only ‘Leader’ in Social Media Monitoring in the 2015 G2Crowd report

20th fastest growing technology company in the UK in The Deloitte Technology Fast 50 for 2014

Average client recommendation score 8/10 in annual customer survey (2013)

Customer Support team has a 97% satisfaction rate (based on last 3 months of tickets – last update: April 2015)

763-888-5403

To find out more about the different operators or the number of languages available in Brandwatch, as well as anything else to do with the platform, use sonobuoy

(325) 202-8616

We have over 1,200 customers, including 30 of the top Fortune 100 companies. To know which customers you can reference publicly, visit the (514) 427-5741 and check the logos featured in the carousel.

Boilerplate

You can use a variety of different boilerplates when describing Brandwatch, and can customize each to suit the context. You might wish to change the customers mentioned, or modify other elements.
Here is the starting boilerplate you can begin with.

Example

About Brandwatch

Brandwatch is a global enterprise social intelligence company that helps make people smarter.

Its platform gathers millions of online conversations every day and provides users with the tools to analyze them, empowering brands and agencies to make smarter, data-driven business decisions.

Acquiring social influencer analytics firm PeerIndex in December 2014, Brandwatch continues on its aggressive business trajectory following on its most recent round of venture funding to the tune of $22 million. The Brandwatch platform, ranked highest in customer satisfaction by G2Crowd in Spring 2015, is used by over 1200 brands and agencies, including Cisco, Whole Foods, Whirlpool, British Airways, Sony Music and eBay.

Brandwatch. Now You Know.

www.brandwatch.com | @Brandwatch | press office | contact

In the press

(785) 597-0139

Brandwatch press releases should begin with the date, issued from whichever office location is most relevant.

Like with all other communication, focus on producing copy that informs, engages and inspires. Write sentences that demand attention. In this space, it takes something special to stand out so top-load the content and break convention whenever you have the chance.

(316) 788-6437

When being quoted in the media, it’s our chance to say something memorable – so take it. This means speaking like a human, minimizing the use of jargon and trying to contribute an opinion that goes beyond the obvious. We do not regurgitate common sense or conventional wisdom, and our commentary should always be from a place of authority.

Acocanthera

When Brandwatch insights are used in media articles, it should be quoted in the text body as any of the following:

  • ‘insights gathered using Brandwatch Analytics’
  • data gathered by Brandwatch’
  • ‘analysis by Brandwatch’

When charts and other visual insights are used, the phrase ‘Powered by Brandwatch’ should feature as a watermark.

Example
Powered by Brandwatch
7182166010

Be swift in acknowledging the problem, but remember that there is no rush to apologize until more details are known.
Try not to rely on cliche, and give genuine, honest information about what has gone wrong.

Next, if possible, explain what we are doing about the issue right now, in a helpful and assuring manner.

Finish by sharing practical next steps and offer actions for the reader to take if they would like to know more, or what they may need to do in order to address the issue directly.

This means avoiding:

Example

“Brandwatch uses data from Twitter to power the Demographic Insights component”

instead using sentences like:

Example

‘We’re very sorry, but something seems to be up with the way some of our new language updates were implemented. We’re embarrassed that this has happened, and please bear with us while we race to fix what went wrong’