Visual styling
Initially, the prototype site was built with a custom-styled flavor of the US Web Design System styles. In December 2018, the team learned that CMS has its own Design System. The CMS Design System is based heavily on the US Web Design System, but has a robust library of React components, a slightly different suite of interaction components, and uses Open Sans universally instead of Source Sans Pro. Courier was added as a numerical font after customizing and furthering the complexity of this component.
- 🔐 Notes from conversation with product manager at CMS, and member of contractor team maintaining the system
Logo
The logo utilizes MACPro themes and color to unite branding. Several iterations were made of this and we landed on a clean, modern, and minimal aesthetic to bring forth accessibility and simplicity to the application. Included below are uses for color, light variant, and dark variant depending on background and surrounding artifacts.
Title Case Usage
We have decided to utilize title case for navigation link elements and titles within the application.
Open Sans
Courier
In February 2019, the team began replacing the prototype styles with the new CMS Design System styles and components. We did this in an agile way by starting with the CMS grid, and redesigning isolated components, then sections of the app.
- Audit of interface components and styles present in the prototyping site (pre-2019)
- GitHub issue evaluating the audit and planning improvements for UI consistency
The eAPD product is in the Medicaid and CHIP Program (MACPro) Program, and ultimately should be associated with it in some way. However, MACPro doesn't have a strong, established visual identity which we could use to inform styling decisions.
You can see the visual styling of the MACPro tool in these YouTube training videos:
- MACPro Training Pt 2: Creating State Profile
- MACPro Training Pt 3: Creating an Official Simple Submission Package
These two videos however showcase a different design system Appian
Since the MACPro system doesn't use the CMS Design System yet, the eAPD tool will be a few steps ahead, and can demonstrate what a strong use of the default styles can look like. We have an opportunity to show how much you can accomplish using the "vanilla" CMS Design System. If the team feels it's appropriate to add further customization later, it could inform both this app, and the MACPro tool. Successful visual design choices would not add to the already busy environment of CMS sub-brands and interpretations of the Design System.
So far we've found that there are areas where our app has more complexity than the stock components from the CMS Design System:
- Navigation: Navigation currently is defined as a drop down 3 level tiered system. We've made the decision not to add unnecessary layers to detract from the user experience and confuse the user where to navigate.
Future styling may consider https://github.com/CMSgov/design-system/issues/742 super nav. but this has not been discussed yet.
- Tables: The CMS Design system has basic tables built for textual information, formatted with generous white space. The eAPD requires complex, dense tabular data tables, so we've kept our custom styling for now. There's lots of opportunity for optimizing the eAPD table styles, which hasn't been approached yet.
- Modals: The eAPD site provides users with alerts and useful information however any use of modals we've retained our custom styling.
- Help text blue box design: The eAPD site differs from the vanilla design system currently. Instead of a dark blue line on the left hand side of the box per design spec a dark blue triangle is displayed. This component has been discussed on usage in content reviews, it will be primarily used for examples.
- Removal of iconography from delete hyperlink (variant usage of Delete component):
- Error Validation Styles: Incorporation of a different design style to the current CMS Design System with the error text below the form field. This will contrast to the error text being above the form field.
- Accordion interactions and Table Design Styles: Consideration will be on a use by use basis for the accordion interaction, USWDS will most likely be the accordion style utilized.
https://designsystem.digital.gov/components/accordion/
The table design is being refined and will be rolled out later in the project.
The team has built on top of the CMS Design System UI Kit Sketch file, and uses it as a library to power our styled page mockups / before they move to production. The 18F designers will have the latest version of the Sketch file.
(Update) The team has moved to Figma and will be able to supply URL for location of newest design file. Currently the URL for the Figma file is here.
https://www.figma.com/file/6eVvo7JjvXiovGTR4BoVgK/CMS-eAPD-2020