Style Guide

This is your complete guide to this templates styling and interface elements.

Color Palette

These are the global colour swatches that are used to colour all the elements on this website.
You can edit these easily throughout the entire site by clicking on the swatch, and editing the global colour. Too easy!
Dark Brand Color
Brand Color 1
Brand Color 2
Brand Color 3
Brand Color 4
Brand Color 5
Brand Color 6
Light Color
Neutral Color 1
Neutral Color 2
Success Color
Alert Color
Error Color

Type Styles

Here's a handy list of the main type styles used throughout this website.
Edit these universally by clicking on the style, choosing 'Edit all ...' from the selector (look for the pink HTML tag) and change the type style accordingly.

Heading
One

All H1 Headings

Heading
Two

All H2 Headings

Heading
Three

All H3 Headings

Heading
Four

All H4 Headings
Heading
Five
All H5 Headings
Heading
Six
All H6 Headings

Large Body Text Body Link

Large Text
All Links

Paragraph Body Text Body Link

All Paragraphs
All Links

Small Body Text Body Link

Small Text
All Links
Block Quote
Block Quote

Icons

The Adoptable template comes with a set of custom icons designed by Hollagraphica exclusively for the template.

Here's the full set, in dark and light to use throughout your website.

Decoration & Patterns

The Adoptable template also includes a set of graphic elements and patterns to use throughout your site, so you can make it uniquely yours.
Long Fur Pattern
Short Fur Pattern

Lottie Animations

We've turned the cuteness up to 11 and animated some of our favourite icons from the Adoptable suite.

Buttons

We use two styles of buttons throughout the Adoptable template.

Badges

These badges can be used as category tags for blog posts or other content, or to help guide your website viewers to certain details on the page.
dog tags
Badge
Brand Color 3
cat tags
Badge
Brand Color 6
dog tags
Badge Outline
Brand Color 3
cat tags
Badge Outline
Brand Color 6