Walley's Style Guide

This is to be used as a base style guide to Walley’s styling and typography elements. This is not (yet) for block styling and scaffolding.

This is an H2 element styled like an H1 element

Structurally, there can be only one H1. Stylistically there can be as many as is required with extra styling additions.

.h2__bigger { font-size: 54px; line-height: 54px; }

This is an H2 element

This is an H3 element

This is an H4 element

This is an H5 element

This is an H6 element

I am a standard Paragraph text block.

This is what I look like in bold.

This is what I look like in italics.

Left Justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget felis fermentum risus scelerisque imperdiet sed quis ante. Nullam at arcu eget odio varius elementum id sed odio. Quisque a risus sit amet quam fermentum ornare. Integer et massa eget felis scelerisque auctor in eget felis. In hac habitasse platea dictumst. Suspendisse interdum, lacus ut convallis egestas, mauris elit porttitor arcu, id cursus neque mi sit amet justo. Vivamus sem enim, vulputate non tortor ut, porttitor convallis purus. Nullam luctus sit amet lacus posuere euismod. Vivamus molestie maximus ex, non varius quam gravida nec. Etiam in quam tincidunt, elementum quam vel, laoreet orci. Integer risus orci, tristique eget mauris vel, posuere dignissim nulla. Sed sit amet felis hendrerit, ultricies mauris egestas, gravida felis. Donec ullamcorper iaculis ante at mollis.

Center Justify

Full Justify

Right Justify

Button

Separator

Orange bars to the left and right define content width

This is an orange H2 element that has text which spans across the main content area of the page.

This is a green H2 element that has text which spans across the main content area of the page.

This is a black H2 element on a light gray { #fafafa } field that has text which spans across the main content area of the page.

This is a white H2 element on a black field that has text which spans across the main content area of the page.

This is a white H2 element on a green field that has text which spans across the main content area of the page.

This is a white H2 element on a black field that has text which spans across the full width of the page.

Approved Site Color Matrix

White
#ffffff

Light Grey
#fafafa

Medium Grey
#cccccc

(Soft) Black
#1a1a1a

Bright Orange
#f5831f

Medium Orange
#f15e24

Bright Green
#8fc640

Medium Green
#258021

Dark Green
#005c3a

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is an H4 Heading in a full width 4 square block

This is some paragraph text

Button

This is a Full Width panel that has a Background image with a standardized dotted overlay

This would be a subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas elit vel hendrerit mattis. Nulla facilisi. Nunc viverra egestas tellus id dictum. Nullam quis magna accumsan, posuere arcu in, viverra lectus. Morbi nec pretium tellus.

Button

Walley's Style Guide

This is an H2 element styled like an H1 element

This is an H2 element

This is an H3 element

This is an H4 element

This is an H5 element

This is an H6 element

Separator

Orange bars to the left and right define content width

This is an orange H2 element that has text which spans across the main content area of the page.

This is a green H2 element that has text which spans across the main content area of the page.

This is a black H2 element on a light gray { #fafafa } field that has text which spans across the main content area of the page.

This is a white H2 element on a black field that has text which spans across the main content area of the page.

This is a white H2 element on a green field that has text which spans across the main content area of the page.

This is a white H2 element on a black field that has text which spans across the full width of the page.

Approved Site Color Matrix

White
#ffffff

Light Grey
#fafafa

Medium Grey
#cccccc

(Soft) Black
#1a1a1a

Bright Orange
#f5831f

Medium Orange
#f15e24

Bright Green
#8fc640

Medium Green
#258021

Dark Green
#005c3a

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is a Full Width panel that has a Background image with a standardized dotted overlay

This would be a subheading

Office Hours

Contact Us

New Hampshire

Massachusetts

Walley's Style Guide

This is an H2 element styled like an H1 element

This is an H2 element

This is an H3 element

This is an H4 element

This is an H5 element

This is an H6 element

Separator

Orange bars to the left and right define content width

This is an orange H2 element that has text which spans across the main content area of the page.

This is a green H2 element that has text which spans across the main content area of the page.

This is a black H2 element on a light gray { #fafafa } field that has text which spans across the main content area of the page.

This is a white H2 element on a black field that has text which spans across the main content area of the page.

This is a white H2 element on a green field that has text which spans across the main content area of the page.

This is a white H2 element on a black field that has text which spans across the full width of the page.

Approved Site Color Matrix

White #ffffff

Light Grey #fafafa

Medium Grey #cccccc

(Soft) Black #1a1a1a

Bright Orange #f5831f

Medium Orange #f15e24

Bright Green #8fc640

Medium Green #258021

Dark Green #005c3a

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is an H4 Heading in a full width 4 square block

This is a Full Width panel that has a Background image with a standardized dotted overlay

This would be a subheading

White
#ffffff

Light Grey
#fafafa

Medium Grey
#cccccc

(Soft) Black
#1a1a1a

Bright Orange
#f5831f

Medium Orange
#f15e24

Bright Green
#8fc640

Medium Green
#258021

Dark Green
#005c3a