-
Notifications
You must be signed in to change notification settings - Fork 22
Design Principles and style guide
The basis for our design is based on the proven work and best practices of teams like 18F Design Principles and the GOV.UK Government Design Principles.
Examples of our implementation and iteration of the above design principles can be seen on the alpha.ca.gov and the COVID19.ca.gov website.
NOTE: Our design is in the process of being iterated on through various efforts and a cohesive design system doesn't yet exist. It is recommended that the COVID19 and Alpha websites are used as a design reference and implementation guide while the current state web template is the codebase. It is easy to get started with the state web template by leveraging the content delivery network (CDN) it is hosted on.
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
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 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.
- Logos: California for all
- Images: Hero banner/Backgrounds
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.
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.