Theme

• Colour Settings
  
  
• Background Colour
  Used as the default background colour for atoms, and a calculated 20% darker colour is used as default for buttons and borders.
  
  
• Foreground Colour
  Used as the default colour for the fonts and the headings.
  
  
• Heading Colour
  Overrides the default heading colour for H1 through to H6 with the selected colour.
  
  
• Button Colour
  Overrides the default button colour.
  The button’s border is set to 10% darker than the implemented colour
  
  
• Border Colour
  Overrides the border colour of any html input field (text, text area, password, etc) by the selected colour.
  
  
• Shade Fields
  If selected it shades the background of any html input field (text, text area, password, etc) by the background colour through to a calculated 20% darker colour.

Text

• Font Settings
  
  
• Font Size
  The default font size for the website.
  Also used to calculate the sizes for each of the headings based off the Header 1 font size (see below for proportions.).  The Header 1 font size is 2.25 times the standard font size by default.
  
  
• Font
  The default font family for the website.
  
  
• Line Height
  Overrides the default line height.
  Line height is the vertical space each line of text takes up.  Therefore a 14px font will have at least 16px line height to ensure a small amount of vertical space between the lines.  If the line height is increased it tends to make the text more legible.
  
  
• Header 1 Font Size
  Overrides the default Header 1 font size set from the standard font size.  All other header font sizes are proportional to this size:

• H2 = 89% of H1
• H3 = 78% of H1
• H4 = 67% of H1
• H5 = 56% of H1
• H6 = 50% of H1

Appearance

• Sizing
  
  
• Base Padding
  The amount of padding, in pixels, that each standardised element that has been defined to have padding, is set to by default
  
  
• Curves Enabled
  For standardised elements that can be set to have rounded corners (buttons, containers, etc) this turns that option on or off.  The amount of curve is defined as a multiple (x2) of the padding selected as “Base Padding”.

Atom

• Options
  
  
• Atom Background A
  This style’s background colour defaults to a 40% calculated darker version of the background colour
  
  
• Atom Background B
  This style’s background colour defaults to a 60% calculated darker version of the background colour