This is the page title

This is the page heading

This is a second level heading

This is the third level heading. All headings use the medium weight from the styrene typeface. We never use anything bolder or lighter than this.

This is the forth level heading

This is body copy it uses the light (300) weight from the Untitled typeface. it uses the Lorem ipsum dolor sit amet, Inline link elit. Mauris eleifend, lectus sed laoreet pulvinar, libero augue pulvinar risus, a imperdiet mi tellus in enim. Aenean fringilla neque rutrum, egestas diam vel, ornare augue.

  • Key points list item
  • Key points list item
  • Key points list item
  • Key points list item
  • Key points list item
  • Key points list item

Tags

Tags are used to demonstrate a section a piece of content belongs to, what its categorised in, or to draw the eye to a new or upcoming feature.

Primary tag Secondary tag Tertiary tag

Conjoined tagwith meta


Micro icons

Micro icons are used to provide context and draw the eye.


Buttons and links

Primary buttons should only be used for the one primary call to action of the page. if repeated, it should have the same destination and the same label, to re-affirm this primary purpose of the page. Secondary buttons can be used for multiple purposes. And tertiary buttons generally take people away from their current journey to explore something else.


Colour Pallete


Icon card link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Icon card link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Icon card link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Icon card link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


This is a call to action banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit


Blog heroes

Reports

Reports have a distinct flat style, in purple and blue hues to reflect their more mature and factual content.

Reports
Reports
Reports
Reports

Masterclasses

Masterclasses use the same flat style of illustration, but with a mix of the brighter colours from the secondary pallete. This reflects the friendlier collaborative nature of a webinar, over a report.

masterclass-01
masterclass-02
masterclass-03
masterclass-04

Masterclasses

Case study photography should be bright, clean and optimistic in daylight, blue sky - reflecting the use of clean, environmentally friendly industry. Any depictions of dirty machinery should be avoided.

case-study-visual-01
case-study-visual-02

Layered visuals

Software only

When we are demonstrating software functionality alone, software visuals can be used to do so. Software visuals are built up with layers and should stylistically focus on key elements of the software. They should not be screenshots

layered-visuals

People visuals

When talking about the benefit of CoolPlanets experienced consultants and engineers, we show portrait of a real member of the team, combined with one testimonial and one element from the software. This re-affirms CoolPlanets unique position in the market to offer both service and software combined.

people-visuals

Industry visuals

If a layered visual is industry specific we use photography specific for that industry, in combination with a piece of software. They should never be shown, without any software elements added as layers.

shipping-layers

How to use these styles

TBC