Build an Ontario-style long-form guide with real typography, published spacing and color values, native accordion behavior and complete version-matched source.
Ontario Design System Package Exports and Component Styles
Use the complete styles package deliberately
The sample pins @ongov/ontario-design-system-complete-styles 9.1.0 and uses its published expand/collapse script. This is an HTML/CSS implementation, not the separate Ontario web-component runtime. The package’s export map exposes the compiled theme through styles/css/compiled/ontario-theme.min.css; a guessed deep import with an extra dist prefix fails in a modern bundler.
Include the accordion rules
In the inspected 9.1.0 package, the compiled theme does not include the accordion selectors used by this specimen. The page therefore includes rules compiled from the package’s own ontario-accordion.scss in the supplied CSS. The script is copied from the published dist/scripts directory because that deep JavaScript path is not exported. These are concrete build requirements, not optional visual polish.
Ontario Design System Ontario Typography and Hierarchy
Preserve the intended font pairing
The published theme supplies Raleway Modified for headings and Open Sans for ordinary text. The preview bundles the normal 400 and 700 faces used by the page. This keeps the distinctive heading forms while avoiding a remote-font dependency. Typography should be inspected after fonts load: fallback rendering can change both line wrapping and the relative weight of the accordion headings.
Make stages easy to scan
The title introduces one task, the lead explains how to use the guide, and three stage headings provide a clear sequence. Supporting paragraphs and lists sit inside each panel. The adjacent note remains visible because essential joining and access information should not depend on discovering a hidden panel. The hierarchy is part of the content model, not a reason to make every sentence a headline.
Ontario Design System Color Roles and Component Affordances
Give links and focus different jobs
The exported link color is #0066CC, with separate hover, active and visited colors. Focus uses #009ADB. The accordion combines a visible label, directional icon and expanded state; its behavior is not explained by blue text alone. The gray boundary distinguishes stages without turning every paragraph into a separate card.
Use the published spacing progression
The spacing table runs from zero through five rem with named intermediate steps. The specimen applies an authored two-column layout around the official component rules. Its 760px collapse point is a composition decision for this embedded guide and is not advertised as a new Ontario breakpoint. Official breakpoints remain recorded separately in the reference table.
Ontario Design System Accordion Structure and State
Connect each button to its content
Each stage has a heading containing a real button. Its aria-controls points to one uniquely identified content section, and aria-expanded describes whether that section is open. The content references the button through aria-labelledby. The native script coordinates component classes and aria-hidden as the panel opens and closes. A duplicate ID would break this relationship even when the visual layout appears correct.
Use unique button and content IDs.
Keep the heading around a real interactive button.
Match the markup to the versioned script’s visibility behavior.
Keep all-stage controls synchronized
Ontario Design System Linked Opening and Essential Content
Open a stage through its real button
The sidebar links identify a stage and then invoke that stage’s native button when it is closed. They focus the button after opening. This keeps the button’s expanded attribute, heading class and content visibility in the same transition. The additional handler is application code; it is included in full so a reader can reproduce the behavior.
Write supporting information worth expanding
The three authored stages cover preparation, materials and follow-up for a small workshop. Each contains specific actions and a paragraph explaining the sample boundary. A real invitation must still surface its purpose, access arrangements and joining details directly. This pattern organizes a longer guide; it should not conceal essential information merely to make a page look shorter.
Ontario Design System Complete Source and Verification
Recreate the versioned example
Create a Vite vanilla project, install the pinned complete-styles package and copy its expand/collapse script into src. Save the supplied main.js and ontario.css, preserving the root mount element. The CSS includes the official accordion rules compiled for this release plus clearly marked original layout rules. No component registration or backend service is needed for this HTML implementation.
Install the pinned complete-styles package.
Copy its expand/collapse script and save the full entry and CSS.
Open all panels, then collapse and reopen a stage through its link.
Inspect keyboard focus, expanded attributes and the phone layout.
Inspect linked and group behavior
Test opening every stage, collapsing all and then using a sidebar link to reopen the middle stage. Confirm the button’s expanded state and the visible content agree. Repeat at phone width, where the sidebar follows the guide. The local check also confirms font assets load, the page has no horizontal overflow and the native script produces no browser errors.
Ontario Design System Design System Component Examples
main.js — complete workshop guide
Full original content, published script import and linked-opening behavior.
javascript
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;
// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
The compiled theme and the component-specific accordion stylesheet are both required for this pinned release.
04
Ontario Design System Agent Setup
Implementation Starting Point
The preview runs the same published accordion script with local font assets. The example does not load the separate web-component library.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
A Prompt for Your Project
Agent Prompt
Build the Ontario workshop guide with complete-styles 9.1.0 and its matching accordion script. Include the component-specific accordion CSS, genuine Raleway Modified/Open Sans fonts, accessible button-content IDs and synchronized expand/collapse behavior. Keep essential information visible and route stage links through the native buttons.
05
Ontario Design System Sources and Scope
An OpenDesign-authored workshop guide using Ontario 9.1.0 styles and its published expand/collapse script. The content and page composition are original; this is not an official service page.
