Primary

• Dark 3
• Dark 2
• Dark 1
• Primary
• Tint 9
• Tint 8
• Tint 7
• Tint 6
• Tint 5
• Tint 4
• Tint 3
• Tint 2
• Tint 15
• Tint 1

Secondary

• Dark 3
• Dark 2
• Dark 1
• Secondary
• Tint 9
• Tint 8
• Tint 7
• Tint 6
• Tint 5
• Tint 4
• Tint 3
• Tint 2
• Tint 1

Tertiary

• Dark 3
• Dark 2
• Dark 1
• Primary
• Tint 9
• Tint 8
• Tint 7
• Tint 6
• Tint 5
• Tint 4
• Tint 3
• Tint 2
• Tint 1

Status

• Warning
• Warning Tint
• Action
• Action Tint
• Success
• Success Tint

Heading 1

Nostrud in aliqua eu tempor adipisicing sunt amet magna incididunt veniam incididunt labore enim ullamco. Minim et qui ipsum eiusmod reprehenderit.

Nostrud in aliqua eu tempor adipisicing sunt amet magna incididunt veniam incididunt labore enim ullamco. Minim et qui ipsum eiusmod reprehenderit. Quis ut velit do ex tempor mollit ea sunt ipsum sint fugiat fugiat.

Heading 2

Nostrud in aliqua eu tempor adipisicing sunt amet magn subjecta incididunt veniam incididunt labore enim ullamco. Minim et qui ipsum eiusmod reprehenderit. Quis ut velit do ex tempor mollit ea sunt ipsum sint fugiat fugiat.

Heading 3

Nostrud in aliqua eu tempor adipisicing sunt amet magna incididunt veniam incididunt labore enim ullamco. Minim et qui ipsum eiusmod reprehenderit. Quis ut velit do ex tempor mollit ea sunt ipsum sint fugiat fugiat.

Heading 4

Nostrud in aliqua eu tempor adipisicing sunt amet magna incididunt veniam incididunt labore enim ullamco. Minim et qui ipsum eiusmod reprehenderit. Quis ut velit do ex tempor mollit ea sunt ipsum sint fugiat fugiat.

Heading 5

Nostrud in aliqua eu tempor adipisicing sunt amet magna incididunt veniam incididunt labore enim ullamco. Minim et qui ipsum eiusmod reprehenderit. Quis ut velit do ex tempor mollit ea sunt ipsum sint fugiat fugiat.

Heading 6

Nostrud in aliqua eu tempor adipisicing sunt amet magna incididunt veniam incididunt labore enim ullamco. Minim et qui ipsum eiusmod reprehenderit. Quis ut velit do ex tempor mollit ea sunt ipsum sint fugiat fugiat.

Body line length measure:

The first marks the 45th character, and the second marks the 75th. Improving with readability:

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

Only emphasise some text within a heading. <h4> Emphasis <span> De-emphasis </span> </h4> span should be ideally either first or last only.

Only works for h2, h3, h4 and h5 headings.

Heading 2 with a span de-emphasise me

Heading 2 with a span de-emphasise me

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 3 with a span de-emphasise me

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nothing more to doYour appliance(s) are covered.

Above example use case is a H4, keeping emphasis on the "Your applaince(s) are covered"

Only emphasise some text within a heading. <h4 class="pc_color_warning"> Emphasis <span> De-emphasis </span> </h4> span should be ideally either first or last only. Can be used in conjunction with .pc_color_warning, .pc_color_action or .pc_color_success

Heading 2 with a de-emphasise me

Heading 3 with a de-emphasise me

---

Example:

Nothing more to doYour appliance(s) are covered.

List Types

Lists are setup for these scenarios

Simple list .pc_list .pc_list--bullet

• List item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• List item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• List item 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tick list .pc_list .pc_list--tick

• List item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• List item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• List item 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When more emphasis is needed and division .pc_list .pc_list--usps

• List item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• List item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• List item 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show something not included .pc_list .pc_list--cross

• List item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• List item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• List item 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When you want to divide content .pc_list .pc_list--lines

• List item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• List item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• List item 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Items like checkbox list of appliances .pc_list .pc_list--items

Message Types

Messages are used for these scenarios

• Form field status
• Banner style promotion
• Detailed content blocks that require color coding
• Sign posting

---

Used as a banner for promotions etc when higher impact is needed. .pc_message--warning--solid

Offer Only difference is that this allows for colour flexibility like Status colours red, orange, green, brand colour or an additional colour only for offers. pc_message pc_message--offer--solid pc_message--stack All set inside the sellers config css.

Simple offer as a link:

OFFER - Get 1 months FREE cover when you upgrade your warranty

More detailed offer information:

Multi line content .pc_message--stack

Main buttons .pc_button--primary

Small buttons .pc_button--small

Primary Small Secondary Small Contrast Small