Eziway - Brand Guide Documentation

Colours

Home
/
Colours

Main Colours

ESP Green

R=85 G=177 B=71
HEX #55b147

Dark Grey

R=51 G=51 B=51
HEX #333333

Secondary Colours

Secondary Green

R=123 G=182 B=97
HEX #7bb661

Secondary Grey

R=85 G=85 B=85
HEX #555555

Other colours

Menu border colour

Example:

R=238 G=238 B=238
HEX #eeeeee

Menu background colour

Example:

R=250 G=250 B=250
HEX #fafafa

Page title bottom border colour

Example:

R=238 G=238 B=238
HEX #eeeeee

DHX table header background colour

Example:

R=238 G=238 B=238
HEX #eeeeee

Icon background colour

Example:

R=85 G=177 B=71
HEX #55b147 Opacity: 0.3%

Icon colour

Example:

R=85 G=177 B=71
HEX #55b147

Buttons

Home
/
Buttons

Normal Button Colours

Font: Nunito Sans
/
Font Size: 13px
/
Background Color: #55b147
/
Line Height: 1.3
/
Button Size: Small

Example:

Normal:
R=85 G=177 B=71
HEX #55b147

Hover:
R=123 G=182 B=97
HEX #7bb661

Active:
R=85 G=177 B=71
HEX #55b147

Copy CSS here

.btn-group-sm > .btn, .btn-sm {
    line-height: 1.3;
    font-size: var(--button-fontsize-sm);
}
.btn-primary:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .btn-primary:active {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

Table Dropdown Buttons

Font: Nunito Sans
/
Font Size: 13px
/
Background Color: #55b147
/
Line Height: 1.3
/
Button Size: Small

Example:

Normal:
R=51 G=51 B=51
HEX #333333

Hover:
R=85 G=177 B=71
HEX #55b147

Active:
R=85 G=177 B=71
HEX #55b147

Copy CSS here

.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-group-sm > .btn, .btn-sm {
    line-height: 1.3;
    font-size: var(--button-fontsize-sm);
}
.btn {
    font-size: var(--button-font-size);
    border-radius: var(--tab-border-radius);
    padding: 0.312rem 0.875rem;
    margin-bottom: 2px;
}
.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}
.btn-default:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: fit-content;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: var(--text-xs);
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--grey-light);
    border-radius Defines the radii of the outer border edge. Learn more Don't show : 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    cursor: pointer;
}

Hide/Show Panel Button

Hide Panel

Font: Nunito Sans
/
Font Size: 13px
/
Background Color: #ffffff
/
Line Height: 13px
/
Button Size: Extra Small

Example:

Normal:
R=51 G=51 B=51
HEX #333333

Hover:
R=85 G=177 B=71
HEX #55b147

Active:
R=85 G=177 B=71
HEX #55b147

Copy CSS here

.btn-default {
    color: #ffffff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-group-sm > .btn, .btn-sm {
    line-height: 1.3;
    font-size: var(--button-fontsize-sm);
}
.btn {
    font-size: var(--button-font-size);
    border-radius: var(--tab-border-radius);
    padding: 0.312rem 0.875rem;
    margin-bottom: 2px;
}
.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}
.btn-default:hover {
    color: #fff;
    background-color: #7bb661;
    border-color: #7bb661;
}
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: fit-content;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: var(--text-xs);
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--grey-light);
    border-radius Defines the radii of the outer border edge. Learn more Don't show : 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    cursor: pointer;
}

Typography

Home
/
Typography

Heading

Page Title

Font: Nunito Sans
/
Size: 1.35rem
/
Color: #555555
/
Line Height: 1.2

Example:

Copy CSS here

.pagetitle {
    color: var(--secondary-color);
    font-size: 1.35rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    padding-top: 10px;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

@media (min-width: 992px) {
    .pagetitle {
        font-size: 1.5rem;
    }
}

Sub Heading

Daily Tasks

Font: Nunito Sans
/
Size: 1.35rem
/
Color: #555555
/
Line Height: 1.2

Example:

Copy CSS here

.heading01 {
    font-family: "Nunito Sans Heavy", sans-serif;
    font-size: var(--primary-heading-fontsize);
    color: var(--secondary-color);
    letter-spacing: -0.02em;
    line-height: 1.5;

}

DataTable Example

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Jenette Caldwell	Development Lead	New York	30	2011/09/03	$345,000
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25	$675,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20	$85,600
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Gavin Joyce	Developer	Edinburgh	42	2010/12/22	$92,575
Jennifer Chang	Regional Director	Singapore	28	2010/11/14	$357,650
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11	$850,000
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14	$163,000
Michelle House	Integration Specialist	Sidney	37	2011/06/02	$95,400
Suki Burks	Developer	London	53	2009/10/22	$114,500
Prescott Bartlett	Technical Author	London	27	2011/05/07	$145,000
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26	$235,500
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09	$324,050
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16	$164,500
Hope Fuentes	Secretary	San Francisco	41	2010/02/12	$109,850
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500
Timothy Mooney	Office Manager	London	37	2008/12/11	$136,200
Jackson Bradshaw	Director	New York	65	2008/09/26	$645,750
Olivia Liang	Support Engineer	Singapore	64	2011/02/03	$234,500
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575
Thor Walton	Developer	New York	61	2013/08/11	$98,540
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09	$138,575
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$125,250
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$115,000
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01	$75,650
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600
Hermione Butler	Regional Director	London	47	2011/03/21	$356,250
Lael Greer	Systems Administrator	London	21	2009/02/27	$103,500
Jonas Alexander	Developer	San Francisco	30	2010/07/14	$86,500
Shad Decker	Regional Director	Edinburgh	51	2008/11/13	$183,000
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27	$183,000
Donna Snider	Customer Support	New York	27	2011/01/25	$112,000

Primary Card

View Details

Warning Card

View Details

Success Card

View Details

Danger Card

View Details

Logo

Logo

Colours

Colours

Main Colours

Secondary Colours

Other colours

Example:

Example:

Example:

Example:

Example:

Example:

Buttons

Buttons

Font: Nunito Sans

Font Size: 13px

Background Color: #55b147

Line Height: 1.3

Button Size: Small

Example:

Copy CSS here

Font: Nunito Sans

Font Size: 13px

Background Color: #55b147

Line Height: 1.3

Button Size: Small

Example:

Copy CSS here

Font: Nunito Sans

Font Size: 13px

Background Color: #ffffff

Line Height: 13px

Button Size: Extra Small

Example:

Copy CSS here

Typography

Typography

Page Title

Font: Nunito Sans

Size: 1.35rem

Color: #555555

Line Height: 1.2

Example:

Copy CSS here

Daily Tasks

Font: Nunito Sans

Size: 1.35rem

Color: #555555

Line Height: 1.2

Example: