Since the color system overhaul, SDS has shipped a steady run of releases from 3.29.0 through 3.31.8. This update groups the changes that matter most when building with SDS: a refreshed color palette, tokens, the ds-plan component, and a set of documentation reliability improvements.

Refreshed color palette

Following the move to OKLCH colors, the entire SDS palette was regenerated directly from the design tokens. With the tints and shades now derived in OKLCH, the refresh was an opportunity to rework each color ramp to take advantage of the improved perceptual uniformity that OKLCH provides.

The payoff is two-fold. The steps from 950 (darkest) through to 50 (lightest) are now more predictable and consistent, so each increment feels like an even move along the ramp rather than an uneven jump. Just as importantly, the hue stays consistent as the tint changes — a lighter or darker step reads as the same color rather than drifting towards a neighbouring one.

On top of the ramp work, colors were tweaked across the board to feel cleaner and less muddied — most noticeably in the lighter tints, where the previous palette tended to look washed out or slightly grey. As a result most values shifted, some subtly and some more obviously, but the overall palette stays recognisably SDS.

Each strip below runs from 950 on the left to 50 on the right. The top strip is the new OKLCH palette; the bottom strip is the previous palette.

This update groups the remaining changes that matter most when building with SDS.

Tokens move to CSS custom properties

SDS 3.29.x migrated component styling from Sass variables to CSS custom properties. Component styles now read their values from the same generated token layer that applications can use, which keeps SDS components and your own CSS in sync.

The token build also now emits dedicated icon size variables and restores responsive spacing variables, so spacing and icon sizing can be referenced directly as custom properties rather than recompiled from Sass.

.example {
  gap: var(--space-200);
  font-size: var(--text-size-label);
}

Published design token artifacts

SDS 3.30.0 publishes the full set of design token artifacts alongside the package, including DTCG-format source files. The Design tokens documentation now reflects this, covering the available CSS variables, JavaScript tokens, and the source JSON that drives them.

This makes it possible to consume SDS tokens outside of CSS — for example in design tooling, theming layers, or build pipelines — from a single published source.

Color utilities generated from tokens

Following the move to OKLCH and light-dark() colors, SDS 3.31.0 regenerates the color utility classes directly from the color tokens. The generated utilities preserve their previous selector matching and contrast behavior, so existing markup keeps working while the underlying values stay aligned with the token source.

The color swatch tool that powers the docs was rebuilt on top of SDS layout and components, gaining swatch filtering and a corrected asset path so it loads reliably. You can browse the palette on the Colors page.

ds-plan improvements

ds-plan received the most user-facing attention across these releases.

IMSI labels

Plan tags can now show an associated IMSI alongside the plan name using the imsi attribute (SDS 3.31.3) — useful when a tag needs to identify both the subscription plan and the specific subscriber.

More supported plans and legacy aliases

The plan registry expanded to include the Arc, M1, and V1 plans (3.31.4), added support for beta plan metadata, and most recently added planFX1 (3.31.8). Plan alias lookup was also refined to recognise legacy plan identifiers, so ds-plan renders the correct official label and color even when product data uses older or alternate plan keys.

The Supported plans table lists each plan the component recognises. See the Plan component documentation for full usage, including IMSI, bundle, sizing, and form (checkbox/radio) options.

ds-theme and color scheme inheritance

ds-theme now supports localized labels for its light, system, and dark options (3.30.7). Shadow-DOM hosts also correctly inherit the active color scheme (3.31.4), which keeps components inside shadow roots aligned with the page theme. See the Theme component documentation.

SDS MCP server 3.3.0

The SDS MCP server now validates component attributes from the published manifests, including the new ds-plan attributes and aliases. AI coding tools using the server get more accurate validation and component metadata when generating and checking SDS markup.

Documentation updates

• Versioned docs assets — the site resolves SDS asset URLs through a shared helper and appends a version query, so embedded examples, manifests, and registry-driven tables pick up current SDS assets instead of stale cached files.
• More stable embedded examples — live previews now resize from the iframe side with a parent-side height listener and a small preview buffer, improving rendering on pages whose content changes after initial paint.
• Earlier theme application — the saved SDS theme is now applied before stylesheets load, reducing theme flash and keeping examples aligned with the selected light, system, or dark mode from the first paint.
• Relocated design token docs and refreshed component manifest/registry data behind the component pages.