About
You are looking at a simple heroku app that exists to visually demonstrate the beginnings of our product design system. The design system is defined in code and through the assets in the static.thecatalyst.org.uk repo.
The styles outlined here are currently being used by the following Catalyst products:
There are also a number of other in-development products due to be released soon that make use of this rudimentary system.
Typography
The typography here is set in Lexend Deca for display type and Inter for body copy with a view to starting out with a font pairing that is easy to read and legible at a lot of different sizes without breaking up. These are free fonts from Google. We are working with free fonts to keep costs low and to enable reuse without licensing concerns.
Extra Large Heading
Large Heading
Medium Heading
Small Heading
Large Body Copy
Medium Body Copy
Small Body Copy
The type scale is based on that set on GOV.UK which is a very helpful, well tested place for us to start. It is also responsive, with the type scaling up or down to best suit the screen size.
Both fonts also give us a great deal of versatility in terms of the character sets they contain, including a nice set of glyphs and open type features including core things, like tabular numbers for presenting data to ensure numbers are monospaced for easy comparison:
£322,487
£700,009
£929,214
↗ → ↘ ↓ & £ ¼ ¾
£250,000
Layout
Simple building blocks that give us full width, halves, thirds and quarters should give us enough flexibility for most template layouts we set out to make. Constraining ourselves as much as possible to these options is a good place to start.
We can also have full bleed blocks that break out of the grid and occupy the full width of the page when needed. This is likely to be useful for headers and footers for example.
Colour
Colour needs to be determined in part functionally and in part through branding, with an emphasis on the former in digital products and services. Functional colours will come as this style guide progresses and we learn more through the products we make. One of the most important considerations is colour contrast for accessibility.
For the time being, the palette above is just an attempt to take the brand colours and modify them for web.
Example
Using this system, with relative ease we can put together responsive pages and layout to create simple, consistent products to serve different users' needs. Below is a list of the products that are currently making use of this simple kit of parts, with more to be shared soon.