Styling Guide

Prev Next

You have the ability to add styling using hex color values, logos, and progressive web app features. We also include Advanced Styling options with custom CSS styling for your Apps and Forms.

Visual Design Guidelines

Accessibility

  • Ensure text / background contrast ratio conformant to WCAG Level AA guidelines

  • Do not intentionally obscure or hide text content (labels)

Color

  • Color should be used with great consideration and restraint with a focus on guiding user experience

  • High contrast colors (red, bright hues) should be used only to indicate important user feedback

Layout

  • Care should be taken not to manipulate the general layout structure of the app interface

  • In general, the only ‘overall’ layout manipulation made by CSS should be to hide the sidebar and center the content list

  • The layout of the forms list buttons can be manipulated using only considerable attention to quality at all screen sizes and device types

  • Preference should be given to the mobile-friendly CSS layout properties (flex) over others (fixed, absolute)

Motion / Interaction / Audio & Video

  • Ensure that all text links are clearly distinguished as such both in static contrast to surrounding elements and on hover/active states (Do not rely solely on color to distinguish text links)

  • Limit motion to transition effects for interaction to draw attention

  • Do not use animations (GIFs) gratuitously, use only for content purposes

  • Provide a text description and transcript for any video or audio content

Typography

  • Use Google fonts and @import in Advanced Styles CSS to customize

  • Limit to use of 1 to 2 fonts max per form/app

  • Any text styling applied should prioritize two key principles: readability and legibility

    • Readability is the arrangement of fonts and words in order to make written content flow in a simple, easy-to-read manner. It is imperative that documents are readable.

    • Legibility refers to how easily distinguishable the letters in typesetting or font are from one another, it is imperative that text is legible.

Resources