Atomic Storywriter

Using the atomic design methodology this style guide breaks down the Storywriter app and website UI into "building blocks".

The Atoms

The basic building blocks of the Storywriter UI. They usually consist of (but are not limited to) form elements, typography and iconography.

Typography

  • Font family: Lato details on Google fonts ➚
  • Font weights: 300, 400 (links, dropdown headers, lightbox titles, button text, form titles)
  • Fallback font: Arial, sans-serif

Color palette

  • #F1F1F1
  • rgb(241,241,241)
  • #E5E5E5
  • rgb(229,229,229)
  • #C5C5C5
  • rgb(197,197,197)
  • #9F9F9F
  • rgb(159,159,159)
  • #575757
  • rgb(87,87,87)
  • #333333
  • rgb(51,51,51)
  • #000000
  • rgb(0,0,0)
  • #D63E3E
  • rgb(214,62,62)
  • #fff683
  • rgb(255,246,131)
  • #00BE88
  • rgb(0,190,136)
  • #00dd99 (hover)
  • rgb(0,221,153)
  • #05a0dd (hover)
  • rgb(4,160,221)
  • #08c5ff (hover)
  • rgb(8,197,255)

Iconography

Molecules

Molecules are groups of atoms bonded together. They create lightboxes, forms

Dropdown

Dialogue box/lightbox

Title font is eighteen pixel four hundred weight

Copy is 16px 300 weight with a 25px line-height. 16px 400 weight for the button text (don't forget the button shadow). See CSS (element inspector) for other layout values.

  • Input title:
  • Textarea title
Button text Disabled Cancel

Error: This is An Error Message Title

Copy is 16px 300 weight with a 25px line-height. 16px 400 weight for the button text (don't forget the button shadow). See CSS (element inspector) for other layout values.

Link in a dialogue box looks like this Got it Contact us

Organisms