Design Tokens

Color

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
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
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
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
#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
#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
#1b1b1b

Color Neutral 900

Darkest neutral color.

--nys-color-neutral-900
Copy
#323435

Color Neutral 800

Very dark neutral.

--nys-color-neutral-800
Copy
#4a4d4f

Color Neutral 700

Dark neutral.

--nys-color-neutral-700
Copy
#62666a

Color Neutral 600

Medium-dark neutral.

--nys-color-neutral-600
Copy
#797c7f

Color Neutral 500

Mid-range neutral.

--nys-color-neutral-500
Copy
#909395

Color Neutral 400

Medium-light neutral.

--nys-color-neutral-400
Copy
#a7a9ab

Color Neutral 300

Soft gray neutral.

--nys-color-neutral-300
Copy
#bec0c1

Color Neutral 200

Pale gray neutral.

--nys-color-neutral-200
Copy
#d0d0ce

Color Neutral 100

Very light gray neutral

--nys-color-neutral-100
Copy
#ededed

Color Neutral 50

Soft off-white neutral.

--nys-color-neutral-50
Copy
#f6f6f6

Color Neutral 10

Lightest visible neutral.

--nys-color-neutral-10
Copy
#ffffff

Color Black Transparent 50

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-50
Copy
#000000

Color Black Transparent 100

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-100
Copy
hsla(0, 0%, 100%, 0)

Color Black Transparent 200

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-200
Copy
#a7a9ab

Color Black Transparent 300

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-300
Copy
#909395

Color Black Transparent 400

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-400
Copy
#797C7F

Color Black Transparent 500

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-500
Copy
#62666a

Color Black Transparent 600

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-600
Copy
#4a4d4f

Color Black Transparent 700

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-700
Copy
#323435

Color Black Transparent 800

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-800
Copy
#1b1b1b

Color Black Transparent 900

A black transparent overlay to be used with light backgrounds.

--nys-color-black-transparent-900
Copy
#ffffff

Color White Transparent 50

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-50
Copy
#000000

Color White Transparent 100

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-100
Copy
hsla(0, 0%, 100%, 0)

Color White Transparent 200

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-200
Copy
#a7a9ab

Color White Transparent 300

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-300
Copy
#909395

Color White Transparent 400

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-400
Copy
#797c7f

Color White Transparent 500

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-500
Copy
#62666a

Color White Transparent 600

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-600
Copy
#4a4d4f

Color White Transparent 700

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-700
Copy
#323435

Color White Transparent 800

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-800
Copy
#1b1b1b

Color White Transparent 900

A white transparent overlay to be used with dark backgrounds.

--nys-color-white-transparent-900
Copy

Font-family

Aa

Font Family, Sans

Primary brand font, used for content, headers, and UI text. → Proxima Nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

--nys-font-family-sans
Copy
Aa

Font Family, Agency

Brand font used only for agency, program, and initiative titles. → D Sari, Arial, sans-serif

--nys-font-family-agency
Copy
Aa

Font Family, Alternate

Alternate brand font, used sparingly for accent in public-facing sites. → Oswald, Arial, sans-serif

--nys-font-family-alt
Copy

Font-size

Aa

Font Size, 2XS

Extra-extra-small font size. Typically used for fine print or disclaimers. → 10px

--nys-font-size-2xs
Copy
Aa

Font Size, XS

Extra-small font size. Used for less prominent labels or captions. → 12px

--nys-font-size-xs
Copy
Aa

Font Size, SM

Small font size. Commonly used for secondary text or labels. → 14px

--nys-font-size-sm
Copy
Aa

Font Size, MD

Medium font size. Default body text size. → 16px

--nys-font-size-md
Copy
Aa

Font Size, LG

Large font size. Used for subheadings or larger labels. → 18px

--nys-font-size-lg
Copy
Aa

Font Size, XL

Extra-large font size. Used for headings or standout elements. → 20px

--nys-font-size-xl
Copy
Aa

Font Size, 2XL

Double extra-large font size. Commonly used for secondary headings. → 22px

--nys-font-size-2xl
Copy
Aa

Font Size, 3XL

Triple extra-large font size. Used for primary headings or key text. → 24px

--nys-font-size-3xl
Copy
Aa

Font Size, 4XL

Quadruple extra-large font size. Typically used for prominent headlines. → 28px

--nys-font-size-4xl
Copy
Aa

Font Size, 5XL

Quintuple extra-large font size. Reserved for key marketing or hero sections. → 32px

--nys-font-size-5xl
Copy
Aa

Font Size, 6XL

Six times extra-large font size. Used for impactful hero text. → 36px

--nys-font-size-6xl
Copy
Aa

Font Size, 7XL

Seven times extra-large font size. Highly prominent text. → 40px

--nys-font-size-7xl
Copy
Aa

Font Size, 8XL

Eight times extra-large font size. Typically for titles or splash content. → 44px

--nys-font-size-8xl
Copy
Aa

Font Size, 9XL

Nine times extra-large font size. Maximum size for hero content. → 50px

--nys-font-size-9xl
Copy

Space

Space 1px

Spacing tokens standardize margins, padding, and gaps in layouts. This is ultra-thin for fine detail, like borders or dividers.

--nys-space-1px
Copy

Space 2px

Very small spacing for micro-adjustments or compact layouts.

--nys-space-2px
Copy

Space 50

Extra-small spacing, typically used for tight content spacing.

--nys-space-50
Copy

Space 100

Small spacing, often used for compact layouts or minimal margins.

--nys-space-100
Copy

Space 150

Small-medium spacing for general UI elements.

--nys-space-150
Copy

Space 200

Medium spacing, commonly used for standard element separation.

--nys-space-200
Copy

Space 250

Medium-large spacing for container padding or visual balance.

--nys-space-250
Copy

Space 300

Standard spacing for layouts with moderate separation.

--nys-space-300
Copy

Space 400

Large spacing for separating sections or creating visual breaks.

--nys-space-400
Copy

Space 500

Extra-large spacing for major sections or wide gaps.

--nys-space-500
Copy

Space 600

Very large spacing, often used for section padding or layouts.

--nys-space-600
Copy

Space 700

Generous spacing for wide content separation.

--nys-space-700
Copy

Space 800

Maximum spacing for highly open designs or major layouts.

--nys-space-800
Copy

Space 1200

Largest spacing token for creating significant visual separation.

--nys-space-1200
Copy

Size

Size 1px

Size tokens standardize the width and height of elements, like icons, typography, and UI components.

--nys-size-1px
Copy

Size 2px

Slightly thicker size for minimal elements, such as borders.

--nys-size-2px
Copy

Size 50

Extra-small size for compact UI elements or icons.

--nys-size-50
Copy

Size 100

Small size for UI elements or containers.

--nys-size-100
Copy

Size 150

Small-medium size for buttons or small containers.

--nys-size-150
Copy

Size 200

Medium size, often used for inputs or cards.

--nys-size-200
Copy

Size 250

Medium-large size for slightly larger UI elements.

--nys-size-250
Copy

Size 300

Standard size for larger UI controls or containers.

--nys-size-300
Copy

Size 400

Large size for buttons, modals, or prominent elements.

--nys-size-400
Copy

Size 500

Very large size for main containers or sections.

--nys-size-500
Copy

Size 600

Extra-large size for significant UI containers or elements.

--nys-size-600
Copy

Size 700

Massive size for prominent layout features.

--nys-size-700
Copy

Size 800

Largest size for visual anchors or major elements.

--nys-size-800
Copy

Size 1200

Maximum size for expansive layouts or hero elements.

--nys-size-1200
Copy

Radius

Radius XS

Extra-small radius for subtle rounding.

--nys-radius-xs
Copy

Radius SM

Small radius for slightly rounded elements.

--nys-radius-sm
Copy

Radius MD

Medium radius input elements like text fields, checkboxes, and select dropdowns.

--nys-radius-md
Copy

Radius LG

Larger radius for a more pronounced rounding.

--nys-radius-lg
Copy

Radius XL

Extra-large radius for buttons, to quickly indicate interactivity.

--nys-radius-xl
Copy

Radius Round

Fully rounded elements. Used for avatars and icons.

--nys-radius-round
Copy