Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Styling Guide

  • Updated:

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 Cascading Style Sheet (CSS) styling for your Apps and Forms.

 

Visual Design Guidelines

Accessibility

  • Ensure text/background contrast ratio conformant to Web Content Accessibility Guidelines (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 Cascading Style Sheets (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

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.