Public Assets & Style Guide

Public Assets & Style Guide

Official brand assets, design system, and implementation resources for Pace Applied Solutions projects.

Interactive Examples

Live component library with code examples and interactive features.

Style Guide

Complete design system documentation with implementation guidelines.

View Documentation

Brand Assets

Logos, icons, and brand assets in multiple formats for all platforms.

Download Assets

Quick Start

CSS Framework

Include the Pace design system in your project:

<link rel="stylesheet" href="https://raw.githubusercontent.com/Pace-Applied-Solutions/PacePublicShare/main/styleguide/pace-style-guide.css">
<button class="pace-button pace-button-primary">Get Started</button>

Brand Assets

Reference logos directly from GitHub CDN:

<img src="https://raw.githubusercontent.com/Pace-Applied-Solutions/PacePublicShare/main/assets/logo/Pace-logo-orange.png" 
     alt="Pace Applied Solutions" width="200">

Navigation Menu

Responsive navigation menu with quick access to all style guide sections. Features collapsible mobile menu and adaptive icon/text display.

Desktop Navigation

Full navigation menu with icons and text labels on desktop screens (1025px+):

<nav class="pace-nav">
  <ul class="pace-nav-list">
    <li class="pace-nav-item">
      <button class="pace-nav-link">
        <i class="fas fa-play"></i>
        <span>Interactive Examples</span>
      </button>
    </li>
    <li class="pace-nav-item">
      <a href="./docs/style-guide.html" class="pace-nav-link">
        <i class="fas fa-book"></i>
        <span>Style Guide</span>
      </a>
    </li>
    <li class="pace-nav-item">
      <a href="./assets/logo/" class="pace-nav-link">
        <i class="fas fa-images"></i>
        <span>Brand Assets</span>
      </a>
    </li>
  </ul>
</nav>

Mobile Navigation

Collapsible mobile menu with hamburger toggle for screens under 768px:

<!-- Mobile Menu Toggle -->
<button id="mobileMenuToggle" class="pace-mobile-menu-toggle">
  <i class="fas fa-bars"></i>
</button>

<!-- Mobile Navigation Menu -->
<nav class="pace-nav" id="mainNav">
  <ul class="pace-nav-list">
    <li class="pace-nav-item">
      <button class="pace-nav-link">
        <i class="fas fa-play"></i>
        <span>Interactive Examples</span>
      </button>
    </li>
    <!-- Additional menu items -->
  </ul>
</nav>

Navigation Features

Mobile First

Collapsible hamburger menu on mobile devices with smooth animations

Responsive

Adaptive display: icons only on tablets, full text on desktop

Accessible

Keyboard navigation, screen reader support, and proper ARIA labels

What's Included

Design System

Complete CSS framework with pace- prefixed classes

Responsive

Mobile-first design with modern CSS Grid and Flexbox

Accessible

WCAG 2.1 AA compliant with proper contrast ratios

Authentication

Optional Microsoft 365 integration for user profiles

Welcome to the Interactive Style Guide!

Browse all interactive components and code examples. Sign in to display your profile information. Copy any code snippet to use in your projects.

Typography Hierarchy

The Pace design system uses a clear font hierarchy with specific fonts for different content types. Use the site title font sparingly—once per page or content section.

Font Usage Guide

Site Title - Agency FB

Use sparingly - once per page or content section

Pace Applied Solutions

Primary Headings - Bahnschrift Light Condensed

For main section headings and important content

Primary Heading (H1)

Secondary Headings - Segoe UI

For subsections and content organization

Secondary Heading (H2)

Tertiary Heading (H3)

Quaternary Heading (H4)

Quinary Heading (H5)

Body Text - Segoe UI

For general content and descriptions

Large body text for important descriptions

Regular body text for content and descriptions

Small text for captions and secondary information

Extra small text for fine print and metadata

Typography HTML

<!-- Site Title (Agency FB) - Use sparingly -->
<h1 class="pace-site-title">Pace Applied Solutions</h1>

<!-- Primary Heading (Bahnschrift Light Condensed) -->
<h1 class="pace-heading-1">Primary Heading</h1>

<!-- Secondary Headings (Segoe UI) -->
<h2 class="pace-heading-2">Secondary Heading</h2>
<h3 class="pace-heading-3">Tertiary Heading</h3>
<h4 class="pace-heading-4">Quaternary Heading</h4>
<h5 class="pace-heading-5">Quinary Heading</h5>

<!-- Body Text (Segoe UI) -->
<p class="pace-text-large">Large body text</p>
<p class="pace-text-body">Regular body text</p>
<p class="pace-text-small">Small text</p>
<p class="pace-text-xs">Extra small text</p>

Authentication Components

Modern split-screen authentication layout with Pace branding and Microsoft 365 integration.

Pace Style Guide & Components

Comprehensive design system and interactive component library with 150+ examples, live code previews, and Microsoft 365 authentication integration for modern enterprise applications.

Design System
Live Examples
Copy-to-Clipboard

Authentication Layout Code

<div class="pace-auth-demo">
  <div class="pace-auth-brand-section">
    <div class="pace-brand-content">
      <img src="./assets/logo/Pace-logo-white.png" class="pace-brand-logo">
      <h1 class="pace-brand-tagline">Pace Style Guide & Components</h1>
      <p class="pace-brand-description">Your application description...</p>
      <div class="pace-brand-features">
        <div class="pace-feature-item">
          <i class="fas fa-palette"></i>
          <span>Design System</span>
        </div>
      </div>
    </div>
  </div>
  <div class="pace-auth-login-section">
    <button class="pace-button pace-button-microsoft">
      Continue with Microsoft 365
    </button>
  </div>
</div>

Navigation Menu

Responsive header navigation with quick access to all style guide sections. Features adaptive breakpoints and accessibility compliance.

Implementation Guide

The navigation menu adapts to different screen sizes:

  • Desktop (1025px+): Full navigation with icons and text
  • Tablet (769px-1024px): Icon-only navigation to save space
  • Mobile (≤768px): Collapsible hamburger menu

Features include:

  • Smooth slide-in animations
  • Keyboard navigation support
  • Auto-close on outside clicks
  • Screen reader compatibility

JavaScript Integration

Initialize the navigation menu functionality:

// Mobile menu toggle
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const mainNav = document.getElementById('mainNav');

mobileMenuToggle.addEventListener('click', function() {
    const isOpen = mainNav.classList.contains('pace-nav-open');
    
    if (isOpen) {
        mainNav.classList.remove('pace-nav-open');
        this.setAttribute('aria-expanded', 'false');
        this.querySelector('i').classList.remove('fa-times');
        this.querySelector('i').classList.add('fa-bars');
    } else {
        mainNav.classList.add('pace-nav-open');
        this.setAttribute('aria-expanded', 'true');
        this.querySelector('i').classList.remove('fa-bars');
        this.querySelector('i').classList.add('fa-times');
    }
});

// Close menu on outside click
document.addEventListener('click', function(e) {
    if (!mainNav.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
        mainNav.classList.remove('pace-nav-open');
        mobileMenuToggle.setAttribute('aria-expanded', 'false');
    }
});

// Close menu on window resize
window.addEventListener('resize', function() {
    if (window.innerWidth > 768) {
        mainNav.classList.remove('pace-nav-open');
        mobileMenuToggle.setAttribute('aria-expanded', 'false');
    }
});

Complete Navigation HTML

<header class="pace-app-header">
  <div class="pace-container">
    <div class="pace-app-header-content">
      <div class="pace-app-header-left">
        <img src="./assets/logo/Pace-logo-white.png" alt="Pace Applied Solutions" class="pace-app-header-logo">
        <h1 class="pace-app-header-title">Public Assets & Style Guide</h1>
      </div>
      
      <!-- Navigation Menu -->
      <nav class="pace-nav" id="mainNav">
        <ul class="pace-nav-list">
          <li class="pace-nav-item">
            <button class="pace-nav-link">
              <i class="fas fa-play"></i>
              <span>Interactive Examples</span>
            </button>
          </li>
          <li class="pace-nav-item">
            <a href="./docs/style-guide.html" class="pace-nav-link">
              <i class="fas fa-book"></i>
              <span>Style Guide</span>
            </a>
          </li>
          <li class="pace-nav-item">
            <a href="./assets/logo/" class="pace-nav-link">
              <i class="fas fa-images"></i>
              <span>Brand Assets</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <div class="pace-app-header-right">
        <!-- Mobile Menu Toggle -->
        <button id="mobileMenuToggle" class="pace-mobile-menu-toggle" aria-label="Toggle navigation menu">
          <i class="fas fa-bars"></i>
        </button>
        
        <!-- Theme Toggle -->
        <div class="pace-theme-toggle">
          <button class="pace-theme-toggle-switch">
            <span class="pace-theme-toggle-handle">
              <i class="fas fa-sun"></i>
            </span>
          </button>
        </div>
        
        <!-- Auth buttons -->
        <button class="pace-button pace-button-primary">Sign In</button>
      </div>
    </div>
  </div>
</header>

Brand Assets

Complete logo collection with proper contrast examples for both light and dark themes. Each logo variant is demonstrated against appropriate backgrounds to ensure optimal visibility and accessibility.

Primary Orange Logo

Main brand logo optimized for light backgrounds and primary branding contexts.

Pace Logo Orange on Light Background
Light Background

Optimal contrast on light surfaces

Pace Logo Orange on Dark Background
Dark Background

Reduced visibility - use white logo instead

Professional Blue Logo

Alternative logo for professional documents and secondary branding contexts.

Pace Logo Blue on Light Background
Light Background

Professional appearance on light surfaces

Pace Logo Blue on Dark Background
Dark Background

Reduced visibility - use white logo instead

White Logo

Reverse logo specifically designed for dark backgrounds and overlay contexts.

Pace Logo White on Light Background
Light Background

Poor contrast - not recommended

Pace Logo White on Dark Background
Dark Background

Optimal contrast on dark surfaces

Usage Guidelines

Light Mode Recommended

Primary Orange Logo

Primary: Orange Logo

Use on light backgrounds, white cards, and primary branding

Professional Blue Logo

Secondary: Blue Logo

Use for professional documents and alternative branding

Dark Mode Recommended

White Logo

Primary: White Logo

Use on dark backgrounds, overlays, and dark theme contexts

Orange Logo (Not Recommended)

Avoid: Orange/Blue on Dark

Poor contrast - use white logo instead

Logo Implementation


<!-- Primary Orange Logo -->
<img src="https://raw.githubusercontent.com/Pace-Applied-Solutions/PacePublicShare/main/assets/logo/Pace-logo-orange.png" 
     alt="Pace Applied Solutions" class="pace-logo">

<!-- Professional Blue Logo -->
<img src="https://raw.githubusercontent.com/Pace-Applied-Solutions/PacePublicShare/main/assets/logo/Pace-logo-blue.png" 
     alt="Pace Applied Solutions" class="pace-logo">


<!-- White Logo (for dark backgrounds) -->
<img src="https://raw.githubusercontent.com/Pace-Applied-Solutions/PacePublicShare/main/assets/logo/Pace-logo-white.png" 
     alt="Pace Applied Solutions" class="pace-logo">

/* CSS for responsive logo sizing */
.pace-logo {
  max-width: 200px;
  height: auto;
  display: block;
}

/* Theme-aware logo implementation */
.pace-logo-primary {
  display: block;
}

[data-theme="dark"] .pace-logo-primary {
  display: none;
}

.pace-logo-dark {
  display: none;
}

[data-theme="dark"] .pace-logo-dark {
  display: block;
}

Button Components

Standardized button styles with proper hover states and accessibility features.

Button HTML

<!-- Primary Button -->
<button class="pace-button pace-button-primary">
  <i class="fas fa-save"></i>
  Primary Button
</button>

<!-- Secondary Button -->
<button class="pace-button pace-button-secondary">
  <i class="fas fa-edit"></i>
  Secondary Button
</button>

<!-- Outline Button -->
<button class="pace-button pace-button-outline">
  <i class="fas fa-download"></i>
  Outline Button
</button>

<!-- Microsoft Button -->
<button class="pace-button pace-button-microsoft">
  <i class="fab fa-microsoft"></i>
  Microsoft Button
</button>

<!-- Icon Button -->
<button class="pace-button pace-button-icon" aria-label="Settings">
  <i class="fas fa-cog"></i>
</button>

Card Components

Flexible card layouts for content organization and feature presentation.

Analytics Dashboard

Comprehensive analytics with real-time data visualization and reporting capabilities.

Security Center

Advanced security monitoring with threat detection and automated response systems.

Team Management

Streamlined team collaboration tools with role-based access and project tracking.

Card HTML Structure

<div class="pace-card">
  <div class="pace-card-content">
    <i class="fas fa-chart-line pace-card-icon"></i>
    <h4 class="pace-heading-4">Card Title</h4>
    <p class="pace-text-body">Card description goes here...</p>
    <div class="pace-card-actions">
      <button class="pace-button pace-button-primary">Primary Action</button>
      <button class="pace-button pace-button-outline">Secondary Action</button>
    </div>
  </div>
</div>

Form Components

Accessible form controls with proper validation states and user feedback.

Contact Form Example

Advanced Form Controls

Notification Preferences
Account Type

Form HTML Structure

<form class="pace-form">
  <div class="pace-form-group">
    <label for="email" class="pace-label">Email Address</label>
    <input type="email" id="email" class="pace-input" placeholder="Enter your email">
  </div>
  
  <div class="pace-form-group">
    <label for="message" class="pace-label">Message</label>
    <textarea id="message" class="pace-input pace-textarea" rows="4"></textarea>
  </div>
  
  <div class="pace-form-actions">
    <button type="submit" class="pace-button pace-button-primary">Submit</button>
    <button type="reset" class="pace-button pace-button-secondary">Reset</button>
  </div>
</form>

Integration Examples

Complete implementation examples for common integration scenarios.

HTML Document Setup

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Pace Style Guide CSS -->
  <link rel="stylesheet" href="pace-style-guide.css">
  <!-- FontAwesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="pace-base">
  <div class="pace-container">
    <!-- Your content here -->
  </div>
</body>
</html>

Authentication Integration

<!-- MSAL.js for Microsoft 365 -->
<script src="https://alcdn.msauth.net/browser/2.35.0/js/msal-browser.min.js"></script>

<!-- Pace Authentication Scripts -->
<script src="./scripts/config.js"></script>
<script src="./scripts/utils.js"></script>
<script src="./scripts/auth.js"></script>

<script>
// Initialize authentication
document.addEventListener('DOMContentLoaded', async function() {
  const auth = getAuth();
  
  // Set up authentication state listener
  auth.onAuthStateChanged((isAuthenticated, account) => {
    // Update UI based on auth state
  });
});
</script>

Interactive Examples

Test interactive components and notification system.

Explore More

Continue exploring the style guide or return to the landing page.

Demo Mode Active

Microsoft 365 authentication is running in demo mode. Configure authentication to enable user profile features.