Bit DS

Bit DS is a design system named for its 1-bit color palette. It prioritizes user engagement by implementing absolute accessibility standards and best practices for design.

Implementation is done through a raw css file, which makes it useable within any web project.


Inspired by 1-bit pixel art, we restrict ourselves to two colors. No shadows, no gradients, just shape and space.

Any two colors may be used as long as the contrast ratio meets WCAG AAA standards for normal text.

Try out some colors:

The "dark" color which styles the text and all foreground elements.

The "light" color which styles background elements and borders.


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, have 1-unit margins, and are slightly larger at 20px.

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



Cards model physical playing cards.

Card Title

Sample image

I'm the sample description. Don't underestimate me.

Input elements

Our philosophy is to adopt the built in tools for forms in HTML5. Because of this, form elements are largely unstyled. The exception is that we utilize the same square border as buttons to indicate that these are clickable.