Design

Good design does not start with what you see. It starts with understanding who you are building for, what they need, and how your service fits into their life. The NYS Design System helps teams build accessible, consistent digital products — but using components alone does not guarantee good design.

The Elements of User Experience

Strong digital experiences are built in layers, from abstract strategy to concrete interface. Each layer builds on the one before it:

Surface
UI Design, UX Writing
Skeleton
Interaction Design, Layout
Structure
UX Architecture
Scope
Requirements
Strategy
User Needs, Business Objectives

The NYS Design System primarily operates at the Surface and Skeleton layers — providing the visual building blocks and interaction patterns that make up the interface. But a great interface built on a weak foundation of strategy, scope, and structure will still fail users.

Strong UX comes from a thoughtful process that includes research, personas, user flows, prototyping, and testing. The design system accelerates the final steps, but it cannot replace the earlier ones.

Design Support

The ITS Experience Design (XD) team helps agencies with research, design strategy, and UX architecture. If your team is starting a new project or redesigning an existing service, connect with XD early in the process — before you start building.

The design system gives you standard components and patterns. The XD team helps you figure out which ones to use, and how to arrange them into an experience that works for your users.

From Design to Build

Once your team has defined the strategy, scope, and structure of your service, the design system provides the building blocks for the interface layer:

How Components Work
Custom HTML elements with built-in accessibility, encapsulated styles, and consistent behavior.
Design Tokens
The design decision layer — colors, spacing, typography, and sizing defined as reusable values.
Styles Framework
CSS endpoints for tokens, typography, utilities, and a baseline reset.
Typography
Core typefaces, token-based sizing, and utility classes for consistent type.
Agency Themes
Color palettes for each agency group — apply once and every component updates.
Form Patterns
Validation, submission, error handling, and accessibility patterns for form-heavy applications.

Edit this page on GitHub (Permissions required)

Last updated: May 22, 2026