EchoTransact Component Library

Design System Foundation

Design Tokens

This component library implements our visual identity through a comprehensive token system that serves as the foundation for all EchoTransact interfaces:

Color Tokens

/* Primary Colors */
--color-echo-navy: #0A2342;      /* Deep authoritative blue for stability */
--color-transaction-blue: #147AFC; /* Vibrant blue for energy and innovation */
--color-secure-white: #FFFFFF;    /* Clean white for clarity and transparency */

/* Secondary Colors */
--color-voice-teal: #00B2CA;     /* Distinctive teal for voice technology */
--color-verification-green: #4AAD52; /* Confident green for success states */
--color-platinum-gray: #E5E8ED;   /* Sophisticated gray for backgrounds */

/* Accent Color */
--color-alert-coral: #FF5A5F;     /* Vibrant coral for critical notifications */

/* Semantic Color Mapping */
--color-background-primary: var(--color-secure-white);
--color-background-secondary: var(--color-platinum-gray);
--color-text-primary: var(--color-echo-navy);
--color-text-secondary: rgba(10, 35, 66, 0.75);
--color-text-tertiary: rgba(10, 35, 66, 0.5);
--color-text-inverse: var(--color-secure-white);
--color-action-primary: var(--color-transaction-blue);
--color-action-hover: #0D6EE9;
--color-action-pressed: #0A5DD6;
--color-action-disabled: rgba(20, 122, 252, 0.4);
--color-border-default: rgba(10, 35, 66, 0.15);
--color-border-focus: var(--color-transaction-blue);
--color-success: var(--color-verification-green);
--color-error: var(--color-alert-coral);
--color-warning: #F9A826;
--color-info: var(--color-voice-teal);
--color-voice-indicator: var(--color-voice-teal);

Typography Tokens

/* Font Families */
--font-primary: 'Montserrat', sans-serif;
--font-secondary: 'IBM Plex Sans', sans-serif;

/* Font Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;

/* Font Sizes */
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 28px;
--font-size-4xl: 32px;
--font-size-5xl: 40px;

/* Line Heights */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;

/* Letter Spacing */
--letter-spacing-tight: -0.01em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.01em;

/* Typography Styles */
--text-heading-1: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-tight) var(--font-primary);
--text-heading-2: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-tight) var(--font-primary);
--text-heading-3: var(--font-weight-medium) var(--font-size-3xl)/var(--line-height-tight) var(--font-primary);
--text-heading-4: var(--font-weight-medium) var(--font-size-2xl)/var(--line-height-tight) var(--font-primary);
--text-subtitle: var(--font-weight-medium) var(--font-size-xl)/var(--line-height-normal) var(--font-primary);
--text-body-large: var(--font-weight-regular) var(--font-size-lg)/var(--line-height-normal) var(--font-primary);
--text-body: var(--font-weight-regular) var(--font-size-md)/var(--line-height-normal) var(--font-primary);
--text-body-small: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-normal) var(--font-primary);
--text-caption: var(--font-weight-light) var(--font-size-xs)/var(--line-height-normal) var(--font-primary);
--text-button: var(--font-weight-medium) var(--font-size-md)/var(--line-height-tight) var(--font-primary);
--text-label: var(--font-weight-medium) var(--font-size-sm)/var(--line-height-tight) var(--font-primary);
--text-technical: var(--font-weight-regular) var(--font-size-md)/var(--line-height-normal) var(--font-secondary);

Spacing Tokens

/* Base unit: 4px */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 40px;
--space-3xl: 48px;
--space-4xl: 64px;
--space-5xl: 80px;

/* Inset (Padding) */
--inset-2xs: var(--space-2xs);
--inset-xs: var(--space-xs);
--inset-sm: var(--space-sm);
--inset-md: var(--space-md);
--inset-lg: var(--space-lg);
--inset-xl: var(--space-xl);

/* Inset Squish (Horizontal emphasis) */
--inset-squish-xs: 4px 8px;
--inset-squish-sm: 6px 12px;
--inset-squish-md: 8px 16px;
--inset-squish-lg: 12px 24px;

/* Stack (Vertical spacing) */
--stack-2xs: var(--space-2xs);
--stack-xs: var(--space-xs);
--stack-sm: var(--space-sm);
--stack-md: var(--space-md);
--stack-lg: var(--space-lg);
--stack-xl: var(--space-xl);

/* Inline (Horizontal spacing) */
--inline-2xs: var(--space-2xs);
--inline-xs: var(--space-xs);
--inline-sm: var(--space-sm);
--inline-md: var(--space-md);
--inline-lg: var(--space-lg);
--inline-xl: var(--space-xl);

Border & Radius Tokens

/* Border Width */
--border-width-thin: 1px;
--border-width-medium: 2px;
--border-width-thick: 3px;

/* Border Radius */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;

/* Border Styles */
--border-solid: solid;
--border-dashed: dashed;

/* Composite Border Tokens */
--border-default: var(--border-width-thin) var(--border-solid) var(--color-border-default);
--border-focus: var(--border-width-medium) var(--border-solid) var(--color-border-focus);
--border-error: var(--border-width-thin) var(--border-solid) var(--color-error);

Shadow & Elevation Tokens

/* Shadow Levels */
--shadow-xs: 0 1px 2px rgba(10, 35, 66, 0.05);
--shadow-sm: 0 2px 4px rgba(10, 35, 66, 0.08);
--shadow-md: 0 4px 8px rgba(10, 35, 66, 0.1);
--shadow-lg: 0 8px 16px rgba(10, 35, 66, 0.12);
--shadow-xl: 0 16px 24px rgba(10, 35, 66, 0.16);

/* Elevation System */
--elevation-raised: var(--shadow-xs);
--elevation-card: var(--shadow-sm);
--elevation-popover: var(--shadow-md);
--elevation-modal: var(--shadow-lg);
--elevation-toast: var(--shadow-xl);

Animation & Transition Tokens

/* Duration */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-slower: 800ms;

/* Easing Curves */
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* Standard */
--ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); /* Deceleration, finishing an animation */
--ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1); /* Acceleration, starting an animation */
--ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1); /* Standard with more emphasis */

/* Animation Presets */
--transition-fade: opacity var(--duration-normal) var(--ease-standard);
--transition-slide: transform var(--duration-normal) var(--ease-decelerate);
--transition-scale: transform var(--duration-normal) var(--ease-standard);
--transition-color: color var(--duration-fast) var(--ease-standard);
--transition-background: background-color var(--duration-fast) var(--ease-standard);
--transition-border: border-color var(--duration-fast) var(--ease-standard);
--transition-shadow: box-shadow var(--duration-normal) var(--ease-standard);

Grid System

EchoTransact's component library implements a responsive grid system that ensures consistent layouts across all interfaces:

Grid Specifications

• 12-column grid with responsive breakpoints
• Fluid gutters that scale proportionally with viewport width
• Consistent margins that maintain proper content boundaries
• Nested grids for complex component layouts

Breakpoint System

/* Breakpoints */
--breakpoint-xs: 320px;  /* Small mobile */
--breakpoint-sm: 576px;  /* Mobile */
--breakpoint-md: 768px;  /* Tablet */
--breakpoint-lg: 992px;  /* Desktop */
--breakpoint-xl: 1200px; /* Large desktop */
--breakpoint-2xl: 1440px; /* Extra large desktop */

/* Container Widths */
--container-sm: 540px;
--container-md: 720px;
--container-lg: 960px;
--container-xl: 1140px;
--container-2xl: 1320px;

/* Grid Configuration */
--grid-columns: 12;
--grid-gutter-xs: var(--space-md);
--grid-gutter-sm: var(--space-md);
--grid-gutter-md: var(--space-lg);
--grid-gutter-lg: var(--space-lg);
--grid-gutter-xl: var(--space-xl);
--grid-margin-xs: var(--space-md);
--grid-margin-sm: var(--space-lg);
--grid-margin-md: var(--space-xl);
--grid-margin-lg: var(--space-xl);
--grid-margin-xl: var(--space-2xl);

Layout Principles

• Content-first approach that prioritizes readability and clarity
• Asymmetrical balance with intentional white space
• Progressive disclosure of information with clear hierarchy
• Responsive reflow that maintains usability across devices

Visual Style

EchoTransact's visual style embodies our Magician/Sage brand archetype combination, balancing innovation with trustworthiness:

Key Visual Characteristics

• Precision with Fluidity: Clean, structured layouts with subtle dynamic elements
• Technical Sophistication: Refined, professional aesthetic with premium details
• Transformative Energy: Dynamic elements that convey innovation and possibility
• Trusted Authority: Structured composition with clear information hierarchy

Material Treatment

• Layered Depth: Subtle shadows and elevation create dimensional hierarchy
• Refined Surfaces: Clean, uncluttered backgrounds with minimal texture
• Controlled Contrast: Intentional use of color and space to direct attention
• Sound Wave Motif: Abstract sound wave patterns as distinctive brand elements

Component Architecture

EchoTransact components follow a structured inheritance model:

graph TD
    A[Base Component] --> B[Input Controls]
    A --> C[Navigation Elements]
    A --> D[Information Displays]
    A --> E[Feedback Mechanisms]
    B --> B1[Text Fields]
    B --> B2[Selection Controls]
    B --> B3[Dropdown Controls]
    C --> C1[Navigation Bar]
    C --> C2[Tabs]
    C --> C3[Links & Buttons]
    D --> D1[Cards]
    D --> D2[Lists & Tables]
    D --> D3[Status Indicators]
    E --> E1[Alerts]
    E --> E2[Loading Indicators]
    E --> E3[Modals & Dialogs]

Component Composition Model

• Base Components: Core building blocks with fundamental properties
• Compound Components: Combinations of base components for complex interactions
• Layout Components: Structural elements that organize content
• Page Templates: Pre-configured layouts for common screen patterns

Component Naming Convention

• Follows a noun-variant-state pattern
• Uses PascalCase for component names
• Uses camelCase for properties and states

Core Components

Input Controls

Input controls enable users to enter and manipulate data within the EchoTransact system.

Text Fields

Text fields allow users to input and edit text. They support various formats including standard text, numbers, email, and password.

States:

• Default: Clean, bordered field with light background
• Focus: Highlighted with Transaction Blue border
• Filled: Contains user input with clear text
• Error: Alert Coral border with error message
• Disabled: Reduced opacity with non-interactive appearance
• Read-only: Displays information without editing capability

Variants:

• Standard: Full-width text field with standard height
• Compact: Reduced height for dense interfaces
• With Icon: Includes leading or trailing icon
• With Action: Includes trailing action button
• Password: Toggleable visibility for secure input
• Search: Specialized field with search icon and clear button

Implementation Details:

<div class="et-text-field">
  <label class="et-text-field__label">Email Address</label>
  <div class="et-text-field__container">
    <input type="email" class="et-text-field__input" placeholder="Enter your email" />
    <div class="et-text-field__icon">
      <!-- Icon SVG if needed -->
    </div>
  </div>
  <div class="et-text-field__helper">We'll never share your email</div>
</div>

Selection Controls

Selection controls allow users to select options or toggle settings.

Checkboxes

States:

• Unchecked: Empty box with border
• Checked: Filled with Transaction Blue and checkmark
• Indeterminate: Partially filled for mixed selection states
• Focus: Highlighted with focus ring
• Disabled: Reduced opacity with non-interactive appearance

Implementation Details:

<label class="et-checkbox">
  <input type="checkbox" class="et-checkbox__input" />
  <span class="et-checkbox__control"></span>
  <span class="et-checkbox__label">Remember my payment details</span>
</label>

Radio Buttons

States:

• Unselected: Empty circle with border
• Selected: Outer ring with filled center in Transaction Blue
• Focus: Highlighted with focus ring
• Disabled: Reduced opacity with non-interactive appearance

Implementation Details:

<label class="et-radio">
  <input type="radio" class="et-radio__input" name="payment" value="card" />
  <span class="et-radio__control"></span>
  <span class="et-radio__label">Credit Card</span>
</label>

Toggle Switches

States:

• Off: Gray track with thumb positioned left
• On: Transaction Blue track with thumb positioned right
• Focus: Highlighted with focus ring
• Disabled: Reduced opacity with non-interactive appearance

Implementation Details:

<label class="et-toggle">
  <input type="checkbox" class="et-toggle__input" />
  <span class="et-toggle__track"></span>
  <span class="et-toggle__thumb"></span>
  <span class="et-toggle__label">Enable voice authentication</span>
</label>

Dropdown Controls

Dropdown controls allow selection from a predefined list of options.

Select Menus

States:

• Default: Closed state showing selected value or placeholder
• Focus: Highlighted with Transaction Blue border
• Open: Expanded menu showing all options
• Error: Alert Coral border with error message
• Disabled: Reduced opacity with non-interactive appearance

Variants:

• Standard: Single selection dropdown
• Searchable: Includes search functionality
• Multi-select: Allows selection of multiple options
• With Icon: Includes contextual icons for options

Implementation Details:

<div class="et-select">
  <label class="et-select__label">Payment Method</label>
  <div class="et-select__container">
    <select class="et-select__control">
      <option value="" disabled selected>Choose a payment method</option>
      <option value="card">Credit Card</option>
      <option value="bank">Bank Transfer</option>
      <option value="wallet">Digital Wallet</option>
    </select>
    <div class="et-select__icon">
      <!-- Dropdown arrow icon -->
    </div>
  </div>
  <div class="et-select__helper">Select your preferred payment method</div>
</div>

Date and Time Inputs

Specialized inputs for capturing date and time information.

States:

• Default: Clean field showing placeholder or selected date
• Focus: Calendar or time picker open with interactive selection
• Filled: Shows selected date/time in formatted display
• Error: Alert Coral border with error message
• Disabled: Reduced opacity with non-interactive appearance

Variants:

• Date Picker: Calendar-based date selection
• Time Picker: Time selection with hour/minute controls
• Date Range: Selection of start and end dates
• Inline Calendar: Embedded calendar for immediate selection

Implementation Details:

<div class="et-date-picker">
  <label class="et-date-picker__label">Transaction Date</label>
  <div class="et-date-picker__container">
    <input type="text" class="et-date-picker__input" placeholder="MM/DD/YYYY" />
    <div class="et-date-picker__icon">
      <!-- Calendar icon -->
    </div>
  </div>
  <!-- Calendar dropdown would appear here when active -->
  <div class="et-date-picker__helper">Select the date of transaction</div>
</div>

Navigation Elements

Navigation elements help users move through the EchoTransact interfaces and access different features.

Navigation Bar

The navigation bar provides primary navigation through the application.

States:

• Default: Standard appearance with current section highlighted
• Collapsed: Compact version for mobile devices
• Expanded: Full navigation menu on desktop or when opened on mobile

Variants:

• Primary: Main application navigation with full feature set
• Secondary: Context-specific navigation within sections
• Mobile: Responsive version that collapses to hamburger menu
• Compact: Minimized version with icons only for space efficiency

Implementation Details:

<nav class="et-nav-bar">
  <div class="et-nav-bar__logo">
    <!-- EchoTransact logo -->
  </div>
  <ul class="et-nav-bar__menu">
    <li class="et-nav-bar__item et-nav-bar__item--active">
      <a href="#" class="et-nav-bar__link">Dashboard</a>
    </li>
    <li class="et-nav-bar__item">
      <a href="#" class="et-nav-bar__link">Transactions</a>
    </li>
    <li class="et-nav-bar__item">
      <a href="#" class="et-nav-bar__link">Settings</a>
    </li>
  </ul>
  <div class="et-nav-bar__actions">
    <!-- Action buttons like profile, notifications, etc. -->
  </div>
  <button class="et-nav-bar__mobile-toggle">
    <!-- Hamburger icon for mobile -->
  </button>
</nav>

Tabs

Tabs allow users to navigate between related content sections.

States:

• Active: Current tab highlighted with Transaction Blue indicator
• Inactive: Subdued appearance for non-selected tabs
• Hover: Subtle highlight indicating interactive element
• Disabled: Reduced opacity for unavailable tabs

Variants:

• Horizontal: Standard horizontal tab layout
• Vertical: Side tabs for vertical organization
• Pills: Rounded tab style for softer appearance
• Icons: Tab with icon and optional text
• Underlined: Minimal style with underline indicator only

Implementation Details:

<div class="et-tabs">
  <div class="et-tabs__list" role="tablist">
    <button class="et-tabs__tab et-tabs__tab--active" role="tab" aria-selected="true">
      Payment Details
    </button>
    <button class="et-tabs__tab" role="tab" aria-selected="false">
      Confirmation
    </button>
    <button class="et-tabs__tab" role="tab" aria-selected="false">
      Receipt
    </button>
  </div>
  <div class="et-tabs__content">
    <!-- Tab content would go here -->
  </div>
</div>

Links & Buttons

Interactive elements that trigger actions or navigation.

Buttons

States:

• Default: Standard appearance ready for interaction
• Hover: Slightly intensified appearance
• Active/Pressed: Visual feedback during click/tap
• Focus: Keyboard focus indicator
• Loading: Indicates processing with spinner
• Disabled: Reduced opacity with non-interactive appearance

Variants:

• Primary: High emphasis, filled with Transaction Blue
• Secondary: Medium emphasis, outlined style
• Tertiary: Low emphasis, text only
• Icon: Icon-only button with tooltip
• Icon with Text: Combined icon and text for clarity
• Danger: Alert Coral styling for destructive actions
• Success: Verification Green for confirmations

Implementation Details:

<!-- Primary Button -->
<button class="et-button et-button--primary">
  Complete Payment
</button>

<!-- Secondary Button -->
<button class="et-button et-button--secondary">
  Save for Later
</button>

<!-- Icon Button -->
<button class="et-button et-button--icon" aria-label="Close">
  <!-- Close icon SVG -->
</button>

Links

States:

• Default: Styled text indicating clickable element
• Hover: Underline or color change for emphasis
• Visited: Optional styling for visited links
• Focus: Keyboard focus indicator
• Active: Momentary feedback when clicked

Variants:

• Standard: Basic text link in Transaction Blue
• With Icon: Link with accompanying icon
• External: Indicates link opens in new window
• Navigation: Specialized styling for nav links
• Subtle: Reduced emphasis for secondary links

Implementation Details:

<a href="#" class="et-link">View transaction details</a>

<a href="#" class="et-link et-link--with-icon">
  <span class="et-link__text">Download receipt</span>
  <span class="et-link__icon">
    <!-- Download icon SVG -->
  </span>
</a>

Breadcrumbs

Breadcrumbs provide hierarchical navigation context.

States:

• Default: Chain of linked items showing path
• Current: Final item showing current location (non-interactive)
• Interactive: Previous items that can be clicked to navigate

Implementation Details:

<nav class="et-breadcrumbs" aria-label="Breadcrumb">
  <ol class="et-breadcrumbs__list">
    <li class="et-breadcrumbs__item">
      <a href="#" class="et-breadcrumbs__link">Home</a>
    </li>
    <li class="et-breadcrumbs__item">
      <a href="#" class="et-breadcrumbs__link">Transactions</a>
    </li>
    <li class="et-breadcrumbs__item et-breadcrumbs__item--current" aria-current="page">
      Payment Details
    </li>
  </ol>
</nav>

Information Displays

Information displays present content and data to users in structured formats.

Cards

Cards are container components that group related content.

States:

• Default: Standard appearance with contained content
• Hover: Subtle elevation increase (when interactive)
• Active: Emphasized state for selected cards
• Disabled: Reduced opacity for inactive cards

Variants:

• Basic: Simple container with padding
• Interactive: Clickable card that navigates or expands
• Highlighted: Emphasized card for important information
• Sectioned: Card with distinct content sections
• With Header: Card with prominent header area
• With Footer: Card with action area at bottom
• Expandable: Card that can toggle between collapsed/expanded

Implementation Details:

<div class="et-card">
  <div class="et-card__header">
    <h3 class="et-card__title">Transaction Summary</h3>
    <div class="et-card__actions">
      <!-- Optional actions -->
    </div>
  </div>
  <div class="et-card__content">
    <!-- Card content -->
    <p class="et-card__text">Your payment of $125.00 was successfully processed.</p>
  </div>
  <div class="et-card__footer">
    <button class="et-button et-button--secondary">View Details</button>
  </div>
</div>

Lists & Tables

Components for displaying collections of related data.

Lists

Variants:

• Basic: Simple vertical list of items
• Interactive: Clickable list items
• With Icons: List items with leading icons
• With Avatars: List items with leading avatars
• With Actions: List items with trailing actions
• Grouped: List with category groupings
• Ordered/Numbered: Sequential list with numbering

Implementation Details:

<ul class="et-list">
  <li class="et-list__item">
    <div class="et-list__icon">
      <!-- Icon SVG -->
    </div>
    <div class="et-list__content">
      <div class="et-list__primary">Credit Card Payment</div>
      <div class="et-list__secondary">Visa ending in 4242</div>
    </div>
    <div class="et-list__action">
      <button class="et-button et-button--icon">
        <!-- Action icon -->
      </button>
    </div>
  </li>
  <!-- Additional list items -->
</ul>

Tables

Variants:

• Basic: Simple data table with rows and columns
• Sortable: Table with sortable columns
• Selectable: Table with selectable rows
• Paginated: Table with pagination controls
• Expandable: Table with expandable row details
• Responsive: Table that adapts to different screen sizes

Implementation Details:

<div class="et-table-container">
  <table class="et-table">
    <thead class="et-table__header">
      <tr>
        <th class="et-table__cell et-table__cell--header">Date</th>
        <th class="et-table__cell et-table__cell--header">Description</th>
        <th class="et-table__cell et-table__cell--header">Amount</th>
        <th class="et-table__cell et-table__cell--header">Status</th>
      </tr>
    </thead>
    <tbody class="et-table__body">
      <tr class="et-table__row">
        <td class="et-table__cell">05/23/2024</td>
        <td class="et-table__cell">Product Purchase</td>
        <td class="et-table__cell">$125.00</td>
        <td class="et-table__cell">
          <span class="et-badge et-badge--success">Completed</span>
        </td>
      </tr>
      <!-- Additional rows -->
    </tbody>
  </table>
  <div class="et-table__pagination">
    <!-- Pagination controls -->
  </div>
</div>

Status Indicators

Components that communicate state information.

Badges

Variants:

• Default: Standard informational badge
• Success: Verification Green for positive states
• Warning: Amber for cautionary states
• Error: Alert Coral for error states
• Info: Voice Teal for informational states
• Numeric: Contains numeric value (counts/notifications)
• Dot: Minimal indicator without text

Implementation Details:

<span class="et-badge et-badge--success">Verified</span>
<span class="et-badge et-badge--error">Failed</span>
<span class="et-badge et-badge--warning">Pending</span>
<span class="et-badge et-badge--info">New</span>
<span class="et-badge et-badge--numeric">5</span>
<span class="et-badge et-badge--dot"></span>

Progress Indicators

Variants:

• Linear: Horizontal progress bar
• Circular: Radial progress indicator
• Determinate: Shows specific percentage completion
• Indeterminate: Animated indicator for unknown duration
• Steps: Shows progress through discrete steps
• With Label: Includes text percentage or description

Implementation Details:

<!-- Linear Progress -->
<div class="et-progress et-progress--linear">
  <div class="et-progress__track">
    <div class="et-progress__bar" style="width: 75%"></div>
  </div>
  <div class="et-progress__label">75%</div>
</div>

<!-- Circular Progress -->
<div class="et-progress et-progress--circular">
  <svg viewBox="0 0 36 36">
    <!-- SVG circle implementation -->
  </svg>
  <div class="et-progress__label">75%</div>
</div>

Voice Interaction Indicators

Specialized indicators for voice interactions.

Variants:

• Listening: Animated sound wave visualization
• Processing: Pulsing animation indicating voice processing
• Confirmation: Visual confirmation of voice command
• Error: Indication of voice recognition error

Implementation Details:

<div class="et-voice-indicator et-voice-indicator--listening">
  <div class="et-voice-indicator__wave">
    <!-- Animated sound wave visualization -->
    <span class="et-voice-indicator__bar"></span>
    <span class="et-voice-indicator__bar"></span>
    <span class="et-voice-indicator__bar"></span>
    <span class="et-voice-indicator__bar"></span>
    <span class="et-voice-indicator__bar"></span>
  </div>
  <div class="et-voice-indicator__label">Listening...</div>
</div>

Feedback Mechanisms

Feedback mechanisms communicate system status and response to user actions.

Alerts

Alerts provide important information, warnings, or error messages.

Variants:

• Info: Voice Teal background for general information
• Success: Verification Green for positive outcomes
• Warning: Amber for potential issues
• Error: Alert Coral for critical problems
• With Icon: Includes contextual icon
• Dismissible: Can be closed by the user
• With Actions: Includes related action buttons

Implementation Details:

<div class="et-alert et-alert--success">
  <div class="et-alert__icon">
    <!-- Success icon SVG -->
  </div>
  <div class="et-alert__content">
    <div class="et-alert__title">Payment Successful</div>
    <div class="et-alert__message">Your transaction has been completed successfully.</div>
  </div>
  <button class="et-alert__close" aria-label="Close">
    <!-- Close icon SVG -->
  </button>
</div>

Toast Notifications

Brief, non-modal messages that appear temporarily.

Variants:

• Info: General information notification
• Success: Positive confirmation
• Warning: Cautionary notification
• Error: Error notification
• With Action: Includes action button
• Persistent: Remains until dismissed
• Auto-dismiss: Disappears automatically after timeout

Implementation Details:

<div class="et-toast et-toast--success">
  <div class="et-toast__icon">
    <!-- Success icon SVG -->
  </div>
  <div class="et-toast__content">
    Payment processed successfully
  </div>
  <button class="et-toast__close" aria-label="Close">
    <!-- Close icon SVG -->
  </button>
</div>

Loading Indicators

Visual cues that indicate content or action is processing.

Variants:

• Spinner: Rotating circular indicator
• Pulse: Pulsing dot or circle
• Linear: Horizontal progress bar
• Skeleton: Placeholder content shapes
• With Text: Includes descriptive message
• Overlay: Full-screen loading with background overlay
• Inline: Contained within a specific element

Implementation Details:

<!-- Spinner -->
<div class="et-spinner" role="status">
  <svg viewBox="0 0 50 50">
    <!-- SVG spinner implementation -->
  </svg>
  <span class="et-spinner__text">Processing payment...</span>
</div>

<!-- Skeleton -->
<div class="et-skeleton">
  <div class="et-skeleton__header"></div>
  <div class="et-skeleton__text"></div>
  <div class="et-skeleton__text"></div>
  <div class="et-skeleton__text et-skeleton__text--short"></div>
</div>

Modals & Dialogs

Focused overlay windows for important interactions.

Variants:

• Standard: Basic modal with header, content, and actions
• Confirmation: Specialized for yes/no decisions
• Form: Contains form elements for data collection
• Alert: Emphasizes important information
• Full-screen: Expands to fill entire viewport
• Side Panel: Slides in from screen edge

States:

• Entering: Animation when appearing
• Visible: Fully displayed state
• Exiting: Animation when dismissing

Implementation Details:

<div class="et-modal" role="dialog" aria-modal="true">
  <div class="et-modal__backdrop"></div>
  <div class="et-modal__container">
    <div class="et-modal__header">
      <h2 class="et-modal__title">Confirm Payment</h2>
      <button class="et-modal__close" aria-label="Close">
        <!-- Close icon SVG -->
      </button>
    </div>
    <div class="et-modal__content">
      <p>Are you sure you want to process this payment of $125.00?</p>
    </div>
    <div class="et-modal__footer">
      <button class="et-button et-button--secondary">Cancel</button>
      <button class="et-button et-button--primary">Confirm</button>
    </div>
  </div>
</div>

Tooltips & Popovers

Contextual information that appears on hover or click.

Tooltips

Variants:

• Simple: Basic text tooltip
• With Icon: Includes informational icon
• Rich: Enhanced tooltip with formatted content
• Directional: Can appear in different positions (top, right, bottom, left)

Implementation Details:

<div class="et-tooltip-trigger">
  <button class="et-button et-button--icon" aria-label="More information">
    <!-- Info icon SVG -->
  </button>
  <div class="et-tooltip et-tooltip--top">
    This is a secure transaction using 256-bit encryption.
  </div>
</div>

Popovers

Variants:

• Basic: Simple content popover
• With Header: Includes title section
• With Actions: Includes action buttons
• Interactive: Contains interactive elements
• Directional: Can appear in different positions

Implementation Details:

<div class="et-popover-trigger">
  <button class="et-button">Account Options</button>
  <div class="et-popover et-popover--bottom">
    <div class="et-popover__header">
      <h3 class="et-popover__title">Account Actions</h3>
    </div>
    <div class="et-popover__content">
      <ul class="et-list">
        <li class="et-list__item">View Profile</li>
        <li class="et-list__item">Account Settings</li>
        <li class="et-list__item">Sign Out</li>
      </ul>
    </div>
  </div>
</div>

Component Patterns

State Variations

EchoTransact components implement consistent state variations across the system:

Interactive States

• Default: Standard appearance, ready for interaction
• Hover: Visual feedback when pointer is over element
• Focus: Clear indication when element receives keyboard focus
• Active/Pressed: Visual feedback during click/tap
• Disabled: Reduced opacity (60%) with non-interactive appearance

Validation States

• Valid: Optional subtle indication of valid input
• Invalid: Clear error indication with Alert Coral and error message
• Pending Validation: Indication that validation is in progress

Selection States

• Unselected: Default state for selectable items
• Selected: Clear visual indication of selection
• Partially Selected: Indication of mixed selection state

Loading States

• Loading: Visual indication that content or action is processing
• Loaded: Standard appearance with complete content
• Error Loading: Indication that content failed to load

Expansion States

• Collapsed: Compact state with hidden content
• Expanded: Open state with visible content
• Expanding/Collapsing: Transitional animations between states

Responsive Behavior

EchoTransact components adapt across different screen sizes and devices:

Breakpoint Adaptations

Components respond to standard breakpoints:

• Mobile (< 576px): Simplified layouts, stacked elements
• Tablet (576px - 992px): Balanced layouts with some adaptation
• Desktop (> 992px): Full-featured layouts with optimal spacing

Adaptation Patterns

• Stack to Grid: Elements stack vertically on mobile, arrange in grid on larger screens
• Collapse to Expand: Navigation collapses to hamburger menu on mobile
• Resize and Reflow: Components resize proportionally and reflow as needed
• Hide/Show: Non-critical elements may be hidden on smaller screens
• Transform: Components transform into more compact versions

Touch Optimization

• Increased Touch Targets: Minimum 44x44px for interactive elements on touch devices
• Reduced Hover Dependency: No critical functions rely solely on hover
• Swipe Patterns: Support for touch gestures on carousels and other interactive elements

Composition Patterns

Guidelines for combining components effectively:

Layout Patterns

• Card Grid: Grid of card components for collections of similar items
• List-Detail: Master list with detail view for selected item
• Dashboard: Collection of card components arranged in meaningful groups
• Form Layout: Structured arrangement of input controls in logical groups
• Confirmation Flow: Sequential presentation of related steps

Spacing Patterns

• Content Density: Appropriate spacing based on information complexity
• Grouping: Related elements maintain closer proximity
• Hierarchy: Important elements receive more surrounding space
• Section Separation: Clear spacing between distinct content sections

Common Combinations

• Form Field + Helper Text + Validation: Standard pattern for input with guidance
• Icon + Text: Combined for improved comprehension
• Label + Control: Consistent labeling pattern for all interactive elements
• Header + Content + Actions: Standard container organization

Accessibility Implementations

EchoTransact components implement comprehensive accessibility features:

Keyboard Navigation

• Focus Management: Logical tab order with visible focus indicators
• Keyboard Shortcuts: Support for common keyboard patterns
• Focus Trapping: Modal dialogs trap focus until dismissed
• Skip Navigation: Allow keyboard users to bypass repetitive navigation

Screen Reader Support

• Semantic HTML: Proper HTML5 semantic elements
• ARIA Attributes: Appropriate ARIA roles, states, and properties
• Alternative Text: Descriptive text for all meaningful images
• Live Regions: Dynamic content changes announced appropriately

Visual Accessibility

• Color Contrast: All text meets WCAG AA standard (4.5:1 for normal text, 3:1 for large text)
• Color Independence: Information never conveyed by color alone
• Text Sizing: All text can scale up to 200% without loss of functionality
• Focus Visibility: High-contrast focus indicators

Input Modality Support

• Touch Support: Properly sized touch targets
• Voice Input: Support for voice navigation and interaction
• Reduced Motion: Respect user preferences for reduced motion
• Pointer Cancellation: Users can abort actions before completion

Implementation Guide

Code Architecture

The EchoTransact component library follows a structured architecture:

Component Structure

• Atomic Design Methodology: Components organized by atoms, molecules, organisms, templates, and pages
• Single Responsibility: Each component has a focused purpose
• Composable Architecture: Complex components built from simpler ones
• Consistent API: Predictable props and event handling

CSS Methodology

• BEM Naming Convention: Block, Element, Modifier pattern
• CSS Custom Properties: Leveraging design tokens through variables
• Scoped Styles: Component styles isolated to prevent conflicts
• Mobile-First Approach: Base styles for mobile with progressive enhancement

JavaScript Patterns

• Unidirectional Data Flow: Props down, events up
• Controlled Components: State managed by parent component
• Render Props Pattern: Flexible component composition
• Compound Components: Related components that work together

Framework Integration

EchoTransact components are implemented with specific framework considerations:

React Implementation

• Functional Components: Modern React patterns with hooks
• Context API: For theme and global state management
• Prop Types: Clear type definitions for all props
• Ref Forwarding: Support for DOM access when needed

Example React Implementation:

// Button component in React
import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({
  variant = 'primary',
  size = 'medium',
  disabled = false,
  children,
  onClick,
  type = 'button',
  ...props
}) => {
  const baseClass = 'et-button';
  const classes = [
    baseClass,
    `${baseClass}--${variant}`,
    `${baseClass}--${size}`,
  ].join(' ');

  return (
    <button
      className={classes}
      disabled={disabled}
      onClick={onClick}
      type={type}
      {...props}
    >
      {children}
    </button>
  );
};

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  disabled: PropTypes.bool,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
};

export default Button;

Vue Implementation

• Single File Components: Vue's .vue file structure
• Props Validation: Clear type definitions and validation
• Emit Events: Standardized event handling
• Slots: Flexible content composition

Example Vue Implementation:

<!-- Button.vue -->
<template>
  <button
    :class="classes"
    :disabled="disabled"
    :type="type"
    @click="$emit('click', $event)"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'EtButton',
  props: {
    variant: {
      type: String,
      default: 'primary',
      validator: value => ['primary', 'secondary', 'tertiary'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'button',
      validator: value => ['button', 'submit', 'reset'].includes(value)
    }
  },
  computed: {
    classes() {
      return [
        'et-button',
        `et-button--${this.variant}`,
        `et-button--${this.size}`
      ];
    }
  }
}
</script>

Performance Optimization

The EchoTransact component library implements performance best practices:

Rendering Optimization

• Virtual DOM Efficiency: Minimizing unnecessary renders
• Memoization: Caching computed values and component renders
• Lazy Loading: Components loaded only when needed
• Code Splitting: Breaking bundle into smaller chunks

Asset Optimization

• Icon System: SVG sprite system for efficient icon usage
• Image Optimization: Proper sizing and format selection
• Font Loading: Optimized font loading with fallbacks
• CSS Optimization: Minimized CSS with critical path rendering

State Management

• Localized State: Keep state as close to usage as possible
• Efficient Updates: Batch state updates when possible
• Selective Rendering: Update only what changed
• Context Boundaries: Prevent unnecessary re-renders

Documentation System

Comprehensive documentation ensures proper component usage:

API Documentation

• Props/Parameters: All available configuration options
• Events/Callbacks: All emitted events and callbacks
• Methods: Public methods that can be called
• CSS Customization: Available CSS variables and classes
• Accessibility: Specific accessibility features and considerations

Usage Examples

• Basic Usage: Simple implementation examples
• Common Patterns: Frequently used configurations
• Advanced Usage: Complex implementation scenarios
• Anti-patterns: What to avoid when using components

Interactive Playground

• Live Editor: Real-time component configuration
• Code Generation: Exportable code snippets
• Prop Exploration: Interactive prop adjustment
• Theme Testing: Preview with different theme settings

Conclusion

The EchoTransact component library provides a comprehensive set of UI components that embody our brand identity while ensuring consistent, accessible, and performant user experiences. By following the patterns and guidelines in this documentation, developers and designers can create cohesive interfaces that enable secure voice-initiated payments with intuitive user flows.

The component system balances the innovative transformation of our Magician archetype with the trusted expertise of our Sage characteristics, creating interfaces that feel both technologically advanced and humanly accessible. Through consistent application of these components, we'll build experiences that resonate with businesses implementing Voice AI while inspiring trust among end-users completing transactions.

---

Version: 1.0.0
Created: October 15, 2025
Last Updated: October 15, 2025