1
Client Version

Peter Faux Dance Ensemble
Style Kit

A place outlining all styles used across the site.
Purchase
$38

Introduction

The PFDE styling is a representation of traditional styling and colours with a modern change. Representing the business brand and attracting PFDE's preferred target market.

Direction

Modern, clean, easy to ready and interact with. Respecting the current primary colour and general feel of the site and the business.

Colour Palette

Colours used accross the site.

Primary Palette

Fill Colours

It is important for the viewer to imagine themselves in the position of the dancers they see in the images. Having a clean primary colour pallet based on shades will help create visual hierarchy int he website but not take attention away from the images. Using the current colour, "Dark Slate Blue" as the key colour ensures brand recognition with current clients.

Dark Slate Blue
#644d71
Medium Purple
#846C92
Plum
#A68CB4
Thistle
#C9AED7
Thistle Light
#EDD1FB

Secondary Palette

Pastel Colours

The Secondary Pallet is designs to have a range of colours that compliment the primary pallet yet are different enough to call out when an action is needed or we want to draw specific attention to a button like Enrol Now. These colours are complimentary to the primary colour. These colours are also used in any gradients.

Slate Blue
#59608D
Steel Blue
#3E75A2
Steel Blue Light
#0089AC
Cadet Blue
#009CAB
Light Sea Green
#19AC9E

An example of a gradient element.

Typograhy Palette

Grey Colours

There is a range of colours for text to allow space for accessibility. Using light colours in dark backgrounds and vice versa.

Downriver
#0a1f44
Port Gore
#4e5d78
Regent Gray
#8a94a6
Cadet Blue
#b0b7c3

Typograhy Palette

Neutral Tone
Ghost
#c1c7d0
Athens Gray
#ebecf0
Casper
#fafbfc
White
#ffffff

Typography Styles

Heading and paragraph styling.

Headings

Typography - Inter Bold

Aa Bb Cc Dd Ee

Heading 1
55px

Aa Bb Cc Dd Ee

Heading 2
44px

Aa Bb Cc Dd Ee

Heading 3
36px

Aa Bb Cc Dd Ee

Heading 4
34px
Aa Bb Cc Dd Ee
Heading 5
28px
Aa Bb Cc Dd Ee
Heading 6
24px

Body Copy

Typography - Inter

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
18px

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

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.

Detail Messages
12px

Quotes

Typography - Inter
The ultimate Interface component kit built to create harmony across your products.
Plain Quote Block
18px
The ultimate Interface component kit built to create harmony across your products.
Additional Detail Messages
18px

Additional Copy Elements

Typography - San Francisco
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Dots
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Numbers
16px
  • Example Item 1
  • Example Item 2
  • Example Item 3
List Items - Letters
16px

Additional Copy Elements

Typography - San Francisco

This line rendered as bold text.

Bold Text
18px

This line rendered as italicized text.

Italicized Text
18px

This line of text is meant to be treated as deleted text.

Deleted Text
18px

This line of text is meant to be treated as deleted text.

Underline Text
18px

You can use the mark tag to highlight text.

Highlight Text
18px

Elevation & Shadows

Shadows when used in elements to make them stand out without boarders.

Elevation and Shadows

Outter Shadow, Inner Shadow
Shadow
S1
Shadow
S2
Shadow
S3
Shadow
S4
Shadow
S5
Shadow
S1
Shadow
S2
Shadow
S3

Buttons

Button styles which are used for different interactions. Some informative, some action based and some expected elements like in the site navigation.

Field Elements

Form Fields and their different states.

Form Fields

Input Fields

Field Elements

Input Fields
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Intruction text here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Alert Bars

Any alert bars for forms and warnings.

Notification

Input Fields
Looks like we're having trouble
Default Alert Error
Looks like we're having trouble
Warning Alert
Looks like we're having trouble
Error Alert
Your information has been saved.
Default Alert Check
Your information has been saved.
Default Alert Grey
Your information has been saved.
Confirm Alert

Icons

Icon sets - still being developed.