Sierra Auction Color

Primary & Secondary Colors

The primary and secondary colors used in Sierra Auction 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 are used to 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.

At Sierra Auction, 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.

Background (BG)
Family Blue (B600): #002969
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF

Background (BG)
Auction Orange (O500): #F16C03
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF

Backgrounds (BG)
Neutral 900 (N900): #161616
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF

Accent Color

Background (BG)
Seller Aqua (A300): #0079B8
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF

---

Highlight and Text Emphasize

In this section, you will find Sierra Auction 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.
• The secondary, highlight and accent colors have all been tested and approved to appear on a Portfolio Blue background, Sierra Auction's primary color.

Do not use company colors in a way that is not approved, doesn't meet Web Content Accessibility Guidelines (WCAG), or is off brand.

---

Buttons

Introduction

Buttons enable users to interact with digital content and navigate through websites and applications. Consistent and appropriate usage of buttons and links 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, providing  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

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.

Button Labels: {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 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:

• 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 help guide users towards taking specific actions on a webpage. When designing these buttons, consider the following:

• Placement
• Colors
• Contrast
• Text

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.

---

Button Sizing

Creating an effective visual hierarchy through buttons is a critical component of UI design for enhanced user experience.

• 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 produces a consistent look with simple navigation capabilities. 
• Button sizing for full brand portfolio.

Button Sizes

Medium

Default Button Size

Font weight: Regular | Font Size: 16px
Letter Spacing: 8px | Line height 20px

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 18px

Large
Useful to emphasize important actions.
Font weight: Light | Font Size: 20px
Letter Spacing: 12px | Line height 24px

---

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.

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

Labeling

• 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. 

Using colors outside of this palette may result in an inaccessible experience for some users, and should beavoided.

Color Compliance

Portfolio Blue
HEX: #002969
RGB: R:2 G:59 B:146

 

Background (BG)
Portfolio Blue (B600): #002969
Neutral 100 (N100): #E5E5E5
Neutral 50 (N50): #F1F1F1
White: #FFFFFF

---

Links

Links play a crucial role in navigating websites and applications, enabling people to move smoothly between pages or sections. Like buttons, it is essential to ensure that links are designed to be accessible to everyone, including individuals with disabilities.

This section provides guidelines and standards for creating accessible links that are easy to perceive, comprehend, and interact with, while also allowing keyboard or assistive technology access. 
Links can be presented on their own or within text to provide a lightweight navigation option. 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.

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 unique link text: Don’t use the same link text for multiple links on the same page. 
• 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.

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.