Colors
Overview
The brand red color is used as the primary action color across all IAA products and experiences. Secondary colors are used purposefully to indicate different states and statuses such as success, error, failure, reminder, link, and so on. Secondary colors should be kept as consistent as possible across buyer faced applications as well as for internally used applications. Neutral colors (white, gray, black) are used in a large part of the text interface, in addition to the background, borders, dividing lines, etc.
Color
HEX/RGB Value
Usage
-
#C90107
201 1 7
- #C90107
- 201 1 7
- Primary Buttons
- Secondary Buttons Hover State
- Dropdown Arrows
- Dropdown Active States
- Pagination Active States
- Loaders
- Segment Control Active State
- Sub Navigation Active State
- Tabs Active State
-
#FF7400
255 116 0
- #FF7400
- 255 116 0
- Bold & Suble Alerts when something is horribly wrong
- Warning Badges critical - Error, Removed, Inactive
- In-line Error States
-
#FFBF00
255 191 0
- #FFBF00
- 255 191 0
- Bold & Subtle Alerts when something is happening
- Warning Badges but not critical - Review, Missing, Busy
-
#238723
35 135 35
- #238723
- 35 135 35
- Bold & Subtle Alerts when something is good
- Success Badges indicates positive trend - Complete, Approved, Added, Done
- Checkbox - Checked
- Radio Button - Selected
- Step Counter - Completed State
- Toggle - On/Yes State
-
#00838F
0 31 143
- #00838F
- 0 31 143
- Info Badges not actionable - New
-
#222222
34 34 34
- #222222
- 34 34 34
- Primary text
- Body copy
- Headers
-
#434343
67 67 67
- #434343
- 67 67 67
- Icons
- Secondary text
- Text Links
-
#666666
102 102 102
- #666666
- 102 102 102
- Input fields value
-
#999999
153 153 153
- #999999
- 153 153 153
- Input fields example value
- Non-specific/Non-actionable Badges - Minor, Not Started, Unavailable, To do
-
#CCCCCC
204 204 204
- #CCCCCC
- 204 204 204
- Borders - Input field, drop-down, checkbox (unchecked & disabled)
-
#E8E8E8
232 232 232
- #E8E8E8
- 232 232 232
- Checkbox - disabled and checked disabled fill color
- Cancel and Ghost Button hover state
- Background elements
-
#F2F2F2
242 242 242
- #F2F2F2
- 242 242 242
- Background