Search Banking Research Events Education Region & Community Careers About Us Federal Reserve Bank of Chicago Style and Branding Guide This style guide serves to define standards and act as a reference that establishes the look and feel for the Federal Reserve Bank of Chicago’s public website, Chicagofed.org. The purpose of this document is to improve efficiency and ensure consistency and quality in the continued development and management of the site. This is accomplished by identifying the principles that guide the design of the interface including information on the underlying grid system, size and spacing graphical elements, fonts, colors and labeling standards among other things. Grid System Examples Typography Color Photography Accessibility Publication Guidelines Logotype Grid System The ChicagoFed.org page grid is rigid enough to provide a solid structure, yet flexible enough to handle the variable forms of content found within the site. ChicagoFed.org uses the Bootstrap (version 4.3.1 as of October 2019) framework for layout. Bootstrap supports a 12-column grid that can be divided into columns on a row by row basis. Bootstrap’s row class is a key mechanism for controlling how content is responsively transformed for display on different screen sizes. As such, the site uses rows as underlying organizing element for content blocks. To promote consistency, we will design elements to fit into the 4-2-1 column layout shown below. This system enables a mobile-first design of pages where elements on the page are ranked by importance in the mobile phone design and then built into larger blocks for the tablet and desktop presentations. Three examples of rows in the grid The following code will allow the layout of the page to change based on screen size. <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-3" id="one">1</div> <div class="col-12 col-md-6 col-lg-3" id="two">2</div> <div class="col-12 col-md-6 col-lg-3" id="three">3</div> <div class="col-12 col-md-6 col-lg-3" id="four">4</div> </div> <div class="row"> <div class="col-12 col-lg-6" id="five">5</div> <div class="col-12 col-lg-6" id="six">6</div> </div> <div class="row"> <div class="col-12" id="seven">7</div> </div> </div> 1200px (desktop) 768px (tablet) 480px (mobile) Banking Research Events Education Region & Community Careers About Us Contact Us Newsroom Museum Subscribe Style Guide Follow Us The Fed Apps Our Values Integrity Respect Responsibility Excellence Federal Reserve Bank of Chicago, 230 South LaSalle Street, Chicago, Illinois 60604-1413, USA. Tel. (312) 322-5322 Copyright © 2021. All rights reserved. Please review our Privacy Policy | Legal Notices }