Frequently Asked Questions

Dell Design System (DDS) is a compendium of reusable components, foundations, and patterns created by designers and engineers to establish a unified appearance and behavior standard for visual communication.

The team has a roadmap to prioritize development of components and foundations based on several factors. However, anyone can contribute to the Dell Design System. To start this process, contact us at the Feedback & Support page

The Dell Brand has emphasized a unified look for all Dell-branded communications. Dell Design System puts this into action with pre-built components and code to allow Dell’s creators and business partners to communicate Dell-branded content in a unified way. While DDS offers reusable solutions for an extensive array of scenarios, it also provides for the designer a degree of creative flexibility.

• Accessibility – Compliance with accessibility standards is a top concern for every group within Dell. DDS library components undergo review and consultation with the Accessibility Center of Excellence to ensure they meet current requirements. This does not create automatic approval for communications built using DDS components, but it does provide a head start toward compliance.
• Native – The DDS library is built in-house with no third-party dependencies. This makes the library much more secure from hacks found in commonly used and available open-source components. Even though defects crop up from time to time, the DDS team manages the upkeep, security, and viability of every aspect of the design system.
• Support – There is a community built around Dell Design System, and help comes from other Dell designers and engineers, as well as the DDS team.

Technology changes and we must keep up. Design grows stale, new features are supported by modern browsers, and we must continue generating interest with our customers. Updating to DDS v2 was a big step, but changes will always continue to be made.

Figma – Currently our primary tool and UI Kit are on Figma. Our Figma Kit is not gated on Figma so you should be able to easily join our v2 Figma team and enable the Figma UI Kit libraries by following the directions on our website. Make sure to join our DDS Teams channel to stay up to date on the design system and engage with our community.

Adobe XD – We are collaborating with the DellTechnologies.com Design team to develop our Adobe XD UI Kit, and should have it available soon.

Horizontal navigation is included in the Masthead component in the DDS v2 UI Kit. We recommend that product teams pull assets from the DDS library as opposed to taking directly from the Unified Masthead documentation. Footer components are available in the Footer DDS v2 UI Kit.
For Masthead code contact the DDS team through our contact form.

Figma UI Kit links:

Masthead component

Unified Masthead documentation

Footer component

The Brand Guide specifies not to use filled icons. If so, they should only be used to convey an “on” or “pressed” state of their monoline icon counterparts. You can read more about this foundation in the Icons documentation.

If you feel it is necessary to have a filled icon, please create a proposed solution and verify it with the Accessibility and Engineering Team, so it can be added to the library.

In this case, it is recommended instead of adding a fill to an icon or changing its fill color when selected, fill the area around the icon instead of the icon itself. If the icon were the only selectable element, it would be difficult to see and understand where the target is and to implement a focus state.

If you need an icon that is not in our library or would like to contribute to the Dell Design System icon set, you can fill out our Feedback Form.

In any versioned framework, major revisions are usually considered breaking changes. This is an unfortunate side effect of a major upgrade. We try very hard to not release breaking changes with every version we put out, but there comes a time when foundational changes need to be made in order to promote cleaner, faster development in the future. It is sometimes inevitable.

Officially, there is no support for using both DDS v1 and DDS v2 at the same time because, following [semantic versioning] as we are (https://semver.org/), a major version change indicates incompatible API changes. That’s not to say there is never a solution, but there may not be. Contact DDS to see if a workaround already exists.

The DDS team has plans to create native Angular and React libraries just as we have for Vanilla JavaScript. There is demand from teams within Dell for these, but development is not ready for release. In the meantime, you can create a wrapping component native to whichever framework you’re using. You can find some Angular wrapping examples in Confluence.

The DDS library packages are published to the internal Dell-hosted Artifactory package library. By default, NPM is going to look in the public npmjs.org library. You will need to add a .npmrc file to your project in the same directory where your package.json file is at—usually the root of your project. The contents of this file should be set to:

registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/

If an older version installs, try running npm cache clean - -force to wipe your node cache. Once you do that, you’ll start receiving SELF_SIGNED_CERT errors, because Artifactory has migrated from Entrust certificate authority to Dell internal certificate authority. Dell IT supported systems should already have the certificate, or you can follow these instructions to install certificate if your system is missing it:

Install Dell internal certificates on your computer

If none of this works, adding an .npmrc file to the project directory containing the install fixes the problem by ignoring the certificate.

registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod
strict-ssl=false
Copy code

DDS v1 is compatible with Chrome, Edge, Firefox, Firefox ESR, Internet Explorer, Opera, and Safari. DDS v2 is compatible with Chrome, Edge, Firefox, Firefox ESR, and Safari.

Note that we are no longer supporting Internet Explorer and Opera. However, you can polyfill DDS code to support them. If you are actively supporting these browsers, consider consulting us for an upgrade to DDS v2.