JCI Pattern Lab

Primary Colors

#b2dc68

.guest

#39b4e5

.editor

#ff8113

.author

#7463dd

.reviewer

#d60e50

.alert

#333333

.default

Secondary Colors

#e8f2d0

.guest_alt

#a6ddf3

.editor_alt

#ffc18c

.author_alt

#dbd6f3

.reviewer_alt

#f4fae8

.guest_light

#b4b4b4

.alt

Each color has a class that can be applied to any element to add the color as a background color. Add "_text" to the end of any class name to change the text color. Add "_hover" to the end of any class name to change the text color on hover.


Typefaces

Primary font light: "Titillium Web Light", "Helvetica", "Arial", sans-serif;

Primary font: "Titillium Web Regular", "Helvetica", "Arial", sans-serif;

Primary font semibold: "Titillium Web Semibold", "Helvetica", "Arial", sans-serif;

Primary font bold: "Titillium Web Bold", "Helvetica", "Arial", sans-serif;


Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The blockquote element will be used on the How-To page popup elements.


Logotype

Journal of
Critical Incidents

Logotypes will be used in navigation and footer elements.


Icons

editor author reviewer email sms

Icons will be used when logged in. The badge will be used in the navigation bar.


Small Icons

download upload save random delete close

Small icons are used inside form elements, i.e. buttons, input fields and popups.


Images

Images will be used in cols4 divs or in headers. The two larger images do not have rounded corners, only the smaller on does.


Content Frames

Content frames house text elements on each page and are color-coded by their user base. The smaller content frame is for single line of text. The larger frame is for two lines of text: Main heading on top and subhead on bottom.


Vertical Rule Line

This line is only used on the homepage to divide the different sets of information.


Dashboard Nav

The dashboard nav will only be shown when a user is logged in. Depending on how many roles the user has determines how many tabs there will be shown. Ex: The editor will receive all 3 tabs while the author will receive only the author tab and the reviewer tab.


Nav Elements

This main navbar will appear on both guest viewers and logged-in viewers.


Buttons

The bottons name and colors will resemble to that of a specific role: Author, Reviewer, and Editor. Ex: Guest users will be linked to green buttons, author to orange buttons, and red for notifications and error.


Columns

Col S4

Col S4

Col S2

Col S8

Col S2

Col S5

Col S3

Col S2

Col S6

Col S4

The 10-column grid creates a flexible system for content arrangement.

Col S1

Col S1

Col S1

Col S1

Col S1

Col S1

Col S1

Col S1

Col S1

Col S1


Input Fields


Forms

Checkboxes

Upload Buttons

Input Labels
Input Label:
Dropdowns