Updated

Design style guide

The foundational layer of the design components are based on Bootstrap v4 as well as the latest version of the CA state web template. Additionally several dynamic content components are built as portable npm modules.

Typography

The main COVID19 website uses Roboto and Montserrat typefaces. Mainly 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 related icons available. Additionally an open source COVID icon font is also available and complements the state icon font.

Branding

Branding elements are used lightly on the homepage. Homepage begins with a hero banner that has important information. Imagery in the hero banner is optional and should be blended with the primary color.

Page Layout

Different content regions should be inside full width sections with varying background shades of the color palette. Most important and relevant content should be positioned top to bottom.

Social media shareability

All pages on every website should have a clear headline and thumbnail image that previews on social channels when shared as a link. Thumbnail images should not be cropped and the entire image should fit into the social preview thumbnail.

Web Toolkit

A toolkit website that contains communications materials as well as graphical banners and imagery is also available at COVID19 Response Toolkit.

🚧 The California Design Handbook 🚧