Pattern Library

Pattern Library


The City of San Diego's Pattern Library is a collection of design elements that can be applied to website projects. Its usage ensures a cohesive and consistent branding throughout the City's websites and web applications.

This site has three sections:

  • Patterns - design elements with descriptions and applicable code
  • Templates - sample web pages that consist of design elements
  • Guidelines - best practices related to this library


This pattern library should be referenced by anyone developing or updating a City of San Diego website or web application, including:

  • City Web Team
  • Department content editors
  • CGI
  • External web developers contracted with the City of San Diego


The following files must be applied to your project to use this pattern library.

For the developer's convenience, code examples are provided for most patterns and components. Simply copy the code and apply to your project. Variations are available for some elements and can be applied through helper or modifier classes.

Updated 10/23/23