California Design System

Digital design principles

These are our guiding principles for creating positive and engaging user experiences.

1. Start with people’s needs

  • Prioritize accessibly – make your services accessible for all Californians. Think about people who have been traditionally excluded, like people who use screen readers or reside in low bandwidth regions.
  • Inclusivity – design your website so that it is welcoming and usable to all your users.
  • Research - use research and analytics to understand how people use your site and services. This keeps us focused on their needs, not preconceived solutions.

2. Design with purpose and data

  • Purpose – start with problems not solutions.
  • Goals - design towards needs, goals, and success criteria.
  • Build from feedback and case studies – conduct surveys, interviews, and usability studies to gain valuable insights on how people interact with your site and services. Use the data collected to design for their needs.
  • Data - use data to find and evaluate real problems. Ask people what problems they are having. Utilize page feedback to collect pain points. Understand real problems before coming up with solutions.

3. Do the hard work to make it simple

  • Standardize code – we’re using the TAC methodology to standardize our code development. Use a methodology that fits your organizational needs.
  • Performance optimization - not every Californian has a high-end device. When you build services and products, think about people on a range of devices and internet speeds. To improve optimization, we’re:
    • Removing Bootstrap dependencies.
    • Utilizing HTML/CSS data attributes.
    • Utilizing Lighthouse web optimization scores.
  • Scalable processes – processes that scale across time and technologies help maintain your system. We’ve implemented the following processes to help maintain our system.
    • Design review.
    • Content development.
    • Code and accessibility review.

4. Be consistent and concise

  • Consistent experiences make engagement easier across different services and products.
  • Succinct content makes sure important information stands out and is understood.

5. Make it adoptable

  • Open-source code – our Design System code is open-source and hosted on Github. This means anyone can understand how it's built, suggest improvements, or adapt it for their own purposes.
  • Third-party dependencies – we’ve removed third-party dependencies to ensure wider adoption.
  • Simple base code – we adopted the TAC (tag, attributes, classes) methodology and started with simple HTML, CSS, and minimal JavaScript, to give the Design System a simple foundation to make it easier to scale across more frameworks.