The Magic Behind Art Of Design

UX/UI Guidelines

The UX/UI guidelines documented here are the foundation of the GoodHire website and product. They provide general design guidance for using GoodHire patterns in your design. These foundational elements are combined to create our components, which are highlighted in the EXAMPLES section of this Style Guide.

Color Scheme

UX/UI

The UI/UX palette is created with software needs in mind. It expands upon the main brand colors, providing options to highlight UI and UX functionality in myriad situations.

Text
#283041

Titles

#575F70

Paragraphs

#848484

Disclaimers

Buttons
#5CA71B

Normal

#45850D

Hover

Hyperlinks
#0073BA

Normal

#00558A

Hover

Grays
#FFFFFF

Titles

#FAFAFA

2-tone boxes

#F2F2F2

Backgrounds

#E6E6E6

Dividers/lines

#C8C8C8

Form Outlines

#AAAAAA

Form Outlines

#1D1F20

Footer

Background Hovers
#212837

Left Nav

#3E4456

Flow Boxes

Additional Greens
#E1EDD4

Light

#6CA635

Dark

Blues
#D1DEE7

Light

#6782A0

Regular

Reds
#FBECEC

Light

#D67268

Regular

Yellows
#FAECBC

Light

#F3B72C

Regular

Grid

Web components for forms, buttons, icons, and input fields are based on the 8px grid system and a 4px baseline for typography. GoodHire uses a 12 column fluid grid system, which means that the page can be divided into twelfths, sixths, fourths, thirds, and halves - and any combination of these. Each grid row must contain parts that add up to one whole. For example, one-fourth + one-half + one-fourth.

Basic Grid - No Side Nav

(1440x900)

imgGridNoNav.gif
Product Grid - Open Side Nav

(1440x900)

imgGridOpenedNav.gif
Product Grid - Closed Side Nav

(1440x900)

imgGridClosedNav.gif
Breakpoints and Responsive Columns

A breakpoint is a screen width that triggers a CSS style to change the grid structure or layout display. Our column sizes are measured in percentages so they automatically change their width at different screen sizes, but our gutters change widths at our breakpoints defined below.

Navigation Sidebar and Layout

For Medium and Large screen resolutions, the widths of the open left navigation bars are 232px and 272px. The closed left bar is always 80px wide. Small screen resolutions use a closed top navigation bar by default. Main content layout is always center aligned.

Visual Breakpoints Min Left & Right Gutters Min Columns Width Gutter Width
Small
≤ 320 24px 8px 16px
321 - 480
481 - 639 8px 24px 16px
640 - 1024 16px 36px 16px
Medium
1025-1439 24px 40px 24px
Large
≥ 1025 32px 64px 24px
Grid Templates

Typography

Maintaining typographic clarity and hierarchy is important; below are the heading and paragraph styles that we use on the website and product pages. Gotham and Source Sans Pro are used for headlines, but Source Sans Pro is exclusively used for paragraphs.

Colors

There are 3 colors we use for typography. #283041 is used for bold/semibold headlines and paragraphs. #575F70 is used for regular paragraphs. #848484 is used for disclaimers.

Weight

There are three font weights available to use - Bold, Semibold and Regular. These can be applied with .bold, .semibold, .regular respectively.

On product pages Gotham is used in Bold and Regular. Website pages additionally use Gotham Semibold. Source Sans Pro is used in Semibold and Regular on both website and product pages.

Website pages
Headlines

H1 Gotham - Semibold

34px/40px

Used for page headlines

<h1 class="hm-1">Headline</h1>
Used with pairing A

H2 Source Sans Pro - Regular

28px / 36px

Used for Module Headlines

<h2 class="hm-2">Headline</h2>
Used with pairing B

H3 Source Sans Pro - 2 Styles

22px/32px

Regular

Used for Page SubHeadlines

<h3 class="hm-3">Headline</h3>
Used for pairing C1

Italic

Used for Quotes

<h3 class="hm-3 italic">Headline</h3>
Used for pairing C2

H4 Source Sans Pro - Semibold

18px/24px

Used for Module Titles

<h4 class="hm-4">Headline</h4>
Used with pairing D
H5 Gotham - Bold
18px/32px

Used for Section headlines, most commonly for State Laws pages

<h5 class="hm-5">Headline</h5>
Used with pairing E
H6 Gotham - Bold
16px/24px

Used for Section headlines

<h6 class="hm-6">Headline</h6>
Used with pairing F
H7 Gotham - Bold
14px/20px

Used for setion Headlines, most commonly on the Case Studies page

<h6 class="hm-7 text-upper">Headline</h6>
Used with pairing G
Paragraphs

P1 Source Sans Pro - Regular

18px/24px

Main Paragraph font

<p class="p-m">Headline</p>
Used with pairing A, B, C1, D, E1, F

P2 Source Sans Pro - Regular

16px/20px

Secondary Paragraph Font. Used for image descriptions

<p class="p-r">Headline</p>
Used with pairing C2, E2, G

P3 Source Sans Pro - Regular

14px/20px

Used for discalimer text, as well as in the footer

<p class="p-s">Headline</p>
Used with pairing A

P4 Source Sans Pro - Regular

12px/16px

Used in form fields and fine print

<p class="p-xs">Headline</p>
Used with pairing A
Product pages
Headlines

H1 Gotham - Bold

24px / 32px

H1 is used on pop ups, modal windows. To maintain typographic clarity we have the system of content structuring.

<h1 class="h-1">Headline</h1>
Pairings with Gotham Bold leading: A1, A2, A3

H2 Source Sans Pro - SemiBold

24px/32px

H2 is used on pop ups, modal windows

<h2 class="h-2">Headline</h2>
Pairings with Source Sans Pro - Semibold leading: B1, B2, B3

H3 Gotham - Bold

16px/24px

H3 is used for main page title

<h3 class="h-3 text-upper">Headline</h3>
Pairings with Gotham Bold leading: C1

H4 Source Sans Pro - 2 Weights

18px/24px

Component Title

Semibold

H4 is for component title only

<h4 class="h-4">test</h4>
Pairings with Source Sans Pro - Semibold leading: D1, D2, D3

Component Title

Regular

H4 is for component title only

<h4 class="h-4 regular">test</h4>
Pairings with Source Sans Pro - gulareading: D4, D5, D6
Paragraphs

P1 Source Sans Pro - 2 Weights

16px/20px

Paragraph Title

Semibold

P1 is used on pop ups, modal windows To maintain typographic clariry we have the sytem of content structuring.

<p class="p-r bold">test</p>
Pairings with Source Sans Pro - Semibold leading: A1, A2, A3

Paragraph Body Copy

Regular

P1 is used on pop ups, modal windows To maintain typographic clariry we have the sytem of content structuring.

<p class="p-r bold">test</p>
Pairings with Source Sans Pro - Semibold leading: A1, A2, A3

P2 Source Sans Pro - 2 Weights

14px/20px

Secondary Paragraph Title

Semibold

P2 Semibold is used on pop ups, modal windows To maintain typographic clariry we have the sytem of content structuring.

<p class="p-s bold">test</p>
Pairings with Source Sans Pro - Semibold leading: A1, A2, A3

Secondary Paragraph Body Copy

Regular

P2 Regular is used on pop ups, modal windows To maintain typographic clariry we have the sytem of content structuring.

<p class="p-s">test</p>
Pairings with Source Sans Pro - Regular leading: A1, A2, A3

UPPER PARAGRAPH TITLE

Regular | All Caps

P2 REGULAR is used on pop ups, modal windows to maintain typographic clariry we have the sytem of content structuring.

<p class="p-s text-upper">test</p>
Pairings with Source Sans Pro - Regular leading: A1, A2, A3

P3 Source Sans Pro - Regular

12px/16px

P3 is used on pop ups, modal windows To maintain typographic clariry we have the sytem of content structuring.

<p class="p-xs">Headline</p>
Pairings with Source Sans Pro - Semibold leading: A1, A2, A3

Buttons

All buttons use gotham bold in all caps. The product pages use all of the following button styles, but the website pages only use a small subset of these styles.

Button sizes

Define a button size with .btn-m, .btn-s, .btn-xs. The default button size is .btn-m. The styles available for each button size are specified in the sections below.

<button class="btn">Button</button>
<button class="btn btn-s">Button</button>
<span class="btn-xs">Button</span>
Primary Buttons

Primary buttons are used to signify recommended, necessary, or mandatory actions and are specified with class .btn.

<button class="btn">Button</button>
<button class="btn btn-s">Button</button>
Outline Buttons

Outline buttons are used to signify alternative actions to the primary option and are specified with an additional class .btn-outline.

Secondary buttons are typically used in size small when editing specific components of a page and used in size medium when representing an alternative to a primary button.

<button class="btn btn-outline">Button</button>
<button class="btn btn-outline btn-s">Button</button>
Secondary Buttons

Secondary buttons should be used to signify optional, infrequent or subtle actions and are specified with an additional class .btn-secondary.

<button class="btn btn-secondary">Button</button>

Dashed ghost buttons are used when a user is adding something new.

<button class="btn btn-secondary btn-dashed">Button</button>
<button class="btn btn-secondary btn-dark">Button</button>
Naked Buttons

Naked buttons are used when a CTA is placed in a small container or when multiple CTA’s are stacked and are specified with additional class .btn-naked. For example repeated CTAs on tables/dashboards or CHOOSE FILE on upload widgets. Only used in size XSmall.

<button class="btn-naked">Button</button>

Naked buttons that only have an icon should only be used if an icon is easily recognizable.

<span class="btn-icon-naked">
	<svg class="svg">
		<use xlink:href="#download"></use>
	</svg>
</span>
Naked icon left
<span class="btn-naked">
	<span class="btn-icon-naked">
		<svg class="svg">
			<use xlink:href="#download"></use>
		</svg>
	</span> Naked icon left
</span>
Disabled Buttons

Disabled buttons receive an .btn-disabled class and a disabled attribute. Disabled buttons are used when we want to make it very clear that a user needs to take a separate action before proceeding with the main action on the page.

<button class="btn btn-disabled">Button</button>
<button class="btn btn-disabled btn-s">Button</button>
Button with Icon

Icons on the right are typically used in flows to indicate forward movement.

<button class="btn btn-arrow arrow-right">Button</button>

Icons on the left are used with a variety of icons. Sometimes the copy describes the icon (ie Download) while other times icon indicates movement (ie Back to previous step).

<button class="btn btn-secondary btn-arrow">Button</button>

Full icons are used to draw more attention to ghost buttons. The icon is the same size as regular icon buttons, but the colored circle background is larger than the height of the text.

<span class="btn btn-secondary btn-icon-full">
	<span class="icon-expired">
		<svg class="svg">
			<use xlink:href="#expired"></use>
		</svg>
	</span> Full Icon Left
</span>
Button with Lone Icon

Secondary buttons with lone icons are usually used for form field actions that can be explained without text.

<button class="btn btn-outline btn-icon">
	<svg class="svg search">
		<use xlink:href="#search"></use>
	</svg>
</button>

Ghost butons with lone iconsare used for subtle actions that can be explained without text. In some cases these buttons will have a dropdown with multiple options.

<button class="btn btn-secondary btn-icon">
	<svg class="svg search">
		<use xlink:href="#search"></use>
	</svg>
</button>
Waiting Buttons

Waiting buttons are used to show the user that their action is processing and is controlled with an additional class ._loader.

<button class="btn _loader">Button</button>
<button class="btn btn-outline btn-s _loader">Button</button>
<button class="btn btn-secondary _loader">Button</button>
<button class="btn btn-secondary btn-icon _loader">Button</button>
<button class="btn-naked _loader">Button</button>
<button class="btn-icon-naked _loader">Button</button>