Visual design style guide

The visual design of the Design System is inspired by the Design System principles. Our recommended approaches will make your website visually appealing while still being easy to use and accessible. It includes guidelines that ensure your website is consistent with other websites using the Design System.

Our approach to visual design

1. Accessible
   Visual design plays a critical role in ensuring a website is accessible. Always have sufficient contrast between text and backgrounds. Do not rely on color alone for visual communication.
2. Economical
   Create focused and light-weight designs that avoid unnecessary decoration. This ensures services are delivered equitably across all devices and bandwidths.
3. Readable
   Use highly legible fonts and organize information intuitively. This makes information clear and easy to read.
4. Consistent
   Use visual elements to create familiarity and continuity across different state websites.
5. Versatile
   While consistency is critical, we recognize that each website has its own needs. The Victims Compensation Board should have a different style of communication than the Arts Council.
6. Official
   People use visual cues to determine if a website is trustworthy. Create designs that reinforce that a website is an official product of the government.
7. Conversational
   Approachable and friendly designs help people feel welcomed. Use visual design (color, composition, graphics) to lower barriers between people and the state.

Color

While the Design System sets some standard colors, you have freedom in creating a color palette for your site.

We’ve created recommendations on how to make an accessible color palette. We start by aligning with Web Content Accessibility Guideline (WCAG) 2.1 Level AA. It requires a color contrast ratio of at least:

• 4.5:1 for normal text
• 3:1 for large text
• 3:1 for graphics and user interface components

Building an accessible color palette

We used the CIELAB color system to create our color palette. It’s based on the human perception of color and lightness. CIELAB makes it easy to craft color palettes in line with accessibility guidelines for color contrast. These variations offer design flexibility while ensuring a consistent, visually pleasing, and accessible look.

The Design System has preset system-level colors and customizable site-level colors.

• System-level colors are named for how they’re used. For example, instead of red, we have danger. This helps everyone apply the same colors for things like alerts. People know when they see that color what kind of information they’re getting.
• Product-level colors allow teams to apply brand colors in a meaningful way.

The CIELAB color system outputs 10 colors on a scale of 50-900 (50 being lightest and 900 being darkest). Simple websites may not need all these colors. But complex websites with data visualizations or illustrations may need a robust range. To start, we use a five-scale range of 100, 300, 500, 700, and 900 per base color.

Site-level palette

Here’s an example of the color palette we use on the Design System website. It uses three base colors: one primary and two accent colors. Each color have range of 5 spectrum colors from lightest to darkest that should give web designers and developers enough flexibility.

Primary

Accent 1

Accent 2

System-level palette

System-level palette consist of four main system status colors spectrums, such as success, danger, warning, and info. System-level palette is consistent in all Design System color schemes.

Success

Danger

Warning

Info

Grayscale

In our grayscale pallete we have included 10 spectrum colors for more design flexibility.

Customizing colors

If you use custom colors to match your branding, CIELAB may not exactly match your brand’s hex codes. Their colors are their best match for those colors and emotional tone. We encourage you to use CIELAB to ensure your site’s colors meet accessibility standards.

Build your accessible color palette

There are a few tools that can help you build color palettes based on colors you provide.

• The Design System team uses Accessible Palette by Wildbit Labs to build our color palettes.
• Tailwind Ink
• CIELAB offers their own color palette maker.

Typography

Public Sans

The Design Systems uses Public Sans, a strong, neutral typeface for interfaces, text, and headings, which was designed by the United States Web Design System.

The base font size is 18px. Variable font sizes are used to improve readability on larger screens.

The line height is a ratio of 1.75 to the base font size. For each ascending level, the ratio is decreased by ⅛. As a result, larger headings have smaller line-height ratios which improves readability.

Buttons

We use the Design System's buttons styles for actions in forms, surveys, dialogs, and other call to action sections.

Primary buttons

Primary buttons use the theme's primary color in their background or as a border outline. Use class btn-primary for primary color background variation and btn-primary-outline for primary color outline variation. You can also add a complimentary icon to it by using span with cagov icon font library class. Make sure you add aria-hidden="true" attribute to the icon span.
Primary Primary outline

Accent 1, Accent 2, and Light buttons

Accent 1, Accent 2, and Light color buttons can be used only inside of the primary-900 or black backgrounds. These buttons use the theme's accent 1, accent 2 or light color in their background or as a border outline. You can also add a complimentary icon to it by using span with cagov icon font library class. Make sure you add aria-hidden="true" attribute to the icon span. To display these buttons use following css classes:
btn-accent1, btn-accent1-outline
btn-accent2, btn-accent2-outline
btn-light, btn-light-outline

Disabled buttons

Disabled buttons use the class btn-disabled. Include include the aria-disabled="true" attribute with disabled buttons to indicate the state of the element to assistive technologies. To be safe, add a tabindex="-1" attribute to your disabled button.
Disabled Disabled link

Accent 1, Accent 2, and Light buttons also have disabled versions. Thay all have the same disabled styles. Use the following css classes to display disabled button state:
btn-accent1-disabled, btn-accent1-disabled-outline
btn-accent2-disabled, btn-accent2-disabled-outline
btn-light-disabled, btn-light-disabled-outline

Action buttons

We use action buttons in our call to action sections to guide users towards some goal. Action button consist of two span elements: action button title and action button text. You can create an action button by adding class btn-action-primary to a link or button element. Make sure you add a span with class btn-action-title with your link title text into it. For the link's short description text, add span with class btn-action-text.
Primary Action Link TitleSome description text
Primary Action Link
Dark Action Link TitleSome description text
Dark Action link

Imagery

We use photos and illustrations for visualizing information. We follow these guidelines:

• Do not use images as unnecessary decoration.
• Use an aspect ratio of 3:2 for all images. The exception is if the proportions of the subject of the image have significance. For example, an image of a driver’s license or an image of an application form.
• Use alt text whenever adding images. Alt text makes websites more accessible and helps with search engine optimization. Read more about writing alt text in Harvard University's digital accessibility guidelines.

We currently use icons from the State Web Template. We are working on making them available through the Design System.

Accessibility

We develop visual design that’s accessible and inclusive of all Californians. We aim to meet the W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards to comply with the requirements of Section 508. In practice, this means:

• Ensure sufficient color contrast between text and its background.
• Do not use color as the only visual means of conveying information.
• Provide visual focus indication for keyboard navigation.
• Do not make people hover their cursor to find things.
• Establish clear visual hierarchy by designing recognizable headings and creating descriptive labels for forms and navigation.
• Use a highly legible font like Public Sans in appropriate font size, line height, and line length that allow for comfortable reading and comprehension.
• Use icons purposefully as visual cues to connect to information or ideas.
• Give visual feedback that’s easy to identify and understand.
• Create responsive design.