Primitive Tokens

Primitive tokens are the raw building blocks that semantic tokens reference. In most cases, you should use color or typography semantic tokens instead. Primitives don't adapt to themes or convey purpose — they're fixed values. Use them only when you need a specific value that no semantic token covers.

Color — Neutral

The neutral gray scale from 900 (near-black) to 10 (near-white). Use for borders, dividers, backgrounds, and subtle UI elements. For purpose-driven colors, see semantic color tokens.

#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

Color — Transparency

Black and white overlays at ten opacity steps. Use for scrims, hover states, and layered surfaces. For purpose-driven colors, see semantic color tokens.

#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 Size

The raw type scale from 2xs to 9xl. Semantic tokens map to these — see semantic font sizes.

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

Font Family

The base font stacks. Use semantic font families (body, heading, display, ui) instead of referencing these directly.

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
Aa

Font Family, Monospace

Monospace font stack for code and preformatted text.

--nys-font-family-monospace
Copy
Aa

Font Family, Serif

Serif font stack for traditional or editorial contexts.

--nys-font-family-serif
Copy

Font Weight

Nine weight values from thin (100) to black (900).

Aa
100

Font Weight, Thin

Thinnest available weight.

--nys-font-weight-thin
Copy
Aa
200

Font Weight, Extralight

Extra-light weight.

--nys-font-weight-extralight
Copy
Aa
300

Font Weight, Light

Light weight.

--nys-font-weight-light
Copy
Aa
400

Font Weight, Regular

Regular (default) weight.

--nys-font-weight-regular
Copy
Aa
500

Font Weight, Medium

Medium weight.

--nys-font-weight-medium
Copy
Aa
600

Font Weight, Semibold

Semi-bold weight.

--nys-font-weight-semibold
Copy
Aa
700

Font Weight, Bold

Bold weight.

--nys-font-weight-bold
Copy
Aa
800

Font Weight, Extrabold

Extra-bold weight.

--nys-font-weight-extrabold
Copy
Aa
900

Font Weight, Black

Heaviest available weight.

--nys-font-weight-black
Copy

Line Height

The raw line height scale. See semantic line heights for role-based values.

Line
height
18px

Line Height, 2XS

Primitive line height value.

--nys-font-lineheight-2xs
Copy
Line
height
21px

Line Height, XS

Primitive line height value.

--nys-font-lineheight-xs
Copy
Line
height
22px

Line Height, SM

Primitive line height value.

--nys-font-lineheight-sm
Copy
Line
height
25px

Line Height, MD

Primitive line height value.

--nys-font-lineheight-md
Copy
Line
height
28px

Line Height, LG

Primitive line height value.

--nys-font-lineheight-lg
Copy
Line
height
31px

Line Height, XL

Primitive line height value.

--nys-font-lineheight-xl
Copy
Line
height
39px

Line Height, 2XL

Primitive line height value.

--nys-font-lineheight-2xl
Copy
Line
height
45px

Line Height, 3XL

Primitive line height value.

--nys-font-lineheight-3xl
Copy
Line
height
57px

Line Height, 4XL

Primitive line height value.

--nys-font-lineheight-4xl
Copy

Letter Spacing

The raw letter spacing scale including negative values for tighter tracking on large display text. See semantic letter spacing for role-based values.

Abc
0rem

Letter Spacing, 0

Primitive letter spacing value.

--nys-font-letterspacing-0
Copy
Abc
.001rem

Letter Spacing, 100

Primitive letter spacing value.

--nys-font-letterspacing-100
Copy
Abc
.001rem

Letter Spacing, 200

Primitive letter spacing value.

--nys-font-letterspacing-200
Copy
Abc
.002rem

Letter Spacing, 300

Primitive letter spacing value.

--nys-font-letterspacing-300
Copy
Abc
.003rem

Letter Spacing, 400

Primitive letter spacing value.

--nys-font-letterspacing-400
Copy
Abc
.003rem

Letter Spacing, 500

Primitive letter spacing value.

--nys-font-letterspacing-500
Copy
Abc
.004rem

Letter Spacing, 600

Primitive letter spacing value.

--nys-font-letterspacing-600
Copy
Abc
-.01rem

Letter Spacing, Negative-100

Primitive letter spacing value.

--nys-font-letterspacing-negative-100
Copy
Abc
-.02rem

Letter Spacing, Negative-200

Primitive letter spacing value.

--nys-font-letterspacing-negative-200
Copy

Edit this page on GitHub (Permissions required)

Last updated: May 22, 2026