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.

Colors

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:

Typography

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

• Currently, letter spacing is set at default for Arial. This may be revised in future versions

• 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

• No paragraph should be wider than 600px.

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.

Buttons

• Bold text

• 20 units wide

• 4 units tall

• Are square

• Have an inset border of 1/2 unit

• Are filled with inverted font color if primary

Cards

Cards model physical playing cards.

• Have an aspect ratio of 5 / 7 to match a playing card
• Have a border of 1/2 unit
• Have a space for a title, an image, and a description
• Have a border radius of 2 units

Card Title

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.