Spacing & Layout Tokens

Tokens for spacing, sizing, border radius, and elevation that keep layouts consistent across the system. Click the copy button next to any token to copy it as a var() expression.

Spacing

A thirteen-step scale for margins, padding, and gaps. Use these to maintain consistent spatial rhythm across your application.

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

Sizing

Dimension tokens for widths, heights, and other fixed measurements.

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

Border Radius

Six radius tokens from subtle rounding to fully circular. Components use these internally — apply them to your own elements to match the system's corner styles.

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

Elevation

Box shadow tokens that create depth. Use raised for cards and overlay for modals and dropdowns.

Shadow Raised

Small surfaces. Used for dropdown items, toasts, and popovers.

--nys-shadow-raised
Copy

Shadow Overlay

Large surfaces. Used for modals.

--nys-shadow-overlay
Copy

Edit this page on GitHub (Permissions required)

Last updated: May 22, 2026