Introducing Devtools Design System

A year ago, my team at Intuit released Design Systems CLI, a set of tools we use to build design systems. Over time we’ve made major upgrades and released documentation components, but we have never released a full design system built using all of the tools — until today!

Meet the Devtools Design System.

Devtools design system logo on intuit background

Introduction

A comparison between the devtools-ds DOM inspector and Firefox DOM inspector showing the near-identical appearance.
A comparison between the devtools-ds DOM inspector and Firefox DOM inspector showing the near-identical appearance.
Devtools DS (Left) vs. FireFox DOM Inspector (Right)

Components

  • Are built using DS-CLI
  • Are written in TypeScript + React
  • Aim for keyboard and screen reader support
  • Support themes for Chrome and Firefox, in light and dark mode

You can see the full list of components in our gallery!

Packages and Templates

You can try out our TypeScript/React extension template using:

npm init @devtools-ds

Your Own Custom “Devtools”

Using the packages and components in devtools-ds, we’ve been able to build extensions for Intuit projects that are fast, keyboard navigable, and nearly indistinguishable from the browser implementations. Using the AutoThemeProvider, we can even automatically switch themes for people using Firefox vs. Chrome-based browsers.

We hope these tools enable others to build high-quality “devtools” for their projects!

What’s Next

If you want to help, we’d love to have you contribute! Some ideas for improvements include:

  • New themes (Safari would be exciting)
  • New frameworks (Vue, Svelte, etc)
  • New templates for any kind of extension
  • New components
  • Improve documentation, features, and accessibility

Thanks

We’d also like to thank the Storybook team for continuing to improve their fantastic documentation tool. In addition, we thank React Inspector, which provided inspiration for some of the devtools-ds components.

Software Engineer in San Diego, CA

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store