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.
The main COVID19 website uses Roboto and Montserrat typefaces. Mainly 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
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.
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.
A toolkit website that contains communications materials as well as graphical banners and imagery is also available at COVID19 Response Toolkit.