Design system framework

A project team needed to produce a design system within a short timeframe and a tightly controlled technical environment. Every new external package required approval, so adopting a conventional documentation framework could have delayed the work.

I designed and developed DS2-core, a lightweight framework built with PugJS, SCSS, and JavaScript using tools already available to the team. It brings together design tokens, reusable components, interactive behaviours, documentation templates, and versioned releases, providing the structure needed to build and maintain design systems without depending on a large collection of third-party packages.

Designing for a constrained environment

The framework needed to be modular enough to support different organizations and visual identities while remaining simple to approve, deploy, and maintain.

I minimized external dependencies and made the framework use its own components to display documented patterns. This ensured that the documentation demonstrated the same components and implementation practices it described.

Improving the framework through use

The project team used DS2-core while building the design system and reported issues as new documentation and components exposed gaps in the framework. I used that feedback to refine its structure and core patterns throughout delivery.

I also rebuilt my public design system with DS2-core. Using the framework on a second implementation helped test its flexibility and revealed additional needs related to content structure, accessibility, branding, and component documentation.

Creating a reusable foundation

The framework enabled the project team to complete Agricorp's design system within the required timeline. A component-status view helped the team track progress and coordinate the remaining work.

I continue to refine DS2-core and its core components. Explore the DS2-core repository, or see the framework in use through my public design system, which serves as both a working implementation and an ongoing test of its flexibility.

Extending the framework into production

I remain responsible for the design, development, testing, and maintenance of DS2-core. Some JavaScript behaviours I originally developed for the framework are now being integrated into Agricorp’s OCS production system, extending the work beyond documentation into a customer-facing product.

I use Copilot and ChatGPT to review code, diagnose problems, audit accessibility, strengthen documentation, and refine implementations. Their suggestions are inputs to my process rather than substitutes for technical judgment: I evaluate, test, correct, and understand the resulting code before adopting it, and remain responsible for its behaviour and quality.