Guidelines and examples

Below you can find examples of some parts of the Breakit design and how to use it.

Widgets

The are primarily two kinds of widgets. For example, use the widget with the line and title set in the primary color for purposes when you list content.

When you want to make things stand out – use the widget with the white background.

Backgrounds

When designing new features it is possible to put your design on a white or gray background (#FAFAFA). When creating design on gray background we often use white boxes to group content and making things stand out. Remember to add padding inside white boxes.

On white backgrounds you can also use gray boxes.

Colored Elements

For shorter texts, formatting and subheadings you can use the primary color, examples below.

It’s recommended to use the Graphik Semibold or Bold for purposes like this.

We also uses the primary color for links.

Italics

With Graphik Bold Italic and the primary color you can create subheadings where you want to make content stand out and have a ”Breakit branded style”. We also use Graphik Bold Italic in smaller sizes for labels and bars.