New York State Design System

# New York State Design System — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-tokens-package
confidence: high
verified_at: 2026-09-22
source_page: https://www.designsystems.one/design-systems/nysds
sources:
  - https://designsystem.ny.gov/
  - https://github.com/ITS-HCD/nysds
  - https://raw.githubusercontent.com/ITS-HCD/nysds/5f012c4a22e1c03916cdc1fcda1d65aec308d48c/packages/tokens/src/tokens.json
  - https://registry.npmjs.org/@nysds/tokens/-/tokens-1.21.1.tgz
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by New York State ITS. "New York State Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** New York State Design System
**Owner:** New York State ITS
**Official documentation:** https://designsystem.ny.gov/
**Visual character:** Institutional and deliberately unshowy: a deep State Blue on white, small 4px corners and Proxima Nova set at a plain 16px — with seven sector palettes behind it, so a health agency and a transportation agency can each look like themselves without leaving the system.

---

## Summary

The New York State Design System makes it easier to build accessible, mobile-friendly applications and websites for New York State.

_Editorial confidence: high. Values are drawn from well-documented public token references. Read from the maintainers' own DTCG token file at a pinned commit, not from the rendered site, and then checked a second time against dist/tokens.css in the published npm package: all twelve sampled values agree. That second pass earned its keep twice. It corrected the CSS variable names — the build collapses a `default` child into its parent, so the primary is --nys-color-theme and there is no --nys-color-theme-default — and it explains why --nys-color-theme looks like three different colours in the file: seven agency themes (admin, business, environment, health, local, safety, transportation) override it after :root, so the values here are the default State Blue theme only. Licence is worth stating precisely: package.json says MIT, but LICENSE.md is more careful — New York State's own work is a US government work released under CC0, with Material Icons under Apache-2.0 and Lit under BSD-3. Two details that are not measurements but say something anyway: the pill radius is 1776px, and the repository's former name was Excelsior, after the state motto. Field-level evidence: 67/108 claims source-linked, 67/108 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=nysds)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| State Blue 700 / Theme Default | `#154973` | `--nys-color-theme` | Primary theme colour — primary buttons, links and key UI |
| Theme Strong | `#0e324f` | `--nys-color-theme-strong` | Hover state on primary elements |
| Theme Mid | `#457aa5` | `--nys-color-theme-mid` | Secondary buttons and active states |
| Theme Faint | `#f7fafd` | `--nys-color-theme-faint` | Faintest theme tint for subtle fills and hover |
| Link Default | `#004dd1` | `--nys-color-link` | Inline link colour |
| Text Default | `#1b1b1b` | `--nys-color-text` | Default running text |
| Surface Default | `#ffffff` | `--nys-color-surface` | Default page surface |
| Surface Raised | `#f6f6f6` | `--nys-color-surface-raised` | Raised surface, cards and panels |

## Typography

- **Body:** Proxima Nova — `'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`
- **Heading:** Proxima Nova — `'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`
- **Ui:** Proxima Nova — `'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`
- **Display:** Proxima Nova — `'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`
- **Alt:** Oswald — `Oswald, Arial, sans-serif`
- **Serif:** Noto Serif — `'Noto Serif', Georgia, Cambria, 'Times New Roman', Times, serif`
- **Monospace:** Roboto Mono Web — `'Roboto Mono Web', 'Bitstream Vera Sans Mono', Consolas, Courier, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| body-xs | `0.75rem` | `1.25rem` |
| body-sm | `0.875rem` | `1.5rem` |
| body-md | `1rem` | `1.5rem` |
| body-lg | `1.125rem` | `1.75rem` |
| h1 | `2.5rem` | `2.5rem` |
| h2 | `2rem` | `2.25rem` |
| h3 | `1.75rem` | `2rem` |
| h4 | `1.375rem` | `2rem` |
| h5 | `1.375rem` | `1.75rem` |
| h6 | `1.125rem` | `1.75rem` |

## Spacing

Base unit: `0.5rem`

Scale: `0.25rem` · `0.5rem` · `0.75rem` · `1rem` · `1.5rem` · `2rem` · `3rem` · `4rem` · `6rem`

## Corner radius

| Name | Value |
| --- | --- |
| xs | `1px` |
| sm | `2px` |
| md | `0.25rem` |
| lg | `0.5rem` |
| xl | `0.75rem` |
| xxl | `1rem` |
| round | `1776px` |

## Quick start (CSS)

```css
/* New York State Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://designsystem.ny.gov/
   Reference scope: Read from the maintainers' own DTCG token file at a pinned commit, not from the rendered site, and then checked a second time against dist/tokens.css in the published npm package: all twelve sampled values agree. That second pass earned its keep twice. It corrected the CSS variable names — the build collapses a `default` child into its parent, so the primary is --nys-color-theme and there is no --nys-color-theme-default — and it explains why --nys-color-theme looks like three different colours in the file: seven agency themes (admin, business, environment, health, local, safety, transportation) override it after :root, so the values here are the default State Blue theme only. Licence is worth stating precisely: package.json says MIT, but LICENSE.md is more careful — New York State's own work is a US government work released under CC0, with Material Icons under Apache-2.0 and Lit under BSD-3. Two details that are not measurements but say something anyway: the pill radius is 1776px, and the repository's former name was Excelsior, after the state motto.
   Field evidence: https://www.designsystems.one/api/style-spec?system=nysds */

:root {
  /* Color */
  --nys-color-theme: #154973; /* Primary theme colour — primary buttons, links and key UI */
  --nys-color-theme-strong: #0e324f; /* Hover state on primary elements */
  --nys-color-theme-mid: #457aa5; /* Secondary buttons and active states */
  --nys-color-theme-faint: #f7fafd; /* Faintest theme tint for subtle fills and hover */
  --nys-color-link: #004dd1; /* Inline link colour */
  --nys-color-text: #1b1b1b; /* Default running text */
  --nys-color-surface: #ffffff; /* Default page surface */
  --nys-color-surface-raised: #f6f6f6; /* Raised surface, cards and panels */

  /* Typography */
  --font-body: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-heading: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-ui: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-display: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-alt: Oswald, Arial, sans-serif;
  --font-serif: 'Noto Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-monospace: 'Roboto Mono Web', 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;

  /* Type scale */
  --text-body-xs: 0.75rem; /* line-height 1.25rem */
  --text-body-sm: 0.875rem; /* line-height 1.5rem */
  --text-body-md: 1rem; /* line-height 1.5rem */
  --text-body-lg: 1.125rem; /* line-height 1.75rem */
  --text-h1: 2.5rem; /* line-height 2.5rem */
  --text-h2: 2rem; /* line-height 2.25rem */
  --text-h3: 1.75rem; /* line-height 2rem */
  --text-h4: 1.375rem; /* line-height 2rem */
  --text-h5: 1.375rem; /* line-height 1.75rem */
  --text-h6: 1.125rem; /* line-height 1.75rem */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-xxl: 1rem;
  --radius-round: 1776px;
}
```

## Engineering profile

- Public engineering details are limited; see the official documentation.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of New York State Design System by New York State ITS — The New York State Design System makes it easier to build accessible, mobile-friendly applications and websites for New York State. Character: Institutional and deliberately unshowy: a deep State Blue on white, small 4px corners and Proxima Nova set at a plain 16px — with seven sector palettes behind it, so a health agency and a transportation agency can each look like themselves without leaving the system. Use a primary colour near #154973, the typeface "Proxima Nova" (or a close equivalent), corner radius around 1px, a spacing rhythm on a 0.5rem base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [New York State Design System documentation](https://designsystem.ny.gov/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/nysds) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._