Core

Typography

Getting The Font

Dress Code uses Ubuntu, a free open source font distributed trough Google Fonts. The simplest way to load the font in your project is to use the following code in your document:

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

<pre class="dc-pre"><code class="language-markup">&lt;link href=&quot;//fonts.googleapis.com/css?family=Ubuntu:300,500&quot; rel=&quot;stylesheet&quot;&gt;</code></pre>

Font Weights

The default font weight for text is 300. Most of the default text styles will use this. The weight 500 is used for emphasized text as well as table headers, form labels, and some other elements.

Font Sizes

These are the main heading and text sizes. Use classes such as .dc-h1 to ensure the styling is correctly applied, regardless of the HTML element. Remember to use size to correctly hierarchize the information on the page.

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

<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

Color plays an important role in mantaining a cohesive look and feel between multiple apps. To ensure this, avoid using colors other than the ones below. All of these colors are available as SASS variables which should save you time when creating your application.

Gray

$dc-gray80

#f7f7f7

$dc-gray70

#ededed

$dc-gray60

#d1d1d1

$dc-gray50

#b6b6b6

$dc-gray40

#9b9b9b

$dc-gray30

#808080

$dc-gray20

#646464

$dc-gray10

#4a4a4a

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

<p class="dc-p">Color plays an important role in mantaining a cohesive look and feel between multiple apps. To ensure this, avoid using colors other than the ones below. All of these colors are available as SASS variables which should save you time when creating your
	application.

	<section class="color">
		<h3 class="dc-h3 f-item-heading">Gray</h3>
		<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>
	<section class="color">
		<h3 class="dc-h3 f-item-heading">Blue</h3>
		<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</h3>
		<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</h3>
		<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</h3>
		<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</h3>
		<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</h3>
		<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</h3>
		<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</h3>
		<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>

Utilities

This text is important

This text is less important

Island 50

Island 75

Island 100

This text is aligned left

This text is aligned centered

This text is aligned right

This text is less important......

This text is small

This is a success text

This is an error text

This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated.

<p class="dc--is-important">This text is important</p>
<p class="dc--less-important">This text is less important</p>
<div class="dc--island-50">
	Island 50
</div>
<div class="dc--island-75">
	Island 75
</div>
<div class="dc--island-100">
	Island 100
</div>
<div>
	<p class="dc--text-left">This text is aligned left</p>
	<p class="dc--text-center">This text is aligned centered</p>
	<p class="dc--text-right">This text is aligned right</p>
</div>
<div>
	<p class="dc--text-less-important">
		This text is less important......
	</p>
	<p class="dc--text-small">
		This text is small
	</p>
	<p class="dc--text-success">
		This is a success text
	</p>
	<p class="dc--text-error">
		This is an error text
	</p>
	<p class="dc--text-truncate">
		This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated. This text will be truncated.
	</p>
</div>