Design Tokens
Color
#154973Color 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#0e324fColor Theme Strong
Stronger shade of theme color, used for hover state on interactive elements. Overridden by agency-specific themes.
--nys-color-theme-strong#081b2bColor Theme Stronger
Strongest shade of theme color, used for pressed state on interactive elements. Overridden by agency-specific themes.
--nys-color-theme-stronger#457aa5Color 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#cddde9Color Theme Weak
Slightly lighter shade of theme color. Overridden by agency-specific themes.
--nys-color-theme-weak#eff6fbColor 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#f7fafdColor Theme Faint
Faint shade of the theme color. Good for subtle accents or backgrounds. Overridden by agency-specific themes.
--nys-color-theme-faint#face00Color 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#004dd1Color Info
Informational color for neutral messages.
--nys-color-info#e5effaColor Info Weak
Used as a background for informational contexts with a lot of text, like alerts.
--nys-color-info-weak#1e752eColor Success
Used to communicate successful actions or states.
--nys-color-success#e8f1eaColor Success Weak
Used as a background for success contexts with a lot of text, like alerts.
--nys-color-success-weak#face00Color Warning
Used as a warning color for non-critical alerts.
--nys-color-warning#fefae5Color Warning Weak
Used as a background for warning contexts with a lot of text, like alerts.
--nys-color-warning-weak#b52c2cColor Danger
Used to indicate destructive actions or failures.
--nys-color-danger#f7eaeaColor Danger Weak
Used as a background in destructive or error contexts with a lot of text, like alerts.
--nys-color-danger-weak#721c1cColor Emergency
Emergency color for critical alerts or actions. Use sparingly.
--nys-color-emergency#1b1b1bColor Ink
Default text color. Provides good legibility.
--nys-color-ink#ffffffColor Ink Reverse
Reverse text color for dark backgrounds.
--nys-color-ink-reverse#004dd1Color Link
Standard color for text links.
--nys-color-link#003ba1Color Link Strong
Used for hover and active states on text links.
--nys-color-link-strong#002971Color Link Strongest
Used for pressed states on text links.
--nys-color-link-strongest#004dd1Color Focus
Used to color focus rings on interactive elements.
--nys-color-focusFont-family
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-sansFont Family, Agency
Brand font used only for agency, program, and initiative titles. → D Sari, Arial, sans-serif
--nys-font-family-agencyFont Family, Alternate
Alternate brand font, used sparingly for accent in public-facing sites. → Oswald, Arial, sans-serif
--nys-font-family-altFont-size
Font Size, 2XS
Extra-extra-small font size. Typically used for fine print or disclaimers. → 10px
--nys-font-size-2xsFont Size, XS
Extra-small font size. Used for less prominent labels or captions. → 12px
--nys-font-size-xsFont Size, SM
Small font size. Commonly used for secondary text or labels. → 14px
--nys-font-size-smFont Size, MD
Medium font size. Default body text size. → 16px
--nys-font-size-mdFont Size, LG
Large font size. Used for subheadings or larger labels. → 18px
--nys-font-size-lgFont Size, XL
Extra-large font size. Used for headings or standout elements. → 20px
--nys-font-size-xlFont Size, 2XL
Double extra-large font size. Commonly used for secondary headings. → 22px
--nys-font-size-2xlFont Size, 3XL
Triple extra-large font size. Used for primary headings or key text. → 24px
--nys-font-size-3xlFont Size, 4XL
Quadruple extra-large font size. Typically used for prominent headlines. → 28px
--nys-font-size-4xlFont Size, 5XL
Quintuple extra-large font size. Reserved for key marketing or hero sections. → 32px
--nys-font-size-5xlFont Size, 6XL
Six times extra-large font size. Used for impactful hero text. → 36px
--nys-font-size-6xlFont Size, 7XL
Seven times extra-large font size. Highly prominent text. → 40px
--nys-font-size-7xlFont Size, 8XL
Eight times extra-large font size. Typically for titles or splash content. → 44px
--nys-font-size-8xlFont Size, 9XL
Nine times extra-large font size. Maximum size for hero content. → 50px
--nys-font-size-9xlSpace
Space 1px
Spacing tokens standardize margins, padding, and gaps in layouts. This is ultra-thin for fine detail, like borders or dividers.
--nys-space-1pxSpace 2px
Very small spacing for micro-adjustments or compact layouts.
--nys-space-2pxSpace 50
Extra-small spacing, typically used for tight content spacing.
--nys-space-50Space 100
Small spacing, often used for compact layouts or minimal margins.
--nys-space-100Space 150
Small-medium spacing for general UI elements.
--nys-space-150Space 200
Medium spacing, commonly used for standard element separation.
--nys-space-200Space 250
Medium-large spacing for container padding or visual balance.
--nys-space-250Space 300
Standard spacing for layouts with moderate separation.
--nys-space-300Space 400
Large spacing for separating sections or creating visual breaks.
--nys-space-400Space 500
Extra-large spacing for major sections or wide gaps.
--nys-space-500Space 600
Very large spacing, often used for section padding or layouts.
--nys-space-600Space 700
Generous spacing for wide content separation.
--nys-space-700Space 800
Maximum spacing for highly open designs or major layouts.
--nys-space-800Space 1200
Largest spacing token for creating significant visual separation.
--nys-space-1200Size
Size 1px
Size tokens standardize the width and height of elements, like icons, typography, and UI components.
--nys-size-1pxSize 2px
Slightly thicker size for minimal elements, such as borders.
--nys-size-2pxSize 50
Extra-small size for compact UI elements or icons.
--nys-size-50Size 100
Small size for UI elements or containers.
--nys-size-100Size 150
Small-medium size for buttons or small containers.
--nys-size-150Size 200
Medium size, often used for inputs or cards.
--nys-size-200Size 250
Medium-large size for slightly larger UI elements.
--nys-size-250Size 300
Standard size for larger UI controls or containers.
--nys-size-300Size 400
Large size for buttons, modals, or prominent elements.
--nys-size-400Size 500
Very large size for main containers or sections.
--nys-size-500Size 600
Extra-large size for significant UI containers or elements.
--nys-size-600Size 700
Massive size for prominent layout features.
--nys-size-700Size 800
Largest size for visual anchors or major elements.
--nys-size-800Size 1200
Maximum size for expansive layouts or hero elements.
--nys-size-1200Radius
Radius XS
Extra-small radius for subtle rounding.
--nys-radius-xsRadius SM
Small radius for slightly rounded elements.
--nys-radius-smRadius MD
Medium radius input elements like text fields, checkboxes, and select dropdowns.
--nys-radius-mdRadius LG
Larger radius for a more pronounced rounding.
--nys-radius-lgRadius XL
Extra-large radius for buttons, to quickly indicate interactivity.
--nys-radius-xlRadius Round
Fully rounded elements. Used for avatars and icons.
--nys-radius-round