Style Guide
STYLE GUIDE
Color Palette
#e7e9ec
#c3b293
#79a4b5
#2f6690
#16425b
#9090a0
Typography
Heading Font: Freight Display Pro
Header 1
Header 2
Header 3
Header 4
Body Font: Freight Sans Pro
This is body copy. Lorem ipsum dolor sit amet.
This is an inline linkColor Palette
#e7ecef
#8b8c89
#a3cef1
#6096ba
#274c77
#9090a0
Typography
Heading Font: Merriweather
Header 1
Header 2
Header 3
Header 4
Body Font: Source Sans Pro
This is body copy. Lorem ipsum dolor sit amet.
This is an inline linkHeading Two – Freight Display Pro
This is the body paragraph. The font is Freight Sans Pro. Body font color is Atlantic Blue (#2F6690). This color and font are used in some headings and buttons throughout the site. The color is also used as a background for some sections. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula metus id velit pretium posuere. Sed vestibulum congue quam sed lobortis. Pellentesque faucibus ultrices neque vel pellentesque.
This is the body paragraph. The font is Freight Sans Pro. Body font color is Slate Grey (#9090A0). This color and font are used for all body paragraphs throughout the site. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula metus id velit pretium posuere. Sed vestibulum congue quam sed lobortis. Pellentesque faucibus ultrices neque vel pellentesque.
Accents throughout the site are in Khaki (#C3B293)
Icons throughout the site are in Muted Aqua (#79A4B5)
Buttons throughout the site are in Atlantic Blue (#2F6690)and Muted Aqua (#79A4B5) on hover with White text or White background with Atlantic Blue text and Atlantic Blue with White text on hover.
Heading Two - Merriweather
This is the body paragraph. The font is Source Sans Pro. Body font color is Cadet Blue (#6096BA). This color and font are used in some headings and buttons throughout the site. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula metus id velit pretium posuere. Sed vestibulum congue quam sed lobortis. Pellentesque faucibus ultrices neque vel pellentesque.
This is the body paragraph. The font is Source Sans Pro. Body font color is Slate Grey (#9090A0). This color and font are used for all body paragraphs throughout the site. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula metus id velit pretium posuere. Sed vestibulum congue quam sed lobortis. Pellentesque faucibus ultrices neque vel pellentesque.
Accents throughout the site are in Charcoal Grey (#8B8C89)
Icons throughout the site are in Sky Blue (#A3CEF1)
Buttons throughout the site are in Cadet Blue (#6096BA) with White text and in Sky Blue (#A3CEF1) on hover or White background with Cadet Blue (#6096BA) text and Cadet Blue background and White text on hover.
This is the NT Lakis Logo with new color. The main color is Slate Navy (#16425B) with a gradient applied at the top right corner of the square.
This is the main navigation bar. All of the fonts are Freight Sans Pro in 16 point font size. The main text color is Slate Navy (#16425B), when your on that specific page the font color is Atlantic Blue (#2F6690), and the hover font color is Muted Aqua (#79A4B5). The dropdown menu font is Freight Sans Pro in 16 point font size and in Slate Navy. The background color when hovering is Muted Aqua.
This is the main navigation bar. All of the fonts are Source Sans Pro in 16 point font size. The main text color is Royal Navy (#274C77), when your on that specific page the font color is Cadet Blue (#6096BA), and the hover font color is Sky Blue (#A3CEF1). The dropdown menu font is Source Sans Pro in 16 point font size and in Royal Navy. The background color when hovering is Sky Blue.
This is the Home page slider block. The heading font is Freight Display Pro in 48 point font size. The background color is Slate Navy with a 20% opacity set on it. The body text and the button text are Freight Sans Pro in size 16 point font. The button background color is Atlantic Blue and on hover is it Muted Aqua.
This is the Home page slider block. The heading font is Merriweather in 48 point font size. The background color is Royal Navy (#274C77) with a 20% opacity set on it. The body text and the button text are Source Sans Pro in size 16 point font. The button background color is Cadet Blue (#6096BA) and on hover is it Sky Blue (#A3CEF1).
This is the Services block. The icons are Font Awesome icons and in the color Muted Aqua. The heading font is Freight Display Pro in size 28 point font and in Slate Navy. The body text is Freight Sans Pro in font size 16 point font and in color Slate Gray (#9090A0). The read more button is in the Freight Sans Pro font in size 16 point font. The text color is Atlantic Blue and the hover color is Slate Navy.
This is the Services block. The icons are Font Awesome icons and in the color Sky Blue (#6096BA). The heading font is Merriweather in size 28 point font and in the Royal Navy (#274C77). The body text is Source Sans Pro in font size 16 point font and in Slate Grey (#9090A0). The read more button is in the Source Sans Pro font in size 16 point font. The text color is Cadet Blue (#6096BA) and the hover color is Royal Navy (#274C77).
This is the CTA block. The background color is Slate Navy. The heading font is Freight Display Pro in White (#E7E9EC) and in 42 point font size. The contact us button text is Freight Sans Pro font in 16 point font size and the in Atlantic Blue. The button on hover changes the background color to Atlantic Blue and the text color changes to White.
This is the CTA block. The background color is Royal Navy (#274C77). The heading font is Merriweather in White (#E7E9EC) and in 42 point font size. The contact us button text is Source Sans Pro font in 16 point font size and in Cadet Blue (#6096BA). The button on hover changes the background color to Cadet Blue (#6096BA) and the text color changes to White.
This is the post block. The heading title is in the Freight Display Pro font in font size 48 point and in Slate Navy. The title of the post is also Freight Display Pro font in Slate Navy and in font size 22 point. The date, the body text, and the read more button are all in Freight Sans Pro font. The date is in font size 14 point and the background color is Muted Aqua and the text color is White. On hover, the background color is Atlantic Blue. The hover color of the post title is Muted Aqua. The body paragraph is in Slate Grey and 16 point font size. The read more button is 16 point font size and in Muted Aqua. On, hover, the text color is Slate Navy.
This is the post block. The heading title is in the Merriweather font in font size 48 point and in Royal Navy (#274C77). The title of the post is also Merriweather font in Royal Navy (#274C77) and in font size 22 point. The body text and the read more button are all in Source Sans Pro font. The hover color of the post title is Sky Blue (#A3CEF1). The body paragraph is in Slate Grey and 16 point font size. The read more button is 16 point font size and in Sky Blue (#A3CEF1). On hover, the text color is Royal Navy (#274C77).
This is the Footer block. The background color is Slate Navy. The headings of each column are Freight Display Pro in White and 26 point font size. The text, sub headings and copyright text are all Freight Sans Pro in White and 16 point font size. The arrows next to the sub headings are in Khaki (#C3B293). The box in the bottom right corner brings you back to the top of the page. The background color is Khaki and the arrow color is White. On hover, the background color is Muted Aqua.
This is the Footer block. The background color is Royal Navy (#274C77). The headings of each column are Merriweather in the white color and 26 point font size. The text, sub headings and copyright text are all Source Sans Pro in White and 16 point font size. The arrows next to the sub headings are in Light Charcoal (#8B8C89). The box in the bottom right corner brings you back to the top of the page. The background color is Light Charcoal and the arrow color is White. On hover, the background color is Sky Blue (#A3CEF1).
