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.
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:
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.
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.