Playful: users feel welcomed into the space and like they have a part to play there.
Clear: users can explore and find info easily.
Emotional: interactions, art, navigation, content should always point back to a relationship between them and the content.
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.
Hue: A value between 0-360 which indicates where on the color wheel we are starting.
Saturation: A value between 0-100 which specifies how close the color is to grey.
Luminosity: For our purposes, the same as brightness. We use luminosity because CSS HSL colors use this term.
Rotation: A list of colors which vary in hue and luminosity.
Stop: A single color within a rotation. The name "stop" comes from the fact that we are "stopping" at certain luminosities to grab colors for our palette.
Dynamic range: How many stops each rotation will have.
Hue shift: In natural sunlight, colors head toward yellow as they get brighter and purple as they get darker. Hue shift pushes the values in these directions to create a more pleasing rotation.
Saturation shift: Because it looks weird to have a light green background, it can be useful to desaturate colors as they become brighter. Saturation shift pushes brighter colors slightly toward white.
Arial is the font for both headers and body text. There are two reasons for this.
Arial is easier for people with dyslexia to read (source).
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.
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.
Currently, letter spacing is set at default for Arial. If anyone knows better, let me know.
Line height is 1.5 * the font size
Margin top for headers is 1 * the font size
Margin bottom for headers is 0.5 * the font size
Margins top and bottom for body is 1 * the font size
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 LinkMost 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.
Text is rendered inside a center aligned container with a max width of 600px.
Suitable for markdown documents, documentation, etc.
Text is rendered inside a center aligned container with a max width of 600px.
Suitable for markdown documents, documentation, etc.