I’m not sure what, but if feels like something should go here. I might be wrong.

Typography

The font used for most body copy Cardo. The font used for headers and other highlight uses is Open Sans.

This is a basic paragraph style. Color: #777

This is a basic link style. Color: $primary, :hover and :focus color: $primary - 68

  1. This
  2. is an
  3. ordered
  4. list

"This is a fancy blockquote. Not sure if we'll have any particular use for it, but hey, here it is."

– James

This is an H1. It is reserved for the logo type.

This is an H2. It is reserved for the value proposition on the homepage.

This is an H3. It is the main content header.

This is an H4. I'm not sure specifically what we'll use it for.

This is an H5. I'm not sure specifically what we'll use it for.

Forms

Legend Radio Button
Checkbox

Color Usage

The current highlight colors are marked below, with shades and tints of each so we can maintain a consistent brand even if a specific use case necessitates a darker or lighter color.

In most simple cases, however, a direct modification of the highlight color should be used for simplicity and consistency. Example: Links are $primary, and the :hover and :focus states are $primary - 68.

$primary + 136
$primary + 68
$primary + 34
$primary + 17
$primary
$primary - 17
$primary - 34
$primary - 68
$primary - 136
$highlight + 136
$highlight + 68
$highlight + 34
$highlight + 17
$highlight
$highlight - 17
$highlight - 34
$highlight - 68
$highlight - 136

FontDarwin

I'm just using FontAwesome for the time being. When we actually take the time to design a new logo and build out branding so we know what a "FontDarwin" will need, we'll create it with Font Custom.

Sass Variables & Mixins

Media Breaks, Responsive Columns, and Offsets

The break points are:

  • 767px -
  • 768-959px
  • 960-1279px
  • 1280px +

The responsive grid is based on a responsive grid system with sixteen columns. The default resolution is between 960px and 1279px, to accommodate the IE8 lowest common demoninator.

1 Col
15 Columns
2 Columns
14 Columns
3 Columns
13 Columns
4 Columns
12 Columns
5 Columns
11 Columns
6 Columns
10 Columns
7 Columns
9 Columns
8 Columns
8 Columns
2/3 Column
15 Columns Offset by 1
14 Columns Offset by 2
13 Columns Offset by 3
12 Columns Offset by 4
11 Columns Offset by 5
10 Columns Offset by 6
9 Columns Offset by 7
8 Columns Offset by 8
7 Columns Offset by 9
6 Columns Offset by 10
5 Columns Offset by 11
4 Columns Offset by 12
3 Columns Offset by 13
2 Columns Offset by 14
Offset 15