The Design Tokens $extensions Checker is a new browser-based tool that helps teams audit the metadata layer of their token files. Paste any W3C-format design tokens JSON into the tool, and it extracts every $extensions object — revealing namespaces, properties, and metadata from multiple tools such as PenPot, Style Dictionary, and team governance configs that can accumulate over time. Extensions are displayed in logically grouped views, making it easy to spot duplicates or stale entries. Users can delete extensions individually or in bulk, then preview the cleaned-up JSON before copying it back into their workflow. Like the author's earlier Relicss tool, everything runs entirely in the browser — no data is transmitted. The post also points to the W3C Design Tokens spec for readers who want deeper background on what $extensions are and why they exist.
The Accessible Canada Act: Deadlines are closer than you think
TAG: ACCESSIBILITY
Deque maps out the full enforcement timeline under Canada's Accessible Canada Act (ACA) and the Phase 1 Digital Technologies Accessibility Regulations. The technical benchmark is CAN/ASC-EN 301 549, a national standard published May 2024 that directly adopts EN 301 549 v3.2.1 (which subsumes WCAG 2.1 AA) and extends beyond websites to software, mobile apps, PDFs, hardware, and communications. The key deadlines: mandatory accessibility training for all staff by December 5, 2027; federal government websites fully conformant by the same date; and public-facing sites, digital documents, mobile apps, and clean Accessibility Conformance Reports (ACRs) in procurement required by December 5, 2028 for large federally regulated organizations (500+ employees). Deque advises targeting EN 301 549 + WCAG 2.2 AA now to avoid redundant remediation when the formal update lands. Organizations that wait until 2027–2028 will face compressed timelines and significantly higher costs.
Introduction to the new HTML element <geolocation> - Manuel Matuzovic
TAG: HTML
Manuel Matuzović introduces the new HTML <geolocation> element, available in Chrome 144+, which renders a built-in permission button for location access — evolving from the originally planned general-purpose <permission> element that browser vendors found too complex to implement universally. The element supports three key attributes: accuracymode (default "approximate" vs. "precise", which changes the button icon and label), autolocate (fires the onlocation event on page load if permission was previously granted), and watch (continuously fires events as the user moves). Styling is intentionally constrained — opacity, transform, inline-size, letter-spacing, and others are restricted to prevent deceptive UI patterns, and if contrast falls below 3:1 or font-size goes outside the allowed range, the button silently stops functioning. A new :granted pseudo-class lets authors style the button once permission is confirmed. Progressive enhancement via a fallback <button> inside the element is recommended for non-Chrome browsers while Mozilla and WebKit finalize their implementations.
Combobox vs. Multiselect vs. Listbox: How To Choose The Right One — Smashing Magazine
TAG: COMPONENTS
Vitaly Friedman breaks down five distinct list-selection patterns — dropdown, combobox, multiselect, listbox, and dual listbox — clarifying how each differs in visibility, filtering capability, and selection mode. The core rule: never hide frequently used options; pre-select them or surface them as chips. For fewer than 5 items, radio buttons or checkboxes usually suffice, while 200+ item lists benefit from a combobox or multiselect for faster filtering. The often-overlooked dual listbox (transfer list) is singled out as uniquely valuable for bulk selection and role assignment because it lets users review their full selection alongside the source list before committing — and is often faster and more accessible than drag-and-drop. All list types must support keyboard navigation, and lists with 7+ options should expose "Select All" / "Clear All" controls.
Accessible building blocks for the web videos - TetraLogical
TAG: ACCESSIBILITY
TetraLogical's "Accessible building blocks for web" video series covers five foundational HTML elements — headings, images, links, buttons, and form fields — through the lens of three recurring pillars: clear language, inclusive visual design, and proper implementation. Key specifics include: headings must use semantic <h1>–<h6> in unbroken hierarchy; images need accurate alt text focused on purpose rather than description (e.g., "Address" not "A purple pin icon"); links require a minimum 4.5:1 contrast ratio and a non-color visual cue like underlining; buttons built with the native <button> element avoid the need for manual tabindex and role="button" overrides; and form fields must pair <label> and <input> via matching id/for attributes, with borders at minimum 3:1 contrast against adjacent colors. Each video also covers a British Sign Language (BSL) version, reflecting TetraLogical's own inclusive production approach.
This is how I use AI for Design Systems at Monday.com
Elad, Design Systems Lead at Monday.com, walks through how the Vibe design system team replaced annotation-heavy Figma handoff documents with AI-optimized specification files used inside Cursor. The workflow centers on a custom VS Code extension that ingests a Figma link and generates a technical spec from the frame, which Cursor then uses alongside a library of cursor rules — covering component naming, Storybook story structure, and WCAG accessibility requirements — to produce 70–90% complete component code including types, tests, and Storybook documentation. Figma MCP is used to extract screenshots and code-connect mappings. New components like the "info" and "empty state" go from design to working Storybook entry without a full developer handoff meeting. All changes still go through standard GitHub pull-request review and Figma branch approval, preserving quality gates while dramatically shrinking cycle time for a team of three developers and three designers serving1,000+ developers at Monday.
We Solved 3 MAJOR Problems and Launched a Product (Real Client Case Study)
Jesse Showalter's team acted as fractional design partner for Vinyl, an AI meeting assistant for accounting/bookkeeping teams that raised $2 million in funding. The three problems they solved map directly to design-system fundamentals. First: scalability — they built a full variable set (primitive tokens → semantic tokens) in Figma enabling instant light/dark theme switching across all screens, with every UI element component-based so new flows can reuse the same Lego blocks. Second: the Framer marketing site was built with content-editing 2.0 governance — sections can be locked (Command+L) or selectively unlocked so the client's marketing team can edit copy and images without touching layout or developer-managed sections. Third: complex functionality (a pricing calculator, a table-of-contents sidebar) was implemented via Framer's Workshop AI tool, which generated ~800 lines of custom code from a few prompts, and a hand-written 84-line TSX component. The case study makes a strong argument for component-level token architecture as the multiplier that makes all three solutions durable.
This is how I use AI for Design Systems at Monday.com
Elad, Design Systems Lead at Monday.com, walks through how the Vibe design system team replaced annotation-heavy Figma handoff documents with AI-optimized specification files used inside Cursor. The workflow centers on a custom VS Code extension that ingests a Figma link and generates a technical spec from the frame, which Cursor then uses alongside a library of cursor rules — covering component naming, Storybook story structure, and WCAG accessibility requirements — to produce 70–90% complete component code including types, tests, and Storybook documentation. Figma MCP is used to extract screenshots and code-connect mappings. New components like the "info" and "empty state" go from design to working Storybook entry without a full developer handoff meeting. All changes still go through standard GitHub pull-request review and Figma branch approval, preserving quality gates while dramatically shrinking cycle time for a team of three developers and three designers serving1,000+ developers at Monday.
We Solved 3 MAJOR Problems and Launched a Product (Real Client Case Study)
Jesse Showalter's team acted as fractional design partner for Vinyl, an AI meeting assistant for accounting/bookkeeping teams that raised $2 million in funding. The three problems they solved map directly to design-system fundamentals. First: scalability — they built a full variable set (primitive tokens → semantic tokens) in Figma enabling instant light/dark theme switching across all screens, with every UI element component-based so new flows can reuse the same Lego blocks. Second: the Framer marketing site was built with content-editing 2.0 governance — sections can be locked (Command+L) or selectively unlocked so the client's marketing team can edit copy and images without touching layout or developer-managed sections. Third: complex functionality (a pricing calculator, a table-of-contents sidebar) was implemented via Framer's Workshop AI tool, which generated ~800 lines of custom code from a few prompts, and a hand-written 84-line TSX component. The case study makes a strong argument for component-level token architecture as the multiplier that makes all three solutions durable.
The Design Tokens $extensions Checker is a new browser-based tool that helps teams audit the metadata layer of their token files. Paste any W3C-format design tokens JSON into the tool, and it extracts every $extensions object — revealing namespaces, properties, and metadata from multiple tools such as PenPot, Style Dictionary, and team governance configs that can accumulate over time. Extensions are displayed in logically grouped views, making it easy to spot duplicates or stale entries. Users can delete extensions individually or in bulk, then preview the cleaned-up JSON before copying it back into their workflow. Like the author's earlier Relicss tool, everything runs entirely in the browser — no data is transmitted. The post also points to the W3C Design Tokens spec for readers who want deeper background on what $extensions are and why they exist.
The Accessible Canada Act: Deadlines are closer than you think
Deque maps out the full enforcement timeline under Canada's Accessible Canada Act (ACA) and the Phase 1 Digital Technologies Accessibility Regulations. The technical benchmark is CAN/ASC-EN 301 549, a national standard published May 2024 that directly adopts EN 301 549 v3.2.1 (which subsumes WCAG 2.1 AA) and extends beyond websites to software, mobile apps, PDFs, hardware, and communications. The key deadlines: mandatory accessibility training for all staff by December 5, 2027; federal government websites fully conformant by the same date; and public-facing sites, digital documents, mobile apps, and clean Accessibility Conformance Reports (ACRs) in procurement required by December 5, 2028 for large federally regulated organizations (500+ employees). Deque advises targeting EN 301 549 + WCAG 2.2 AA now to avoid redundant remediation when the formal update lands. Organizations that wait until 2027–2028 will face compressed timelines and significantly higher costs.
Introduction to the new HTML element <geolocation> - Manuel Matuzovic
Manuel Matuzović introduces the new HTML <geolocation> element, available in Chrome 144+, which renders a built-in permission button for location access — evolving from the originally planned general-purpose <permission> element that browser vendors found too complex to implement universally. The element supports three key attributes: accuracymode (default "approximate" vs. "precise", which changes the button icon and label), autolocate (fires the onlocation event on page load if permission was previously granted), and watch (continuously fires events as the user moves). Styling is intentionally constrained — opacity, transform, inline-size, letter-spacing, and others are restricted to prevent deceptive UI patterns, and if contrast falls below 3:1 or font-size goes outside the allowed range, the button silently stops functioning. A new :granted pseudo-class lets authors style the button once permission is confirmed. Progressive enhancement via a fallback <button> inside the element is recommended for non-Chrome browsers while Mozilla and WebKit finalize their implementations.
Combobox vs. Multiselect vs. Listbox: How To Choose The Right One — Smashing Magazine
Vitaly Friedman breaks down five distinct list-selection patterns — dropdown, combobox, multiselect, listbox, and dual listbox — clarifying how each differs in visibility, filtering capability, and selection mode. The core rule: never hide frequently used options; pre-select them or surface them as chips. For fewer than 5 items, radio buttons or checkboxes usually suffice, while 200+ item lists benefit from a combobox or multiselect for faster filtering. The often-overlooked dual listbox (transfer list) is singled out as uniquely valuable for bulk selection and role assignment because it lets users review their full selection alongside the source list before committing — and is often faster and more accessible than drag-and-drop. All list types must support keyboard navigation, and lists with 7+ options should expose "Select All" / "Clear All" controls.
Accessible building blocks for the web videos - TetraLogical
TetraLogical's "Accessible building blocks for web" video series covers five foundational HTML elements — headings, images, links, buttons, and form fields — through the lens of three recurring pillars: clear language, inclusive visual design, and proper implementation. Key specifics include: headings must use semantic <h1>–<h6> in unbroken hierarchy; images need accurate alt text focused on purpose rather than description (e.g., "Address" not "A purple pin icon"); links require a minimum 4.5:1 contrast ratio and a non-color visual cue like underlining; buttons built with the native <button> element avoid the need for manual tabindex and role="button" overrides; and form fields must pair <label> and <input> via matching id/for attributes, with borders at minimum 3:1 contrast against adjacent colors. Each video also covers a British Sign Language (BSL) version, reflecting TetraLogical's own inclusive production approach.
This week's featured item set the tone for where design systems work is heading in 2026: Monday.com's Vibe team replaced annotation-heavy Figma handoff documents with AI-optimized spec files consumed directly in Cursor. A custom VS Code extension ingests a Figma link, generates a technical spec via Figma MCP, and Cursor pairs that spec with a library of cursor rules — covering component naming, Storybook structure, and WCAG requirements — to produce 70-90% complete component code including types, tests, and documentation. The entire flow still routes through GitHub PR review and Figma branch approval, preserving quality gates while dramatically shrinking cycle time for a team of three developers and three designers serving over 1,000 engineers.
Jesse Showalter's real-client case study for Vinyl (an AI meeting assistant that raised $2M) illustrated the same principles at smaller scale: primitive-to-semantic token architecture in Figma enabled instant light/dark switching across the product, Framer's content-editing governance let the marketing team own copy without touching developer-managed layout, and Framer Workshop AI generated ~800 lines of custom code for a pricing calculator from a handful of prompts. Both stories reinforce that a well-built token layer is the durable multiplier that makes everything else scalable.
Accessibility and component guidance rounded out the week. Vitaly Friedman's component decision matrix for combobox vs. multiselect vs. dual listbox gave teams a clear ruleset for when each pattern applies. TetraLogical's video series on accessible HTML building blocks covered the five foundational elements — headings, images, links, buttons, form fields — with precise WCAG contrast and labeling requirements. And a new browser tool for auditing design token $extensions metadata arrived just as teams are cleaning up token files that have accumulated stale PenPot and Style Dictionary entries.
Key Takeaways
Monday.com's AI-assisted Figma-to-Cursor workflow delivers 70-90% complete component code — including tests and Storybook docs — without a handoff meeting, all while preserving PR and Figma branch quality gates.
Primitive-to-semantic token architecture is the multiplier that makes design systems durable: it powered instant dark-mode and scalable component reuse in both this week's case studies.
The dual listbox is systematically underused — for bulk selection and role assignment it is faster and more accessible than drag-and-drop, and should be the default choice at scale.
