Style guide (draft)

The Creative Content style guide includes:
‍
● Brand colours
● Primary palette
● Secondary palette
● Typography palette
● Category tag palettes
● Logo refresh (draft)
● Example illustrations
● Typography
● Fonts
● Header styles
● Paragraph styles
● Lists and quotes
● Button styles
● Image and caption styles in context

Primary palette

The core brand colours have been designed to pay homage to classic/vintage writing paper. The core contrast colour, Blue Ink, is a play on traditional fountain pen ink.
Brand Color
#faecd8
Antique White
Brand Color
#fff1e5
Linen
Brand Color
#fff8ef
FloraL WHITE
Brand Color
#03272c
Blue ink

Secondary palette

These secondary colours are to be used sparingly as accents
Brand Color
#fdd490
Navajo White
Brand Color
#d36136
Burnt Orange
Brand Color
#fff8ef
Off floral WHITE

Typography palette

Grey 900
#111
Grey 700
#555

Blog / case study tag palette

Category
#B7245C
Category
#95526b
Category
#ffcc27
Category
#107f61
Category
#084664
Category
#B5D6D6

Blog / case study tag use case

Here is an example of the tag palette being used in case studies
Mastering the Art of Content Creation: A Comprehensive Guide
This is some text inside of a div block.
May 7, 2023
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
The Ultimate Guide to Marketing Strategy
This is some text inside of a div block.
February 9, 2023
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
5 Tips for Marketing Your Law Practice
This is some text inside of a div block.
November 17, 2022
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Logo refresh

Logo options

We have evolved the current logo to better suit the Creative Content brand as it is now, and have a few logo concepts for your consideration.

We have made a recommendation on the style we think best encompasses the Creative Content brand. Note that the actual artwork is still draft and if we select one of these, it will be perfected.
Recommended text only logo
Font: Garamond Premier Pro / Only used in Logo
Blue Ink
Recommended icon/text logo
Font: Garamond Premier Pro / Only used in Logo
Blue ink
Secondary option
Secondary option

Illustrations

With the core logo depicting the fountain pen of Creative Content, many digital assets are able to lean on this design concept to connect the illustrations with the logo. The example illustrations below show how we would use this device to add visual interest throughout the website; they will not to be feature illustrations.
Example illustration 1
Example illustration 2

Typography styles

Fonts

Poppins - semi bold

Headings

Karla - normal

Body text

Karla - bold

Body text

Karla - bold-italic

Body text

Karla - bold-italic

Body text - pull quotes

Headings

Aa Bb Cc Dd Ee

Display
64
Display text should be used rarely, in very specific situations where the content should not be picked up by SEO crawlers or screen readers.

Aa Bb Cc Dd Ee

Heading 1
56

Aa Bb Cc Dd Ee

Heading 2
44

Aa Bb Cc Dd Ee

Heading 3
36

Aa Bb Cc Dd Ee

Heading 4
24
Aa Bb Cc Dd Ee
Heading 5
20
Aa Bb Cc Dd Ee
Heading 6
20

Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Large
22px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Normal
16px

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Paragraph Small
14px

Lists & Quote

  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
List
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
List
Numbered
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.
Quote

Button Styles

Primary Buttons

Button primary
Button primary

Secondary Buttons

Submit
Submit
Submit

Images & captions

H3 Heading

Condimentum penatibus fermentum porttitor vestibulum feugiat sit dui. Magnis at nisl elit leo nam. Egestas semper velit mattis aenean adipiscing. Pellentesque laoreet lectus in ipsum amet molestie cum elementum. Blandit tortor, adipiscing nunc dolor aliquet. Justo, ac eu fringilla et viverra. Nec velit, sit condimentum eget vel, proin. Cras justo, vestibulum lacinia mauris arcu ac volutpat volutpat pellentesque. Ultrices facilisis elit orci elit quisque suspendisse.
Donec est volutpat ornare ultrices nunc, purus. In luctus tristique varius curabitur. Elementum sed sagittis, ultrices eget libero, pulvinar. Dictum nullam viverra cursus libero tempus urna commodo fermentum. Pharetra ut pretium, lectus fermentum cras lobortis at facilisis id.

Here you can add a caption

H4 Heading

Condimentum penatibus fermentum porttitor vestibulum feugiat sit dui. Magnis at nisl elit leo nam. Egestas semper velit mattis aenean adipiscing. Pellentesque laoreet lectus in ipsum amet molestie cum elementum. Blandit tortor, adipiscing nunc dolor aliquet. Justo, ac eu fringilla et viverra. Nec velit, sit condimentum eget vel, proin. Cras justo, vestibulum lacinia mauris arcu ac volutpat volutpat pellentesque. Ultrices facilisis elit orci elit quisque suspendisse.
Donec est volutpat ornare ultrices nunc, purus. In luctus tristique varius curabitur. Elementum sed sagittis, ultrices eget libero, pulvinar. Dictum nullam viverra cursus libero tempus urna commodo fermentum. Pharetra ut pretium, lectus fermentum cras lobortis at facilisis id.

‍