Core

Typography

Use these and nothing else, your users will appreciate it.

Get the font

<link href="http://fonts.googleapis.com/css?family=Ubuntu:300,500" rel="stylesheet" type="text/css">

Add this to your <head> tag.

Font Family

font-family: Ubuntu, Helvetica, sans-serif;

The one and only font declaration to be used.

Default Font Weight

font-weight: 300;

Use this wherever you can, it's the default.

Alternative Font Weight

font-weight: 500;

Use to emphasize text in paragraphs using the <strong> tag and for labels.

Font sizes

Headline H1 is 34px and the line-height is 48px

Headline H2 is 27px and the line-height is 36px

Headline H3 is 22px and the line-height is 36px

Headline H4 is 18px and the line-height is 24px

Size for normal text is 14px and the line-height is 24px

Size for small copy is 11px and the line-height is 18px

<h3 class="dc-h3 f-item-heading">Get the font</h3>
<pre class="dc-pre"><code class="language-markup">&lt;link href=&quot;http://fonts.googleapis.com/css?family=Ubuntu:300,500&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</code></pre>
<p class="dc-p">Add this to your <code class="language-markup">&lt;head&gt;</code> tag.</p>

<h3 class="dc-h3 f-item-heading">Font Family</h3>
<pre class="dc-pre"><code class="language-css">font-family: Ubuntu, Helvetica, sans-serif;</code></pre>
<p class="dc-p">The one and only font declaration to be used.</p>

<h3 class="dc-h3 f-item-heading">Default Font Weight</h3>
<pre class="dc-pre"><code class="language-css">font-weight: 300;</code></pre>
<p class="dc-p">Use this wherever you can, <strong class="dc-strong">it's the default.</strong></p>

<h3 class="dc-h3 f-item-heading">Alternative Font Weight</h3>
<pre class="dc-pre"><code class="language-css">font-weight: 500;</code></pre>
<p class="dc-p">Use to <strong class="dc-strong">emphasize text</strong> in paragraphs using the <code class="language-markup">&lt;strong&gt;</code> tag and for <a href="/atoms.html#text-input" class="dc-link" title="Show inputs and labels">labels</a>.</p>

<h3 class="dc-h3 f-item-heading">Font sizes</h3>
<h1 class="dc-h1">Headline H1 is 34px and the line-height is 48px</h1>
<h2 class="dc-h2">Headline H2 is 27px and the line-height is 36px</h2>
<h3 class="dc-h3">Headline H3 is 22px and the line-height is 36px</h3>
<h4 class="dc-h4">Headline H4 is 18px and the line-height is 24px</h4>
<p class="dc-p">Size for normal text is 14px and the line-height is 24px</p>
<p class="dc--text-small">Size for small copy is 11px and the line-height is 18px</p>

Colors

Blue

$dc-blue80

#e6f4ff

$dc-blue70

#d1ebff

$dc-blue60

#a3d9ff

$dc-blue50

#75c6ff

$dc-blue40

#26aafe

$dc-blue30

#1e87cb

$dc-blue20

#186698

$dc-blue10

#124365

Cyan

$dc-cyan80

#e8fCff

$dc-cyan70

#b5f5ff

$dc-cyan60

#8cf0ff

$dc-cyan50

#61eaff

$dc-cyan40

#24e0fe

$dc-cyan30

#1fb3cb

$dc-cyan20

#1a8899

$dc-cyan10

#145b66

Green

$dc-green80

#e7ffd6

$dc-green70

#c6ff9e

$dc-green60

#acff70

$dc-green50

#8bfa3c

$dc-green40

#72e620

$dc-green30

#65cb1c

$dc-green20

#4a9912

$dc-green10

#30660a

Yellow

$dc-yellow80

#fff9d9

$dc-yellow70

#fff09e

$dc-yellow60

#ffeb7a

$dc-yellow50

#ffe347

$dc-yellow40

#ffda0a

$dc-yellow30

#ccb116

$dc-yellow20

#99840e

$dc-yellow10

#665705

Orange

$dc-orange80

#ffefe0

$dc-orange70

#ffd1a6

$dc-orange60

#ffba7a

$dc-orange50

#ffa54e

$dc-orange40

#ff8e25

$dc-orange30

#cc711d

$dc-orange20

#995516

$dc-orange10

#66380e

Red

$dc-red80

#ffeae6

$dc-red70

#ffcabf

$dc-red60

#ff9985

$dc-red50

#ff6c4f

$dc-red40

#ff4a25

$dc-red30

#cc3a1d

$dc-red20

#992b15

$dc-red10

#661d0e

Magenta

$dc-magenta80

#f7e9f7

$dc-magenta70

#f7c8f7

$dc-magenta60

#f7b2f6

$dc-magenta50

#f296f1

$dc-magenta40

#eb74e9

$dc-magenta30

#bb5cba

$dc-magenta20

#8c458b

$dc-magenta10

#5d2e5c

Purple

$dc-purple80

#f4edff

$dc-purple70

#e1cfff

$dc-purple60

#c8a6ff

$dc-purple50

#ac7afd

$dc-purple40

#9757fd

$dc-purple30

#7845cb

$dc-purple20

#5a3498

$dc-purple10

#3c2365

Grays

$dc-gray80

#f7f7f7

$dc-gray70

#ededed

$dc-gray60

#d1d1d1

$dc-gray50

#b6b6b6

$dc-gray40

#9b9b9b

$dc-gray30

#808080

$dc-gray20

#646464

$dc-gray10

#4a4a4a

<section class="color">
	<h3 class="dc-h3 f-item-heading">Blue</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue80</div>
				<div class="f-color-chip__color">#e6f4ff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue70</div>
				<div class="f-color-chip__color">#d1ebff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue60</div>
				<div class="f-color-chip__color">#a3d9ff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue50</div>
				<div class="f-color-chip__color">#75c6ff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue40</div>
				<div class="f-color-chip__color">#26aafe</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue30</div>
				<div class="f-color-chip__color">#1e87cb</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue20</div>
				<div class="f-color-chip__color">#186698</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-blue10</div>
				<div class="f-color-chip__color">#124365</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Cyan</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan80</div>
				<div class="f-color-chip__color">#e8fCff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan70</div>
				<div class="f-color-chip__color">#b5f5ff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan60</div>
				<div class="f-color-chip__color">#8cf0ff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan50</div>
				<div class="f-color-chip__color">#61eaff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan40</div>
				<div class="f-color-chip__color">#24e0fe</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan30</div>
				<div class="f-color-chip__color">#1fb3cb</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan20</div>
				<div class="f-color-chip__color">#1a8899</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-cyan10</div>
				<div class="f-color-chip__color">#145b66</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Green</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green80</div>
				<div class="f-color-chip__color">#e7ffd6</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green70</div>
				<div class="f-color-chip__color">#c6ff9e</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green60</div>
				<div class="f-color-chip__color">#acff70</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green50</div>
				<div class="f-color-chip__color">#8bfa3c</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green40</div>
				<div class="f-color-chip__color">#72e620</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green30</div>
				<div class="f-color-chip__color">#65cb1c</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green20</div>
				<div class="f-color-chip__color">#4a9912</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-green10</div>
				<div class="f-color-chip__color">#30660a</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Yellow</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow80</div>
				<div class="f-color-chip__color">#fff9d9</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow70</div>
				<div class="f-color-chip__color">#fff09e</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow60</div>
				<div class="f-color-chip__color">#ffeb7a</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow50</div>
				<div class="f-color-chip__color">#ffe347</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow40</div>
				<div class="f-color-chip__color">#ffda0a</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow30</div>
				<div class="f-color-chip__color">#ccb116</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow20</div>
				<div class="f-color-chip__color">#99840e</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-yellow10</div>
				<div class="f-color-chip__color">#665705</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Orange</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange80</div>
				<div class="f-color-chip__color">#ffefe0</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange70</div>
				<div class="f-color-chip__color">#ffd1a6</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange60</div>
				<div class="f-color-chip__color">#ffba7a</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange50</div>
				<div class="f-color-chip__color">#ffa54e</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange40</div>
				<div class="f-color-chip__color">#ff8e25</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange30</div>
				<div class="f-color-chip__color">#cc711d</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange20</div>
				<div class="f-color-chip__color">#995516</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-orange10</div>
				<div class="f-color-chip__color">#66380e</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Red</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red80</div>
				<div class="f-color-chip__color">#ffeae6</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red70</div>
				<div class="f-color-chip__color">#ffcabf</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red60</div>
				<div class="f-color-chip__color">#ff9985</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red50</div>
				<div class="f-color-chip__color">#ff6c4f</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red40</div>
				<div class="f-color-chip__color">#ff4a25</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red30</div>
				<div class="f-color-chip__color">#cc3a1d</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red20</div>
				<div class="f-color-chip__color">#992b15</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-red10</div>
				<div class="f-color-chip__color">#661d0e</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Magenta</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta80</div>
				<div class="f-color-chip__color">#f7e9f7</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta70</div>
				<div class="f-color-chip__color">#f7c8f7</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta60</div>
				<div class="f-color-chip__color">#f7b2f6</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta50</div>
				<div class="f-color-chip__color">#f296f1</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta40</div>
				<div class="f-color-chip__color">#eb74e9</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta30</div>
				<div class="f-color-chip__color">#bb5cba</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta20</div>
				<div class="f-color-chip__color">#8c458b</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-magenta10</div>
				<div class="f-color-chip__color">#5d2e5c</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Purple</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple80</div>
				<div class="f-color-chip__color">#f4edff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple70</div>
				<div class="f-color-chip__color">#e1cfff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple60</div>
				<div class="f-color-chip__color">#c8a6ff</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple50</div>
				<div class="f-color-chip__color">#ac7afd</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple40</div>
				<div class="f-color-chip__color">#9757fd</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple30</div>
				<div class="f-color-chip__color">#7845cb</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple20</div>
				<div class="f-color-chip__color">#5a3498</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-purple10</div>
				<div class="f-color-chip__color">#3c2365</div>
			</div>
		</div>
	</section>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Grays</h1>
		<div class="f-color-chips">
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray80</div>
				<div class="f-color-chip__color">#f7f7f7</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray70</div>
				<div class="f-color-chip__color">#ededed</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray60</div>
				<div class="f-color-chip__color">#d1d1d1</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray50</div>
				<div class="f-color-chip__color">#b6b6b6</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray40</div>
				<div class="f-color-chip__color">#9b9b9b</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray30</div>
				<div class="f-color-chip__color">#808080</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray20</div>
				<div class="f-color-chip__color">#646464</div>
			</div>
			<div class="f-color-chip">
				<div class="f-color-chip__name">$dc-gray10</div>
				<div class="f-color-chip__color">#4a4a4a</div>
			</div>
		</div>
	</section>