Branding > Web

These are our style guide for all of the development website and projects, always mobile first.

Designed for Everyone

Our design standards for web projects are made with all of our users in mind. We build and design our projects, mobile first and responsive, so no matter what device your on you have access to the information you need when you need it.


We use Bootstrap as our front end framework. Bootstrap is a tried and tested with many larger companies. It gives us the ability to make applications and websites responsive. Allowing us to design mobile first.


Font Awesome

We use Font Awesome for iconography. Font awesome is an easy and scalable vector icons so that we have a consistent look and feel for the icons we use on a daily basis.

Font Awesome

Grid System

Since we use a customized Bootstrap as our front-end framework, our layouts are based on 12 column grid system. This allows us to easily design responsive layouts and pages.


Learn more about the Grid System at


CPS uses two specific types of fonts for web sites and web applications.

Century Gothic

h1. CPS heading

Semibold 36px

h2. CPS heading

Semibold 30px

h3. CPS heading

Semibold 24px



h4. CPS heading

Semibold 18px

p. paragraph text



CPS uses three different types of bootstrap navigation on Our navigations are used for various purposes. Throughout we use a Bootstrapped navbar as the primary navigation, for sub-sites that are over 3 pages we use either Panels with Nav Pills or List group.

  1. Navbar. We use a modified version of Bootstraps navbar as our main navigation. It is used for new websites and applications only.

  2. Panels with Nav Pills. This navigation is used for sites that have a lot of information but want to keep everyting on one page for easy navigation without leaving the page. The number of tabs you should have are between 2-5

    Content Here for Panel 1

    Content Here for Panel 2

    Content Here for Panel 3

  3. List group. This is our navigation for sub-sites that need a lot of pages with a lot of information. This navigation is also located on the left side of the page for optimal space for content. When viewed on a smaller device, this navigation becomes a dropdown list. Shrink the window down or view on your mobile device to see how it works.


Buttons on a website are great. They allow you to call out an action on a particular link so users know they can click it without having to say click here.

CPS uses the default Boostrap options for buttons.

Large Button


Small Button

X-Small Button

Button with Icon Used for Navigation

Special Hover Button w/ Icon Used for Navigation and Call to Action Items

Block Button


At CPS we use icons as a visual que and emphasis on a particular link we want users to click. Our icons are used in rows of 3 for our larger icons and rows of 4 for the smaller icons. These icons also have a short title and also may have a sentence of information below it. The icons must be a flat vector image with 1-3 CPS approved branding colors. the outer circle must be a single color from the CPS branding palette as well.

The bigger icons are used for landing pages as navigation to other pages


The smaller icons are used as resource links for pages or documents.


If you are a CPS employee and are looking for icons to use on your webpage, please take a look at our Icon Library.


CPS uses images on to enhance the content and draw users to a specific section of the page. When using images, its a good rule not to use an image just to use an image. Make sure that there is a clear purpose to why you are using the image. Remember, someone that visits your page wants information not an image.

Page Type Orientation Max Width Max Height


16:9 Landscape 480px 260px




Full Width Header (image on right text on left)


Header (Title on top, wide image bottom)
960px 250px


Menu Left, Image in Body
680px 335px


Menu Left, Image is Above
960px 250px


Image is top of card with info below
16:9 or 4:3 depending on size of card 360px 220px

Example of landing page image:


Students First. Chicago Public Schools serves more than 400,000 students in over 600 schools; CPS is the nation's third largest school district.

Example of page with full width image:

Chicago Public Schools Fiscal Year 2015 Budget

Example of card with image

High School Quality Working Group

The High School Working Group is charged with developing a model-agnostic plan for a quality high school within three miles of every home in Chicago. The group will review options to accelerate current efforts with proven track records of success and to expand the number of high-performing, replicable high school models. Members will also recommend a variety of supports that will help improve the city's existing high schools.

Page Last Modified on Tuesday, April 05, 2016