Website Style Guide
Go to Homepage
arrow icon

Introduction

Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.

To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.

Your style guide is not viewable to the public, and can only be accessed with a password.

If you have any questions about this style guide or your website in general, please do not hesitate to email me at corrina@bymasastudio.com.

Colours

Primary Colour
Skindays Neutral
#FFF8ED
Skindays Glow
# FFD179
Skindays Orange
# FF861F
Secondary Colours
Skindays Sky
# E0EFFF
Skindays Blue
# 7DADC1
Skindays Blush
# ECD4D1
Other Colours
White
#ffffff
Black
#333333
Success
#00b04f
Error
#b00020

Typography

The primary colour for all typography on your website is #33572d.

The sizing of your headings differ between desktop and mobile breakpoints. Both desktop and mobile breakpoints have a base font size of 18px (1em). All pixel values have been rounded.

Desktop - Major Third Scale (1.25)
44px | 35px | 28px | 23px | 18px | 14px | 12px

Mobile - Minor Third Scale (1.20)
37px | 31px | 26px | 22px | 18px | 15px | 12px

H1

The quick brown fox jumps over the lazy dog.

Desktop: Seriously Nostalgic | 5em | Regular
Mobile: Seriously Nostalgic | 5em | Regular
H1 — Italic

The quick brown fox jumps over the lazy dog.

Desktop:  Seriously Nostalgic | 5em | Regular Italic
Mobile: Seriously Nostalgic | 5em | Regular Italic
H2

The quick brown fox jumps over the lazy dog.

Desktop: Seriously Nostalgic | 5em | Regular
Mobile: Arial | 31px / 1.72em | 120% | Bold
H2 — Italic

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 35px / 1.94em | 120% | Bold
Mobile: Arial | 31px / 1.72em | 120% | Bold
H3

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 28px / 1.56em | 120% | Bold
Mobile: Arial | 26px / 1.44em | 120% | Bold
H3 — italic

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 28px / 1.56em | 120% | Bold
Mobile: Arial | 26px / 1.44em | 120% | Bold
H4

The quick brown fox jumps over the lazy dog.

Desktop: Helvetica Neue | 23px / 1.28em | 130% | Bold
Mobile: Helvetica Neue | 22px / 1.22em | 130% | Bold
H4 — italic

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 23px / 1.28em | 130% | Bold
Mobile: Arial | 22px / 1.22em | 130% | Bold
H5
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Arial | 18px / 1em | 140% | Bold
H5 — italic
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Arial | 18px / 1em | 140% | Bold
H6
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Arial | 14px / 0.78em | 140% | Bold | All Caps
H6 — italic
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Arial | 14px / 0.78em | 140% | Bold | All Caps
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph Small (par-sm)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph Large (par-lg)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .p1 class can have a number of combo-classes applied to it, such as -

.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).

Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .text class can also have the same combo-classes applied to it as the .p1 class.

Logos & Assets

Logo - Skindays Neutral
Logo - Skindays Orange
Favicon - 32x32px
Webclip - 256x256px

Buttons & CTAs

button - Primary CTA
button.is--outline - Secondary CTA
underline-button - Important links

Forms

Rich Text - Blog Posts

Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is a H2 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is a H3 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a H4 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a H5 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a H6 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a figure/image caption

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

This an unordered list -

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Other

You can use this section for any other important elements that you'll use throughout your client's website, such as -

• Navigation
• Footer
• Icons
• Cards
• Form elements
• Social media share buttons

home icon
Go to Homepage