To maximize the impact of color, we utilize hue shifting and gradients

Because we use hue shifting, we don't restrict ourselves to a primary color. Instead, we have a primary rotation and use whatever color stop creates the contrast and effect we're looking for. This allows for brand icons and other designs flow between different backgrounds seemlessly.

Customize the palette

Color terms


Font choice

Arial is the font for both headers and body text. There are two reasons for this.

  1. Arial is easier for people with dyslexia to read (source).

  2. The font is web safe, which will slightly increase website performance.

Any other font is acceptable as long as it's applied consistently to all headers and/or all body text throughout the site and it meets at least the first criteria above.

Font size

The base font size is 16px for all text. We scale in increments of the base grid size (8px) to get header sizes. h4 is the lowest header size available, starting at 24px.

Font spacing

Inline links

As per standards from the dyslexia-friendly-style-guide, links and other text are not underlined. Instead, like buttons, they are bold and a different color.

Inline Link

Most of these choices are inspired by the British Dyslexia Association.


We prefer semantic HTML over class-based css. This makes it easy to render markdown pages and other situations where one may not want to have control over individual elements on the page. In cases where specific styling is needed, we use BEM naming conventions because they're awesome.





Document layout

Card-containter layout