Skip NavigationSkip to Primary Content

Style Guide

This is the living style guide for the theme ModernV1.


Color Palette

Dusty Teal (#527c8e)
Key Name: dustyTeal

Charcoal Grey (#393b3c)
Key Name: charcoalGrey

White (#ffffff)
Key Name: white

Off White (#f9f5ef)
Key Name: offWhite

Pale (#ebe2d5)
Key Name: pale

Stone Teal (#446776)
Key Name: stoneTeal

Overcast (#eaeaea)
Key Name: overcast

Rose (#ff4e45)
Key Name: rose

Warning Red (#ff0000)
Key Name: warningRed

Black (#000000)
Key Name: black


Textures

The following textures are available for use in this them as backgrounds on various components.

Leaves Organic Light Tan
Key Name: leavesOrganicLightTan

Leaves Organic Green
Key Name: leavesOrganicGreen

Wave Light Tan
Key Name: waveLightTan

Wave Green
Key Name: waveGreen

Woodgrain Light Tan
Key Name: woodgrainLightTan

Woodgrain Green
Key Name: woodgrainGreen

Leaves Geometric Light Tan
Key Name: leavesGeometricLightTan

leaves Geometric Green
Key Name: leavesGeometricGreen

Leaves Organic Cream
Key Name: leavesOrganicCream

Leaves Organic Navy
Key Name: leavesOrganicNavy

Leaves Organic Brown
Key Name: leavesOrganicBrown

Wave Cream
Key Name: waveCream

Wave Navy
Key Name: waveNavy

Wave Brown
Key Name: waveBrown

Woodgrain Cream
Key Name: woodgrainCream

Woodgrain Navy
Key Name: woodgrainNavy

Woodgrain Brown
Key Name: woodgrainBrown

Leaves Geometric Cream
Key Name: leavesGeometricCream

Leaves Geometric Navy
Key Name: leavesGeometricNavy

Leaves Geometric Brown
Key Name: leavesGeometricBrown

Leaves Organic Stone
Key Name: leavesOrganicStone

Leaves Organic Salmon
Key Name: leavesOrganicSalmon

Leaves Organic Yellow
Key Name: leavesOrganicYellow

Wave Stone
Key Name: waveStone

Wave Salmon
Key Name: waveSalmon

Wave Yellow
Key Name: waveYellow

Woodgrain Stone
Key Name: woodgrainStone

Woodgrain Salmon
Key Name: woodgrainSalmon

Woodgrain Yellow
Key Name: woodgrainYellow

Leaves Geometric Stone
Key Name: leavesGeometricStone

Leaves Geometric Salmon
Key Name: leavesGeometricSalmon

Leaves Geometric Yellow
Key Name: leavesGeometricYellow

Dog Lavender
Key Name: dogLavender

Cat Lavender
Key Name: catLavender

Bones Lavender
Key Name: bonesLavender

Geometric Lavender
Key Name: geometricLavender

Dog Light Blue
Key Name: dogLightBlue

Cat Light Blue
Key Name: catLightBlue

Bones Light Blue
Key Name: bonesLightBlue

Geometric Light Blue
Key Name: geometricLightBlue

Dog Light Yellow
Key Name: dogLightYellow

Cat Light Yellow
Key Name: catLightYellow

Bones Light Yellow
Key Name: bonesLightYellow

Geometric Light Yellow
Key Name: geometricLightYellow

Dog Pink
Key Name: dogPink

Cat Pink
Key Name: catPink

Bones Pink
Key Name: bonesPink

Geometric Pink
Key Name: geometricPink

Dog Peach
Key Name: dogPeach

Cat Peach
Key Name: catPeach

Bones Peach
Key Name: bonesPeach

Geometric Peach
Key Name: geometricPeach

Dog Baby Blue
Key Name: dogBabyBlue

Cat Baby Blue
Key Name: catBabyBlue

Bones Baby Blue
Key Name: bonesBabyBlue

Geometric Baby Blue
Key Name: geometricBabyBlue

Dog Blue
Key Name: dogBlue

Cat Blue
Key Name: catBlue

Bones Blue
Key Name: bonesBlue

Geometric Blue
Key Name: geometricBlue

Dog Green
Key Name: dogGreen

Cat Green
Key Name: catGreen

Bones Green
Key Name: bonesGreen

Geometric Green
Key Name: geometricGreen

Dog Yellow
Key Name: dogYellow

Cat Yellow
Key Name: catYellow

Bones Yellow
Key Name: bonesYellow

Geometric Yellow
Key Name: geometricYellow


Typograhy

Headlines

Headlines are used not just for visual purposes but also for SEO. Therefore it is ipmortant that a headline is not picked just to achieve a visual intention. They should be structured like an outline.

Headline 1 <h1>

Used exclusively for page titles.


Headline 2 <h2>

Used exclusively for page-level secondary headings.


Headline 3 <h3>

Used for component-level headings.


Headline 4 <h4>

Used for component-level secondary headings.


Headline 5 <h5>

Used for item-level headings within components.


Headline 6 <h6>

Used for item-level secondary headings within components


Paragraphs

Paragraph text <p>: Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque, odio in nisi, eros sed tristique? Cum non? Tincidunt? Et ridiculus pid pulvinar parturient proin sed adipiscing non eros vel enim, nisi, adipiscing, phasellus arcu dolor sit mattis, rhoncus in nunc, vel adipiscing, augue! Dolor! Cursus cras urna mauris! Mattis. Ultrices dignissim amet? Ac duis? Et enim placerat urna lacus phasellus, est nisi? Lorem phasellus porta placerat. Mattis nec odio pulvinar in mauris! Diam turpis vut dolor duis, ac. Nisi hac! In, enim lectus phasellus! Platea odio risus dolor elementum rhoncus lorem odio ac, duis, duis augue porta pellentesque porttitor magnis auctor parturient adipiscing odio cras lacus enim nunc.

Lundium magna nascetur tortor odio? Lorem tristique. Odio a? Nec sed? link text Tristique, et tristique odio, lundium velit porttitor tristique enim et augue enim tortor sit elementum aliquam. Diam phasellus, adipiscing lectus integer placerat, turpis ultricies natoque ridiculus magna natoque, duis pulvinar! Nec natoque dictumst arcu, urna dapibus, hac ultricies adipiscing ac integer nascetur lorem et duis sociis aliquet, integer! Porta odio lorem et est purus, adipiscing porta enim in sociis pellentesque. Habitasse lacus magna adipiscing duis montes odio ultrices cras, lacus aliquet! Dignissim? Porttitor mattis tincidunt in porttitor, elementum placerat placerat vel tristique. Porttitor dictumst nisi, augue adipiscing porttitor. Adipiscing integer nec tristique! Scelerisque. Vel enim et sed elementum et odio? Velit rhoncus! Enim odio sit, ac proin urna.

<small> Text

Small text: Applied using the <small> tag. Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque, odio in nisi, eros sed tristique?

Bold text: Phasellus porta, risus nunc ac cras

Italicised text: Phasellus porta, risus nunc ac cras

Hyperlinked text


Lists

Unordered (bulleted) list <ul>

  • Phasellus porta, risus nunc ac <li>
  • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
  • Phasellus porta, risus nunc ac
    • Phasellus porta, risus nunc ac
    • Phasellus porta, risus nunc ac
    • Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
    • Phasellus porta, risus nunc ac
  • Phasellus porta, risus nunc ac

Ordered (numbered) list <ol>

  1. Phasellus porta, risus nunc ac <li>
  2. Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
  3. Phasellus porta, risus nunc ac
    1. Phasellus porta, risus nunc ac
    2. Phasellus porta, risus nunc ac
    3. Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!
    4. Phasellus porta, risus nunc ac
  4. Phasellus porta, risus nunc ac

Horizontal Rules

Lines designed for breaks between paragraphs of text.

Default:

Blockquotes

Longer form text quote with a source citation. Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque, odio in nisi, eros sed tristique? Cum non? Tincidunt? Et ridiculus pid pulvinar parturient proin sed adipiscing non eros vel enim, nisi, adipiscing, phasellus arcu dolor sit mattis. Person cited with a <cite> tag at the end of the blockquote