Styleguide

General guidelines

Philosophy

One page = one task

Wherever possible pages should be simple, satisfying a clearly defined single customer task.

Layout

Preferred page layout is to centre all elements on the page (titles, tables, etc.). Text within paragraphs should be left-aligned.

Canvas Republic is built around the Skeleton CSS framework.

Typography & house style

All fonts are sized in rem, on a base of html { font-size: 62.5% }.

Default text size is 1.8rem (equivalent to 18px) for general text. Fonts below 1.6rem should only used sparingly.

Two font families are available:

  • A serif font, Roboto, for headings, main navigation and prices. Weighting is either regular or bold.
  • A sans-serif font, Roboto Sans, for everything else. Weighting is either light or regular

Titles should be initial cap only (i.e. "Heading text" not "Heading Text").

Blue
#1F77E6
Red
#F13B2D
Yellow
#FDBD4A
Green
#00C321
Pink
#F89D9D
Grey 1
#111114
Grey 2
#3D3D3F
Grey 3
#8F8F8F
Grey 4
#AAAAAC
Grey, 5
#DDDDDF
Grey 6
#EEEEEA

Main / page heading

An h1 tag. When used within a .page-title content block, text is centred and with top/bottom padding added.

Main page heading

Secondary heading

An h2 tag.

Secondary heading

Tertiary heading

An h3 tag, it should be used rarely. As per the site design philosophy, a page that requires an h3 should be an indicator that it is becoming too complicated (um, like this page).

Tertiary heading

Side heading

Used in two-column layouts (heading left, content right), for example the customer account pages. An h2 tag within a .side-title block.

Side heading

Lists

To remove list styling completely from a list element, use the .plain class.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3