Solid design principles that spread through the entire user experience.

Conversant

Built with the design principles of clarity, efficiency, and user engagement, CUI's foundations are central  to crafting superior digital interfaces. No matter the evolving nature of the UX practice, CUI aligns to core values that inform design decisions, from articulating users’ flows, to detailed visual specs. This helps the team and the organization on the value of a common language, a shared ownership and the co-creation of value.

Space

There should be a video here

Spacing principles

Every part of our UI is intentional even the empty space between elements.  Space creates relationships and hierarchy. A grid system defines the size  of the spacing increments providing key benefits to the system:
Precision: A pixel grid system allows for precise placement and alignment of design elements, ensuring that they are perfectly aligned to the grid.

Adaptability: A pixel grid system is adaptable to different screen sizes and resolutions. By designing to a grid, it's easier to scale the design to different screen sizes, ensuring that the interface remains legible and usable across a range of devices.
Efficiency: A pixel grid system can speed up the design process by providing a consistent framework for designing UI elements.

Consistent

These global layout rules are useful for creating consistent layouts across pages and help enforce the integrity of a design system.

Patterned

These classes define spaces between components and page structure. Sizes are consistent with the overall spacing used for CUI components which gives pages a cohesive look and feel from top to bottom.

Scalable

CUI has standardized spacing between components using multiples of 8px. If design specs aren't showing exact increments of 8px, it chooses the nearest multiple.

Color

Color palettes and usage

The Conversant UI color palette is used for all components and should also be used for any custom elements. It efficiently helps to ensure a consistent look and feel across Conversant's applications. We don't want users to work in our tools and feel dread, staleness or anxiousness. Color is one of the key contributors to creating an environment that is fun and positive

Brand recognition: A color system can be used to reinforce branding by using brand colors consistently throughout the interface. This helps create a strong brand identity and makes the interface more memorable and recognizable.

There should be a video here

Primary

Blue was selected as the primary palette  because it's associated with "cool and calm"  and also offers a wide range of hues to work with.

Base

The gray and blacks are a nod to the darker and  more serious tone of Conversant's overall brand.

Notifications

These colors should be reserved for notifying users of successes, warnings and errors.

Utility Classes

Utility classes are used to accommodate styling for specific cases.

Base

The goal of utility classes is to control holistic changes for the styling of an application.

Notifications

The following utility classes can be used to style foreground and background colors that are in the Conversant UI palette.

Categorical

Categorical color scales are used when labeling discrete data series or when distinguishing differences in kinds / classes of data points.

Color groupings are provided based on the number of series in your chart. You can choose any color in the appropriate group to start the first series.

Colors and data in action.

Typography

Source Sans Pro is the standard typeface for Conversant UI. It is a sans serif typeface that reads well both on mobile and desktop displays. It also sets a tone of voice that is casual and formal making it highly versatile to convey a sense of functionality while at the same time suitable to compliment well with the corporate typographic family Gibson.

In sum, the election of Source Sans Pro ensures key attributes of readability, hierarchy, consistency and identity across all touch points.

Usage guidelines

Correct

The Conversant UI system calls for a range of 45–75 characters per line for sentence text.

Incorrect

If you set lines of text too long, the reader will have difficulty in following from one line to the next; they may mistakenly skip lines or reread the same line. Set the line too short and the reader’s eyes will have to change direction too frequently, resulting in tired eyes.

Classes

Conversant UI uses different fonts to modify  the weight as opposed to using the font weight  CSS property. This is because browsers render  the font family property more consistently than  they render font weights.

Mixins

Utilities

Utility classes are used to accommodate styling  for specific cases. The goal of utility classes is  to control holistic changes for the styling of  an application.

Typography is really white, it's not even black. It's the space between the blacks that really makes it. In a sense it's like music, it's not the notes, it's the spacing between the notes that really makes the music.

Iconography

The CUI icons minimize extraneous detail. They are used to communicate where words cannot so our primary objectives were visibility, readability, and consistency across the icon library. If there are fitting icons for top-level left nav menu items, they can be added to help communicate meaning. No need to make up icons for the sake of having icons... it's better to have none than have ones that don't fit.  Special attention has been put to metaphor validation through testing in order

to communicate complex information quickly and intuitively, making it easier for users to understand and interact with the platform. This validation ensures the ability to establish an universal language so everyone can understand the meaning behind the icons. A distinctive approach has been to infuse —whenever possible— an emotional connection: when a user sees an icon that is familiar or evocative, it can trigger positive emotions and feelings of familiarity and comfort.

Each of the icons is custom designed to address the specific needs of the system. View full list on https://cui.conversantmedia.com/primary/styling/ic…

Design foundations in action.

Data Visualization

Charts give users a visual representation of data that they can interact with.
CUI offers a variety of charts to display data to obtain the right insights following our design principles of clarity, structure, fluidity, efficiency and lightness. Line charts are to used to show and compare trends between 2 or more data series.  Bar charts/stacked bar charts are to used to represent and compare data as a portion of a whole. Area charts are the best option when there's only 1 data set because it visually fills the space creating a stronger effect with improved readability.

Use Line Charts when there's more than 2 data series to avoid a rainbow effect. A dual y axis might be needed when the data series being compared have different numeric meaning or formats (for example, Spend = currency and Clicks = integers). Finally, If you want to show a simple trend between one or more series of data, the spark line removes all the details of charts including numbers, filters and labels. They are great to use in places with limited real estate like tables.

Line

Line charts are to used to show and compare trends between 2 or more data series. For single data series, use an Area Chart.

Bar

Bar charts/stacked bar charts are to used to represent and compare data as a portion of a whole.

Area

Area charts are the best option when there's only 1 data set because it visually fills the space creating a stronger effect with improved readability. Use Line Charts when there's more than 2 data series to avoid a rainbow effect.

Dual Axis

In cases where the data series being compared have different numeric meaning or formats (for example, Spend = currency and Clicks = integers), a dual y axis might be needed.

Sparkline

If you want to show a simple trend between one or more series of data, the spark line removes all the details of charts including numbers, filters and labels. They are great to use in places with limited real estate like tables.

Next project

(UX) Conversant Patterns