Typography

Headings

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you just want to show a bigger/smaller font size based on the heading, use class instead, e.g.: <div class="h1">.

<h1 class="h2">This is h1 with h2 size.</h1>
<h2 class="h1">This is h2 with h1 size.</h2>
<div class="h3">This is div with h3 size.</div>

This is h1 with h2 size.

This is h2 with h1 size.

Body

You need not add a paragraph tag, unless you’d like to create additional styles. When doing so, the html code is:

<p>My name is <a class="link arrow-right" href="#">Caius Marcius</a>, 
who hath done. To thee particularly and to all the Volsces. Great hurt 
and mischief; thereto witness may. My surname, Coriolanus. The painful 
service, The extreme dangers, and the drops of blood. Shed for my 
thankless country are requited. But with that surname -- a good memory, 
And witness of the malice and displeasure.</p>

<p>Which thou shouldst bear me. Only that name remains. The cruelty and 
envy of the people, Permitted by our dastard nobles, who Have all forsook me, 
hath devoured the rest; And suffered me by th' voice of slaves to be Whooped 
out of Rome. Now this extremity Hath brought me to thy hearth, not out of hope-- 
Mistake me not -- to save my life; for if I had feared death, of all the men 
i' th' world.</p>

My name is Caius Marcius, who hath done. To thee particularly and to all the Volsces. Great hurt and mischief; thereto witness may. My surname, Coriolanus. The painful service, The extreme dangers, and the drops of blood. Shed for my thankless country are requited. But with that surname — a good memory, And witness of the malice and displeasure.

Which thou shouldst bear me. Only that name remains. The cruelty and envy of the people, Permitted by our dastard nobles, who Have all forsook me, hath devoured the rest; And suffered me by th’ voice of slaves to be Whooped out of Rome. Now this extremity Hath brought me to thy hearth, not out of hope– Mistake me not — to save my life; for if I had feared death, of all the men i’ th’ world.

Styles

<div class="bold">Bold</div>
<strong>This one is Bold too</strong>
<div class="italic">Italic</div>
<em>This one is Italic too</em>
<div class="strike">Strikethrough</div>
<s>This one is Strikethrough too</s>

<div class="tiny">Tiny</div>
<div class="small">Small</div>
<div class="big">Big</div>
<div class="xbig">Extra Big</div>
<div class="sans">Sans-Serif </div>
<div class="sans bold">Bold Sans-Serif </div>
<div class="sans tiny">Tiny Sans-Serif </div>
<div class="sans small">Small Sans-Serif </div>
<div class="sans big">Big Sans Serif </div>
<div class="serif-alt">Serif Alt </div>
<div class="sans-alt">Sans-Serif Alt </div>

<div class="sans tiny bold uppercase ls-1">Letter Spacing 1</div>
<div class="sans tiny bold uppercase ls-3">Letter Spacing 3</div>
<div class="sans tiny bold uppercase ls-5">Letter Spacing 5</div>

<div class="sans lh-09">Line Height 0.9em</div>
<div class="sans lh-10">Line Height 1em</div>
<div class="sans lh-12">Line Height 1.2em</div>
<div class="sans lh-15">Line Height 1.5em</div>
<div class="sans lh-18">Line Height 1.8em</div>
<div class="sans lh-20">Line Height 2em</div>

Special Style

<div class="sub-text">Subtext</div>

Sub Heading

<div class="sub-heading">Subheading</div>

Text Alignment

<div class="text-left">Text Left</div>
<div class="text-center">Text Center</div>
<div class="text-right">Text Right</div>

Drop Cap

<p class="dropcap"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong> Suspendisse 
nec consectetur libero. Curabitur massa mauris, pellentesque semper mauris sit amet, faucibus 
dictum orci. Vestibulum purus massa, pulvinar consequat convallis sit amet, auctor id tortor. 
Praesent vitae tortor purus. Cras rhoncus rhoncus arcu a consectetur. Class aptent taciti 
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt diam ut 
orci feugiat hendrerit. Morbi a vestibulum enim. Pellentesque eu felis nec ante feugiat congue 
vel quis ex. Suspendisse lobortis euismod erat. Donec imperdiet enim ac justo maximus, eget 
porttitor dolor lacinia. Nunc in nunc tellus. Curabitur convallis, nisl at pellentesque vehicula, 
turpis ipsum cursus justo, a accumsan ipsum turpis at eros. Nullam lacus est, tempus tincidunt 
ante vitae, dictum vulputate odio. Nulla auctor, mauris quis malesuada euismod, nisl risus 
bibendum sapien, molestie maximus nunc ellus eget turpis. Sed vestibulum, mauris sed consequat 
scelerisque, urna nibh tempor justo, non viverra risus urna eu justo.</p>

Colours

Our palette is dominantly black and white, reflecting boldness and duality. PD Heat and PD Cool are our primes. As accents, PD Win+, PD Grow, and PD Light are used sparingly and never alone. The sizing below shows preferred colour ratios.

Primes

Accents

Text Colour

<div class="red">Red</div>
<div class="black">Black</div>
<div class="grey-dark">Dark Grey</div>
<div class="grey">Grey</div>
<div class="grey-light">Light Grey</div>
<div class="white">White</div>
<div class="off-white">Off White</div>
<div class="blue">Blue</div>
<div class="blue-bright">Blue Bright</div>
<div class="win-plus">Win Plus</div>
<div class="pd-heat">PD Heat</div>
<div class="pd-cool">PD Cool</div>
<div class="pd-win">PD Win</div>
<div class="pd-grow">PD Grow</div>
<div class="pd-light">PD Light</div>
<div class="pd-space-black">PD Space Black</div>

Background Colour

<div class="bg-red white">Red</div>
<div class="bg-black white">Black</div>
<div class="bg-grey-dark white">Dark Grey</div>
<div class="bg-grey">Grey</div>
<div class="bg-grey-light">Light Grey</div>
<div class="bg-white">White</div>
<div class="bg-off-white">Off White</div>
<div class="bg-blue">Blue</div>
<div class="bg-blue-bright">Blue Bright</div>
<div class="bg-win-plus">Win Plus</div>
<div class="bg-pd-heat white">PD Heat</div>
<div class="bg-pd-cool white">PD Cool</div>
<div class="bg-pd-win white">PD Win</div>
<div class="bg-pd-grow white">PD Grow</div>
<div class="bg-pd-light black">PD Light</div>
<div class="bg-pd-space-black white">PD Space Black</div>

Utils

Email Newsletter

[sc name="newsletter-small"][/sc]

[sc name="newsletter"][/sc]