#DCEDF6
light blue
Information Banner BG
#E3F5DA
light green
Information Banner BG
#F5EED0
light yellow
Information Banner BG
#F6E6DB
light orange
Widget BG
#F6DDDD
light red
Impersonation
#F6DFEF
light pink
Widget BG
#E4D5F2
light plum
Widget BG
#DAE0F5
light purple
Widget BG
Neutrals
Defines page structure such as borders, grid lines, category separators and directs attention to key information
#272D34
gray 600
Dark Text
#5C6470
gray 500
Text Menu Text
#7F8C96
gray 400
Hint Text
#C3CCD2
gray 300
Disabled Text Form Outline Menus Popups
#DFE5EA
gray 200
Divider Lines
#EBEEEE
gray 100
Background Filter BG
#F2F2F2
blue gray
Hover State Disabled BG
#FBFBFB
red gray
Headers
Branding
Company logo, main navigation and icon hover colors
#0C3F21
dark green
Logo
#2A6F21
main nav
Bottom Gradient
#399534
hover green
Top Gradient Main Nav Icon Hover State Logo: Top swoosh
#44A880
brand green
Logo
#53E4FE
code teal
Use for code blocks on dark backgrounds
#000000
black
#ffffff
white
Frequently used font styles
Title (H5, 18px)
Emphasis (H6, 16px)
Grid Cells (H7, 18px)
Body (H8, 16px)
Page Title (H3)
Header (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section title (H4)
Headline 1 (H5 Title)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut vestibulum nisl. Suspendisse potenti. In viverra convallis felis sed molestie. Duis lobortis blandit arcu semper porttitor. Cras vitae urna eu turpis condimentum rutrum quis eget augue. Integer feugiat nisl sed semper feugiat. Nulla orci neque, imperdiet vel sapien in, feugiat semper nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer neque risus, pharetra vitae diam in, condimentum lacinia leo. Fusce rhoncus, augue a pretium interdum, ligula orci egestas augue, eu accumsan velit ante non dolor. Proin eget lacus a ante tincidunt mollis. Curabitur in augue semper, tempor quam eu, tincidunt justo.
Headline 2 (H5 Title)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut vestibulum nisl. Suspendisse potenti. In viverra convallis felis sed molestie. Duis lobortis blandit arcu semper porttitor. Cras vitae urna eu turpis condimentum rutrum quis eget augue. Integer feugiat nisl sed semper feugiat. Nulla orci neque, imperdiet vel sapien in, feugiat semper nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer neque risus, pharetra vitae diam in, condimentum lacinia leo. Fusce rhoncus, augue a pretium interdum, ligula orci egestas augue, eu accumsan velit ante non dolor. Proin eget lacus a ante tincidunt mollis. Curabitur in augue semper, tempor quam eu, tincidunt justo.
Columns
Bootstrap
We are using the Bootstrap 5 Layout Grid System, documentation can be found here:
https://getbootstrap.com/docs/5.0/layout/grid/Grid Breakpoints
col-xs-* < 576px col-sm-* ≥ 576px col-sm-* ≥ 768px col-md-* ≥ 992px col-lg-* ≥ 1200px col-xl-* ≥ 1600px col-xxl-* ≥ 1921px
Examples on white backgrounds using 2, 3, and 4 column configurations.
2 Column
24px gutters
588px
588px
3 Column
24px gutters
384px
384px
384px
4 Column
16px gutters
282px
282px
282px
282px
Headline 1 (H5 Title)
Headline 2 (H5 Title)
Headline 1
Headline 2
Headline 3
Bootstrap Example
This example uses the small (col-sm-*) Bootstrap breakpoint Classes used are: col-sm-12 = 100% col-sm-6 = 50% col-sm-4 = 33.3% col-sm-3 = 25% col-sm-2 = 16.6% Whatever the smallest breakpoint that is set will be used throughout the rest of the larger breakpoints. The background color highlights the row
Desktop
Bootstrap Example Mobile
This is what the example will look like on mobile.
Mobile
Bootstrap Order Example
This example uses the order Bootstrap Utility which follows the breakpoints as well so you can set order for items across xs, sm, md, lg, xl, xxl add it to the hyphen between order and the number. In this case we have the mobile order set with these classes: order-0 order-1 order-2 order-3 order-4 order-5 The small breakpoint and up order is set with these classes: order-sm-0 order-sm-1 order-sm-2 order-sm-3 order-sm-4 order-sm-5 The background color highlights the row
Desktop
Bootstrap Order Example Mobile
This is what the example will look like on mobile.
Mobile
Icons
componentLibrary
link
Outline Icons
These are the default style, start with an outline style first.
Bold Icons
Use bold icons when in the pressed state or when an operation is running. For example, if a filter is applied to a screen use the bold filter icon to show it’s running. The filename for all bold icons ends with a “_b”
Layered Icons
Another technique is to layer one icon on top of another. This allows for additional effects. For example using the outline favorite icon (star) on top of the bold favorite creates a nice rating meter.
Accessibility
Clickable icons and icon buttons without labels should display tooltips in the UI. Tooltip copy should describe the purpose of the clickable icon so all users not just people with low or no vision can understand what the icon is and why it is there.
Tooltips
Appear for all clickable icons and icon buttons without labels on keyboard focus or mouse hover. Hide when the user selects the clickable icon’s action.
Font File Location
codebase path location
New
Commonly Used
Outliers
The iscon is just the icon-edit rotated 45 degrees
All Icons:
Edit
HTML:
<i className="icon-edit"></i>
CSS:
content:"\e900";
Edit
HTML:
<i className="icon-edit"></i>
CSS:
content:"\e901";