We use cookies to ensure you get the best experience on our website.
Got it!
Learn more
Welcome back! Would you like to login to your trial dashboard at
?
Let's go
Contact sales
Complimentary Gartner® Report on “Video: How to Build and Use a Customer Journey Map”
Get the Report
UI Guidelines
These UI guidelines aim to showcase Countly UI elements and provide guidance for a consistent UI. All elements displayed here already have related CSS definitions, please consult this guide before creating a new element.
Contextual table rows
Opened table
Row
(text above the table) font-size: 12px;
(text above the table) font-color: #636363;
(table head) background-color: #F3F3F3;
(table head) height: 34px;
(table head) font-size: 11px;
(table head) font-color: #636363;
(table head) text-transform: uppercase;
(rows) height: 26px;
(rows) background-color: #FFFFFF;
(rows) font-size: 12px;
(rows) font-color: #636363;
background-color: #FFE4C9;
This is a draggable icon. It has to be placed in the most left column. If you hover
over the icon, there is a color change of the icon and mouse cursor changes to cross.
(icon) font: FontAwesome;
(icon name) fa fa-reorder event-order
Lists with ordering
If it’s necessary vertical tabs could be used.
Preffered version is the horizontal one.
Active tab
Inactive tab
This version of content tabs is used in Overview and Crashes. Vertical
version is used in In-App purchases section.
Dashboard tabs
(label) font-size: 10px;
(label) color: #666666;
(label) text-transform: uppercase;
(label) font-size: 10px;
(label) color: #666666;
(label) text-transform: uppercase;
(number) 30px Oswald;
(number) color: #333;
(background) color: #FFFFFF;
(number) 30px Oswald;
(number) color: #666666;
(background) color: #F9F9F9;
This dropdown style is used for table editing. Items are left-aligned.
Delete option should be always placed as the bottom item.
Table edit dropdown
(item) font-size: 13px;
(item) color: #636363;
(item) padding: 8px 20px;
(box) padding: 10px 0;
Top bar menu tooltip
Retention tooltip
Library used is tooltipster.
Texts inside tooltips should
be brief and short. Tooltips
are shown on hovers, if it
makes sense.
Tooltips
font-size: 12px;
font-align: center;
line-heigh: 18px;
(font) color: #FFFFFF;
background color:
padding: 6px 14px;
Push tooltip
Times of Day tooltip
For some plugins a grid view can be used. Grid is usually placed in the top-section of the plugin, in the place of chart.
It should be responsive - if the window width is smaller, the grid
transforms from 4 column to 3 column.
Grid
width: 300px;
(headline) color: #636363;
(headline) text-transform: uppercase;
(headline) font-size: 14px;
(headline) font-family: Ubuntu;
(number) color: #3a3a3a;
(number) font-size: 38px;
(number) font-family: Oswald;
(label) color: #636363;
(label) font-size: 12px;
(label) text-transform: uppercase;
(label) font-family: Ubuntu;
Notifications are used as an instant indicator of action success / fail.
Notifications
(subheadline) font-weight: 300;
(subheadline) font-size: 14px;
(subheadline) line-height: 19px;
(subheadline) display: block;
(subheadline) margin-top: 8px;
(headline)color: #636363;
(bottom text) font-size: 13px;
(bottom text) line-height: 13px;
(bottom text) display: block;
(bottom text) color: #777;
(bottom text) margin-top: 12px;
Icons
(green) ion-checkmark-circled
(green) color: #2FA732;
- if you want to use another icon, we can discuss it.
Drawer examples