Style Guide for the theme Joana Eighteen

This is the style guide of the theme yours trully developed for this website based on Brad Frost's Atomic Design approach.

Graphic specs

Fonts

Font used HK Grotesk™ Pro by Alfredo Marco Pradil
Fall back font Trebuchet

Color Palette

Atoms

H1 :: This is a title

H1 :: This is a title that links

H2 :: Another title

H3 :: linked title

h4 :: taglines :: illustrator // graphic & web designer

This is the .svg logo

Default image caption

Default image behaviour - Maximum width is 1440px.

a generic link


explore link

Call to Action

A generic paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at aliquet eros. Etiam egestas nulla lectus, nec laoreet dui mollis sed. Nullam non tellus laoreet, dignissim nulla id, rhoncus massa. Vivamus eleifend congue felis vel aliquet. Phasellus nec est lacinia, iaculis ipsum at, euismod nunc. Ut ut sollicitudin mauris. Aenean lacinia lacus ut arcu vestibulum, cursus volutpat tortor gravida. In non leo sem. Etiam vehicula feugiat blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Oh look, there's a link here!

• this a list item on the main article's article
• and another one
• short
• this one links somewhere

table header	title for second column
a cell	another cell
cell on second row	the last one

Molecules

Main Article on the Home Page

Related content behaviour and display

Divided in 4 collumns and infinite lines except on both homepage and single post which displays a max of 3 lines.
The thumbs' maximum width is 240px.

A form!

Organisms

The Header

Navigation sits on the footer (with an anchor to it on the header) and goes up to the top on screens >700px.

The footer