Breakpoints
Github

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</h2>
<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</h2>
<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</h2>
<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</h2>
<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</h2>
<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>