Color
At Liquidity Services, we value the importance of utilizing color correctly in our corporate identity. In order to maintain a unified and consistent look across all marketing and digital products, it is advised to keep within the approved colors specified here.
Additionally, color pairings that meet or exceed WCAG 2 Level AA can be found on in this section. When designing graphics or layouts for branding purposes, please note that using colors outside of this designated palette could result in an inaccessible experience for some viewers.
Primary & Secondary Colors
The primary and secondary colors used in Liquidity Services branding are the most recognizable and memorable components of its visual identity. Primary colors are the building blocks of a brand’s color scheme, usually consisting of a dominant color. Secondary and Accent colors complement the primary color and can be applied in marketing materials, website design, and product packaging.
*Disclaimer: It is advised that when using a PMS (Pantone Matching System) color for branding purposes, please discuss with the marketing design team before applying it across any materials or designs.
Primary Color
Portfolio Blue | #002969 | xx
Usage
- 4-up color blocks
- Backgrounds
- Default Link
- Primary buttons
- H2 & H3 Title color for long form content (Digital = over a minute read time)
Secondary Color
Auction Orange | #f16c03 | xx
Usage
- 4-up color blocks
- Brand Bar
- Data bar
- Backgrounds representing portfolio
- Logo Type
Accent Colors
The Accent colors complement our official colors, but they shouldn’t be used too frequently. In any one piece, they should make up less than 5 percent of the color palette. The accent colors should highlight and support the primary colors in the color scheme.
Auction Orange | #f16c03 | xx
Usage
- Decorative placements
- Buttons (see compliance*)
- Group identifier
- H2 & H3 Title color for long form content (Digital = over a minute read time)
- WCAG: AA - Paired with white
Highlight
Auction Orange | #f16c03 | xx
Auction Orange Light | #f9c195 | xx
Usage
- Highlight on a dark text. Use sparingly with body text.
- Leveraged on a dark background with yellow text. Use sparingly (See compliance*).
- WCAG: AA - Paired with Neutral 900
Neutral Colors
Neutral colors can be a great addition to any project. They are versatile and can be used in many different ways. Neutral 600 and Neutral 900 are the primary colors used for typography. Colors are used to complement the primary color and can be applied in marketing materials, website
The neutral colors can be effectively used in marketing materials, backgrounds, and illustrations but should only be used sparingly, not to dominate the palette, design, and product packaging.
#161616 | PMS Black 6 C | Neutral 900
#2A2A2A | PMS 426 C | Neutral 800
#575757 | PMS 425 C | Neutral 600
#9B9B9B | PMS 4276 C | Neutral 300
#B5B5B5 | PMS 421 C | Neutral 200
#E5E5E5 | PMS Cool Gray 2 C | Neutral 100
#F1F1F1 | PMS Cool Gray 2 C | Neutral 50
Usage
- Neutral 900: Headlines, Hero Overlay with Opacity % variations. WCAG: AAA - with white
- Neutral 800: Disabled Button Text. WCAG: AAA - with white
- Neutral 600: Default Body Copy, Icons. WCAG: AAA - with white
- Neutral 300: Illustrations. WCAG: AA - with N900
- Neutral 200: Boarders, Inputs, Dividers, & Illustrations. WCAG: AAA - with N900
- Neutral 100: Highlights and backgrounds. WCAG: AAA - with N900
- Neutral 50: Highlights and backgrounds. WCAG: AAA - with N900
Semantic Colors
Color can be a powerful tool for communication, and semantic colors are a great way to add meaning to your designs. At Liquidity Services, we use colors semantically to communicate different messages: informative, accent, negative, and positive.
Semantic colors can help you create more predictable and accessible designs. When using color semantically, be sure to include text or an icon so that the meaning is not lost and can be consumed by all.
* Semantic Colors for full brand portfolio.
Error, Warning: Red
 |
 |
 |
|
#CF3F3F Main color used by error components. WCAG: AA - Paired with white |
#F3C0BF Default background used by error banner components. WCAG: AA - With Red 600 |
#531919 Text color for the default error banner component. WCAG: AA - Paired with white |
Informative, Accent: Aqua
|
|
|
|
#0079B8 Main color used by informative components. WCAG: AA - Paired with white |
#8DD8F2 Default background used by informative banner components. WCAG: AA - With Aqua 600 |
#00304A Text color for the default informative banner component. WCAG: AA - Paired with white |
Success, Positive: Green
|
Color Combinations
The color scheme and percentage of usage have been chosen to reflect our brand’s personality and ensure that our messaging is clear and balanced. We recommend using it in a variety of marketing and digital media.
The consistent use of these colors will contribute to the cohesive and harmonious look of our brand identity across all relevant media.
- Color Combinations for corporate brand only.
Percentage of Usage
- 50% White
- 25% Primary
- 10% Secondary
- 10% Neutrals
- 5% Accents
- Limited: Yellow
Color Compliance
Primary, Secondary, and Neutral Colors
As the Liquidity Services community, we are committed to serving all people, regardless of visual disabilities. The color palette for our product portfolio has been carefully selected and tested to meet or exceed the Web Content Accessibility Guidelines (WCAG) 2 Level AA for contrast and color. Using colors outside of this palette may result in an inaccessible experience for some users and should be avoided when possible.
- Primary color compliance for corporate brand only.
- Secondary color compliance for full brand portfolio.
- Neutrals color compliance for full brand portfolio.
Liquidity Services Blue
HEX: #023B92 (B500)
RGB: R:2 G:59 B:146
Background (BG)
Liquidity Services Blue (B500): #FDC53B
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Portfolio Blue
HEX: #002969 (B600)
RGB: R:0 G:41 B:105
Background (BG)
Family Blue (B600): #002969
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Neutrals
Neutral 900 (N900): #161616
Neutral 600 (N600): #575757
Backgrounds (BG)
Neutral 900 (N900): #161616
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Accent Colors
In this section, you will find Liquidity Services brand-approved text color pairing options that meet or exceed the Web Content Accessibility Guidelines (WCAG) 2 Level AA for contrast and color.
Using colors outside of this palette may result in an inaccessible experience for some users, and should be
avoided.
- Accent color compliance for corporate brand only.
Seller Aqua
HEX: #0079B8 (A300)
RGB: R:0 G:121 B:184
Background (BG)
Seller Aqua (A300): #0079B8
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Buyer Lime Green
HEX: #4e8000 (L300)
RGB: R:78 G:128 B:0
Background (BG)
Buyer Lime Green (L300): #4e8000
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Planet Teal
Planet Teal (T400): #256F7C
RGB: R:37 G:111 B:124
Background (BG)
Planet Teal (T400): #256F7C
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Highlight and Text Emphasize
In this section, you will find Liquidity Services brand-approved text color pairing options that meet or exceed the Web Content Accessibility Guidelines (WCAG) 2 Level AA for contrast and color.Using colors outside of this palette may result in an inaccessible experience for some users, and should be
avoided.
- Primary with highlight & text emphasize color compliance for corporate brand only.
- Secondary with highlight & text emphasize color compliance for full brand portfolio.
Liquidity Services Blue
HEX: #023B92
RGB: R:2 G:59 B:146
Highlight and Text Emphasize
Yellow (Y100): #FDC53B
Portfolio Blue
HEX: #002969
RGB: R:0 G:41 B:105
Highlight and Text Emphasize
Yellow (Y100): #FDC53B
Buttons
“Buttons and links are the backbone of any user interface” - Product Team
Introduction
Buttons and links are crucial components of user interfaces as they enable users to interact with digital content and navigate through websites and applications. Consistent and appropriate usage of buttons and links can create a strong visual impact and contribute to establishing a recognizable brand identity.
This section offers detailed information on the approved types of buttons and links for our corporate branding. It provides guidance on their proper usage, placement, and color palette. Adhering to these guidelines ensures that our digital content is appealing, in brand and accessible to all users.
Button Usage
Buttons are essential interactive elements that prompt users to perform specific actions, such as submitting a form or initiating a search.
When to Use
- Communicate actions and encourage interaction.
- Trigger actions (e.g., submit, confirm, function).
- Button Usage for full brand portfolio.
When Not to Use
- Buttons should not be used as navigational elements. Links should be used instead.
Content: {verb} + {noun}
It is recommended to use the {verb} + {noun} when creating button labels (E.g., “Save Changes”).
Commonly understood exempt examples: Add, Back, Cancel, Close, Contact Us, Delete, Done, Download, Edit, Help, Next, Print, Register, Refresh, Save, Settings, Share, Sign In, Sign Out, Submit, Upload, and View.
Button Group
- Generally aligned to match the context.
- Within containers, button groups should be right-aligned.
- Near text, button groups are left-aligned.
- In empty states, button groups are often centered (e.g., nothing to display).
Disabled States
A disabled state is a common feature in interface design that indicates a component cannot be interacted with for various reasons, such as incomplete requirements to permissions. Here are some important points to keep in mind:
- Usually represented as grayed out or has a faded appearance to communicate that it is not currently available for use.
- Used to prevent people from taking actions that could lead to errors or unexpected behavior, and to guide them towards appropriate actions.
- Providing a message or tooltip explaining why a component cannot be used may be more appropriate than disabling it entirely.
- Disabled States for full brand portfolio.
Disabled (Default)
If an element is set to a disabled state, it is not selectable or interactable and may not be read by screen readers. To improve the accessibility of the disabled state, consider utilizing additional warning or read-only options, which are outlined below.
Additional Warning Banner
A warning notification banner can inform users when a temporarily disabled item affects multiple items or the primary action of a flow. The purpose is to provide instructions on how to enable or re-enable the disabled component. It should be attention-grabbing but not distracting, with clear and concise information.
Read-only: aria-disabled=“true”
If the disabled content is relevant or necessary for completing a task, the ariadisabled=“true” variation can be used. This attribute helps screen readers identify that the content is read-only and cannot be interacted with.
Link example: <a href=“#” aria-disabled=“true”>Link Text</a>
Button example: <button type=“button” aria-disabled=“true”>Button Text</button>
Primary, Tertiary, & Ghost Button Styles
Medium and low-emphasis call-to-action buttons are important components of a user interface and can help guide users towards taking specific actions on a webpage. When designing these buttons, consider the following:
- Placement: Placement is an important consideration when working with buttons of different emphasis levels. Medium and low-emphasis buttons can feature below the high-emphasis call-to-action or in the footer.
- Contrast: Medium and low emphasis buttons must be easily distinguishable from other elements on the page.
- Text: The text should be clear and concise but can be less urgent in tone than high-emphasis buttons. For example, “Read more” or “Explore” for medium emphasis and “Cancel” or “Dismiss” for low emphasis.
- Colors: Color styles for corporate brand only.
Primary
Meant for medium emphasis. Placed throughout the experience.
Primary Variant
Ghost
Meant for low emphasis. Can be used in conjunction with other button styles to de-emphasize less critical actions.
Inverse (Call-Out)
Leveraged on dark backgrounds, accent color backgrounds.
Buyer, Seller, & Planet Button Styles
To maximize user engagement when prompting a specific action, such as purchasing a product or downloading a resource, design considerations should include highemphasis call-to-action buttons. Consider the following:
- Placement: Should be strategically placed on the web page where users are most likely to see them. It is recommended to position them above the fold, meaning that it is visible without having to scroll down.
- Contrast: The buttons should stand out from other elements on the page.
- Text: The text on the button should be clear and concise, with a verb that encourages action. For example, “Sign up now,” “Join our community,” or “Download the guide.”
- Colors: Color styles for corporate brand only.
Buyers
Meant for high emphasis. No more than 3 per page view.
Sellers
Meant for high emphasis. No more than 3 per page view.
Planet
Meant for high emphasis. No more than 3 per page view.
Inverse (Call-Out)
Leveraged on dark backgrounds, accent color backgrounds.
Button Sizing
Creating an effective visual hierarchy through buttons is a critical component of UI design for enhanced user experience. Size, spacing, and emphases are important to consider when designing these elements. Leverage the 4-point spacing scale can help determine button size and space on a page. Button sizes are available in three levels: small, medium (default), and large, with medium being the standard option. It’s important that other sizes be used sparingly so they can draw attention to their importance.
Providing adequate distance between buttons and other page elements and adhering to the 4 point scale produces a consistent look with simple navigation capabilities. The sizing of buttons must also be proportional, as the essential emphasis should be placed on prioritized interactions.
- Button sizing for full brand portfolio.
Button Sizes
Medium (Default)
Default button size.
Font weight: Regular | Font Size: 16px
Letter Spacing: 8px | Line height 24px
Small
Useful for situations where space is limited, such as in a table or form.
Font weight: Regular | Font Size: 14px
Letter Spacing: 8px | Line height 20px
Large
Useful to emphasize important actions.
Font weight: Light | Font Size: 20px
Letter Spacing: 12px | Line height 30px
Font weight: Light | Font Size: 18px
Letter Spacing:12px | Line height 28px
Button Accessibility
Button accessibility means creating buttons that are usable and understandable for all users, including those with disabilities. This involves using clear labels, providing sufficient contrast and size, using descriptive attributes, ensuring keyboard accessibility, and providing feedback when buttons are activated.
- Button accessibility for full brand portfolio.
Keyboard Interactions
- Buttons should be reachable by the use of the **tab** key
- Buttons should be selectable by the use of the **space or enter** key
Behavior
- Icon only buttons should display their label on hover and on focus
- If button labels are not visible, they should be accompanied by a label that will be revealed when the user hovers over or focuses on the button.
Considerations for Development
- Please review ARIA authoring practices
Primary, Tertiary, & Ghost Button Color Compliance
Brand-approved button pairing options that meet or exceed the Web Content Accessibility Guidelines (WCAG) 2 Level AA for contrast and color. These options include Primary, Primary Outline, Tertiary, and Ghost. It is important to stick to this color palette to ensure accessibility for all users.
Using colors outside of this palette may result in an inaccessible experience for some users, and should be
avoided.
- Primary color compliance for corporate brand only.
Color Compliance
Liquidity Services Blue
HEX: #023B92 (Blue 500)
RGB: R:2 G:59 B:146
Button Types
| Row 1: Outline | Row 2: Primary | Row 3: Tertiary | Row 4: Ghost |
Background (BG)
Liquidity Services Blue (B500): #FDC53B
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Buyer, Seller, & Planet Button Compliance
Brand-approved button pairing options that prioritize the needs of buyers, sellers, and the planet. These options are designed to meet or exceed the Web Content Accessibility Guidelines (WCAG) 2 Level AA for contrast and color. To ensure an accessible experience for all users, it is important to stick to this color palette.
Using colors outside of this palette may result in an inaccessible experience for some users and should be avoided.
- Accent color compliance for corporate brand only.
Color Compliance
Seller Aqua Button
HEX: #0079B8 (Aqua 300)
RGB: R:0 G:121 B:184
Background (BG)
Neutral 900 (N900): #161616
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Buyer Lime Green Button
HEX: #4e8000 (Lime 300)
HEX: #4e8000 (Lime 300)
Background (BG)
Neutral 900 (N900): #161616
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Planet Teal Button
Planet Teal (T400): #256F7C
RGB: R:37 G:111 B:124
Background (BG)
Neutral 900 (N900): #161616
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF
Links
Links play a crucial role in navigating websites and web applications, enabling people to move smoothly between pages or sections. However, it is essential to ensure that links are designed to be accessible to everyone, including individuals with disabilities. In this section, we will discuss guidelines and standards for creating accessible links that are easy to perceive, comprehend, and interact with, while also allowing keyboard or assistive technology access. By adhering to these guidelines, we can ensure that everyone has equal access to the website’s content and features.
Links can be presented on their own or within text to provide a lightweight navigation option. However, it is essential to use them wisely to prevent overloading the page and making it difficult for users to identify their next steps. This is particularly true for inline links, which should be used sparingly.
- Links section is for full brand portfolio.
Link Usage
Links provide a way for users to navigate throughout the site or the web and can be presented inside a paragraph or as standalone text. By default, links should be underlined. However, in some cases, it may not be necessary to have a visible underline (for example, if the link’s placement and context are already precise). Non-underlined links are less accessible, so they should only be used for links that are not critical to the experience. Common uses are website
navigations and footers, with lists of links that are shortcuts to other pages.
Use descriptive link text: Avoid vague link text like “click here”. Use descriptive text that accurately describes the content being linked to.
If generic links cannot be avoided: It is important to annotate the connection between the link and the surrounding text or header to give context for implementation. This can be achieved by using the “aria-described by” attribute in the HTML markup.
Use unique link text: Don’t use the same link text for multiple links on the same page. If you must make sure they lead to different destinations.
Make link text distinguishable: Ensure link text is visually distinguishable from surrounding text.
Consider context when writing link text: Write link text that’s clear and relevant to the context it appears in.
Examples:
Good: “Visit our accessibility page for more information”
Bad: “Click here for more information”
Good: “Contact our customer support team”
Bad: “Contact Us”
Interactions
Mouse: Users can click on the link or the associated icon
Keyboard: When the user tabs to a link, they can open links by pressing Enter
VoiceOver: Links can be open by pressing Control-Option-Space or Enter
JAWS or NVDA: Links can be open by pressing Enter
Link Style
Links found in a web page or application can be grouped into different categories such as: navigational links that give the site structure, body links that provide additional information, and header links that allow access to actions or more information. Consider the following:
- Navigational: Often found in menus, navigation bars, breadcrumbs, and other interface elements that provide users with an overview of the site’s structure and content.
- Body: Often found within the main content area of a web page or application, used to provide additional information, resources, or related content of the page, such as links within paragraphs of text, lists, or tables.
- Header + Dark Links: Links placed within headlines offer users multiple benefits, including access to additional details about a product or service, relevant resources (e.g., articles), or opportunities to take specific actions.