Skip to main content
An official website of the United States government

About the NCI Design System

The NCI Design System (NCIDS) provides the building blocks to make cohesive, accessible, mobile-friendly websites and applications.

What is a design system?

A design system is a collection of reusable components and patterns, guided by clear standards for use, that can be assembled to build websites and web applications. Released as design toolkits and code snippets, design systems bring consistency and efficiency to digital properties within an organization. Design systems are always evolving to account for feedback from teams using the systems as well as changes in user experience patterns and best practices.

Our approach

NCIDS is an adaptation of the U.S. Web Design System (USWDS) created for NCI informational websites and applications to enhance their user experience, increase accessibility, and offer opportunities for efficiencies and consistency.

How NCIDS is part of NCI's digital strategy

NCIDS is an important component of NCI's digital strategy.

Work driven by NCI’s digital strategy follows these guiding principles:

  • audience-focused
  • data-informed
  • collaborative
  • agile
  • accessible to all

NCIDS embodies these principles and helps to make the digital strategy a reality for teams working to create a unified, audience-focused, and data-informed presence for NCI.

NCI’s design system makes it easier for teams to build accessible and responsive digital products with consistent usability that provides a seamless, user-friendly experience. This is a key requirement of the 21st Century Integrated Digital Experience Act (IDEA), as outlined in NCI’s Digital Strategy, on the myNCI intranet.

NCIDS provides standardized design and user interface elements and patterns that follow usability best practices. This speeds up the development process and helps teams focus on creating compelling digital content.

Our design principles

Our design principles reflect the NCIDS design philosophy. We are committed to helping those who use our design system successfully adopt it, in order to keep the user experience of NCI consistent and seamless.

  • Visual style promotes consistency and one visual voice so users can find cancer related content efficiently.
  • Accessibility uses inclusive and representative visuals that engage all users.
  • User research builds empathy with users by testing often and gathering feedback.
  • Reusable code simplifies development. Code is friendly, easy to use and accessible.
  • Governance provides a framework for maintenance by a dedicated team of designers, developers, information architects, and product managers.

How user research guides NCIDS

As an adaptation of USWDS, our user research builds on the foundational research conducted by USWDS, contributing to our design principles and the guiding principles outlined by NCI’s digital strategy. USWDS is focused on meeting the needs of the USWDS community and people with disabilities. Learn more about how research supports USWDS decisions.

Design resources

NCIDS provides a Figma community file for our components, templates, and tokens/utilities. By using the NCIDS design kit, you will automatically receive updates we make to our libraries, ensuring your designs stay up to date with the latest releases. Learn how to design with the NCIDS and download the NCIDS Figma Design Kit.

Accessibility

NCIDS is built as an extension to USWDS for the use on NCI web properties. As such, accessibility is a core design principle for NCIDS, used at each step of the development and design processes.

NCIDS is subject to the requirements of Section 508 of the Rehabilitation Act of 1973, amended in 1998 to require federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 incorporates by reference the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA success criteria. NCIDS and its components are designed to help websites comply with accessibility requirements.

Contact us

This website is managed by NCI's Office of Dissemination and Digital Communications.

Interested in adopting NCIDS for your NCI website or web application? Please contact the OCPL digital team at ncidigital@nih.gov for more information. We can meet with individual teams for site-specific discussion and questions.

For NCI staff to get in touch with us regarding suggestions or feedback, contact us via our NCI OCPL Web Design System Teams channel.

Release notes

For detailed information on each NCIDS release, please see our Release Page.