Frequently Asked Questions (FAQs)
On this page:
General
What is the NCIDS and what is its goal?
The NCI Design System (NCIDS) is NCI's adaptation of the U.S. Web Design System (USWDS) and fulfills IDEA & OMB requirements. This documentation site consists of a collection of code, documentation, and guidance to support efficient building of websites/applications that comply with defined requirements.
Why should I use NCIDS?
NCI's Office of Communications and Public Liaison (OCPL) created NCIDS to support NCI's unique needs. The NCIDS allows teams to quickly develop and launch websites and web applications in line with NCI, NIH, Department of Health and Human Services, and federal policies and guidelines, all while using standardized design and user interface elements and patterns that follow usability best practices.
Is NCIDS required on my site?
Yes, all NCI informational websites and web applications should use NCIDS. NCIDS should be used to create new websites and applications. NCIDS adoption should be added to management and maintenance plans for existing websites and applications.
Is my website complaint with NCIDS?
To evaluate your site's level of adoption and compliance with the NCIDS, NCI's OCPL will use the NCIDS maturity model. Once your site meets specific assessment criteria and passes an OCPL heuristics review, it will be documented as an NCIDS-adopted site.
The maturity model is set up so that your team can adopt the design system incrementally through four levels. Set realistic expectations when deciding the level of effort required from your team to achieve specific levels of maturity. Level 1 maturity is the minimum level of maturity expected for NCIDS compliance. Your project can always progress through higher levels of maturity after reaching NCIDS compliance.
To learn more about the levels of maturity and their set goals and expectations, see NCIDS Maturity Model - Adoption and Evaluation.
What is my team's role in adding NCIDS to my site?
Your team is expected to own the implementation of NCIDS on your site, including design, development, quality assurance, and launch tasks. OCPL is here to advice and support you as you build the site— you can engage with the OCPL support team via Microsoft Teams, email, and meetings to ask questions.
Who do I contact with any bugs/issues, questions or feedback?
For any questions or feedback, please contact OCPL via our NCI OCPL Web Design System Teams channel.
Design and Content
Which design tools does the NCIDS support?
Our design library is in the Figma community. To download and learn more about our NCIDS Design Kit in Figma, please refer to our Figma Guide.
What if I do not find the right components to support the functionality I need on my site?
The OCPL support team is happy to provide suggestions to help your team meet the site's needs using NCIDS. Your team can also evaluate the level of maturity that would be appropriate for your site based on functionality that needs to be included. Please reach out regarding requests for support or feedback via our NCI OCPL Web Design System Teams channel.
Can I customize NCIDS components?
Our guidance provides variants and modifiers for NCIDS components to meet different user and stakeholder needs. If you have questions regarding specific components and/or don't find a component to fit your needs, please contact us via our NCI OCPL Web Design System Teams channel.
Note: Using NCIDS components is not necessary to reach maturity levels 1 or 2 that fulfill compliance with the NCIDS. To learn more about the levels of maturity and their set goals and expectations, see NCIDS Maturity Model - Adoption and Evaluation.
Can I customize NCIDS typography and colors?
NCIDS typography and colors may not be customized. However, using NCIDS typography and colors is not required to meet a maturity level 1 of compliance with the NCIDS. To progress through levels 2-4, you must use our typography and colors.
To learn more about the levels of maturity and their set goals and expectations, see NCIDS Maturity Model - Adoption and Evaluation.
Is the content shown in the header component required?
The Header component page provides examples of what a header component could look like featuring both required and optional content. The Overview section of this page provides a detailed list of required attributes for this component; these include, a USA banner, logo, site-wide search functionality (depends on the size of your website), and a main navigation.
What logo should be used in the header component?
Although a logo is required, this decision is dependent on the project. If a standalone site or application is being built, using a blended logo is recommended. Please submit a Jira ticket to request a blend logo if applicable.
Is the content shown in the footer component required?
The Footer component page provides examples of what a footer component could look like featuring both required and optional content. The Overview section of this page provides a detailed list of required attributes for this component; these include, the footer itself, policies links (all required links are included), footer branding, contact information (links and information included within this section are customizable) and organization information (these links are not customizable and are included in the list).
Technical
How do I add the NCIDS to my site?
The best way to add NCIDS to your project is with npm via a Terminal window. Please reference our step-by-step guide, Getting Started for Developers.
How do I add JavaScript to my project?
Some components will require you to use JavaScript. To learn when and how to use JavaScript for specific components, please reference the relevant component page or reference the NCIDS JavaScript Library.
Do I have to use a Sass compiler?
NCIDS requires both sass and postcss packages as peer dependencies. We recommend using npm, as these packages will be installed by default; this is not guaranteed with other package managers.
Dart Sass is a modern Sass compiler that can parse Sass Module syntax. This process will convert the work you've done on your style sheet in Sass into Cascading Style Sheet (CSS). For more information, please reference our step-by-step guide, Getting Started for Developers.
Is NCIDS compatible with all browsers?
The NCIDS is compatible with Chrome, Edge, Firefox, and Safari.