Using alerts, you provide feedback for the user. Feedback could mean a neutral notice, a warning or a positive or negative message. We show alerts by means of snackbars or dialogs with button/s.
Snackbars differ by colour/s and also symbol/s.
Always use them over full screen grey or colour overlay.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Badges are primarily used to highlight something on your website. We use simple badges or badges with icon/s. We suggest using maximum 3 colours at a time. Please be aware of the use of the colour from your selected theme.
Simple badges highlight the most important part of your website. You can also use them as tags.
In some cases we also use badges with an icon in order to help the user understand the communicated message more easily.
We suggest using maximum 3 colours at a time.
We use several types of buttons and links, each of which is suited for specific purposes and contexts. Below you can see different types, colours and states of our buttons and links.
Our buttons come in five sizes: Large, Medium, Small, XSmall and Wide. The typeface remains the same as in other texts, i.e. Brandon Grotesque.
We suggest using maximum 3 colours at a time.
Cards display structured content such as articles or website sections. We use four basic card types by which we sort our content on websites. See all our card types below.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
20 Mar 2019
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
20 Mar 2019
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula elit.
With dividers, you can separate content in a text or other element. We use dividers in three different sizes and four widths. We also use vertical dividers to separate texts in one row.
We use horizontal dividers in three sizes: 1pt, 2pt and 4pt. Use it according to your needs when composing texts.
The width of dividers is set to 24pt, 40pt, 56pt or 72pt.
Vertical dividers come in a single width only but in the same three sizes as the horizontal dividers: 1pt, 2pt and 4pt.
Please be aware of the use of the colour from your selected theme.
In our forms, we use an 8-point grid system (see more in "Grid System" section). In a simple contact form we suggest to use six basic inputs, the GDPR checkbox and one button to send the information.
Related: Grid System
We use galleries which are both responsive and easy to control on a desktop as well as on mobile devices. Our preference is to use slider galleries or tile galleries with more images.
To control a slider gallery we use left (previous) and right (next) arrows or slide controls (small dots centred above the lower edge of the gallery). The gallery can be used as a separate section on a website or placed inside an article.
Tile gallery is a gallery with more visible images using square and rectangle-shaped images. The gallery can also be used as a separate section on a website or placed inside an article.
Hero image is often the first visual element a visitor encounters on a website. For backgrounds we only use the colours of our pulses or visually attractive images. Most importantly, the colours must always match the selected theme.
Related: Colours Themes Buttons & Links
Inputs allow the user to input or select some information. We use four basic types of inputs: Text Fields, Selects, States and Checkboxes & Radios. We suggest you choose only one type of input depending on your design needs.
Error message
When showing locations on a website we always use our own pointer icon. The icon can be used in any of our approved primary colours. But keep in mind that the colour must match the selected theme as with the rest of the website.
Related: Themes
The pointer icon should always match the theme colour. The map can be also stylized to match the selected theme.
A map can be placed next to a text block holding additional information such as address or other contact information. The pointer icon and map colour should always match the selected theme.
Twin City C,
Mlynske Nivy 12,
Bratislava, Slovakia
We help users to navigate through a website by means of numbered pagination or by slide controls in the form of clickable dots.
Colour of the active page must be the same as the colour of the selected theme.
Colour of the active page must be the same as the colour of the selected theme.
Colour of the active page must be the same as the colour of the selected theme.
A popover is a compact overlay that can be attached to any element on a website. We use it to add some additional information to a particular element. Our popovers come in a light or dark colour.
Top popover
Bottom popover
Left popover
Right popover
Top popover
Bottom popover
Left popover
Right popover
Via progress bars, we help users to indicate the abstract length of some process, i.e. loading of a website. We use linear and circular progress bars.
Linear progress bars can be used with primary colours with a light background or white on dark or colour backgrounds.
Circular progress bars can be used with primary colours with a light background or white on dark or colour backgrounds.
Tables help users to easily read or compare different pieces of information. We use two basic types of tables: with header columns and with header rows. In both cases, please be aware of the use of the colour of your selected theme.
Related: Themes Colours Typography
In the header column always use the colour of your selected theme and do not forget to change the typeface.
| Nairobi | Norwich | Quezon City | Bristol |
|---|---|---|---|
| Norwich | Brisbane | Ottawa | Beijing |
| Havana | Lincoln | Belfast | San Diego |
| Abuja | Porto | Trondheim | Bologna |
In the header column always use the colour of your selected theme and do not forget to change the typeface.
| Nairobi | Norwich | Quezon City | Bristol |
|---|---|---|---|
| Norwich | Brisbane | Ottawa | Beijing |
| Havana | Lincoln | Belfast | San Diego |
| Abuja | Porto | Trondheim | Bologna |
We use tabs to switch between views or subpages within the same context or information. You can choose between vertical or horizontal tabs. Below you can see three stages of button colouring in our tabs.
In text sections, we use the Brandon Grotesque family typeface. We have defined a set of rules for using texts on our websites. Please consult the basic guidelines below.
Related: Typography Icons Themes Colours