mads.prodcdn.com

Massachusetts foundations, ready at the edge.

Version-pinned design tokens, utility styles, and public assets from the Massachusetts Design System, served with immutable caching and no package-CDN dependency.

Explore the system

Visit upstream

Assets 1.2.0
Tokens 1.2.0
Styles 1.0.0

Two lines to start

Add the foundations

<link rel="stylesheet"
  href="https://mads.prodcdn.com/tokens/1.2.0/index.css">
<link rel="stylesheet"
  href="https://mads.prodcdn.com/styles/1.0.0/css/index.min.css">

Foundations

Color, type, space, and shape

These values are read directly from @massds/mds-tokens. Select a color to copy its CSS custom property.

Bay blue

brand-primary

Berkshires green

brand-secondary

Independence cranberry

brand-tertiary

Duckling yellow

brand-highlight

Brand gray

brand-neutral

Typography

Noto Sans scale

mds-text-*

heading-2xl

The Bay State

heading-lg

Built for public service

body-lg

Clear, inclusive foundations for Massachusetts digital services.

Label text Eyebrow text Caption text

Spacing

A consistent rhythm

mds-space-*

3xs

2xs

2xl

3xl

Shape

Radii and elevation

mds-radius-*

xs2px

sm4px

md8px

maxpill

Container

Utility styles

Composable classes in action

The styles package turns semantic tokens into responsive grid, spacing, color, type, radius, and elevation helpers.

Primary surface

Bay blue foundations for informational content.

brand-primary-lowest

Secondary surface

Berkshires green for supportive experiences.

brand-secondary-lowest

Tertiary surface

Cranberry tones for warmth and distinction.

brand-tertiary-lowest

Neutral surface

Quiet structure for tools and supporting content.

brand-neutral-lowest

Try composing .mds-grid .mds-gap-md .mds-padding-block-lg .mds-radius-md .mds-shadow-hover-md

Icon library

Regular and bold, ready by URL

Filter this sample set, switch weight, then select an icon to copy its production CDN URL.

This is a curated preview. The mirrored package contains 516 SVG icons across regular and bold weights.

Signature assets

State seal and motion

Production-ready SVG, PNG, and Lottie files are available from immutable version paths.

Colorstate-seal-color.svg

Blackstate-seal-black.svg

Graystate-seal-gray.svg

Whitestate-seal-white.svg

Lottie preview

Loader 01

Rendered from the packaged animation metadata without adding a third-party player to this demo.

Canvas: Loading…
Frame rate: Loading…
Duration: Loading…
Format: Loading…

Download JSON

Reading packaged animation metadata…

Pinned packages

Use only what you need

Every package releases independently. Paths include both package and version so future releases never change existing URLs.

Assets1.2.0

`@massds/mds-assets`

Icons, state seal variants, and animation files.

/assets/1.2.0/

Tokens1.2.0

`@massds/mds-tokens`

Semantic and primitive design tokens in CSS.

/tokens/1.2.0/index.css

Styles1.0.0

`@massds/mds-styles`

Bundled utility CSS and reusable Sass mixins.

/styles/1.0.0/css/index.min.css