Introduction

Having a strong, modern, and stylistic visual identity helps to solidify CBORD as a leader in higher education, healthcare, senior living, and general business industries. Keeping that identity consistent helps to visually reinforce CBORD’s reputation for quality and innovation. This guide is intended to help all developers adhere to CBORD’s visual identity and design goals.

Creating a style guide is especially important to CBORD because of the number of products that we offer. Having multiple different software solutions, development teams, and industries creates unwanted separation. This guide aims to stylistically unify every application—especially as the number of users is multiplied. Brand awareness should happen at the application level—not just the marketing level.

Intended Audience

This is a style guide intended for CBORD developers. No matter your position in Development, understanding the overall look and feel across multiple product lines is important to ensure CBORD’s visual identity is consistent. A basic understanding of web interfaces and experience working with frontend frameworks (such as Bootstrap) is expected for anyone reading this guide.

This guide may also be helpful to anyone else who works with CBORD’s software, such as a person on the Support team or those responsible for marketing CBORD’s products.

General

If your team is already using Bootstrap, or any other framework, it is acceptable to continue using the framework. However, the default styles should be updated/modified to adhere to this guide. This guide is based heavily on modern, Material Design principles and guidelines. I encourage you to visit the Material Design Website.

User First

CBORD has a user-first mentality. When making any design decisions, consider the intended user and how they might perceive the changes.

Design choices should be made to enhance the user experience—be sure to evaluate the consequences of a decision before it causes unintended issues.

Accessibility

CBORD apps should be accessibile. Every application should follow WCAG 2.1 guidelines at least a level AA conformance level.

Use the official CBORD colors to ensure that level AA conformance is met. Text and images of text must have a contrast ratio of at least 4.5:1. An exception is large text (at least 24px or 19px semi-bold) which must have a contrast ratio of 3:1.

To quickly and easily check accessibility for a web application, install the Siteimprove Accessibility Checker for Chrome. Unfortunately, this tool is only available for Google Chrome at the time of writing this.

If you’re not a fan of that plugin, or don’t use chrome, you can view the very extensive W3C Web Accessibility Evalutation Tools List. One tool that often receives high praise, and for good reason, is the WAVE web accessibility evaluation tool.

Read more about CBORD's stance on accessibility here.

Typography

Nunito by Google is the official CBORD web font. It is recommended to self-host Nunito if you are not already. By hosting Nunito, CBORD does not rely on Google to host the font and it can still be used offline. Hosting is easy to do using the Google Webfonts Helper Tool. Use the follow procedure to download and host Nunito:

1. Search for 'Nunito' in the search box
2. Select the ‘latin’ charset
3. Select (check) every style
4. Make sure the ‘Best Support’ option is selected for browser support.
5. Download the files and unzip them
6. Create a CSS file within the unzipped folder
7. Copy and paste the CSS that was generated on the tool website into the CSS file you just created
8. Link the CSS file to your project

Do link every font style. Properly linking all the Nunito font styles ensures that it renders the same on every device or browser. You can test this by previewing a drastic font-weight on several different browsers.

Do not only link one style of the Nunito font-face, such as ‘Nunito Regular.’ Even though modern browsers can render higher font weights, italics, and styles, each browser does it differently.

Fallback Fonts

Use system fonts to fallback on if the font you want to use does not load, is linked incorrectly, or the operating system/browser cannot display it correctly. These are also great for performance.

Example font stack:

font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", 
            Helvetica, Arial, sans-serif, "Apple Color Emoji", 
            "Segoe UI Emoji", "Segoe UI Symbol";

Components

Cards

Cards contain content and actions about a single subject.

They should be easy scan for relevant information and/or actions about their subject. Elements, such as text or images, should be placed in order of importance and clearly indicate hierarchy.

Card Title

Subtitle

Twee adaptogen blue bottle helvetica edison bulb readymade palo santo wolf sartorial next level. Readymade blue bottle disrupt fixie cliche chartreuse post-ironic.

Action

Card Title

Subtitle

Food truck banjo blog synth selvage prism tilde organic woke poke jianbing etsy deep v 90's palo santo. Tumeric kinfolk mixtape whatever, banh mi chia celiac edison bulb.

CSS

Sass

Sass stands for Syntactically awesome style sheets.

Sass is the official CBORD CSS preprocessor and it is recommended that all developers integrate Sass into their projects. Sass is one of the most powerful and versatile CSS preprocessors out there. It makes writing CSS faster, more efficient, and easier to maintain.

Sass does this by adding a lot of functionality that vanilla CSS lacks. This includes variables, mixins, hierarchy, and much more.

BEM

BEM is the Block, Element, Modifier methodology.

If you must use your own custom CSS, follow BEM guidelines

A block is a functionally and logically independent component, for example a button: .btn { }. A block can be thought of as a parent.

An element is an item that cannot be placed outside of a block. Elements are indicated by two underscores following the name of the block, such as: .btn__text { }.

A modifier is an entity that defines the appearance or behavior of a block or element. This is indicated by appending two hyphens to the name of the block, such as: .btn--blue { }.

BEM is much more extensive than what is summarized here. To read more, visit the official BEM website.

Tone and Voice

Simply looking like a CBORD app is not enough—your application should sound like it too. The tone and voice within an application are an important aspect of CBORD’s identity and should be consistent across all products.

Tone

Tone is how you speak. It expresses your attitude in regards to the user and the content of the application. When creating UI content, no matter what it is, you should do so in a clear, confident, and engaging tone.

• Don't: ERROR! You messed up big time and now the app can't connect to the database - nice going.
• Do: Sorry, we can't connect to the database right now.

Voice

Voice is what you are speaking about. CBORD’s voice is friendly and familiar, but still straightforward and to the point. The priority is to help the user accomplish tasks, work efficiently, and feel confident in user interface actions. Voice should inform the user without confusion or clutter.

• Don't: Well it looks like the transaction did what it should - you're probably good to go.
• Do: The transaction was completed successfully.

Be Concise

• While details can add to an interface, be wary of length. Long chunks of text become difficult to read and sometimes convey pretension.
• Functional text on an application, like navigation or buttons, should be brief.

Writing Style

• Use the active voice—avoid the passive voice.

When using active voice, the subject of the sentence does the action. In passive voice, the subject of the sentence has the action done to it.

• Don't: The button was clicked by the user.
• Do: The user clicked the button.
• Your writing should be concise, direct, clear, and positive; avoid negative writing.
• Avoid slang or jargon—write in plain English.

User First

• CBORD prides itself on its user-first mentality. Before writing, consider what state of mind the user will likely have.
• The overall tone and voice should not change, but you should still cater the content to the specific user you are trying to reach.

Images, Icons, and Logos

Images

Use SVG images whenever possible. Why?

• Small file sizes that compress well
• Scales to any size without losing clarity (except very tiny)
• Looks great on retina displays
• Design control like interactivity and filters

The Font Awesome icon framework supports SVG’s natively and it is expected that if your team is using Font Awesome, they are using the SVG icons (if possible).

Icons

Font Awesome is the approved and official icon resource for CBORD.

All applications not using Ionic should try to keep up to date with the latest icons that Font Awesome has to offer. Since the release of Font Awesome 5, there are now SVG icons.

Ionicons are also an acceptable option. These icons should be utilized if your team is using the Ionic framework.

Logos

You can download the Official CBORD Logo via the following links:

• SVG
• PNG
• Adobe Illustration (.ai)