Use these and nothing else, your users will appreciate it.
<link href="http://fonts.googleapis.com/css?family=Ubuntu:300,500" rel="stylesheet" type="text/css">
Add this to your <head>
tag.
font-family: Ubuntu, Helvetica, sans-serif;
The one and only font declaration to be used.
font-weight: 300;
Use this wherever you can, it's the default.
font-weight: 500;
Use to emphasize text in paragraphs using the <strong>
tag and for labels.
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"><link href="http://fonts.googleapis.com/css?family=Ubuntu:300,500" rel="stylesheet" type="text/css"></code></pre>
<p class="dc-p">Add this to your <code class="language-markup"><head></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"><strong></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>
<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>