ParkerBarker Style System

A user-friendly design system prioritizing clarity and accessibility, with special optimizations for iOS WebViews.

Semantic Style Guide Classic Style Guide Quick Start

🚀

Zero Dependencies

Pure vanilla JavaScript. No build tools, no npm packages. Just include and go.

📱

iOS Optimized

Safe area support, touch-friendly 48px tap targets, and WebView-specific fixes.

🌙

Dark Mode

Built-in dark mode with automatic system preference detection.

♿

Accessible

WCAG-compliant with reduced motion support and screen reader utilities.

Quick Start

Add these lines to your HTML to get started:

<!-- In your <head> -->
<link rel="stylesheet" href="https://assets.parkerbarker.com/css/parkerbarker.css">

<!-- Before closing </body> -->
<script src="https://assets.parkerbarker.com/js/parkerbarker.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    ParkerBarker.init();
  });
</script>
      

Available Files

All assets are served from https://assets.parkerbarker.com/

File	Description
`/css/parkerbarker.css`	Complete stylesheet with all components
`/js/parkerbarker.js`	JavaScript library (vanilla, no dependencies)
`/fonts/`	GT Ultra Fine & Standard fonts (woff2, woff, ttf)
`/favicon/`	Favicon assets for all platforms
`/styleguide.html`	Classic style guide (class-based)
`/semantic-guide.html`	Semantic style guide (attribute-based)

Customization

Override CSS variables in your own stylesheet to customize the design system:

:root {
  /* Brand Colors */
  --pb-primary: #your-brand-color;
  --pb-primary-dark: #your-darker-shade;
  
  /* Typography */
  --pb-font-sans: 'Your Font', sans-serif;
  
  /* Spacing */
  --pb-space-md: 1.25rem;
}
      