GENIC UX Toolkit Brand outline

One place for everything you need to work on a new or existing GENIC site.

How to use the UX Toolkit

If you are a designer, you can use the style guide as a quick reference. You can locate sketch files, design patterns and templates in the UX framework section.

Developers will find all the CSS and HTML needed in the UX framework section.

One Brand - 2 Styles

There are three versions of the GENIC style guide, each with a different purpose.

For external (customer facing) sites like this one, use the External UI framework.

For internal company sites containing more complex data, use the Internal UI framework.

Brand Guidelines

If you need the comprehensive GENIC print and branding guidelines you can download a pdf of the latest version by clicking the link below.

Download pdf

The GENIC Logo
Download a zipped folder of all the versions of the GENIC logo in jpeg, png and eps format.

Download zip

Typography

In all instances on customer facing websites, GENIC uses Lato Light which is open source font. It will work on GENIC servers and most modern computers.

A secondary font, Arial, is used on GENIC internal sites for improved legibility at small sizes. For more detail on sizing and color usage, consult the relevant section in the UX framework section of this site.

Primary font

Aa

Lato Light -
The quick brown fox jumps over the
lazy grey dog

Secondary font

Bb

Arial -
The quick brown fox jumps over the
lazy grey dog

Quick reference color palette

Download palette

External Color Palette

All websites that are used by GENIC customers or partners utilise the external colour palette.

Click to copy HEX to clipboard
GENIC blue
Dark Turquoise
RGB:
0,167,212
HEX:
#00A7D4
Click to copy HEX to clipboard
Sub nav
RGB:
0,153,195
HEX:
#0099C3
Click to copy HEX to clipboard
Sub nav
RGB:
82,119,146
HEX:
#527792
Click to copy HEX to clipboard
Employees & families
Light sea green
RGB:
5,171,177
HEX:
#05ABB1
Click to copy HEX to clipboard
Sub nav
RGB:
0,186,192
HEX:
#00BAC0
Click to copy HEX to clipboard
Sub nav
RGB:
5,157,163
HEX:
#059DA3
Click to copy HEX to clipboard
Employers
Yellow green
RGB:
141,194,75
HEX:
#8DC24B
Click to copy HEX to clipboard
Sub nav
RGB:
156,202,98
HEX:
#9CCA62
Click to copy HEX to clipboard
Sub nav
RGB:
129,178,69
HEX:
#81B245
Click to copy HEX to clipboard
Brokers & consultants
Dark orange
RGB:
235,148,0
HEX:
#EB9400
Click to copy HEX to clipboard
Sub nav
RGB:
248,163,70
HEX:
#F8A346
Click to copy HEX to clipboard
Sub nav
RGB:
235,148,0
HEX:
#EB9400
Click to copy HEX to clipboard
Sub menu background
RGB:
51,51,51
HEX:
#333333
Click to copy HEX to clipboard
RGB:
83,83,83
HEX:
#535353
Click to copy HEX to clipboard
RGB:
134,134,134
HEX:
#868686
Click to copy HEX to clipboard
RGB:
156,162,166
HEX:
#9CA2A6
Click to copy HEX to clipboard
Sub menu background
RGB:
246,250,254
HEX:
#F6FAFE
Click to copy HEX to clipboard
RGB:
230,237,243
HEX:
#E6EDF3
Click to copy HEX to clipboard
RGB:
231,231,232
HEX:
#e7e7e8

External Font Colours

Click to copy HEX to clipboard
A
RGB
83,83,83
HEX
#000000
Click to copy HEX to clipboard
A
RGB
115,123,129
HEX
#737B81
Click to copy HEX to clipboard
A
RGB
5,167,212
HEX
#00A7D4
Click to copy HEX to clipboard
A
RGB
5,171,177
HEX
#05ABB1

Internal Color Palette

All applications that are created for Internal Genic employees utilise the internal color palette.

Click to copy HEX to clipboard
Genic blue
Dark Turquoise
RGB:
0,167,212
HEX:
#00A7D4
Click to copy HEX to clipboard
Alert
RGB:
208,79,79
HEX:
#D04F4F
Click to copy HEX to clipboard
Processing
RGB:
5,157,163
HEX:
#059DA3
Click to copy HEX to clipboard
Processing
RGB:
129,178,69
HEX:
#81B245
Click to copy HEX to clipboard
Background
RGB:
35,43,56
HEX:
#232B38
Click to copy HEX to clipboard
Panel
RGB:
57,63,79
HEX:
#393F4F
Click to copy HEX to clipboard
Button inactive
RGB:
92,97,110
HEX:
#5C616E
Click to copy HEX to clipboard
Secondary button
RGB:
170,176,192
HEX:
#AAB0C0
Click to copy HEX to clipboard
RGB:
246,250,254
HEX:
#E6EDF3
Click to copy HEX to clipboard
RGB:
246,250,254
HEX:
#F6FAFE

Internal Font Colors

Click to copy HEX to clipboard
A
RGB
83,83,83
HEX
#000000
Click to copy HEX to clipboard
A
RGB
208,79,79
HEX
#D04F4F
Click to copy HEX to clipboard
A
RGB
255,255,255
HEX
#FFFFFF

Photography

Imagery used for GENIC sites should ideally be: Crisp, Borderless, Human and Lifestyle based. Below are some examples. For a selection of GENIC approved images, you can search the full collection on the external brand website site

Go to photo library

Photography

Iconography

The primary source of icons for GENIC applications is Font Awesome which is a web font containing all the icons from the Twitter Bootstrap framework. Full instructions on its use and downloads can be found on the website.

Shown here is a list of icons commonly used in GENIC sites for quick reference. To use this resource, simply copy and paste the desired icon into your project

Go to FontAwesome.io

Navigation

Misc

Bootstrap Grid

The grid we utilise is based on the standard Bootstrap 12 column grid. Bootstrap is a responsive framework so the columns will resize with the browser. We review the functionality on different devices and adjust the layout based on the context that it is viewed in. An example of this is where buttons may be 3 columns wide on the desktop but will be displayed as full 12 columns on a mobile device to accommodate for the reduced size of the screen.