This manual is as much a reference as it is a design tool for Louder Than Ten. Although it documents our design & development standards, brand guidelines, and writing conventions, to us, it’s more of a nice side effect to our unconventional design approach.

What makes this guide different than most is that it is not an afterthought in the process, or even something to be maintained. Every element, component, and module gets designed here before getting integrated into our website. The manual and site share the same CSS & Javascript which keeps everything in sync.

The manual is a living organism that affects the site… and in turn gets affected by the site. It evolves with every update, every adjustment, and every damn bug fix.

Table of contents

Identity Logos, logo placement, colours, typefaces, graphics, icons
Content Our voice, approved and unapproved content, formatting, author info, images, our tone, our audience
Layout Modular scale, document grid, web grid, grid usage, section backgrounds
Elements Headings, paragraphs, lists, quotes, text elements, borders, form fields, controls, buttons
Components Alerts, media, tables, code, navigation, callouts, tabs, drawers, offcanvas content
Modules Site header, teasers, bio cards, sign-up cards, content blocks, site footer
Code Setup, project structure, version control, markup, CSS, Javascript

Quick downloads

Our commonly used brand and design assets. Use these for creating Louder Than Ten materials (fonts not included).

Louder Than Ten Logos