Style Guide
This is the living style guide for the theme PlayfulV3.
Color Palette
Orangish (#ff8141)
Key Name: orangish
Clear Blue (#1f73e0)
Key Name: clearBlue
Dark Night (#35323c)
Key Name: darkNight
White (#ffffff)
Key Name: white
Sandy (#fcc875)
Key Name: sandy
Soft Blue (#619be9)
Key Name: softBlue
Faded Green (#7bb973)
Key Name: fadedGreen
Burnt Orange (#c74200)
Key Name: burntOrange
Light Navy (#13509f)
Key Name: lightNavy
Ivory (#fcfbf8)
Key Name: ivory
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
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>
- 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
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