FRBSF.org Pattern Library

What Is It?

Consistency in design and user experience is essential for supporting the Federal Reserve Bank of San Francisco brand. This pattern library is a UI/UX style guide that provides pattern documentation for designers, developers, and web producers creating assets for the SF Fed’s website at FRBSF.org.

You’ll see foundational styles and reusable elements, and learn how to put them together to form components and more complex patterns. Furthermore, the pattern library defines interactions and component behaviors, and provides guidelines on how to implement them on the site. Use it as your guidepost for ensuring consistency and creating better user experiences.

To get a high-level overview, see the annotated template documentation section.

• CSS
• Components
• JavaScript
• Templates
• Appendix

FRBSF.org Design Principles

Our design framework allows us to create a website that:

• Renders across a range of browsers

  The FRBSF.org website displays consistently and legibly on a wide range of devices using a mobile-first approach, a responsive design based on a flexible grid system, and industry-standard technologies.

• Has a consistent UI, visual style, navigation, and interaction

  To provide a unified experience, we ensure that persistent elements and components exist throughout the site to help users navigate it. Through our consistent implementation of color, design, branding, and navigational elements, users should be able to orient themselves wherever they may be within the site.

• Contains searchable and findable content

  In addition to a hierarchical navigational structure, we provide a persistent search function, the principal method users find data on the web. Whether they drill down, traverse, perform a site search, or arrive at the site from a search engine, users should be able to find what they need quickly, and we provide the means to do so with a logical content hierarchy, a robust search function, and search-engine-optimization techniques.

• Is accessible

  We implement a user-centric design for a wide variety of users, no matter their abilities or skill level. It's simple and intuitive, using clear typography and distinct page sections. You don't have to be a techie to use it.