SkinBase™(Europe) Ltd

Style Guide

This page outlines the current styles and standards for the SkinBase™(Europe) Ltd website.

Colors

An overview of this site's brand colors.

Action

Action

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Primary

Primary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Secondary

Secondary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Accent

Accent

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Base

Base

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Shade

Shade

Ultra Light

Light

Medium

Dark

Ultra Dark

Action

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Primary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Secondary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Accent

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Base

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Shade

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Success

Success

Success Light

Success Dark

Success Hover

Danger

Danger

Danger Light

Danger Dark

Danger Hover

Warning

Warning

Warning Light

Warning Dark

Warning Hover

info

Info

Info Light

Info Dark

Info Hover

Buttons

Solid and outline buttons are available across all color sets including black and white.

BUTTONS ON LIGHT BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

BUTTONS ON DARK BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Button scale
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Examples

Heading 1 (H1)

This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Widths

There are six values you can use to control element width. They're automatically responsive.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Padding

Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL

Border radius

There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL

Sign Up for your FREE SkinBase Microdermabrasion Trial

  • Complete the form and we will be in touch with more information shortly, feel free to email us at [email protected] or call us on 01782 770810.

  • By completing this form you are agreeing to receive information from SkinBase™ by email.
    SkinBase collect your data in this form in order to respond to your enquiry. We value your privacy. Your data will be held securely and never passed to anyone else. Our privacy policy.
  • This field is hidden when viewing the form
  • This field is for validation purposes and should be left unchanged.

Book a Trial of SkinBase™ Collagen Lift

  • Complete the form and we will be in touch with more information shortly, feel free to email us at [email protected] or call us on 01782 770810.

  • By completing this form you are agreeing to receive information from SkinBase™ by email.
    SkinBase collect your data in this form in order to respond to your enquiry. We value your privacy. Your data will be held securely and never passed to anyone else. Our privacy policy.
  • This field is hidden when viewing the form
  • This field is for validation purposes and should be left unchanged.
unwanted hair removal results SkinBase IPL legs treatment January Hayami Cosmeticsunwanted hair removal results SkinBase IPL legs treatment January Hayami Cosmetics
Intense Pulsed Light, Unwanted Hair

Hayami Cosmetics

Client Testimonial: “Jodie is extremely professional and knowledgeable throughout the IPL treatment sessions. She explains the process and what to expect so that you are put at ease from the first consultation. During my IPL sessions, Jodie marked up the areas and avoided any moles or damaged skin, then preps using the cooler handle before a light shot. The light shot itself really doesn’t hurt, it’s done in seconds. The fact the skin is cooled first makes this an easy process to tolerate. I genuinely didn’t feel in pain at all and Jodie applied a lovely aloe balm to soothe the skin straight away. If anything I felt my appointments were more of a therapy as I knew I would be hair free come my holiday. After each session I came away feeling the progress getting better and better and by week 5 there was hardly any hair growth. I didn’t feel the need to shave anymore. I felt more confident and there is much less maintenance at home now which means I have more time for other things. I would highly recommend IPL hair removal by SkinBase and with Jodie as she made me feel at ease from the moment I asked about it and the difference it makes is life changing for someone who wasn’t so confident in her skin. I can’t wait for Summer and my holiday. Thanks Jodie & SkinBase.”