Free UK shipping on orders over £150

Complimentary Monogramming

Sign Up for 10% Off Your First Order

color

Brand


The two brand colours serve as the foundation of the visual identity, ensuring a consistent and recognisable look across all digital platforms. The primary brand colour is typically used for the most prominent elements, such as the logo, headers, and call-to-action buttons, reinforcing the brand's core message and values.

Primary

HEX: #0057FF

Secondary

HEX: #6767A7

Text


The text colours for headers and body content play a crucial role in readability and visual hierarchy. The header text colour is often more bold and distinct, designed to capture attention and differentiate titles or important sections from the rest of the content. It ensures that headings stand out, guiding users through the page structure. The body text colour, on the other hand, is typically a more neutral tone, optimised for readability over long passages of text.

Body text

HEX: #000000

Body text light

HEX: #4D4D4D

White

HEX: #FFFFFF

Background


Background tones are essential for creating depth and contrast in the design. Background tone is usually a neutral or subtle colour that provides a clean and unobtrusive canvas for content, ensuring that text and images stand out clearly and help define the layout, maintain a balanced visual flow, and enhance the overall user experience.

Background

HEX: #EDEDED

Background dark

HEX: #6767A7

Background white

HEX: #FFFFFF

Alert / Error Colour


Signal Colours are used solely for warnings and status messages.

Success

HEX: #28a745

Info

HEX: #17a2b8

Alert

HEX: #ffc107

Fail red

HEX: #dc3545

Fonts

Heading: Arial


Ab

Info


This heading font will be used for other headings across the website and is a key element of the brand's visual identity, setting the tone for the overall design. It ensures that headings stand out, providing clear visual hierarchy and guiding users through the content.

Symbols and Numbers


ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz0123456789

$£€/&@#%^*•()_+:;™

Weights


Bold

Body: Verdana


Ab

Info


This body font will be used for body text throughout the website based on readability and consistency, ensuring that long passages of text are easy to read and visually appealing. This font is typically more neutral and understated than the primary heading font, focusing on clarity and comfort for the user.

Symbols and Numbers


ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz0123456789

$£€/&@#%^*•()_+:;™

Weights


Regular

Text styles

Heading 0

Size: 40px Letter spacing: 0px Line height: 130%

Heading 0 Mobile

Size: 32px Letter spacing: 0px Line height: 130%

Heading 1

Size: 36px Letter spacing: 0px Line height: 130%

Heading 1 Mobile

Size: 28px Letter spacing: 0px Line height: 130%

Heading 2

Size: 32px Letter spacing: 0px Line height: 130%

Heading 2 Mobile

Size: 24px Letter spacing: 0px Line height: 130%

Heading 3

Size: 28px Letter spacing: 0px Line height: 130%

Heading 3 Mobile

Size: 20px Letter spacing: 0px Line height: 130%

Heading 4

Size: 24px Letter spacing: 0px Line height: 130%

Heading 4 Mobile

Size: 16px Letter spacing: 0px Line height: 130%

Heading 5

Size: 20px Letter spacing: 0px Line height: 130%

Heading 5 Mobile

Size: 16px Letter spacing: 0px Line height: 130%

Heading 6
Size: 16px Letter spacing: 0px Line height: 130%
Heading 6 Mobile
Size: 16px Letter spacing: 0px Line height: 130%


Paragraph Default. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.

Size: 16px Letter spacing: 0px Line height: 160%

Paragraph Small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.

Size: 14px Letter spacing: 0px Line height: 160%


Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.

Size: 16px Letter spacing: 0px Line height: 160%


Paragraph with inline links. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus.

Size: 16px Letter spacing: 0px Line height: 160%


Ordered list

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4
Size: 16px Letter spacing: 0px Line height: 160%


Unordered list

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
Size: 16px Letter spacing: 0px Line height: 160%


Input

Size: 14px Letter spacing: 0px Line height: 160%


Label

Size: 16px Letter spacing: 0px Line height: 160%


Caption

Size: 14px Letter spacing: 0px Line height: 160%

Icons

Icon library


In the icon library there are a wide range of icons available for all applications.

Global icons will be used consistently, whereas custom icons add unique character across the brand.

The icons have been simplified and made primarily monotone, with optional highlights introduced to help bring through brand personality.


UI icons

Chevron left
Chevron up
Chevron down
Chevron right
Arrow left
Arrow right
Arrow up
Arrow down
Search
Plus
Minus
Close
Check
Menu
Heart
Heart full
Shopping bag
Shopping bag active
account
Shipping box
Shipping
Clipboard
Chat
Email
Delete
Location
share
Zoom plus
Zoom minus
Filter
Info
Size guide
Play
Pause
Star
Star full
Phone
View
Lock
Price tag
3D Model

Product attributes

Iron
Materials
Leaf
Dryer
Shirt
Pants
Shoe
Washing
Plane

Payment

Amex
Apple Pay
Discover
ShopPay
Aeroband
Google Pay
Mastercard
Visa

Social

X
Facebook
Instagram
LinkedIn
Pinterest
YouTube
Vimeo
TikTok
Snapchat

Ui components

Buttons


Buttons are used to initiate an action or trigger a link. Button labels express what action will occur when interacted with.

They should have clear and concise labels, with the option of a supporting icon if necessary for further clarification.

0px radius
0px radius
0px radius
0px radius
16px padding 24px padding 16px padding 24px padding Button

Primary



Secondary



Text link



Icon buttons: Primary


Default

Hover

Ui components

Inputs


Forms allow people to enter data for further use or to configure options. They are used to obtain information and guide users through a series of steps.

Use a single column design and divide fields into semantic groups.

0px radius
0px radius
0px radius
0px radius
12px padding 16px padding 12px padding 16px padding Field

Input field


Default

Default: Optional

Hover

Active

Error

Error Input can't be blank

Disabled

Dropdown


Default

Default: Optional

Hover

Active

Disabled

Textarea


Default

Default: Optional

Hover

Active

Error

Error Textarea can't be blank

Disabled

Email signup


Default

Default: Optional

Hover

Active

Error

Error Email can't be blank

Disabled

Ui components

Checkbox


Checkboxes are input controls for making selections that are not mutually exclusive.

States

Radios


Radio buttons are input controls for making selections that are mutually exclusive, allowing for only a single input to be selected.

States