CJ White

Principal Frontend Developer

Open to principal-level roles, remote or hybrid in the greater Boston area.

Principal-level front-end developer with 10+ years of experience building accessible, component-driven websites. Spent six years on the design system behind pega.com, owning its documentation across Twig and React versions, reviewing contributions from teams across the company, and holding components to WCAG AA/AAA.

Download my resume

The design system behind this page is a case study of its own. EngineDS has documented foundations and components, five themes, and accessibility checks that fail the build on any violation. Explore it in Storybook, then read the case study below.

Open Storybook

Selected work: Bolt Design System

Bolt is the public documentation for the design system behind pega.com. I wrote most of the documentation for its roughly 64 components, in both the Twig and React versions, and set the standards other contributors followed.

Visit Bolt

My role

  • Owned the documentation, which back-end developers, the primary users, credited with improving their workflow.
  • Reviewed pull requests against the system's accessibility, documentation and code standards.
  • Helped move the system from Twig and Web Components to React.

Case study: EngineDS

EngineDS is the design system behind this page. I built it as a project that demonstrates what I know, and the second benefit is that I use it to build this page.

Its documentation follows what I learned on Bolt. Each page opens with a short description and controls, then numbered notes and variants for anyone using the component.

Visit Storybook

How it is built

  • Next.js, React and TypeScript, documented in Storybook.
  • Design tokens for color, type, spacing, shape and motion in plain CSS, using native nesting and cascade layers.
  • Story tests with Vitest and Playwright, plus ESLint, Stylelint and Prettier on every commit.

What is next

Form controls, an error color, disclosure, overlays, navigation and content and table components.

Design decisions

A flat design language

Solid colors, a 3px stroke and a single radius. There are no gradients or shadows anywhere in the system.

Docs generated from the CSS

The Foundations pages read the tokens live from the stylesheets, so the documentation cannot drift from the code.

An accessibility gate

The axe addon runs on every story and fails the build on any violation, so an inaccessible component cannot ship.

A theme system

White, light, dark, dark-alt and dark-plum themes, plus a contrast theme that picks the dark theme furthest from its surroundings. Dark mode follows the visitor's system setting.

Using a component

The Footer at the bottom of this page is built from this description, with the Share component inside it.

<Footer
  title="CJ White"
  links={links}
  share={{ sources: shareSources }}
  copyright="CJ White"
/>

Foundations

Color, type, spacing, shape, motion and breakpoints, documented straight from the CSS that defines them.

Components

Atoms, molecules and organisms built on one Layout, with themes that any container can pass down.

Documentation

Each component is documented in the style of the Bolt Design System: a short description, controls, numbered notes and variants.

Experience

Principal Web Developer, Front End

Pegasystems | Remote | 2020–2026 | Promoted from Senior Web Developer, Front End, in the fall of 2025.

  • Built and maintained the design system behind pega.com and several related Pega-branded sites, working with about two dozen colleagues across teams and roles.
  • Owned documentation for a roughly 64-component design system in both its Twig and React versions, writing most of it and setting the standards others followed. Back-end developers, the primary users, credited it with improving their workflow.
  • Reviewed pull requests, holding contributions to the system's accessibility, documentation and code standards.
  • Led front-end development on a full-scale rebrand of a customer-facing website with a small team on a tight turnaround, working directly with the creative team and flagging colors and type that fell short of WCAG.
  • Helped move the system from Twig and Web Components to React, relieving tech debt and aligning its stack with the back-end team's workflow. Also built the front-end chat interface for an AI learning agent on Pega Academy in React.
  • Worked within the company's AI-assisted development standard to draft documentation and build page-level frames, reviewing all output and consolidating repetition into reusable patterns.

Lead UX Engineer

Imarc | Amesbury, MA | 2018–2020

  • Led development of new sites and maintained existing ones, building flexible Craft CMS tools that gave clients control over their content while keeping functionality reusable.
  • Improved Imarc's Webpack and component-based project launchpad, "Boilerplate."

UI Developer

Genuine | Boston, MA | 2016–2018

  • Built responsive, component-driven layouts for multiple CMSs, primarily Drupal, and refactored legacy code to streamline work for junior developers.
  • Helped the core team define accessibility and performance best practices.

Jr. Developer

Axion Media Lab | Pawtucket, RI | 2015–2016

  • Built custom responsive WordPress themes and tested HTML email templates across email clients.

Development

React, TypeScript, Next.js, JavaScript (ESNext), HTML5, CSS Preprocessors, Web Components, Twig, Templating, CMS (Craft, Drupal, WordPress)

Design Systems & Process

Component Libraries, Documentation, Code Review, Accessibility (WCAG AA/AAA), Performance, Agile, Version Control

Tools & Workflow

Webpack, NPM / Yarn, Jest, VS Code, GitHub Copilot

Education

Salem State University, Salem, MA | 2010–2015. Bachelor of Arts, concentrations in Interactive Multimedia and Graphic Design; Minor in Computer Science.