FRBSF.org Pattern Library

About

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 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.

This pattern library is based on KSS Bootstrap, a Knyle Style Sheet-powered Bootstrap style guide. Visit the KSS Bootstrap project to get both the KSS Styleguide components and the Bootstrap kss-node template.

FRBSF.org Design Principles

• Content access across any browser

  We designed the FRBSF.org website to render on a wide range of devices, including on small screens, using a mobile-first approach, a responsive design based on a flexible grid system, and industry-standard technologies.

• Consistent look, feel, navigation, and interaction

  As part of the goal of providing a unified experience, we made sure 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, they should be able to orient themselves wherever they may be within the site.

• 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, 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 organizing scheme, a robust search function, and search-engine-optimization techniques.

• Accessibility

  We implemented a user-centric design for a wide range of users, no matter what 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.