The DDD Design System is built using Web Components. Web Components are framework-agnostic. You can use them with Angular, React, or other front-end frameworks.

The Design System includes:

• Tokens
• Components
• Examples
• Templates

Designers use equivalent resources in Figma. When they design with Design System components, you can build with the matching coded components. This reduces custom development and rework.

All Design System components are designed and built to meet WCAG 2.2 accessibility standards.

Access the tokens as an NPM package.

Import the SCSS or CSS file into your project. Replace hard-coded values with Design System token variables.

Designers reference the same tokens in their tools. This keeps design and development aligned during handoff.

Components are reusable user interface elements built for use across services.

You can:

• Use components individually
• Combine them into patterns
• Apply them in different contexts

Components are available:

• As Web Components
• As Angular wrappers
• As React wrappers

Refer to the Design System technologies documentation for implementation details.

Examples are multiple components assembled in realistic service contexts. They help you understand how to apply Design System guidance in a working interface.

You can use examples to:

• Understand how components work together
• Use them as a starting point for building parts of your interface
• Use proven approaches to meet user needs

Examples help you build with more consistency and less rework. Use them to guide implementation, then adjust them to meet the needs of your product.

Templates are opinionated starting points for common service types. They package layout, navigation, spacing, and example content so you can start with a proven structure instead of building from scratch.

You can use templates to:

• Start a new product with a proven structure
• Learn how components work together in a real layout
• Adapt a proven starting point to fit your service needs

Templates help teams move faster, reduce rework, and stay aligned with Design System guidance.