1
Client Version

Meet Rebecca Elizabeth,
Client Style Kit

This page is the custom built control panel and styling guide to Rebecca Elizabeth website.
Purchase
$38

Introduction

Rebecca Elizabeth is an interior designer and wellbeing specialist that exists to help her expanding community develop their sanctuary into a place where they love to live, work and exist. As a client, it’s all about realising the next step in your individual life journey. With you, we’re going to design a space that looks good and feels even better.

Direction

This document will direct anyone searching to understand the fundamentals of the creative development of the site.

Colour Palette

Colours and usage of colour over the site.

Primary Palette

Fill Colours
Yellow Green
#c5d759
Cadet Blue
#579ea6
Gold
#fccd68
Sandy Brown
#f59449
Light Coral
#e77977

Secondary Palette

Fill Colours
Dark Slate Grey
#495f4d

Typograhy Palette

Grey Colours
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

The use, style and type of text over the site.

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
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 Normal
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 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
16px

This line rendered as italicized text.

Italicized Text
16px

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

Deleted Text
16px

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

Underline Text
16px

You can use the mark tag to highlight text.

Highlight Text
16px

Elevation & Shadows

The look and feel of shadows across the site.

Elevation and Shadows

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

Avatars

Defining the use of avatars if needed.

Primary Buttons

Corner Radius
X Large
96px
Large
40px
Medium
32px
Small
24px
X Small
18px

TB

X Large
96px

TB

Large
40px

T

Medium
32px

T

Small
24px

T

X Small
18px

Buttons

The driving force to action, buttons. the use of the branded green to reflect progression, moving forward and growth.

Field Elements

Also using the branded green as a subtle confirmation during field interactions.

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

Sometimes and alert is needed, this is how we define what they look like.

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

Pill Badges

Corner Radius
5
32
32
32
32
5
32
3
22
3

Contextual Badges

Corner Radius
Default
Primary
Success
Warning
Error
Default
Primary
Success
Success
Success

Version Control

Corner Radius
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0
1
Version 1.0