DRUIDS, the design system that powers Datadog
Datadog created DRUIDS in 2018 to provide consistent UX patterns across its rapidly expanding observability platform. The system succeeds only if designers and developers trust and use it, so its documentation and tooling are designed to be easy to understand, implement, and contribute to. Datadog’s approach connects design, source code, documentation, and development workflows into a shared source of truth. ## Easy to Understand ### Fast Navigation and Discovery - The DRUIDS documentation supports Cmd+K (or Ctrl+K) quick navigation for finding components, patterns, icons, logos, and other resources. - The “DRUIDS Loupe” lets Datadog employees inspect components directly on product pages. - Hovering over an inspected component reveals links to its source code, Figma files, and documentation. ### Connected Documentation - Component pages link to GitHub, Figma, and VS Code. - JSDoc comments provide descriptions and links back to DRUIDS documentation inside VS Code. - Figma also links back to relevant components and guidance. - These connections minimize dead ends and keep supporting context close to where people are working. ## Easy to Implement ### Editable Playgrounds - DRUIDS treats React, TypeScript, and CSS implementation as the source of truth because code defines the actual browser experience. - Interactive playgrounds let users explore component props, test variations, and copy production-ready code. - A Code Sandbox page allows multiple components to be combined into live prototypes. - Stateful internal URLs make it easier to share ideas and reproduce bugs. - The tools also help teams without dedicated frontend specialists build internal applications using familiar Datadog patterns. ### Auto-Generated API Documentation - Each component includes an API table listing its props, allowed values, and descriptions. - The tables are generated directly from source code rather than maintained separately. - This prevents documentation from drifting away from the implementation across more than 150 components. - Clear, meaningful prop names improve predictability for both designers and developers. ## Easy to Contribute Back ### Contribution Guidelines - DRUIDS is intended to evolve as Datadog’s products and customer needs change. - Internal contribution guidelines define expectations for core design, structure, prop naming, documentation, styling, responsiveness, accessibility, and testing. - The guidelines aim to reinforce quality without making contributions burdensome or intimidating. ### CLI Tooling - A command-line wizard generates the standard structure for new components, including code, tests, and documentation examples. - For example, `yarn component button` creates the scaffolding for a button component. - Automating boilerplate lets contributors focus on design, user experience, and performance. Datadog’s central recommendation is to treat a design system as more than a component library: it should connect users, designers, and developers through consistent patterns, live examples, source-linked documentation, and lightweight contribution workflows.
Read original(opens in new tab)