Base Templates

Base templates are a selection of templates designed and created to give you a strong starting point when building client sites or when building your own templates to work from.

The templates contain a range of pre-set items such as spacing, font-sizes and all Global Styling elements. All of these are made and designed to work in relation to one another.


Our base templates contain just one global font, which is set on the Body text - this is inherited across the entire site so that you just need to change the font in one place to affect the entire site.

The text styles that have been set are already optimised for viewing in each of the three viewports so we would normally recommend leaving this structure intact. If you change font-sizes globally, then make sure the same relationship still exists between headers and body text or between each element, in each viewport.


The Global Color palette is set to be inherited by all the elements, and uses three tones in the primary spot color area. We use a lighter, regular and dark version of the same colour which is then used throughout the templates for things such as hover effects on links or buttons.

The secondary colors are not used in the base templates, but provide you with the same functionality if you intend on adding another color to the palette.

The base colours are used for text, background colors, lines, form fields and elsewhere on the site - these are set as a range of gray tones, but again, you habe the flexibility to change these as you wish. Just remember they are inherited on many elements, so changing them will affect lots across the site.

Design elements

All of the elements in the base templates have been pre-defined, from links to buttons, from form fields, to checkout pages. As mentioned before, all of these styles are inherited across the site.

Pre-defined Headers

The other thing we have done with our base templates is set a range of pre-defined header designs, which you can use.

The header section (set in Global Styling) is likely to be the most complex part of your site or template to get working. Generally this is down to the amount of elements contained there, and the way in which they stack on the other viewports. Because we know that this can be a little trickier than the rest of the pages, we have pre-built some commonly used header layouts for you to start with.

Base templates are used both as a starting point for the production of your own templates but also can be used directly to start the production of a site. In either case, using templates should save time and make your site creation more efficient.