Design
Scalebloom’s Design Rules
All designs produced by Scalebloom staff or vendors working for Scalebloom should meet the following rules
Text
- Do not center-align text. Most text areas should be left-aligned. Some small text areas can be right-aligned.
- Lines of paragraph text should be no wider than 75 characters.
- Text color should have sufficient contrast against the background color. It should pass WCAG AA when testing on webaim.org/resources/contrastchecker/
- Paragraph text should use a line-height between 140% (1.4) to 180% (1.8).
Images
- Image colors should be appropriate for the project’s color palette.
- When multiple images are side-by-side or overlap, the overlapping areas should be sufficiently different in color to clearly differentiate the images.
- Any entities in the photo, especially people, should face the center of the design or an important element.
Buttons
- Side padding should be about twice the vertical padding.
- Padding values should be in multiples of 4.
- Text and background colors should have sufficient contrast.
- Call to Action buttons should use a color that is not used in nearby design elements.
Other
- Use consistent border-radius (corners) on most shapes.
- Size values should be in multiples of 8, or if necessary, multiples of 4.
- In general, avoid using shadows as much as possible.