eBusiness UI Style Guide

This style guide defines baseline UI patterns and accessibility best practices for the eBusiness experience. Its goal is to ensure a consistent, usable, and WCAG-aligned interface across desktop and mobile devices.

In this article

• Navigation
• Typography / Fonts
• Buttons
• Inputs and Form Fields
• Imagery
• Error Messages and Loading States
• Icons
• Tables
• Product Banners and Listings
• Colors
• Checkboxes, Radios, and Toggles
• Global Contact Icons
• Accessibility Alignment/WCAG References

Navigation

Top-Level Navigation Menu

Top-level navigation provides primary access to key areas of the application and must remain consistent across experiences.

• Use clear, descriptive labels that are easy to understand at a glance.
• Maintain consistent structure and ordering across desktop and mobile.
• Ensure all navigation elements are perceivable and operable:
  • Sufficient color contrast between text and background
  • Visible keyboard focus indicators
  • Clearly labeled controls (menus, search, account actions)
• Support full keyboard navigation and predictable interaction behavior.

Desktop

Mobile

Middle-Level Navigation Menu

Middle-level navigation helps users understand relationships between sections and sub-sections.

• Use clear visual hierarchy to distinguish top-level, middle-level, and nested items.
• Ensure expandable menus are:
  • Easy to identify
  • Keyboard accessible
  • Equipped with visible focus indicators
• Maintain consistent structure and ordering to preserve familiarity when users move between pages or devices.

Desktop

Mobile

My Account Navigation Menu

Account navigation supports access to user- and organization-specific settings and information.

• Organize content into clearly labeled, expandable sections.
• Use consistent navigation patterns across desktop and mobile.
• Ensure users can move between account sections confidently using mouse, keyboard, or assistive technologies.

Desktop

Mobile

Typography/Fonts

Typography establishes hierarchy, readability, and content structure.

• Use a defined typographic hierarchy (H1–H4 and paragraph styles) to support scanning and comprehension.
• Pair fonts intentionally:
  • Serif fonts (e.g., Lora) for larger headings
  • Sans-serif fonts (e.g., Satoshi) for body and supporting text
• Follow defined font sizes, line heights, and letter spacing.
• Ensure text remains readable when zoomed or resized.

Buttons

Buttons communicate available actions and their priority.

• Clearly convey intent and hierarchy (primary, secondary, tertiary).
• Do not rely on color alone to communicate meaning.
• Maintain sufficient color contrast in all states (default, hover, focus, disabled).
• Ensure buttons are easy to activate on both desktop and mobile, with adequate target sizes.

Inputs and Form Fields

Forms should be easy to understand, navigate, and complete.

• Use clear, persistent labels (do not rely on placeholder-only labels).
• Provide visible focus indicators for all interactive fields.
• Maintain consistent layouts and spacing across forms.
• Support smooth navigation across desktop and mobile, including keyboard and assistive technology use.

Imagery

Imagery should enhance understanding without distracting from core content.

• Use images that support content and context.
• Avoid decorative imagery that adds unnecessary complexity.
• Ensure images scale and crop appropriately across screen sizes.
• Provide appropriate text alternatives:
  • Informational images require descriptive alt text
  • Decorative images should be hidden from assistive technologies

Error Messages and Loading States

Clear feedback helps users recover from errors and understand system status.

Error Messages

• Clearly explain what went wrong and how to fix it.
• Use concise, neutral language and avoid blame.
• Ensure error summaries can be announced by assistive technologies.

Loading States

• Use a consistent loading animation across desktop and mobile.
• Place loading indicators in context, aligned with the responsive layout.
• Maintain visibility without interrupting user orientation.

Desktop

Mobile

Icons

Icons support recognition and quick comprehension. There are two sets of icons we build from: Google Material Icons and Font Awesome V6.

• Use icons that clearly convey meaning.
• Do not rely on color alone to communicate information.
• Provide accessible names when icons represent actions or information.
• Ensure usability across devices and assistive technologies.

Tables (Data and Transactional)

Tables present structured information that must remain scannable and understandable.

• Maintain clear structure, alignment, and hierarchy.
• Use sticky headers or columns when appropriate to preserve context during scrolling, especially on mobile.
• Ensure selection states (row highlights, checkboxes) are distinguishable without relying on color alone.
• Visually separate table actions (e.g., “Add Member”, “Actions” menus) from data content.
• Place actions consistently across breakpoints.

Desktop

Mobile

Product Banners and Listings

Product discovery components must be predictable, accessible, and easy to scan.

• Use consistent card layouts across desktop and mobile views.
• Ensure buttons within banners and listings:
  • Communicate action priority and intent
  • Maintain sufficient color contrast
  • Are easy to activate on all devices
• Ensure all product information (images, titles, prices, ratings, badges, hover states) is accessible via keyboard and screen readers.
• Do not rely on hover or visual cues alone to convey information.
• Provide clear focus indicators and meaningful accessible names for all interactive elements.
• Visual indicators such as “NEW”, “SALE”, or star ratings must not rely on color alone and should be conveyed programmatically for assistive technologies.

Banner Desktop

Banner Mobile

Listing Desktop 

Listing Mobile

Colors

Checkboxes, Radios, & Toggles

Global Contact Icons

Accessibility Alignment

All components and patterns in this guide are designed to align with WCAG accessibility requirements. Teams should validate implementations using keyboard navigation, screen readers, and color contrast testing as part of the development and QA process.

UI Component	Accessibility Requirement	WCAG 2.2 References
Top-Level, Middle-Level, and Account Navigation	Fully keyboard operable with logical focus order and visible focus indicators	1.4.3 Contrast (Minimum) 2.4.7 Focus Visible 2.4.6 Headings and Labels 2.4.5 Multiple Ways 3.2.3 Consistent Navigation
Typography / Fonts	Text maintains sufficient contrast, supports resizing, and remains readable when spacing is adjusted	1.4.3 Contrast (Minimum) 2.4.6 Headings and Labels 1.4.12 Text Spacing
Buttons	Action intent is clear, not conveyed by color alone, meets minimum target size, and exposes an accessible name	1.4.1 Use of Color 2.5.5 Target Size (Enhanced) 1.4.3 Contrast (Minimum)
Inputs and Form Fields	Fields have persistent labels, clear instructions, identifiable errors, and guidance for correction	2.4.7 Focus Visible 2.4.6 Headings and Labels 1.3.5 Identify Input Purpose 1.3.1 Info and Relationships
Imagery	Informational images have meaningful text alternatives; decorative images are hidden from assistive tech	1.1.1 Non-text Content 1.4.5 Images of Text 1.4.3 Contrast (Minimum) 1.4.10 Reflow
Error Messages and Loading	Errors are clearly identified, announced to assistive technologies, and explain how to recover	3.3.3 Error Suggestion 3.3.1 Error Identification 3.3.2 Label or Instructions 1.4.3 Contrast (Minimum) 4.1.3 Status Messages 4.1.2 Name, Role, Value
Icons	Icons conveying meaning or actions include accessible names and do not rely on color alone	2.4.4 Link Purpose (In Context) 1.1.1 Non-text Content 1.4.1 Use of Color 1.4.3 Contrast (Minimum) 2.4.7 Focus Visible
Tables	Tables use proper semantics, clear headers, and preserve meaning in linear reading order	1.3.1 Info and Relationships 1.4.1 Use of Color 2.4.3 Focus Order 1.4.10 Reflow 2.5.5 Target Size (Enhanced) 2.4.7 Focus Visible
Product Banners and Listings	Product cards and actions are keyboard accessible, focusable, screen-reader friendly, and not hover-dependent	1.3.1 Info and Relationships 1.4.8 Visual Presentation 3.2.3 Consistent Navigation 2.4.7 Focus Visible 1.4.1 Use of Color 1.4.3 Contrast (Minimum) 2.5.5 Target Size (Enhanced)
Colors	Core color palette, semantic colors (primary, secondary, success, warning, error), and interactive state colors	1.4.3 Contrast (Minimum) 1.4.1 Use of Color 2.5.5 Target Size (Enhanced)
Checkboxes, Radios, and Toggles	Controls have accessible labels, clear state, and keyboard operability	1.3.1 Info and Relationships 2.1.1 Keyboard 4.1.2 Name, Role, Value
Global Contact Icons	Contact actions expose accessible names and are operable across devices and assistive technologies	1.1.1 Non-text Content 2.1.1 Keyboard 4.1.2 Name, Role, Value