Welcome to Particle

Particle is dscout's web-based design system. It defines building blocks and design patterns that are composed and applied to design and build interfaces for the web.

On the design side, Particle manifests itself as a shared library in Figma. It defines components that are composed and styles that are applied to design and prototype new interfaces. Updates to the shared library propagate to existing designs, keeping designs in sync as Particle's design patterns evolve.

On the engineering side, Particle manifests itself as an NPM package that can be consumed by web applications. The package provides a CSS framework and a React component library. The CSS framework contains global styles, utility classes, and CSS variables. The component library provides generic, configurable, and reusable React components. These components encapsulate design patterns and specific UX and a11y behaviors to promote consistency across our interfaces. Engineers build interfaces out of custom components that compose Particle components, Particle utility classes, and maybe leverage custom component CSS classes that reference Particle CSS variables. Published changes to Particle components and CSS propagate to all existing interfaces when consuming applications bump their Particle dependency version.