Shire Style Guide

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Eyebrow

Larger Intro paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ordered list
Ordered list
Ordered list

And now here comes the

Unordered list
Unordered list
Unordered list

Typography Styling Rules

Use default element styles (h1, h2, p, ul, etc.)
If you need to use a different size, use or create a Global Font (Always have a reason for creating a new style, and be sure to apply it consistent.)

Links/Buttons

Standard text link

Colors

Partner's Branding

Primary

This color is used for prominent things like headings, section backgrounds, and some buttons.

Secondary

Secondary colors are used for secondary elements such as subheading dividers, some links and section backgrounds.

Accent

Used for buttons, CTAs, and stylistic elements. Often used for link text and menu underlines as well.

Primary - Mid Shade

Lighter version of primary color

Secondary - Mid Shade

Lightest version of secondary color.

Accent - Mid Shade

Lighter version of accent color

Primary - Light Shade

Lightest version of primary color. Used as background color and subnav

Secondary - Light Shade

Lightest version of secondary color. Used for section backgrounds.

Accent - Light Shade

Lighter version of accent color. Used for background colors

Standard Colors

Text

Used as the primary paragraph and text color. Typically black.

Black

Gray - Dark

Gray - Mid

Gray - Light

White

Stylistic Elements

Subheading Divider

Goes underneath H2s. Can be left aligned or centered depending on the layout.

Card

We bring the right people together to challenge established thinking and drive transform in 2020

Learn more

Padding & Margins

Padding should be used liberally to give elements room to breath.

Margin should be used sparingly to adjust the space between elements.

Small Sections

Small sections can use the class “standardsection-small“

First section below hero images
CTA/button sections

Large Sections:

Large sections can use the class “standardsection-large“

Any body section other than ones listed under Small Sections

Cards, subnavs and other standard elements:

Padding: ~5% – 8%

Section CSS

Paste this in Site Settings > Custom CSS to use these classes

				
					.standardsection-small{
  padding: 3% 0% 3% 0%;
}

.standardsection-large{
  padding: 8% 0% 8% 0%;
}

@media only screen and (max-width: 400px) {
 .standardsection-large {
   padding:20% 2%;
 }
}

@media only screen and (max-width: 400px) {
 .standardsection-small {
   padding:15% 2%;
 }
}

Awesome box

Drop Shadows

Subtle drop shadows can be used on certain elements such as cards, CTAs, forms, etc.

Settings:

Color: rgba(0,0,0,0.13)
Horizontal: 0
Vertical: 0
Blur: 15
Spread: 4

Card

Rounded Corners

Most elements such as cards and boxes have rounded corners.

Border radius:

Cards, boxes, callouts: 20px
Buttons: 40px
Bubble images: 200px

Bubble Images

Shire uses a lot of rounded images instead of large boxy ones. They also use a hard drop shadow and padding to create an interesting outline effect.

To apply this use the bubbleimage-right or bubbleimage-left classes.

Image CSS

Add these styles in Site Settings > Custom CSS to use on any image.

				
					.bubbleimage-right img{
    border-radius: 200px 200px 0px 200px;
    box-shadow:14px 16px 0px 0px var(--e-global-color-accent);
    padding:2%;
    margin:0px 30px 30px 0px;
    max-width:90%;
}

.bubbleimage-left img{
    border-radius: 200px 200px 200px 0px;
    box-shadow:14px 16px 0px 0px var(--e-global-color-accent);
    padding:2%;
    margin:0px 30px 30px 0px;
    max-width:90%;
}