Colors

Color palette:

@orange-900:
#b84c0d

@orange-500:
#ed6d20

@orange-400:
#f18c3e

@orange-50:
#fdeee3

@blue-900:
#024097

@blue-500:
#056fd2

@blue-400:
#64bbf1

@blue-50:
#e3f1fe

@green-900:
#417b3b

@green-500:
#60ad56

@green-400:
#7ac276

@green-50:
#eef6e6

@yellow-900:
#8a6b2c

@yellow-500:
#f6bb42

@yellow-400:
#ffce54

@yellow-50:
#fef4e0

@red-900:
#b5230d

@red-500:
#e9573f

@red-400:
#fc6e51

@red-50:
#fce6e3

@purple-900:
#522544

@purple-500:
#703e60

@purple-400:
#8b587b

@purple-50:
#eee6eb

@gray-900:
#1d1b1a

@gray-800:
#363232

@gray-700:
#464241

@gray-600:
#736e6d

@gray-500:
#afabaa

@gray-400:
#c4c1c1

@gray-300:
#d8d6d6

@gray-200:
#eceaea

@gray-100: #f4f3f2

@gray-50: #f9f8f8

Background colors:

@backgroundBlue: @blue-50

@backgroundGray: @gray-200

Border colors:

@borderGray: @gray-200

Text colors:

@textColorStandard: @gray-900
@textColorMuted: @gray-600
@textColorDisabled: @gray-500

Link colors:

Typography

Use sentence case for headers and buttons. i.e. capitalize the first word only.

Primary headers:

h1. Very large header, 42px 26px

h2. Large header, 26px 20px

h3. Medium header, 22px 18px

h4. Moderate header, 20px 16px

h5. Small header, 16px 14px

h6. Tiny header, 14px

<h1>h1. Very large header</h1>
<h2>h2. Large header</h2>
<h3>h3. Medium header</h3>
<h4>h4. Moderate  header</h4>
<h5>h5. Small header</h5>
<h6>h6. Tiny header</h6>

Secondary headers:

h1. Very large header

h2. Large header

h3. Medium header

h4. Moderate header

h5. Small header

h6. Tiny header

<h1 class="light-header">h1. Very large header</h1>
<h2 class="light-header">h2. Large header</h2>
<h3 class="light-header">h3. Medium header</h3>
<h4 class="light-header">h4. Moderate  header</h4>
<h5 class="light-header">h5. Small header</h5>
<h6 class="light-header">h6. Tiny header</h6>

Paragraphs:

We have three differents sizes for our paragraph texts: large which increases the font size to 16px, our standard which is 14px, and a small size which is 12px.

Introduction text has a custom size and line height. Use this style for the initial summary paragraph of blog posts, or for a supporting descriptive sentence or two beneath a header.

This is the default style used for all text that is not a headline. Use this style for paragraphs and for most pieces of text longer than a few words. This is a link

Small text should be used for tips or information that are handy but not critically important — for example, hints beneath form fields.

<p class="text-large">Introduction text has a custom size and line height...</p>
<p>This is the default style used for all text that is not a headline...</p>
<p class="text-small">Small text should be used for tips or information...</p>

Typography helpers

When modifying text properties (font-size, font-weight etc), try to do so by using the .text-* classes.

.text-large

Sample text

14% larger than our standard type

.text-small

Sample text

14% smaller than our standard type

.text-bold

Sample text

Also applies to <b> and <strong>

.text-semibold

Sample text

Uses the semi-bold variant of the font

.text-normal

Sample text

Uses the normal variant of the font

.text-thin

Sample text

Uses the light variant of the font

.text-nowrap

Sample text

Prevents text from wrapping. Ex. phone numbers

.text-wrap

Sample text

Break and wrap single strings that are too long for their parent container. Ex. URLs

.text-caps

Sample text

Converts text to uppercase

.text-light

Sample text

Uses @textColorMuted

.text-disabled

Sample text

Uses @textColorDisabled

.text-error

Sample text

Uses @red-500 and semi-bold variant of our font

.text-noselect

Sample text

Prevent text from highlighting on select

Built-in Foundation text helpers:

.text-left

Sample text

Left aligned

.text-right

Sample text

Right aligned

.text-center

Sample text

Centered

.text-justify

Sample text

Justified