The purpose of this styleguide is to maintain a consistent identity throughout Twitter Counter's platforms, without restricting creativity. As such, the styleguide should be treated as a set of guidelines, rather than a rulebook.

When in doubt regarding any of the documented elements - or an element not documented at all - please contact us at support@twittercounter.com.

Logos

Color Palette

The following colors define our unique color palette. Aside from our primary colors, like the Twitter Counter blues and greys, there are also several other colors that can be used to communicate success, warnings, errors or call to actions.

Click the colors or LESS var names to copy them to your clipboard!

Typography

Applied Typography


When using header tags, keep into account how they will affect page indexing, or else our SEO guy won't be very happy.

Elements

This section is dedicated to all the elements you're capable of using on Twitter Counter. Considering there are many variations and combinations possible, this section is split up in several sub-sections.

Forms

Note: you can only register once per email address

Special Fields

@
Tweets

Buttons

Tone of Voice

This section is dedicated to the tone of voice of Twitter Counter's messages and copywriting. This guidelines ensure we appeal to our userbase in a consistent manner and put together clear and understandable messages for a large variety of users.

Error Messages

An apologetic tone

We use an apologetic tone when displaying error messages in order to establish that even though a mistake has been made, we still respect the action of the user. Above that we try to humanize the mistake to prevent the user from feeling that he or she is interacting with a static application.

Direct communication

Our users are poeple too. So when you're writing an error message, use the tone of voice you would use if you were telling this person this message directly.

Understandable words

Don't use big words that over-complicate the message. For example, instead of using "incompatible", try using "does not work together". This ensures that a wide variety of users understand the message and can go forward.

Help the user move on

Give the user a hint of how the problem can be solved and how the user can prevent this problem in the future. This also ensures that the user becomes more familiar with the environment of the application.

Examples coming soon.

More to come..