Colors

At the CMMI Institute, color in our UI is alive. One single color is not only a drop of saturation on a page, but also a signal. These signals must act as indicators for differentiation in our products.

The CMMI Institute’s primary color is CMMI Blue. The color blue has no strong UI associations to confuse the user, it is internationally seen as a color representing innovation and credibility.

How to use these colors

Color is powerful, but that power must be used wisely. Too much color, and the UI can become distracting or trying to remember what a varitey of colors mean can lead to cognitive overload. These usage guidelines help maintain consistency and simplicity.

Color Usage: Product Line

Although color is used for alerts and system feedback. We also use it to differentiate our different products.

Designing for Accessibility

One of the easiest ways for designers to make sure their site is meeting accessibility standards is ensuring adequate color contrast. The Web Content Accessibility Guidelines (WCAG) 2.0 has three different conformance levels: A (minimal), AA (mid-range), AAA (highest). The CMMI Institute makes sure all of our text, buttons, and links meet at minimum the AA conformance level.

Typography

The CMMI Institute uses Gotham for all brand and UI typography. Gotham is one of the most used geometric sans-serif fonts worldwide. The typeface has a reasonably high x-height which makes text more visible when reading on a screen.

Type Scale

Our type scale is based off a 16px font size. For web font size, we use “em.” Using a base font size, “em.” can easily be converted into pixel sizes if needed.

Type Weight

Font weight is an important typographic style that can add emphasis and is used to differentiate content hierarchy. Similar to color, font size and weight should be used purposefully. Avoid using strong unless the content should be emphasized.

We use three different weights for text in our UI, Gotham Bold, Book, and Light. Only these three weights should be used in the UI of our product.

Type Styles

All of our type styles are careful combinations with considerations on type weight and size. Most of our styles are used as page headers, titles, or subtitles. We make sure each page has the proper typographic hierarchy to make sure the user can easily scan a page to find what they are looking for.

Display Styles

Title X-Large

Specifications: 4em/64px, bold/700

This title is only used for entry page titles. Don’t use on any nested page.

Title Large

Specifications: 3em/48px, bold/700

This title is only used on nested pages in the page’s main hero.

Basic Header Styles

Basic Heading

Specifications: 2em/32px, light/300

This is the main heading for all pages. Every page should have this heading at the top of the page. It can also be used as a section header if there are multiple different sections on one page.

Subhead

Specifications: 1.5em/24px, bold/700

This is a secondary heading. It can be used on pages as a secondary heading to differentiate subsections of a page. It should never be used as the main heading heading on a page.

Run-in

Specifications: 1.0em/16px, bold/700

This is a tertiary heading. It can be used on pages as a tertiary heading to different subsections of a subsection. It should never be used as the secondary or main heading on any page.

Body Copy Style

paragraph text

Specifications: 1.0em/16px, book/500

This is a normal paragraph of body copy.

Line Height (Leading)

Line height is commonly known as “leading” in print design. Line height helps increase the readability of your body copy. The line height of a section of text is relative to its font size, with a ratio of 1:1.5. For example, for body copy based in font size 1em (16px), the line height is 1.5em (18px).

Line Measure

The length of a line of text is the amount of words that appear in a single line, this is also called the type measure. Similar to line height, line length directly relates to readability of body copy. It’s exhausting on our eyes to read long line after long line of body copy. Conversely, if the line is too short, we keep skipping from line to line. We use 48-80 characters per line to make sure each line of text is the perfect length.

Iconography

If a picture is worth 1,000 words, an icon is worth at least 500. We use iconography as a visual language aid. Our icons are precise and descriptive. They always help our users understand a concept or action better. They should never detract or confuse.

We use two different types of icons in our UI, action and description icons. Description icons should always be accompanied with some text label or description.

Action Icons

Action icons are visual cues for a certain action in our UI. These icons follow visual conventions, and don’t need a description label to inform the user the intent of the icon or action.

Size

Action icons size depends on its height or width. If the icon has is taller than it is wide, the height is capped at 20px. If an icon is wider than it is tall, the width is capped at 20px. If the height and width are the same size, both are 20px.

Description Icons

Description icons add a visual explanation to accompanying text. Due to the interpretation of the icon, all description icons should be next to a descriptive label or description text.

Size

There are two usages for description icons, in-line and on-card. Size for each description icon depends on its usage type.

In-line icons size is relative to the size of the parent element. For example, if a description icon is in-line with text in a 12-column spanning element, the icon will be 128px. If the description icon is in-line with text in an 8-column grid, the icon will be 64px

All on-card icons are 96px.

Grid System

We use a twelve-column layout throughout the CMMI Institute website, with most pages either using three columns (each .col4) or two columns (one .col4 and one .col8). It’s the classes (columns, col1, col2, and col3) which matter in the code shown here, not the div element. Wherever possible use more specific tags (like main, article, or aside) for better semantic markup.

Column Ordering

In order to change the order or columns we use a .push class modifier. Use the .push class modifier when using a sidebar component or for hanging punctuation.

Breakpoints

Columns only appear when the website is rendered with 60em (approx. 960px) of width or greater. Below that threshold, the contents of the columns are stacked vertically in the order they appear in the markup.