What's New

Introducing the Grid

Jul 9, 2026

import DemoContainerGrid from '~/content/docs/cds/layouts/container-grid.astro'; The Grid is the layout primitive that draws the **12-column rhythm** every page shares. It's a thin, predictable wrapper over CSS Grid: the container owns the page margins, the grid owns the columns. Nest a grid inside a container for a page layout, or use it on its own _inside_ a component or card — it has no side margin and needs no grid ancestor. Here's the shape it's built for — a full page layout. A full-bleed hero reaches the edge, then the grid lays a row of cards and a main/aside split across the 12 columns, and the footer spans the content width. The container supplies the responsive page margins; the grid does the rest. Children place with the span utilities, and they **auto-flow**: siblings whose sp...

Introducing the Connected Design System

Apr 28, 2026

The Connected Design System (CDS) is the design system that powers our customer-facing products across brands. It replaces the patchwork of per-product styles, ad-hoc components, and unspoken conventions that built up over the years with one coherent source of truth — covering visual language, components, and the documentation you are reading right now. This article is meant for the teams who will consume CDS: front-end developers, designers, and anyone who builds customer-facing experiences and needs to know what to use, when, and how. CDS is delivered as three things you can pick up and use today. A pure CSS package, , that you drop into a project to get the foundations (tokens, typography, layouts, utilities) and the components (buttons, cards, forms, navigation, feedback). The CSS is b...

Chip

Apr 21, 2026

A compact selectable button for filters, tags, and group selections.

Carousel

Apr 8, 2026

A Swiper-based carousel with a custom progress indicator for navigating between slides.

Date Picker

Mar 26, 2026

A combined text-input and calendar component for collecting specific dates.

Form Stepper

Mar 23, 2026

A sticky form header that communicates progress through a multi-step process.

Checkbox and Radio

Mar 16, 2026

Two foundational form controls for multi-select and single-select choices.

Simple Card

Mar 16, 2026

A lightweight container for grouping related content with consistent surface styling.

Slider

Feb 24, 2026

A new range-input component for selecting numeric values inside a known range.

Tabs

Jan 13, 2026

A composable Tabs component for switching between related views in the same context.