W3C Design System.

W3C Design System Progressive enhancement

Content precedes controls

W3C separates core styling from advanced components. The collapsible starts as ordinary headings followed by content. With no script, every session outline is readable. main.js inserts buttons and changes the state only after it discovers the documented data attributes. This is a different implementation model from shipping an already-hidden accordion whose controls may never initialize.

The preview uses the official CDN core.css, advanced.css and main.js, saved as a dated local snapshot. The html.js marker activates advanced selectors. Omitting that marker changes ARIA attributes while leaving the bodies visually open; the preview explicitly tests actual visibility as well as aria-expanded.

Read the supporting specification

W3C Design System Fluid type and font loading

A modest reading scale

The body size grows from 15px at the lower viewport bound to 16px at 1120px. Nine named custom properties provide the scale. H1 uses --w3c-text-5, not the largest --w3c-text-7; a 36px display title copied indiscriminately into every document would not match the standard heading hierarchy.

Noto Sans is the intended web font. The native fallback stack uses Trebuchet MS and Geneva until the font-loading path adds fonts-loaded to the root. This independent example leaves the fallback active and labels that choice. The fluid size and line-height remain native; the preview does not claim exact Noto Sans glyph metrics.

Read the supporting specification

W3C Design System Reading width and spacing

Compose layout primitives

The l-center primitive supplies a 70rem maximum inline size and 5vw side padding. The preview adds an application-specific 55rem cap to keep three short learning outlines compact. That cap is not a new W3C token. Within each collapsible body, the native 41.25rem text measure limits long lines.

The documented Stack mixin creates a column and applies margin-top to direct siblings after the first. Its default measure is 1em and callers can pass another unit. Treat it as a relationship between blocks, rather than inventing a global numbered spacing scale. The collapsible itself has separately verified 25px inset, 16px separation and 6px radius.

Read the supporting specification

W3C Design System Semantic color roles

Keep link history and focus visible

The system distinguishes the default blue link, deep-blue hover and purple visited state. These roles matter on a site where people return to long documents and navigate between references. Reusing the link alias for unrelated decoration makes future theme changes alter unrelated surfaces.

Focus uses yellow with a visible boundary. The settings page separates ordinary borders from the darker input-border role. It also lists different meanings for information, success, warning and error colors. Preserve the role and verify its pairing against the actual background; a color swatch alone is not proof that a component state has sufficient contrast.

Read the supporting specification

W3C Design System Collapsible markup and script

Heading, button and adjacent body

Each direct child contains a heading followed immediately by its content body. The script uses nextElementSibling to find that body, so inserting unrelated metadata between them would break the relationship. Place a category label inside the heading span, as in the documented group list pattern. The script wraps the heading content in a button.

The native code toggles aria-expanded on that button and aria-hidden on the body. The advanced stylesheet hides the collapsed body. data-anchor="no" prevents the separate heading-anchor feature from introducing unwanted links into this component. Initialize main.js once; repeated enhancement would nest extra buttons in headings.

<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
  <div>
    <h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
    <div>
      <p>Connect each field to its label, hint and recovery message.</p>
      <ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
    </div>
  </div>
</div>

Code reference

Read the supporting specification

W3C Design System Bulk controls and keyboard use

Extend through the existing buttons

Expand all and Collapse all are original example controls. They inspect each native button and click it only when its state needs to change. This keeps the native state transition and visual rule together. They do not directly edit one ARIA attribute while leaving the other stale.

Native buttons provide Enter and Space activation. The preview checks an individual button, expands all, collapses all and opens one again from the keyboard. A polite status message describes the bulk action. The source component permits several outlines to be open at once; it is not an exclusive one-open accordion.

1. Open Inclusive forms and inspect its practical list.
2. Expand all to compare the three session descriptions.
3. Collapse all, then use Enter on one heading to reopen only that section.

Read the supporting specification

W3C Design System Assets and integration

No invented package installation

The official getting-started page publishes stable CDN entry points for core, advanced and print styles, plus main.js and optional feature scripts. The setup block uses those actual paths. A React provider or an npm package is unnecessary for this HTML implementation. The local demo vendors the downloaded files to make the specimen independent of a live connection.

Production integration should retain the documented CSS capability gate for advanced styles when supporting the same older browser population. The compact setup loads advanced styles directly for modern browsers. Include the print stylesheet in a full document site; the standalone preview focuses on the interactive screen specimen.

• core.css: base typography, layouts and unenhanced components.
• advanced.css: rules for JavaScript-enhanced states.
• main.js: discovers data hooks and enhances supported components once.

Read the supporting specification

W3C Design System Scope and verification

Design system, not conformance certification

A W3C-styled page is not automatically WCAG conformant. Test its actual content, focus order, zoom behavior and recovery states. This example checks three viewport widths and the no-script baseline; it does not claim certification or an exhaustive assistive-technology audit.

The learning-circle names and descriptions are original fictional content. They are not official working groups, schedules or registration opportunities. The example deliberately avoids W3C logos and membership claims. Reusing a public style asset must remain separate from implying institutional endorsement.

Read the supporting specification

W3C Design System Design System Component Examples

<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
  <div>
    <h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
    <div>
      <p>Connect each field to its label, hint and recovery message.</p>
      <ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
    </div>
  </div>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>document.documentElement.classList.add("js")</script><title>Web learning circles</title><link rel="stylesheet" href="vendor/w3c-2026-10-03/core.css"><link rel="stylesheet" href="vendor/w3c-2026-10-03/advanced.css"><style>body{min-block-size:0;padding-block:2rem}.demo{max-inline-size:55rem}header{margin-bottom:2rem}.actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.component--collapsibles{padding:1rem;background:#f8f8fb}footer{margin-top:2rem;border-top:1px solid #bdbdbd;padding-top:1rem;font-size:.875rem}#notice{min-height:1.5em}button{max-width:100%}</style><main class="l-center demo" data-anchor="no"><header><p>INDEPENDENT LEARNING PROGRAMME</p><h1>Web learning circles</h1><p class="lead">Explore three small-group sessions for people building a more usable web.</p></header><div class="actions"><button class="button button--ghost" id="expand">Expand all sessions</button><button class="button button--ghost" id="collapse">Collapse all sessions</button></div><p id="notice" role="status">Choose a session to read its outline.</p><div class="component--collapsibles" data-component="collapsibles" data-anchor="no"><div><h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3><div><p>Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.</p><ul><li>Associate labels and help text</li><li>Keep entered values after an error</li><li>Move focus only when it helps recovery</li></ul></div></div><div><h3 data-heading="collapsibles">Resilient reading <span>Discussion circle</span></h3><div><p>Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.</p><p>Bring a short article and identify its heading hierarchy, reading measure and meaningful links.</p></div></div><div><h3 data-heading="collapsibles">International text <span>Peer review</span></h3><div><p>Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.</p><p>All sessions are fictional examples, with no membership or registration service.</p></div></div></div><footer>Native W3C CDN styles and collapsible script, snapshot 3 October 2026. System font fallback; original learning content, no W3C affiliation.</footer></main><script src="vendor/w3c-2026-10-03/main.js"></script><script>document.querySelector('.component--collapsibles').addEventListener('click',()=>{const n=document.querySelectorAll('[data-heading] button[aria-expanded=true]').length;document.querySelector('#notice').textContent=n+' session outline'+(n===1?' is':'s are')+' expanded.'});function all(open){document.querySelectorAll('[data-heading="collapsibles"] button').forEach(b=>{if((b.getAttribute('aria-expanded')==='true')!==open)b.click()});document.querySelector('#notice').textContent=open?'All three session outlines are expanded.':'All session outlines are collapsed.'}document.querySelector('#expand').onclick=()=>all(true);document.querySelector('#collapse').onclick=()=>all(false);</script></html>