The design system for the XCoffee intranet

1. Headings

H1 (use this by applying the H1 tag)

The lazy fox jumped over the quick brown dog

H2 (use this by applying the H2 tag)

The lazy fox jumped over the quick brown dog

H3 (use this by applying the H3 tag)

The lazy fox jumped over the quick brown dog

H4 (use this by applying the H4 tag)

The lazy fox jumped over the quick brown dog

2. Text

Paragaph (use this by applying the P tag)

The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. 

Lead (use this by applying the class="lead" to the P tag)

The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. The lazy fox jumped over the quick brown dog. 

3. Buttons

Button primary (use this by applying the class="btn btn-primary" to a button)Button secondary (use this by applying the class="btn btn-secondary" to a button)Button success (use this by applying the class="btn btn-success" to a button)Button info (use this by applying the class="btn btn-info" to a button)Button warning (use this by applying the class="btn btn-warning" to a button)

4. Colours

Coffee Beans

#8a5d3c

Coffee Dark

#54494b

Coffee Gray

#727d71

Coffee Brown

#6d4c3d

Coffee Arabica

#ce6c47

Coffee Lead

#7e8287

Coffee Latte

#eee9dc