Principles and style guide
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.
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.
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.
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.
TheCOVID-19 website uses Roboto and Montserrat typefaces. Headings 1 through 4 are used throughout webpages.
- 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: Roboto regular 300, color #00000, font-size 1.2rem, line height 1.5, paragraph spacing 1.2rem
- Primary color: #1f2574
- Secondary color: #003d9d
- Accent color: #f2f5fc
- Accent color: #ff8000
- Accent color: #92C5DE
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.