Sett documentation and guidelines
Color
The Badgr color system supplements Sett with personality and an overarching goal of inclusive usability.
Principles
Saturated and vibrant
Badgr’s colors generate excitement and reflect the company’s enthusiasm and openness.
Colors have roles
The color system consists of specific roles based on functions within the interface. This makes it easy to modify what color is used in any given role. These roles also give the team a shared language when communicating during the design process.
Accessible
The color system is designed to meet WCAG 2.0 level AA compliant contrast ratios making things easier for many users with low vision or color blindness to find, identify, and interact with the interface. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A contrast checker, like webaim.org ↗️, should be utilized when adding new colors.
Custom brand colors
Badgr is used by many organizations, and some of them choose to customize their interface to fit their own branding needs. The color system is white labelable without sacrificing accessibility, hierarchy, or the informative meaning of color roles.
White labeling
The Badgr application can be white-labeled, so it is essential to use the correct roles when applying color to components. To maintain accessibility, colors are programmatically determined based on the white label brand’s color. Take a look at the following examples of how the application balances white labeling a brand color and maintaining accessible contrast ratios.
Color base and roles
The Sett color system consists of two parts - the base and roles. Colors from the base are used in various ways and are defined by their roles in the interface. The base and roles are categorized in the following ways:
Base
The base contains all of the colors used in Sett - leveraging the Badgr brand palette to carry over the experience of Badgr’s branding efforts into the application.
Brand
The customizable primary brand color.
Accent
Used sparingly or in specific jobs.
Utility
Used as background and typographic colors.
Roles
Roles apply the base colors to specific areas in the interface. They are organized and named according to their job.
Information
Used to indicate state information in the interface.
Interactive
Used in combination to indicate areas of interactivity within the interface.
Elevation
Used to elevate content off the background.
Accent
Used in illustrations and other decorative elements.
White label
Used for white labels — programmatically determined based on the brand color.
Background
Used to create consistent depth in background and foreground colors of the interface.
Text
Used to create a consistent hierarchy among typography.
Brand
The customizable primary brand color.
Accent
Used sparingly or in specific jobs.
Utility
Used as background and typographic colors.