Color
Color is used to establish recognition and usability for any brand. Their correct use can direct customers to make the right decisions, and improve brand preference and loyalty. Building off the Elsevier brand colors, we have modernized the palette with brighter, fresher tones. The use of color in the design system is focused on providing optimal user experience, using color to highlight funtionality and provide brand expression. Our color system is based on the Elsevier colors, while also using a system of tints and shades to ensure that colors are cohesive and complimentary.
Brand colors: UI
Our brand colors are the most recognizable colors used across our UI (as opposed to neutral colors). They can play both a functional role (i.e. orange for expression) and a role of brand expression and delight (i.e. orange for expression). Background colors are neutralized shades or tones of our brand colors, used in the background of UI components.
Primary brand color
Color | Token | Name | HEX | RGB | Description/Usage | |
|---|---|---|---|---|---|---|
brand-orange-500 | Brand-orange | #FF4203 | 255, 66, 3 | Primary brand color; used primarily for products, in logos, and main brand expression | ||
brand-blue-500 | Brand-blue | #0056D6 | 0, 86, 214 | Primary brand color; used for information, CTAs and links, illustrations and graphs | ||
brand-blue-300 | Brand-blue-tint | #6593DC | 101, 147, 220 | Accessible tint brand blue on dark backgrounds | ||
Background color
Color | Token | Name | HEX | RGB | Description/Usage | |
|---|---|---|---|---|---|---|
orange-100 | Orange-100 | #FFF7Ef | 255, 247, 239 | Lightest tone of orange; used for card and banner backgrounds | ||
blue-100 | Blue-100 | #EBF1F9 | 235, 241, 249 | Lightest tone of blue; used for card and banner backgrounds | ||
purple-100 | Purple-100 | #FDECFD | 253, 236, 253 | Lightest tone of purple; used for card and banner backgrounds | ||
green-100 | Green-100 | #E9F9EE | 233, 249, 238 | Lightest tone of green; used for card and banner backgrounds | ||
yellow-100 | Yellow-100 | #FFF8E0 | 255, 248, 224 | Lightest tone of yellow; used for card and banner backgrounds | ||
brown-100 | Brown-100 | #F4EFED | 244, 239, 237 | Used for book banner and cards backgrounds | ||
Neutrals
Our neutral palette consists of primary-black, black, white and tones of greys. These greys are completely neutral (not tinted), which means that they can work alongside any brand color without distracting users from the main focus.
Black and white
Color | Token | Name | HEX | RGB | Description/Usage | |
|---|---|---|---|---|---|---|
primary-black | Primary Black | #0C0F12 | 12, 15, 18 | Primary black; primary text color | ||
black | Black | #000000 | 0, 0, 0 | Pure black | ||
white | White | #FFFFFF | 255, 255, 255 | Pure white; primary background color | ||
Greys
Color | Token | Name | HEX | RGB | Description/Usage | |
|---|---|---|---|---|---|---|
grey-900 | Grey-900 | #333333 | 51, 51, 51 | Darkest shade of grey, almost black; used as secondary background color | ||
grey-800 | Grey-800 | #4D4D4D | 77, 77, 77 | Dark shade of grey | ||
grey-700 | Grey-700 | #666666 | 102, 102, 102 | Dark shade of grey | ||
grey-600 | Grey-600 | #808080 | 128, 128, 128 | Dark shade of grey, used for UI elements (i.e. field input outline) and disabled states | ||
grey-500 | Grey-500 | #999999 | 153, 153, 153 | Medium shade of grey | ||
grey-400 | Grey-400 | #B3B3B3 | 179, 179, 179 | Medium shade of grey | ||
grey-300 | Grey-300 | #CCCCCC | 204, 204, 204 | Light shade of grey | ||
grey-200 | Grey-200 | #E6E6E6 | 230, 230, 230 | Light shade of grey | ||
grey-100 | Grey-100 | #F6F6F6 | 246, 246, 246 | Lighest shade of grey, used as secondary background color (i.e. footer) and UI elements (i.e. stroke divider) | ||
Semantic colors
Semantic colors are used in UI components and elements to communicate a message to users. Unlike brand colors, they have more specific, assigned meanings to set expectations for users. These colors are used sparingly and intentionally.
Color | Token | Name | HEX | RGB | Description/Usage | |
|---|---|---|---|---|---|---|
negative-500 | Negative-500 | #DA1E28 | 218, 30, 40 | Error message | ||
negative-100 | Negative-100 | #FDF4F4 | 253, 244, 244 | Error message tint | ||
positive-500 | Positive-500 | #0C8930 | 12, 137, 48 | Success message | ||
positive-100 | Positive-100 | #F4FAF6 | 244, 250, 246 | Success message tint | ||
info-500 | Informative-500 | #0056D6 | 0, 86, 214 | Information message | ||
info-100 | Informative-100 | #F2F6FC | 242, 246, 252 | Information message tint | ||
notice-500 | Notice-500 | #FF9900 | 255, 153, 0 | Notification message | ||
notice-100 | Notice-100 | #FFF9E6 | 255, 249, 230 | Notification message tint | ||