Overview

Intro

The DNA Web UI Kit extends from the SAP Web UI Kit and contains components, patterns, and floorplans that are specific to SAC, DSP, and BDC.

Best Practices

Components

• Start with the SAP Web UI Kit for foundational UI5 components (e.g., avatar, button, select).
• If a component isn’t available there, check the DNA Web UI Kit, which provides custom UI elements specific to Data & Analytics products.
• For DNA-specific component requests, please follow the process outlined in our new DNA Design Systems SharePoint.
• Refer to the DNA Accessibility Toolkit to ensure compliance with SAP’s accessibility standards.

Icons

• Always use SAP-icons first. Only use FPA-icons when no suitable SAP option exists.
• Please utilize the components for FPA-icons in the DNA Web UI Kit – they are available in Figma for both Belize and Horizon.
• Icons should be used sparingly – only when they add clarity or improve usability.
• For new icon requests, please follow the process outlined in our DNA Design Systems SharePoint.
• The SAP Icon Browser Plugin has been deprecated and is no longer recommended. While it can still be used to insert icons into Figma if needed, you’ll need to make sure the latest version of FPA-icons is downloaded locally on your computer.

Illustrations

• First, try to use an existing illustration from the Core Design team. If it doesn’t exist, check the BTP Design System for available illustrations.
• If the illustration is still not available and cannot be fulfilled with an existing illustration, please reach out to the DNA Design System team at dna-web-kit@sap.com.

User Experience Consistency (UXC) Standards

• We’re working closely with the Core Design and Cross Application Experiences team to adopt new UXC standards. The goal of this workstream is to improve UX consistency and alignment across SAP products. These standards influence elements, patterns, and terminology, and will continue to evolve with new batches released each year.
• For BDC&I, Priscilla Lee is the primary contact for UXC-related topics. During her out-of-office periods, Martin Hensel and Jens Henniger will provide support.
• You can find more information about the UXC standards here.

By following these practices, we’ll reduce technical debt, improve consistency across products, and make sure our designs are accessible by default.

If you have any further questions about the DNA Design System (i.e., best practices, internal processes, accessibility standards), please reach out to dna-web-kit@sap.com.