Solaris Design System

Visual typography

Typography is very important to Solaris; it plays a key part in telling our story. We use two typefaces to meet our needs, with a third only for publications. We believe that delivering focused content starts with evocative language, and we want our typography to deliver that.


Solaris uses three typefaces in its designs. These typefaces are our Productive, Expressive and Publication typefaces that are used for different reasons.

Filson Soft

Filson Soft is our emotive and brand type face. It is used for headings. Filson Soft carries the design language into the visuals. We use Filson Soft whenever we want to put a stronger focus on the words and their design, rather than information. This is our secondary font.


Lato is our productive and primary font. This face is used wherever we need to display content on the products and marketing material that has a focus on reading. Its robust weights lets us be flexible in its use across the board.


The alternative typeface we use is Merriweather. Merriweather is a serif font that has a focus on readability. We only use this typeface is official print publications where there is a large about of content on each page. This font can be found in our Bots that Code book, which has an academic voice and only uses our illustrations in limited scale. It is a replacement for Lato.


Our type scale is based on a golden ratio of (1:618) with adjustments to fit better for interfaces. This scale allows us to use large expressive headings and legible small type.


Our typography is broken down into two different versions. Emotive and productive. The emotive sizes include the headings and the primary body text. These are used for almost all our designs across the brand. Productive styles are used mainly for the products to allow for clear messaging even at a small size.


There are also three weights we use and are defined in style of type.


Colour is important to create a sense of excitement in Solaris. However, we adhere to strict usability standards and thus all content should be limited to primary (void) or secondary (light). Only active links can break this with the use of brand 1 (sol). The colours should be used where the highest contrast is achieved. For lower hierarchy content, a transparency may be applied. This is normally capped at 0.6. There is a guide in the colours’ page on what foreground and background combinations are allowed.


The typography hierarchy follows a simple three levels. These levels help give the reader a guide on what is most important and allows them to follow the content with ease.