New York State Design System

The New York State Design System helps teams rapidly design and build accessible, mobile-friendly web applications and sites.

For designers

Reusable design templates with code parity.

For developers

Code components to create rich user experiences.

Foundational principles and visual identity

Design Tokens
A collection of design decisions stored in key-value pairs, abstracted so they can easily be used across a wide range of platforms, design and code.
Accessibility
Prioritizing accessibility in our design system allows all users, regardless of ability, to navigate and interact with our products.
Web Components
Reusable front-end components shared across codebases, with built-in design, state, and behavior.
Typography
A collection of standard NYS brand-approved typefaces that need to be used in both design and development product work.

We saved approximately 30–40% of the time it takes to design a typical project.

– Designer at NYS Office of Mental Health

Latest Updates

NYS Design System Release 1.14.0 “Marcy”

February 19, 2026

Happy one year anniversary to the NYS Design System! 🍰 We now lint all our styles before publishing and have provided new methods for customizing the <nys-accordion>. Lots of bug and accessibility fixes in this release too!

Happy Birthday NYS Design System!

February 19, 2026

We're celebrating our one year anniversary! We shipped a new homepage and contribute pages. Contribution can take many forms: New feature requests, bug reports, or hop into our Teams channel.

Accessible, by design

A consistent, accessible design system helps NYS meet WCAG and ADA compliance deadlines – while improving usability for everyone.

Brand-aligned

A shared design language helps us build products with the same quality of user experience across NYS applications and websites.

Cost savings

A design system carries an upfront cost, but it proves its value over time.

NYS Design System Community Figma file

Available to anyone with a Figma account, our Community file provides instant access to our shared components, tokens, and text styles. Simply duplicate the file to your workspace to customize the library to your needs.

Open the Figma community file

NYS Design System Figma file

Streamline your design flows with the official NYS Design System Figma file. Included are WCAG-compliant components, foundational tokens, and flexible themes that adapt to any agency’s brand.

Open the NYS Figma file

Help shape the future of the NYS Design System

Feedback keeps the design system consistent, usable, and aligned with team needs. Contributors across New York State government help shape and improve digital products.