Color Tokens

Browse every color token in the NYSDS. Use the theme selector to see how theme tokens change across agency palettes. Click the copy button next to any token to copy it as a var() expression ready to paste into your CSS.

Default (NYS) Admin Business Environment Health Local Safety Transportation

Theme

Theme tokens change based on the active agency theme. They provide a seven-step intensity scale for branded UI elements.

9.41 
#154973

Color Theme

Primary brand color. Used for primary actions and interactive elements like buttons, checkboxes, and agency-specific headers and footers. Overridden by agency-specific themes.

--nys-color-theme
Copy
13.23 
#0e324f

Color Theme Strong

Stronger shade of theme color, used for hover state on interactive elements. Overridden by agency-specific themes.

--nys-color-theme-strong
Copy
17.47 
#081b2b

Color Theme Stronger

Strongest shade of theme color, used for pressed state on interactive elements. Overridden by agency-specific themes.

--nys-color-theme-stronger
Copy
4.58 
#457aa5

Color Theme Mid

Mid-range shade of theme color. Use sparingly, since text contrast against this color is problematic. Overridden by agency-specific themes.

--nys-color-theme-mid
Copy
12.4 5.07 
#cddde9

Color Theme Weak

Slightly lighter shade of theme color. Overridden by agency-specific themes.

--nys-color-theme-weak
Copy
15.79 6.45 
#eff6fb

Color Theme Weaker

Lighter shade of theme color, used to subtly convey brand in places with a lot of text, like the global agency footer. Overridden by agency-specific themes.

--nys-color-theme-weaker
Copy
16.44 6.72 
#f7fafd

Color Theme Faint

Faint shade of the theme color. Good for subtle accents or backgrounds. Overridden by agency-specific themes.

--nys-color-theme-faint
Copy

Intent

Intent tokens communicate status and feedback — success, warning, danger, and other semantic states. These remain consistent regardless of agency theme.

11.4 
#face00

Color Accent

Bold accent color for highlighting or emphasis. Use sparingly, especially in application contexts where it can be confused with warning or error colors.

--nys-color-accent
Copy
7.04 
#004dd1

Color Info

Informational color for neutral messages.

--nys-color-info
Copy
14.81 6.06 
#e5effa

Color Info Weak

Used as a background for informational contexts with a lot of text, like alerts.

--nys-color-info-weak
Copy
5.77 
#1e752e

Color Success

Used to communicate successful actions or states.

--nys-color-success
Copy
14.93 6.1 
#e8f1ea

Color Success Weak

Used as a background for success contexts with a lot of text, like alerts.

--nys-color-success-weak
Copy
11.4 
#face00

Color Warning

Used as a warning color for non-critical alerts.

--nys-color-warning
Copy
16.42 6.71 
#fefae5

Color Warning Weak

Used as a background for warning contexts with a lot of text, like alerts.

--nys-color-warning-weak
Copy
6.25 
#b52c2c

Color Danger

Used to indicate destructive actions or failures.

--nys-color-danger
Copy
14.69 6.01 
#f7eaea

Color Danger Weak

Used as a background in destructive or error contexts with a lot of text, like alerts.

--nys-color-danger-weak
Copy
11.06 
#721c1c

Color Emergency

Emergency color for critical alerts or actions. Use sparingly.

--nys-color-emergency
Copy
6.87 
#d89191

Color Emergency Weak

Emergency background color for critical alerts or actions. Refrain from using for other purposes.

--nys-color-emergency-weak
Copy

Semantic

Purpose-driven tokens for text, links, surfaces, ink, focus indicators, and base UI tones. These describe what a color is used for rather than what the color is.

20.88 
#dodoce

Color Base

Base color for supplementary informational messages.

--nys-color-base
Copy
14.71 6.01 
#ededed

Color Base Weak

Base background color for supplementary informational messages.

--nys-color-base-weak
Copy
#1b1b1b

Color Ink

Default for non-text and non-surface elements on a light background.

--nys-color-ink
Copy
#ffffff

Color Ink Reverse

Default for non-text and non-surface elements on a dark background.

--nys-color-ink-reverse
Copy
#1b1b1b

Color Text

Default text color on surface or surface raised.

--nys-color-text
Copy
#4a4d4f

Color Text Weak

Default text color on surface or surface raised.

--nys-color-text-weak
Copy
#797c7f

Color Text Weaker

Default text color on surface or surface raised.

--nys-color-text-weaker
Copy
#bec0c1

Color Text Weakest

Default text color on surface or surface raised.

--nys-color-text-weakest
Copy
#bec0c1

Color Text Disabled

Default text color for disabled state.

--nys-color-text-disabled
Copy
#004dd1

Color Link

Standard color for text links.

--nys-color-link
Copy
#003ba1

Color Link Strong

Used for hover and active states on text links.

--nys-color-link-strong
Copy
#002971

Color Link Strongest

Used for pressed states on text links.

--nys-color-link-strongest
Copy
#1b1b1b

Color Link Neutral

Default color for text-based links pressed state.

--nys-color-link-neutral
Copy
#004dd1

Color Focus

Used to color focus rings on interactive elements.

--nys-color-focus
Copy
#7AA5E7

Color Focus Reverse

Used to color focus rings on interactive elements when on a dark background.

--nys-color-focus-reverse
Copy
#ffffff

Color Text Reverse

Default text color against primary theme color.

--nys-color-text-reverse
Copy
#d0d0ce

Color Text Reverse Weak

Default text color against primary theme color.

--nys-color-text-reverse-weak
Copy
#bec0c1

Color Text Reverse Weaker

Default text color against primary theme color.

--nys-color-text-reverse-weaker
Copy
#62666a

Color Text Reverse Disabled

Default text color against primary theme color.

--nys-color-text-reverse-disabled
Copy
#a7a9ab

Color Link Reverse

Default text color against primary theme color.

--nys-color-link-reverse
Copy
#ededed

Color Link Reverse Strong

Default text color against primary theme color.

--nys-color-link-reverse-strong
Copy
#ffffff

Color Link Reverse Strongest

Default text color against primary theme color.

--nys-color-link-reverse-strongest
Copy
#ffffff

Color Link Reverse Neutral

Default text color against primary theme color.

--nys-color-link-reverse-neutral
Copy
#1b1b1b

Color Surface Reverse

Provides a strong contrast against {surface}. Used in the UNav footer.

--nys-color-surface-reverse
Copy
#ffffff

Color Surface

Default surface. Frame background color, card background, and modal background.

--nys-color-surface
Copy
#f6f6f6

Color Surface Raised

Provides a subtle contrast against {surface}. For use in the UNav Header: Trust Bar Dropdown Background, Language Dropdown Background

--nys-color-surface-raised
Copy

Looking for the neutral gray scale or transparency overlays? Those are primitive tokens — find them on the Primitives page.

Edit this page on GitHub (Permissions required)

Last updated: May 27, 2026