Component framework

Accessibility features

The design system includes built-in accessibility features:

• Focus indicators for keyboard navigation
• High contrast mode support
• Reduced motion support
• Screen reader utilities

Accessibility Examples

Screen Reader Support

Focus Management

Patient ID

Enter the unique patient identifier

HTML Example

<!-- Screen reader only content -->
<button class="btn btn-primary">
  Delete
  <span class="sr-only">medical image from patient record</span>
</button>

<!-- Focus management -->
<div class="medical-form">
  <label for="patientId" class="form-label form-required">Patient ID</label>
  <input 
    type="text" 
    id="patientId"
    class="form-control focus-ring"
    aria-describedby="patientIdHelp"
    required
  >
  <div id="patientIdHelp" class="text-secondary text-small">
    Enter the 8-digit patient identifier
  </div>
</div>

Web Component

render() {
  return html`
    <div class="image-analysis-panel" role="main" aria-label="Medical Image Analysis">
      <div class="analysis-controls" role="toolbar" aria-label="Analysis tools">
        <button 
          class="btn btn-primary focus-ring"
          @click=${this.startAnalysis}
          aria-describedby="analysisHelp"
        >
          Start AI Analysis
        </button>
        
        <div id="analysisHelp" class="sr-only">
          Begins automated analysis of the selected medical images
        </div>
      </div>
      
      <div class="results-section" aria-live="polite">
        ${this.analysisComplete ? html`
          <div class="alert" role="alert">
            <span class="sr-only">Analysis complete.</span>
            Analysis completed successfully. ${this.results.length} findings detected.
          </div>
        ` : ''}
      </div>
    </div>
  `;
}

Badges and status indicators

Badge and Status Examples

DefaultNormalReviewProcessingArchived

Patient Status Dashboard

John DoeActive2 Pending

HTML Example

<span class="badge">Default</span>
<span class="badge badge-success">Normal</span>
<span class="badge badge-warning">Review</span>
<span class="badge badge-info">Processing</span>
<span class="badge badge-secondary">Archived</span>

<!-- In context -->
<div class="patient-status">
  Study Status: <span class="badge badge-success">Completed</span>
</div>

Web Component

render() {
  return html`
    <div class="scan-results">
      ${this.scans.map(scan => html`
        <div class="scan-item">
          <span class="scan-name">${scan.name}</span>
          <span class="badge ${this.getBadgeClass(scan.status)}">
            ${scan.status}
          </span>
        </div>
      `)}
    </div>
  `;
}

private getBadgeClass(status: string) {
  const classes = {
    'completed': 'badge-success',
    'processing': 'badge-info', 
    'error': 'badge-danger',
    'review': 'badge-warning'
  };
  return `badge ${classes[status] || 'badge-secondary'}`;
}

Buttons

Primary buttons

Primary Button Variants

HTML Example

<!-- Primary button -->
<button class="btn btn-primary">Start Analysis</button>
<button class="primary-button">Save Report</button>

<!-- Secondary button -->
<button class="btn btn-secondary">Cancel</button>
<button class="secondary-button">Reset</button>

<!-- Button states -->
<button class="btn btn-primary" disabled>Processing...</button>

Web Component

render() {
  return html`
    <div class="button-group">
      <button class="btn btn-primary" @click=${this.startAnalysis}>
        Start Analysis
      </button>
      <button class="btn btn-secondary" @click=${this.cancel}>
        Cancel
      </button>
    </div>
  `;
}

Button variants

Button States and Variants

HTML Example

<button class="btn btn-success">Save Changes</button>
<button class="btn btn-warning">Review Required</button>
<button class="btn btn-danger">Delete Image</button>

<!-- Icon button -->
<button class="btn-icon" title="Settings">
  <svg class="icon">...</svg>
</button>

Web Component

render() {
  return html`
    <div class="medical-actions">
      <button class="btn btn-success" @click=${this.approveReport}>
        Approve Report
      </button>
      <button class="btn btn-warning" @click=${this.flagForReview}>
        Flag for Review
      </button>
      <button class="btn btn-danger" @click=${this.rejectReport}>
        Reject Report
      </button>
    </div>
  `;
}

Cards and containers

Basic cards

Card Component Example

Patient Information

John Doe

Patient ID: PT001234

Last scan: March 15, 2024

HTML Example

<div class="card">
  <div class="card-header">
    <h6>Patient Information</h6>
  </div>
  <div class="card-body">
    <p><strong>Name:</strong> John Doe</p>
    <p><strong>DOB:</strong> 1980-05-15</p>
    <p><strong>ID:</strong> PT001234</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">View Details</button>
  </div>
</div>

Web Component

render() {
  return html`
    <div class="patient-overview">
      <div class="card">
        <div class="card-header">
          <h6>Current Study</h6>
        </div>
        <div class="card-body">
          <p><strong>Study Type:</strong> ${this.studyType}</p>
          <p><strong>Images:</strong> ${this.imageCount}</p>
          <div class="progress-indicator">
            <div class="badge badge-info">In Progress</div>
          </div>
        </div>
      </div>
    </div>
  `;
}

Box containers

Box Container Component

Scan Parameters

Resolution

1024x1024

Contrast

Enhanced

HTML Example

<div class="box-container">
  <div class="box-container-title">
    Medical Images
  </div>
  <div class="box-container-content">
    <div class="image-grid">
      <!-- Image thumbnails here -->
    </div>
  </div>
</div>

Web Component

render() {
  return html`
    <div class="imaging-panel">
      <div class="box-container">
        <div class="box-container-title">
          Analysis Results
        </div>
        <div class="box-container-content">
          ${this.results.map(result => html`
            <div class="result-item">
              <span class="badge ${result.status === 'normal' ? 'badge-success' : 'badge-warning'}">
                ${result.status}
              </span>
              <span>${result.description}</span>
            </div>
          `)}
        </div>
      </div>
    </div>
  `;
}

Component states and interactions

Interactive States and Validation

Interactive States

Focus States

Validation States

Valid email address

This field is required

HTML Example

<!-- Interactive states -->
<button class="btn btn-primary state-hover">Hover effect</button>
<button class="btn btn-primary active">Active state</button>
<button class="btn btn-primary disabled">Disabled state</button>

<!-- Focus states -->
<input type="text" class="form-control focus-ring" placeholder="Focused input">

<!-- Validation states -->
<div class="form-group">
  <input type="email" class="form-control is-valid" value="doctor@hospital.com">
  <div class="text-success text-small">Valid email format</div>
</div>

<div class="form-group">
  <input type="text" class="form-control is-invalid" placeholder="Required field">
  <div class="text-danger text-small">This field is required</div>
</div>

Web Component

render() {
  return html`
    <div class="patient-form">
      <div class="form-group">
        <label class="form-label form-required">Patient Email</label>
        <input 
          type="email"
          class="form-control ${this.emailValid ? 'is-valid' : 'is-invalid'}"
          .value=${this.patientEmail}
          @input=${this.validateEmail}
        >
        ${this.emailValid 
          ? html`<div class="text-success text-small">Valid email address</div>`
          : html`<div class="text-danger text-small">Please enter a valid email</div>`
        }
      </div>
      
      <div class="form-actions d-flex justify-end">
        <button 
          class="btn btn-secondary mr-sm"
          @click=${this.cancel}
        >
          Cancel
        </button>
        <button 
          class="btn btn-primary ${this.isSubmitting ? 'disabled' : ''}"
          ?disabled=${this.isSubmitting}
          @click=${this.submit}
        >
          ${this.isSubmitting ? 'Saving...' : 'Save Patient'}
        </button>
      </div>
    </div>
  `;
}

private validateEmail(e: Event) {
  const email = (e.target as HTMLInputElement).value;
  this.patientEmail = email;
  this.emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

Form elements

Input fields

Form Input Examples

Patient ID

Study Date

Email Address

Valid email format

Required Field

This field cannot be empty

HTML Example

<div class="form-group">
  <label class="form-label">Patient ID</label>
  <input type="text" class="form-control" placeholder="Enter patient ID">
</div>

<div class="form-group">
  <label class="form-label form-required">Study Date</label>
  <input type="date" class="form-control form-control-sm">
</div>

<!-- Validation states -->
<input type="email" class="form-control is-valid" value="patient@example.com">
<input type="text" class="form-control is-invalid" placeholder="Required field">

Web Component

render() {
  return html`
    <form class="patient-form">
      <div class="form-group">
        <label class="form-label form-required">Patient Name</label>
        <input 
          type="text" 
          class="form-control ${this.isValid ? 'is-valid' : 'is-invalid'}"
          .value=${this.patientName}
          @input=${this.handleInput}
        >
      </div>
      
      <div class="form-group">
        <label class="form-label">Notes</label>
        <textarea class="form-control" rows="3"></textarea>
      </div>
    </form>
  `;
}

Switch controls

Toggle Switch Controls

Enable Auto-Analysis

Send Notifications

HTML Example

<div class="form-group">
  <label>Enable Auto-Analysis</label>
  <div class="switch-line checked" onclick="toggleSwitch(this)"></div>
</div>

<script>
function toggleSwitch(element) {
  element.classList.toggle('checked');
}
</script>

Web Component

render() {
  return html`
    <div class="settings-panel">
      <div class="form-group">
        <label>Highlight Anomalies</label>
        <div 
          class="switch-line ${this.highlightAnomalies ? 'checked' : ''}"
          @click=${this.toggleHighlight}
        ></div>
      </div>
    </div>
  `;
}

private toggleHighlight() {
  this.highlightAnomalies = !this.highlightAnomalies;
}

Icons and visual elements

Icons, Spinners, and Visual Effects

Icon Sizes

🏥🔍📊

Loading Spinner

Processing medical scan...

Shadows

Enhanced card with shadow

Subtle shadow panel

HTML Example

<!-- Icon sizes -->
<svg class="icon"><!-- SVG content --></svg>
<svg class="icon icon-inline"><!-- Inline icon --></svg>
<svg class="icon icon-large"><!-- Large icon --></svg>

<!-- Loading spinner -->
<div class="d-flex align-center">
  <div class="spinner-circle"></div>
  <span class="ml-sm">Processing medical images...</span>
</div>

<!-- Shadows -->
<div class="card drop-shadow">Enhanced card with shadow</div>
<div class="medical-panel shadow-light">Subtle shadow panel</div>

Web Component

render() {
  return html`
    <div class="analysis-status">
      ${this.isProcessing ? html`
        <div class="d-flex align-center justify-center p-lg">
          <div class="spinner-circle"></div>
          <span class="ml-md">Analyzing medical images...</span>
        </div>
      ` : html`
        <div class="results-panel drop-shadow fade-in">
          <div class="d-flex align-center mb-md">
            <svg class="icon icon-large text-success">
              <!-- Success checkmark icon -->
            </svg>
            <h4 class="ml-sm mb-0">Analysis Complete</h4>
          </div>
          
          <div class="results-summary">
            ${this.analysisResults.map(result => html`
              <div class="result-row d-flex justify-between align-center p-sm">
                <span class="d-flex align-center">
                  <svg class="icon icon-inline mr-xs">
                    <!-- Result icon -->
                  </svg>
                  ${result.name}
                </span>
                <span class="badge ${this.getStatusBadge(result.status)}">
                  ${result.status}
                </span>
              </div>
            `)}
          </div>
        </div>
      `}
    </div>
  `;
}

Layout utilities

Display utilities

Layout and Grid Examples

Medical Dashboard

Total Patients

1,247

Pending Reviews

23

Completed Today

156

This content is only visible on tablet and larger screens

HTML Example

<div class="d-flex justify-between align-center">
  <h3>Patient Report</h3>
  <button class="btn btn-primary">Export PDF</button>
</div>

<div class="d-grid grid-cols-3 custom-grid-large">
  <div class="card">Scan 1</div>
  <div class="card">Scan 2</div>
  <div class="card">Scan 3</div>
</div>

<!-- Responsive display -->
<div class="d-none d-tablet-block">Tablet and up only</div>
<div class="d-desktop-flex">Desktop flex layout</div>

Web Component

render() {
  return html`
    <div class="medical-dashboard">
      <!-- Header with actions -->
      <div class="d-flex justify-between align-center mb-lg">
        <h2>Medical Image Viewer</h2>
        <div class="d-flex">
          <button class="btn btn-secondary">Settings</button>
          <button class="btn btn-primary">Export</button>
        </div>
      </div>
      
      <!-- Image grid -->
      <div class="d-grid grid-cols-2 grid-cols-sm-1 custom-grid-medium">
        ${this.images.map(image => html`
          <div class="image-container card">
            <img src="${image.thumbnail}" alt="${image.description}">
          </div>
        `)}
      </div>
    </div>
  `;
}

Spacing utilities

Spacing and Form Layout

Patient Registration Form

First Name

Last Name

Medical ID

HTML Example

<!-- Padding -->
<div class="p-lg">Large padding all sides</div>
<div class="px-md py-sm">Medium horizontal, small vertical</div>

<!-- Margins -->
<div class="mb-lg">Large bottom margin</div>
<div class="mx-auto">Centered with auto margins</div>

<!-- Medical form example -->
<form class="p-md">
  <div class="form-group mb-md">
    <label class="form-label mb-sm">Patient ID</label>
    <input type="text" class="form-control">
  </div>
  
  <div class="form-group mb-lg">
    <label class="form-label mb-sm">Study Notes</label>
    <textarea class="form-control"></textarea>
  </div>
  
  <button class="btn btn-primary">Save Study</button>
</form>

Web Component

render() {
  return html`
    <div class="patient-panel p-md">
      <div class="patient-header mb-lg">
        <h3 class="mb-sm">${this.patient.name}</h3>
        <div class="patient-meta">
          <span class="badge badge-info mb-xs">ID: ${this.patient.id}</span>
          <span class="text-secondary text-small">DOB: ${this.patient.dob}</span>
        </div>
      </div>
      
      <div class="studies-section">
        <h4 class="mb-md">Recent Studies</h4>
        <div class="studies-list">
          ${this.studies.map(study => html`
            <div class="study-item p-sm mb-sm card">
              <div class="d-flex justify-between align-center">
                <span>${study.type}</span>
                <span class="text-secondary text-small">${study.date}</span>
              </div>
            </div>
          `)}
        </div>
      </div>
    </div>
  `;
}

Modals

Modal Dialog Component

Medical Image Viewer

📷 Medical Image Preview

Annotation

HTML Example

<div class="modal-overlay" style="display: none;" id="imageModal">
  <div class="modal-container">
    <div class="modal-header">
      <h4>Medical Image Viewer</h4>
      <button class="btn-icon" onclick="closeModal()">×</button>
    </div>
    <div class="modal-body">
      <img src="medical-scan.jpg" alt="Medical scan" style="width: 100%;">
      <div class="image-metadata mt-md">
        <p><strong>Study Date:</strong> 2024-08-18</p>
        <p><strong>Modality:</strong> CT Scan</p>
        <p><strong>Body Part:</strong> Chest</p>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal()">Close</button>
      <button class="btn btn-primary">Download DICOM</button>
    </div>
  </div>
</div>

<script>
function closeModal() {
  document.getElementById('imageModal').style.display = 'none';
}
</script>

Web Component

render() {
  return html`
    <div class="image-viewer">
      <!-- Thumbnail grid -->
      <div class="d-grid grid-cols-4 custom-grid-medium">
        ${this.images.map((image, index) => html`
          <img 
            src="${image.thumbnail}" 
            alt="Medical image ${index + 1}"
            class="image-thumb"
            @click=${() => this.openModal(image)}
          >
        `)}
      </div>
      
      <!-- Modal -->
      ${this.selectedImage ? html`
        <div class="modal-overlay" @click=${this.closeModal}>
          <div class="modal-container" @click=${e => e.stopPropagation()}>
            <div class="modal-header">
              <h4>Medical Image Analysis</h4>
              <button class="btn-icon" @click=${this.closeModal}>×</button>
            </div>
            <div class="modal-body">
              <img src="${this.selectedImage.fullSize}" alt="Medical scan">
              <div class="analysis-panel mt-md p-md bg-secondary">
                <h5>Analysis Results</h5>
                <div class="results-grid">
                  ${this.selectedImage.analysis.map(result => html`
                    <div class="result-item d-flex justify-between">
                      <span>${result.parameter}</span>
                      <span class="badge ${result.status === 'normal' ? 'badge-success' : 'badge-warning'}">
                        ${result.value}
                      </span>
                    </div>
                  `)}
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-secondary" @click=${this.closeModal}>Close</button>
              <button class="btn btn-primary" @click=${this.exportReport}>Export Report</button>
            </div>
          </div>
        </div>
      ` : ''}
    </div>
  `;
}

private openModal(image: MedicalImage) {
  this.selectedImage = image;
}

private closeModal() {
  this.selectedImage = null;
}

Navigation and app bar

Navigation Component

HTML Example

<nav class="app-bar">
  <div class="nav-brand">
    <h4>Acuitas Medical Platform</h4>
  </div>
  <div class="nav">
    <a href="#" class="nav-link">Dashboard</a>
    <a href="#" class="nav-link">Patients</a>
    <a href="#" class="nav-link">Studies</a>
    <a href="#" class="nav-link">Reports</a>
  </div>
  <div class="nav-actions">
    <button class="btn btn-secondary">Settings</button>
    <button class="btn btn-primary">New Study</button>
  </div>
</nav>

Web Component

render() {
  return html`
    <nav class="app-bar">
      <div class="d-flex align-center">
        <h4 class="text-contrast mb-0">Medical Imaging Suite</h4>
      </div>
      
      <div class="nav d-flex">
        ${this.navItems.map(item => html`
          <a 
            href="#${item.path}" 
            class="nav-link ${item.active ? 'active' : ''}"
            @click=${() => this.navigate(item.path)}
          >
            ${item.label}
          </a>
        `)}
      </div>
      
      <div class="d-flex align-center">
        <span class="text-contrast text-small mr-md">
          Dr. ${this.currentUser.name}
        </span>
        <button class="btn-icon" @click=${this.showUserMenu}>
          <svg class="icon">...</svg>
        </button>
      </div>
    </nav>
  `;
}

Responsive design

The design system includes responsive utilities and breakpoints optimised for medical applications:

• Tablet: 768px and up
• Desktop: 1735px and up
• Large Desktop: 1900px and up

Responsive Layout Examples

Mobile View

Single column layout

Tablet+ View

Two column layout

HTML Example

<!-- Responsive grid -->
<div class="d-grid grid-cols-1 grid-cols-sm-2 custom-grid-medium">
  <div class="card">Mobile: 1 column, Tablet: 2 columns</div>
  <div class="card">Adapts to screen size</div>
</div>

<!-- Responsive display -->
<div class="medical-toolbar">
  <button class="btn btn-primary">Always visible</button>
  <button class="btn btn-secondary d-none d-tablet-block">Tablet+</button>
  <button class="btn btn-secondary d-none d-desktop-block">Desktop+</button>
</div>

Web Component

render() {
  return html`
    <div class="medical-workspace">
      <!-- Responsive image viewer -->
      <div class="image-grid d-grid grid-cols-1 grid-cols-sm-2 custom-grid-large">
        ${this.medicalImages.map(image => html`
          <div class="image-container card">
            <img src="${image.thumbnail}" alt="${image.description}">
            
            <!-- Desktop-only controls -->
            <div class="image-controls d-none d-desktop-flex justify-between p-sm">
              <button class="btn-icon" title="Zoom">🔍</button>
              <button class="btn-icon" title="Annotate">✏️</button>
              <button class="btn-icon" title="Export">💾</button>
            </div>
            
            <!-- Mobile-friendly actions -->
            <div class="d-desktop-none p-sm">
              <button class="btn btn-primary btn-block">View Full Size</button>
            </div>
          </div>
        `)}
      </div>
    </div>
  `;
}

Typography

Headings

The design system provides styled headings with consistent spacing and color.

Main Page Title (H1)

Section Title (H2)

Subsection Title (H3)

Component Title (H4)

Small Title (H5)

Micro Title (H6)

HTML Example

<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Component Title</h4>
<h5>Small Title</h5>
<h6>Micro Title</h6>

Web Component

import { LitElement, html, css } from 'lit';

class MyComponent extends LitElement {
  render() {
    return html`
      <h2>Medical Image Analysis</h2>
      <h3>Patient Information</h3>
    `;
  }
}

Text utilities

Primary text color

Secondary text color

Small text size

Left aligned text

Center aligned text

Right aligned text

Success message

Warning message

Error message

HTML Example

<p class="text-primary">Primary text color</p>
<p class="text-secondary">Secondary text color</p>
<p class="text-small">Small text size</p>

<!-- Alignment -->
<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>

<!-- Color utilities -->
<p class="text-success">Success message</p>
<p class="text-warning">Warning message</p>
<p class="text-danger">Error message</p>

Web Component

render() {
  return html`
    <div class="text-center">
      <p class="text-primary">Patient: John Doe</p>
      <p class="text-secondary text-small">ID: PT001234</p>
      <p class="text-success">Scan completed successfully</p>
    </div>
  `;
}