Styleguide

black grey-10 grey-30 grey-70 grey-90 white
blue blue-10 blue-30 blue-70 blue-90 white
pink pink-10 pink-30 pink-70 pink-90 white
blue-30 purple-3025 purple-3050 purple-3075 pink-30
blue-10 purple-1025 purple-1050 purple-1075 pink-10

Only the above colors should be used for consistency. They are available as color variables ($blue-30), mixins which set background and contrasting font color (@include _(blue-30)) or classes which also set background and font color (.blue-30).

Bold colors are in use as of last autit and should be prefered over introducing more colors.

Typograpgy: Sub-headings are comfortably smaller for post titles, perhaps wrapping onto another line

Vertical Typographic Rhythm should be used throughout the site, especially for text. The line-height is 22px

Large stretches of text are easily readable because they have a comfortable leading and line lengths are suitably short. Text can be bold. Suspendisse sagittis elementum libero sed porta. Sed iaculis mauris ex, eget volutpat mauris rhoncus id. Or text can be italic. Cras vel ultrices elit, vitae ornare ligula. In vitae elit maximus eros auctor pretium vel sit amet metus. Maecenas ultrices ligula eget justo vehicula, ac commodo libero semper. Aenean et consectetur lacus. Fusce viverra auctor eros non pellentesque. Aliquam tempor massa felis, vel imperdiet lectus finibus ut. Duis facilisis, dui non tempus hendrerit, lacus dolor venenatis diam, a ornare nibh leo non felis. Phasellus ullamcorper erat ac dolor pretium pulvinar. Sed pretium fringilla justo eget interdum. Aliquam rutrum semper dictum.

In most articles this is the deepest level of heading that should be used, it uses 1.5 line-heights (plus One Simple Trick)

H3 and H4 are set at 1.5 line-heights, otherwise there's too much (or too little) whitespace around the text. For 2 lines of text this is fine as it adds up to 3 line-heights, which fits the vertical rhythm grid. But for 1 line of text we set the min-height to 2 line-heights and apply a 0.5 line-height offset to make it fit the grid and keep text centred.

The H4 is only marginally bigger than body text, keeping to 1 line-height

Perhaps in a very long article some H4s might be useful, but it should be a rare ocurrence. Nam elementum non elit vel euismod. Fusce elit nibh, suscipit vehicula pellentesque non, facilisis facilisis augue. Suspendisse at erat neque.

H5 is the smallest heading at exactly the same size as body text, but bold

Proin malesuada pretium velit vitae suscipit. Nulla luctus neque felis, quis interdum erat euismod ut. In tincidunt nisi a neque congue iaculis. Aenean ut leo molestie, tincidunt dui eu, lobortis eros.

Buttons 

.button

Basic button in neutral color and regular size. Too small to use for call to action.

.button.button--big, .button.button--big.pink-30, .button.button--big.blue-30

Big button often used as primary button or call to action (especially with color modifiers).

.button-external-wrapper
  .button.button--big.button--external

Button linking to another page, aligned right with chevrons added to indicate it will take you elsewhere.

.button.button--big.button--right

Button aligned right in heading (see "Buttons" heading above).

Forms

.field
  .field__label
  .field__input

.form__submit.button.button--big.purple-3050

Input & textarea fields, and full width form submit button.