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.

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.


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 text

  • 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


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.


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.

Created and maintained by Office of Digital Innovation