Styles
Primary colors
green-0
#39B54A
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
green-0-hover
#1B9B2D
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
black-0
#000000
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
Secondary colors
light-gray-0
#116BC5
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
light-gray-1
#CCCFDA
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
light-gray-2
#B7B9C5
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
dark-gray-0
#7A7B81
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
dark-gray-1
#52545F
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
Alerts
success-0
#00C853
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
warning-0
#FFC800
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
error-0
#E30023
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
info-0
#0045F0
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
5%
Styles
Notifications
Notification boxes
Success
toastr.success('Success toast message', 'Success title');Warning
toastr.warning('Warning toast message', 'Warning title');Error
toastr.error('Error toast message', 'Error title');Information
toastr.info('Info toast message', 'Info title');
Styles
Notifications
Action buttons
Active - Button with icon
Background:
#38B549
Border-radius:
4px;
Font-family:
Poppins-SemiBold;
Font-size:
13px;
Color:
#FFFFFF;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Standard button
Background:
#288AED
Border-radius:
4px;
Font-family:
Poppins-SemiBold;
Font-size:
13px;
Color:
#FFFFFF;
<button class="btn btn--medium btn--green">Save changes</button>Outline button
Background:
#FFFFFF
Border:
#CCCFDA, 1px;
Border-radius:
4px;
Font-family:
Poppins-SemiBold;
Font-size:
13px;
Color:
#FFFFFF;
<button class="btn btn--medium btn--blank">Cancel</button>
Styles
Tags
Tags
Active - tag
- Auto Insite
Background:
#F6F7FB
Border:
#CCCFDA, 1px;
Border-radius:
14px;
Font-family:
Poppins-Regular;
Font-size:
13px;
Color:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
</li>
</ul>Active - tag with x
-
Auto Insite
Background:
#F6F7FB
Border:
#CCCFDA, 1px;
Border-radius:
14px;
Font-family:
Poppins-Regular;
Font-size:
13px;
Color:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>
Styles
Other
Other
Components
Dropdown
Standard dropdowns
Active - dropdown
Select status
Background:
#FFFFFF
Border:
#CCCFDA, 1px;
Border-radius:
4px;
Label Font-family:
Poppins-Medium;
Label Font-size:
14px;
Dropdown Font-family:
Poppins-Regular;
Dropdown Font-size:
13px;
Color:
#050A2A;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Dropdown - disabled/inactive
Select status
Background:
#EFF1F7
Border:
#CCCFDA, 1px;
Border-radius:
4px;
Label Font-family:
Poppins-Medium;
Label Font-size:
14px;
Dropdown Font-family:
Poppins-Regular;
Dropdown Font-size:
13px;
Color:
#050A2A (Opacity: 40%);
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>
Components
Tables
Tags
Table
|
|
Name
|
When
|
And
|
Then
|
|
|---|---|---|---|---|---|
|
|
Event name | Order created | Task assignee set to something | Add tag to vehicle something |
|
|
|
Event name | Order created | Task assignee set to something | Add tag to vehicle something |
|
|
|
Event name | Order created | Task assignee set to something | Add tag to vehicle something |
|
|
|
Event name | Order created | Task assignee set to something | Add tag to vehicle something |
|
Background:
#F7F8FC
Background-verse:
#FFFFFF
Font-family:
Poppins-Regular;
Font-size:
13px;
Column-name Color:
#050A2A;
Column-verse Color:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>
Components
Navigation
Navigation bar
Profile Dropdown
Background-under-popup:
#FFFFFF
Photo-size:
45px x 45px
Font-family:
Poppins-Semibold;
Font-size:
14px;
Color:
#000000;
Color-hover:
#000000 (Opacity: 50%)
Components
Input fields
Standard Input Fields
Active
Text information about error
Background:
#FFFFFF
Border:
#CCCFDA, 1px;
Border-radius:
4px;
Label Font-family:
Poppins-Medium;
Label Font-size:
14px;
Input Font-family:
Poppins-Regular;
Input Font-size:
13px;
Color:
#050A2A;
Color-placeholder:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Input - disabled/inactive
Text information about error
Background:
#EFF1F7
Border:
#CCCFDA, 1px;
Border-radius:
4px;
Label Font-family:
Poppins-Medium;
Label Font-size:
14px;
Dropdown Font-family:
Poppins-Regular;
Dropdown Font-size:
13px;
Color:
#050A2A (Opacity: 40%);
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Input - error
Text information about error
Background:
#EFF1F7
Border:
#E30023, 1px;
Border-radius:
4px;
Label Font-family:
Poppins-Medium;
Label Font-size:
14px;
Dropdown Font-family:
Poppins-Regular;
Dropdown Font-size:
13px;
Color:
#050A2A (Opacity: 40%);
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Horizontal Input & Label
Text information about error
Background:
#EFF1F7
Border:
#E30023, 1px;
Border-radius:
4px;
Label Font-family:
Poppins-Medium;
Label Font-size:
14px;
Dropdown Font-family:
Poppins-Regular;
Dropdown Font-size:
13px;
Color:
#050A2A (Opacity: 40%);
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>
Components
Selectors
Radio button
Active
Background:
#FFFFFF
Border:
#CCCFDA, 1px;
Selector-size:
16px x 16px;
Font-family:
Poppins-Regular;
Font-size:
13px;
Color:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Inactive/disabled
Background:
#FFFFFF
Border:
#CCCFDA, 1px;
Selector-size:
16px x 16px;
Font-family:
Poppins-Regular;
Font-size:
13px;
Color:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Checkbox
Active
Background:
#FFFFFF
Border:
#CCCFDA, 1px;
Selector-size:
16px x 16px;
Font-family:
Poppins-Regular;
Font-size:
13px;
Color:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>Inactive/disabled
Background:
#FFFFFF
Border:
#CCCFDA, 1px;
Selector-size:
16px x 16px;
Font-family:
Poppins-Regular;
Font-size:
13px;
Color:
#52545F;
<ul class="pill__list">
<li class="pill">
Auto Insite
<figure class="icon--small pill__icon">
<svg>
<use xlink:href="#icon-gray-cancel"></use>
</svg>
</figure>
</li>
</ul>
Grid system
Grid System
Layout settings
Grid used inside content sections
Background:
#F6F7FB
Border:
#CCCFDA, 1px;
Border-radius:
14px;
Font-family:
Poppins-Regular;
Font-size:
13px;
Color:
#52545F;
Based on:
jQueryUI Datepicker - https://api.jqueryui.com/datepicker/
Components
Gallery
Gallery
Slider with photos
Components
Pop up
Basic
Pop up A
Title text about what is on popup
Text content informing what you are doing
Background-under-popup:
#000000 (Opacity: 50%)
Background-popup:
#FFFFFF
Title Font-family:
Poppins-Bold;
Title Font-size:
20px;
Text Font-family:
Poppins-Regular;
Text Font-size:
14px;
Button-color:
light-blue-0
<div class="reveal modal modal--small modal--narrow" id="popup-id" data-reveal>
<div class="modal__head modal__head--centered">
<h3 class="modal__title">Are you sure to delete this item?</h3>
<p class="modal__text">This action cannot be undone.</p>
</div>
<div class="modal__content">
</div>
<div class="modal__buttons">
<button class="btn btn--blank btn--medium" data-close>Cancel</button>
<button class="btn btn--green btn--medium has-shadow" type="submit">Delete</button>
</div>
<button class="close-button modal__close" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">
<figure class="icon--small">
<svg>
<use xlink:href="#icon-close"></use>
</svg>
</figure>
</span>
</button>
</div>Pop up B
Title text about what is on popup
Text content informing what you are doing
Background-under-popup:
#000000 (Opacity: 50%)
Background-popup:
#FFFFFF
Title Font-family:
Poppins-Bold;
Title Font-size:
20px;
Text Font-family:
Poppins-Regular;
Text Font-size:
14px;
Button-color:
error-0
<div class="reveal modal modal--small modal--narrow" id="popup-id" data-reveal>
<div class="modal__head modal__head--centered">
<h3 class="modal__title">Are you sure to delete this item?</h3>
<p class="modal__text">This action cannot be undone.</p>
</div>
<div class="modal__content">
</div>
<div class="modal__buttons">
<button class="btn btn--blank btn--medium" data-close>Cancel</button>
<button class="btn btn--red btn--medium has-shadow" type="submit">Delete</button>
</div>
<button class="close-button modal__close" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">
<figure class="icon--small">
<svg>
<use xlink:href="#icon-close"></use>
</svg>
</figure>
</span>
</button>
</div>
Grid system
Grid System
Layout settings
Grid used inside content sections
Number of columns:
12
Single column width:
8.3333%
Gutter width:
1.25rem;
Based on:
Foundation XY grid - https://foundation.zurb.com/sites/docs/xy-grid.html
Typography
Typography
Typography settings
H1
Heading Text of Autofactor Project
Font-family:
Poppins-Bold
Font-size:
25px;
H2
Heading Text of Project
Font-family:
Poppins-Bold
Font-size:
20px;
H3
Heading Text of Autofactor Project
Font-family:
Poppins-Semibold
Font-size:
14px;
H4
Heading Text of Autofactor Project
Font-family:
Poppins-Semibold
Font-size:
13px;
H5
Heading Text of Autofactor Project
Font-family:
Poppins-Bold
Font-size:
12px;
P1
Basic font to type anything in Autofactor Project
Font-family:
Poppins-Regular
Font-size:
13px;
Icons