Design

Scalebloom’s Design Rules

All designs produced by Scalebloom staff or vendors working for Scalebloom should meet the following rules

Text

  1. Do not center-align text. Most text areas should be left-aligned. Some small text areas can be right-aligned.
  2. Lines of paragraph text should be no wider than 75 characters.
  3. Text color should have sufficient contrast against the background color. It should pass WCAG AA when testing on webaim.org/resources/contrastchecker/
  4. Paragraph text should use a line-height between 140% (1.4) to 180% (1.8).

Images

  1. Image colors should be appropriate for the project’s color palette.
  2. When multiple images are side-by-side or overlap, the overlapping areas should be sufficiently different in color to clearly differentiate the images.
  3. Any entities in the photo, especially people, should face the center of the design or an important element.

Buttons

  1. Side padding should be about twice the vertical padding.
  2. Padding values should be in multiples of 4.
  3. Text and background colors should have sufficient contrast.
  4. Call to Action buttons should use a color that is not used in nearby design elements.

Other

  1. Use consistent border-radius (corners) on most shapes.
  2. Size values should be in multiples of 8, or if necessary, multiples of 4.
  3. In general, avoid using shadows as much as possible.