Principles and style guide

Principles

Our design principles help teams and stakeholders to align on design vision and decision-making. They give us a shared understanding to help us prioritize our next steps.

The principles that we use for covid19.ca.gov are the same used for the alpha.ca.gov project. They leverage the proven work and best practices of teams like 18F and UK Government Digital Services.

Alpha.CA.gov design principles

Start with user needs
Do less
Design with data, research, intuition, and experimentation (We added “research, intuition and experimentation” for a few reasons. Data does not always tell the whole story. We also need user research, experimentation and, yes, our own intuition as users and Californians to inform design.)
Do the hard work to make it simple and elegant
Iterate — then iterate again
Make it accessible and inclusive (UK.GOV went with “This is for everyone.” We adapted it to make it more explicit and reflect California.)
Understand context
Build digital services, not websites
Be consistent but not uniform
Make things open: It makes things better
Prioritize security, respect privacy (Something new we added to the list. A recognition of how incredibly important both security and privacy are.)
Optimize performance (Another new one. Slow load times cost people money. That’s an accessibility and equity issue.)
These principles will inform our product design. And we’ll continue to iterate and refine them as we learn by doing.

Accessibile and inclusive design

covid19.ca.gov aligns with Web Content Accessibility Guideline (WCAG) 2.1 Level AA Standards in addition to the requirements of Section 508 (29 U.S.C. 794d). Read more about them at webstandards.ca.gov/accessibility. Design plays a role in this through use of color contrast, layout and heirarchy, sizes of touch targets, data visualization, and more. accessibility.digital.gov is a resource to learn more about accessible and inclusive design.

Responsive design

Approximately 60% of traffic to the English version of covid19.ca.gov and 90% of the Spanish version was on mobile devices. All design decisions consider mobile and desktop platforms simultaneously and emphasize optimizing performance for low-end mobile devices.

For example, we took data dashboards published on Tableau and redesigned them for D3 to ensure they load faster on a wider range of devices. As the design principle above states: Slow load times cost people money. That’s an accessibility and equity issue.

Style guide

The foundational layer of the design components are based on Bootstrap v4 and the latest version of the CA state web template. While the design of covid19.ca.gov was initially modelled after the Alpha website, it has since taken on it’s own unique look and feel.

Below is a summary of key styles. For more detail, please refer to the components and styles portion of this documentation.

Typography

TheCOVID-19 website uses Roboto and Montserrat typefaces. Headings 1 through 4 are used throughout webpages.

Headings

Heading 1: Montserrat bold 700, font-size 2.3rem
Heading 2: Montserrat bold 700, font-size 2rem
Heading 3: Roboto bold 700, font-size 1.5rem
Heading 4: Roboto bold 700, font-size 1.4rem

Paragraph text

paragraph: Roboto regular 300, color #00000, font-size 1.2rem, line height 1.5, paragraph spacing 1.2rem

Colors

Primary color: #1f2574
Secondary color: #003d9d
Accent color: #f2f5fc
Accent color: #ff8000
Accent color: #92C5DE

Icons

The state web template includes an icon font and has several COVID-19-related icons available. Additionally an open source COVID icon font is available and complements the state icon font.

Branding

Logos: California for All
Images: Hero banner/backgrounds

Web toolkit

A toolkit website that contains communications materials as well as graphical banners and imagery is available at COVID-19 Response Toolkit.

UI patterns and components

For a comprehensive list of re-usable design patterns, visit Component and styles.