Getting Started
New York State Design System (NYSDS) is system for building New York State web applications and content websites. It's created to help the people designing and developing digital experiences to do so in a way that is consistent, user-friendly, and accessible. No matter what role you play in the creation of these digital experiences, NYSDS has value to offer: big-picture framing, clear guidance, and ready-to-use resources.
Why NYSDS?
Every day, New York State residents interact with digital services. They expect clear and accessible experiences. Without a unified approach, teams often create their own solutions. This often results in duplicated work, inconsistent designs, and accessibility challenges.
NYSDS 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.
Bridging Design and Development
One of the greatest challenges in digital product creation is ensuring that the vision in design translates perfectly into code. NYSDS 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.
Three Ways to Engage with NYSDS
The landscape of web applications and sites for New York State is large and diverse. We built the design system to be flexible and adaptable, so that it can teams to use it in a way that best suits their needs.
Here are three ways to engage with NYSDS:
1. Follow Design & Accessibility Guidance
Learn best practices for designing clear, accessible user experiences and using UI components effectively.
2. Adopt Styles & Design Tokens
For teams working within existing applications, our design tokens for colors, typography, spacing, and more help maintain visual consistency without major overhauls.
3. Use the Web Component
Build new digital products faster with our library of prebuilt, responsive UI components. Enjoy the benefit of design-to-code parity—what’s designed in Figma matches the code you implement.
Next Steps: Find the Right Guide for You
NYSDS is designed for everyone—whether you’re setting strategic direction or diving into component development. Choose your path:
- For Designers: Get started with our Figma libraries and detailed design guidelines.
- For Developers: Discover how to integrate our web components and styling options into your projects.
- For Agency Leaders & Product Teams: Learn how NYSDS drives efficiency and ensures a unified digital experience across New York State.