Hawksland Responsive Style Guide

The following provides guidance on the proposed Hawkslands website. It is a work in progress and seeks to clarify important elements used within the website. It is responsive so check elements in various devices to get a sense of how they should look. 

Note: This page uses the typeface Nimbus Sans via Adobe Typekit. In order to avoid FOUT (Flash of Unstyled Text) during page load I have initiated this FOUT fix. I have applied this to the body of the site so nothing is rendered until all fonts are loaded.

Swatches

Primary 1

#A47400
R164 G116 B0

Primary 2

#D4A72D
R212 G167 B45

Secondary 1

#F2F2F2
R242 G242 B242

Secondary 2

#2D4356
R45 G67 B86

Secondary 3

#4D4D4D
R77 G77 B77

Tertiary 1

#808080
R128 G128 B128

Buttons

Light Background (link)

Dark Background (link)

Light Background (download)

Dark Background (download)

Note: The above icons are SVG with PNG fallback.

Text

Headings

Heading 1

H1 style seen as main header for main section landing pages banner area (ie Company/Services) - Normally white

Heading 2

H2 style seen as main header for sub section page banner area (ie headings which say "About" "Approach" "Team" etc)

Heading 3

H3 style seen as first header within main copy (ie headers for signposts in landing pages or headers in subsections).

Heading 4

H4 style as supporting headers which break up long areas of body copy - see About us

Note: These headings change size when viewport is below 479px (see style.css).

Intro Paragraph

Our services cover interim or consulting roles and engage with your middle, senior and executive board management in business, operations and technology.

Basic Paragraph

For a start, we do more than just prescribe strategy and solutions to problems. Instead, we immerse ourselves in your culture, from boardroom to factory floor. We get our hands dirty – literally and figuratively. And we integrate seamlessly with your teams to lead from the front until we successfully complete your project.

Bulleted List

  • Increased turnover and margins
  • Growth strategies to win new business
  • Successful new product lines and routes to market
  • Reduced cost and weight
  • Reduced working capital and waste
    • Improved operational and supply chain performance
    • Integrated new factories and technologies

Text with vertical line

Executable Strategy

For a start, we do more than just prescribe strategy and solutions to problems. Instead, we immerse ourselves in your culture, from boardroom to factory floor. We get our hands dirty — literally and figuratively. And we integrate seamlessly with your teams to lead from the front until we successfully complete your project.

Executable Strategy

For a start, we do more than just prescribe strategy and solutions to problems. Instead, we immerse ourselves in your culture, from boardroom to factory floor. We get our hands dirty — literally and figuratively. And we integrate seamlessly with your teams to lead from the front until we successfully complete your project. This layout is seen in most subsections.

Executable Strategy

For a start, we do more than just prescribe strategy and solutions to problems. Instead, we immerse ourselves in your culture, from boardroom to factory floor. We get our hands dirty — literally and figuratively. And we integrate seamlessly with your teams to lead from the front until we successfully complete your project.

Note: The above is a exploration of using a vertical rule within the centre of a column which extends to longest column (whether main content on the left or the quotation on the right). This uses Flexbox which is a CSS3 property. It also shows how elements change for smaller viewports such as hiding the pull quote and vertical line.

Blockquote (Small - for side bars and within main pages)

"Hawksland has a clear view on how aerospace businesses work, are results driven and will deliver! They have a great network and can put a dedicated team of specialists together on short notice. It was a pleasure working with them. "

Leon de Scheper

Strategic Outsourcing Manager

Stork SP Aerospace

Blockquote (Large - for Testimonials Page)

"Hawksland has a clear view on how aerospace businesses work, are results driven and will deliver! They have a great network and can put a dedicated team of specialists together on short notice. It was a pleasure working with them. "

Leon de Scheper

Strategic Outsourcing Manager

Stork SP Aerospace

The above shows a ruling line above a blockquote which is 50% of the column width.

Images

Narrow Box

Wide Box

Thumb Box

Note: The above shows how images are used with the background-size property set to 'cover'.

Favicons

Favicons for all popular devices are contained in the <head> code of this page. All links need to be set to root ('/') or wherever the icons are stored. The favicons can be downloaded from the link below:

Navigation Level 1

Note: Tablet Portrait Navigation will collapse to hamburger navigation.

Navigation Level 2

Breakpoints

Breakpoints follow the Bootstrap convention. However I have added a 'col-ms-x' class (and offset/push/pulls) for breakpoints between 480-767px where I wish the layout to remain similar to the 'small' layout. The 'ms' stands for medium small. Grabbed code from here.

H1 Test

Below is a test of the landing page header area with curved line. Code could be altered for subpages as well.

Company

Hawksland has been at the forefront of aerospace and defense consultancy for Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H3 Test

Strategy

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Operations

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Technology

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.