resources icon

Frequently Asked Questions


Table of Contents

General

What is Dell Design System?

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.

What if DDS doesn’t have what I need?

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 submit a component or icon, start at the Contribute to the Dell Design System page

Why should I use DDS?

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 flexibility for the designer to have 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.

Why a new version of DDS? Isn’t it disruptive to keep changing a design system?

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 DDS2 was a big step, but changes will always continue to be made.

Design

Which UI/UX tools do you support?

Figma – Currently our primary tool and UI kit are in 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. In the meantime, the Adobe XD Kit is available on SharePoint for users logged in via VPN.

Where can I find information about the masthead or horizontal menus?

Horizontal navigation is included in the Masthead component in the DDS 2 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 2 UI Kit.
For Masthead code contact the DDS team through our contact form.

Figma UI Kit Links:

Masthead component

Unified Masthead documentation

Footer UI Kit

I need a filled version of an icon. How can I find that?

The Brand Guide specifies NOT to use filled icons, but if you feel it is necessary to have one, please create a proposed solution and verify it with the Accessibility Team and Engineering so it can be added to the library. You can first reach out to @Diaz, Michael if you have questions.

A recommended work-around for filling an icon is found in our Button component. Instead of adding a fill to an icon or changing its fill color when selected, this pattern fills 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.

Image displaying icon-only button - in blue, red, black, white and green variations.

Technical

Why were element and class names changed in DDS2?

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.

I can't use a component from DDS1 while using DDS2. What can be done?

Officially, there is no support for using both DDS1 and DDS2 at the same time because, following semantic versioning as we are, 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.

Do DDS components work with Angular or React?

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.

My CICD pipeline is failing after adding the DDS package to my node_modules.

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/

I’m receiving SELF_SIGNED_CERT errors while installing DDS, or only an older version gets installed.

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:

https://confluence.dell.com/display/DD/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

Table of Contents