Why Create a New York State Design System?

What is a design system? It isn't just a component library, a set of fonts and colors, or a prototyping kit. The core value of a design system is in its system-ness. A system is a set of things working together as parts of an interconnected network to create a cohesive whole.

What makes a design system unique is the connectedness. Our design libraries use variables, our code library is built on the same variables, the two have parity with each other, and our reference site is built using the same components, variables, and guiding principles. This interconnectedness is what makes a design system a system.

This connectedness helps brings consistency, accessibility, and efficiency to New York State’s digital experiences. This section will walk you through the system and the core principles, styles, and design tokens that make it flexible and scalable across applications.

The NYS Design System solves this by providing:

• Proven Best Practices: From intuitive design to strict WCAG 2.2 accessibility standards, every element is created with residents in mind.
• A Shared Language: Our design and code libraries are closely aligned so that what designers and business analysts create while prototyping designs is based in the reality of what can quickly be built in code.
• Efficiency & Scalability: Prebuilt components, design tokens, and guidelines make developers more efficient and keep experiences consistent across platforms.
• Compliance: The design system adheres to New York State's web browser compatibility standards, ensuring all components are usable by everyone. Read the full NYS Web Browsers - Development and Software Support document for more details.

Bridging Design and Development

One of the greatest challenges in digital product creation is ensuring that the vision in design translates perfectly into code. The NYS Design System eliminates this gap:

• Seamless Parity: Our Figma libraries and code libraries are synchronized so that design elements and code components match 1:1.
• Consistent Experience: Colors, spacing, and typography remain uniform across applications.
• Built-in Accessibility: With accessibility integrated into every component, teams reduce compliance risks and avoid costly rework.