UI/UX Style Guide

1) COLORS

Headlines
SpACE CADET
#26344F
TEXT
DAVY'S GREY
#5D5D5D
SITE BACKGROUND
PLATINUM
#EDEBE9
ACCENT 1
BRONZE
#283889
ACCENT 2
MOUNTBATTEN PINK
#987284
ACCENT 3
HOOKERS GREEN
#587D71
ACCENT 4
timberwolf
#DDD5CC
OTHER
RICH BLACK
#07090E
OTHER
cultured white
#F5F5F5

2) TYPOGRAPHY: Global Styles

Style Name

Font Name & Weight

Use

Colors

Primary

Fairplay Display

weight 600

66px

line-height 1.2em

Main headings

Secondary

poppins

weight 400

42 px

line-height 1.4 em

Secondary headings

Tertiary

Poppins

weight 300

20px

letter spacing .5

Tertiary headings

Links and Buttons

Poppins

weight BOLD

26 px

letter spacing .1

Tag Lines

Text

Poppins

weight 400

26 px

line-height 42px/1.6em

Body Text

Menu

brother 1816-print

weight 500

uppercase

letter spacing 2.1

Buttons

Captions

Font Name & Weight

Buttons

3) BUTTONS
Primary Button
Used for positive actions, main CTA's
TERTIARY Button
Used for tertiary "undefined"
SECONDARY Button
Used for header call out
4) FORMS
5) Logo Styles
REGULAR LOGO
INVERTED LOGO
5) Content Column

The section is 1200px wide.

Large screen padding: 80, 20, 80, 20. Columns widget spacing 30.

Tablet screen padding: 60, 30, 60, 30. Columns widget spacing 20.

Phone screen padding: 40, 20, 45, 20. Columns widget spacing 15

When text is centered on a page, use this structure. The section is 900px wide, with padding: 80, 0, 80, 0. And this works responsively!

Phone

Padding is 40, 20, 45, 20

Column widget spacing is 15

Tablet section boxed to 470

Padding is 60, 40, 60, 40

Column widget spacing is 20

Full Screen section is boxed to 860

Padding is 80, 40, 80, 40

Column widget spacing is 30

Section is Boxed, 1200 wide. Padding: 80, 0, 80, 0.

Column setting: Widget Space 30px.

Below is a global section for this CTA.  To add to a page use template – Magic Mantra to PUBLISH.  To edit the template globally access – Magic Mantra to EDIT.