Fast & Secure Checkout

Deko Finance
Finance Coming Soon


Colour Examples

$primary__brand-blue Primary Brand Blue

Primary brand colour to be used in most locations such as:

  • Header Banner
  • Headings (H2)
  • Primary Buttons
  • Social Media Icon background
  • Icons such as
    • Search
    • Account
    • Basket
    • USPs
  • Meet the Team Banner
  • Radio and Checkboxes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$primary__brand-blue__hover Primary Brand Blue Hover

Primary Buttons on hover effect

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$primary__brand-orange Primary Brand Orange

Brand Orange to be used in page elements such as :

  • Secondary Button
  • Sign-up Button
  • Header Banner key tag elements
  • New Price
  • Read More Links
  • Navigation 'Learn' icon and bottom border
  • Product Page Add to Basket Button
  • Rating Stars
  • Product Page Thumbnail arrows
  • Active Pagination
  • Clear All Filters Button Generic Product Category
  • Apply Button Basket Page
  • Subtotal Basket Page in Product Listing
  • Active checkout tab background with white text
  • Checkout tab text inactive with white background
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$primary__brand-color-dark Primary Brand Dark

Text colour Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$primary__brand-border Primary Brand Border

Border colour to separate sections/pages/articles/elements if necessary and shown on designs Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$brand__purple-lighter Brand Purple Lighter

  • Navigation About Icon
  • Product Page Offer Label
  • Mobile Active Shop Tab Homepage
  • Slider button dots when inactive
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$brand__purple-light Brand Purple Light

  • Megamenu List icons
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$brand__purple-dark Brand Purple Dark

  • Mobile Active Shop Tab Homepage
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$header__search-placeholder Header Search Placeholder
$brand__purple-darker Brand Purple Darker

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$header__search-placeholder Header Search Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$header__search-background Header Search Background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$hero__banner-white Hero Banner White

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$footer__links Footer Links

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$footer__background Footer Background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$footer__back-to-top Footer back to top

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$offer__notification-orange Offer Notification Background

Home page "Reduced To Clear" Notification Background

$offer__text-dark Offer Notification Text

Home page "Reduced To Clear" Notification Text

$blog__tag-pink Blog Tag Pink

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$blog__tag-blue Blog Tag Blue

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$blog__tag-green Blog Tag Green

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$checkout__form--input Form input background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$minicart__body-background-overlay Minicart Open Body Overlay

When the minicart is sliding out, the dark overlay will treat the body html as an faded effect with blocked scrolling on the page components apart from the minicart Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$minicart__edit-icon Minicart Edit Icon Colour

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque distinctio ea enim fugit magni nihil nulla quam quia quos, similique suscipit vero voluptas!

$cart__page-icon Basket Page Icon

Icons in the Basket Page

Example Card Styles

class = .card

Below is the layout for a recent posts block with a featured post.

class = .card.card--alt

Below is an example alternative layout card and example can be found on the blog homepage.

Tag
grey placeholder
8th July 2018

Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores omnis pariatur!.

Read More

class = .card.card--sub

Below is an example sub-card layout, an example can be found on the homepage.

class = .card.card--profile

Below is an example of a profile card.

placeholder

Wayne Rooney

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem.

View Profile

class = .card.card--pillar

Below is an example of a pillar card.


Example Panel Styles

class = .po-panel

Buttons

Headings


grey placeholder

Welcome To Our Community

This a H1

This a H2

This a H3

This a H4

This a H5
This a H6

Font size xs

Font size s

Font size base

Font size l

Font size xl

Font size xxl


Italics

Bold

Bold Italics

Black

Black Italics

FORM ELEMENTS