UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 19-2026
article
Linting Your Design Tokens: What and Why
TAG: TOKENS
Design tokens are code and deserve the same linting rigor as CSS or JavaScript. This article categorizes token linting rules into three tiers: critical rules that block commits (broken references, circular dependencies, type-value mismatches, and incomplete token structure), quality rules that surface warnings (naming convention enforcement, duplicate value detection, WCAG contrast checking at the component token level, dark mode completeness, and reference depth limits), and nice-to-have rules for long-term health (semantic naming, unused token detection, scale consistency). The author also distinguishes between W3C DTCG spec token formats using dollar-prefixed fields and common toolchain formats, noting that linting concepts apply equally to both. A practical onboarding path recommends starting with just four critical rules to catch 80% of real problems before layering in quality and documentation checks.
HHS Section 504 Deadline Extended: What Changed and What Your Organization Needs to Do
TAG: ACCESSIBILITY
As of May 7, 2026, the U.S. Department of Health and Human Services extended the Section 504 digital accessibility compliance deadline by one year. Organizations with 15 or more employees now have until May 11, 2027 to achieve WCAG 2.1 Level A/AA conformance; smaller organizations have until May 10, 2028. Critically, the extension changes only the timeline — not the scope or requirements. Discrimination based on disability remains prohibited today under Section 504, and organizations can still face complaints, investigations, and lawsuits for inaccessible digital experiences right now. The author, Glenda Sims, recommends using the extension to prioritize high-impact touchpoints such as user portals, scheduling, billing, and enrollment forms, build accessibility into procurement and development processes, and establish a documented remediation roadmap rather than deferring action.
NN/g instructor Anna Kaley compiles the sharpest practitioner questions from the Writing Compelling Digital Copy course, organized into five themes. On plain language, she cites eyetracking evidence that users read only 20-28% of page text, and explains why 6th-8th grade readability benefits even expert audiences. On tone of voice, she distinguishes stable brand voice from contextual tone — and warns that AI tools can only approximate tone, not predict how it lands for a specific audience in a sensitive moment. On link and button labels, she argues that vague text such as Learn More is an accessibility failure because screen readers announce identical labels without context. On AI and SEO, she reframes traditional traffic metrics as unreliable as AI intercepts more queries, and advocates for task-completion rates and engagement instead. She also introduces AEO (answer-engine optimization) and GEO (generative-engine optimization) as extensions of the same plain-language and structure principles that have always made content work.
What Is a VPAT? The Complete Guide to Accessibility Conformance Reports
TAG: ACCESSIBILITY
A Voluntary Product Accessibility Template (VPAT) is the standardized ITI form that technology vendors complete to disclose accessibility conformance; the filled-out document is formally called an Accessibility Conformance Report (ACR). The latest VPAT 2.5 comes in four editions — WCAG, Section 508, EU (EN 301 549), and INT — with the INT edition satisfying procurement requirements across both U.S. and EU markets. The article explains how to critically evaluate a vendor VPAT: check the template version (must be 2.5+), the evaluation date (no older than 12-18 months), who performed the audit (self-assessed vs. independent firms like Level Access or Deque), and focus on the remarks column over conformance-level checkboxes. For PDF-heavy workflows, the author highlights PDF/UA (ISO 14289) as an additional standard that WCAG alone does not cover, and explains how automated tools (axe, Lighthouse, WAVE) detect roughly 57% of issues by volume while manual screen reader testing with NVDA, JAWS, or VoiceOver remains essential.
Polypane 29: New Network Panel, Snippet Store, and Chromium 148
TAG: DEVTOOLS
Polypane 29 ships a ground-up network panel with multi-pane awareness, showing domContentLoaded and load timings, Web Vitals, per-origin connection breakdowns, and a sortable waterfall request table with per-pane header diffing. A new snippet store lets developers browse and one-click-install community CSS and JS snippets, with live CSS preview returning to let edits reflect immediately across all panes. The outline panel gains a custom selectors overview — any CSS selector (such as [aria-live] or button, [role="button"]) can be queried to get a color-coded overlay of matching elements for accessibility auditing. Polypane Peek now visualizes grid and flex layouts including child node alignment, and the Elements panel's A11y tab exposes aria-describedby values and links labelledby element references. The release also adds macOS passkey keychain integration and builds on Chromium 148.
Announcing the CSS Property Type Validator Extension for VSCode
TAG: TOOLING
A new VSCode extension validates CSS @property registrations and flags incompatible var() usage as you type, addressing a gap in design token tooling. When a custom property like --surface-primary is registered as a color type and a developer (or coding agent) mistakenly writes gap: var(--surface-primary), the browser silently falls back to the initial value — this extension surfaces the mismatch immediately as a native diagnostic squiggle. It supports workspace-level registry files via registryFiles configuration so tokens defined once are validated everywhere. Known v1 limitations include plain CSS files only (no SCSS, Less, Vue, Svelte, or JSX), no autofix, and no support for web-based VSCode hosts. A Zed extension, Stylelint adapter, and proposed Biome integration are on the roadmap.
Brad Frost and Ian Frost join ShopTalk Show to discuss how AI is reshaping design system workflows, alongside their forthcoming course at aianddesign.systems. Brad describes a context-driven model where a spec markdown file anchors each project to a specific design system — his Eddie Design System — including core components, design tokens, recipes, and framework boilerplates for Nuxt and 11ty. The conversation tackles the persistent problem of 'design systems cosplay,' where AI approximates a system rather than genuinely consuming it, and how Storybook stories and MCP-connected Figma tooling (via collaborator TJ Pitre's Figma console MCP) help enforce fidelity. The brothers also discuss how keeping design system decisions in CLAUDE.md or process repos — rather than in ephemeral context windows — produces more reliable outputs across sessions.
Brad Frost and Ian Frost join ShopTalk Show to discuss how AI is reshaping design system workflows, alongside their forthcoming course at aianddesign.systems. Brad describes a context-driven model where a spec markdown file anchors each project to a specific design system — his Eddie Design System — including core components, design tokens, recipes, and framework boilerplates for Nuxt and 11ty. The conversation tackles the persistent problem of 'design systems cosplay,' where AI approximates a system rather than genuinely consuming it, and how Storybook stories and MCP-connected Figma tooling (via collaborator TJ Pitre's Figma console MCP) help enforce fidelity. The brothers also discuss how keeping design system decisions in CLAUDE.md or process repos — rather than in ephemeral context windows — produces more reliable outputs across sessions.
Design tokens are code and deserve the same linting rigor as CSS or JavaScript. This article categorizes token linting rules into three tiers: critical rules that block commits (broken references, circular dependencies, type-value mismatches, and incomplete token structure), quality rules that surface warnings (naming convention enforcement, duplicate value detection, WCAG contrast checking at the component token level, dark mode completeness, and reference depth limits), and nice-to-have rules for long-term health (semantic naming, unused token detection, scale consistency). The author also distinguishes between W3C DTCG spec token formats using dollar-prefixed fields and common toolchain formats, noting that linting concepts apply equally to both. A practical onboarding path recommends starting with just four critical rules to catch 80% of real problems before layering in quality and documentation checks.
HHS Section 504 Deadline Extended: What Changed and What Your Organization Needs to Do
As of May 7, 2026, the U.S. Department of Health and Human Services extended the Section 504 digital accessibility compliance deadline by one year. Organizations with 15 or more employees now have until May 11, 2027 to achieve WCAG 2.1 Level A/AA conformance; smaller organizations have until May 10, 2028. Critically, the extension changes only the timeline — not the scope or requirements. Discrimination based on disability remains prohibited today under Section 504, and organizations can still face complaints, investigations, and lawsuits for inaccessible digital experiences right now. The author, Glenda Sims, recommends using the extension to prioritize high-impact touchpoints such as user portals, scheduling, billing, and enrollment forms, build accessibility into procurement and development processes, and establish a documented remediation roadmap rather than deferring action.
NN/g instructor Anna Kaley compiles the sharpest practitioner questions from the Writing Compelling Digital Copy course, organized into five themes. On plain language, she cites eyetracking evidence that users read only 20-28% of page text, and explains why 6th-8th grade readability benefits even expert audiences. On tone of voice, she distinguishes stable brand voice from contextual tone — and warns that AI tools can only approximate tone, not predict how it lands for a specific audience in a sensitive moment. On link and button labels, she argues that vague text such as Learn More is an accessibility failure because screen readers announce identical labels without context. On AI and SEO, she reframes traditional traffic metrics as unreliable as AI intercepts more queries, and advocates for task-completion rates and engagement instead. She also introduces AEO (answer-engine optimization) and GEO (generative-engine optimization) as extensions of the same plain-language and structure principles that have always made content work.
What Is a VPAT? The Complete Guide to Accessibility Conformance Reports
A Voluntary Product Accessibility Template (VPAT) is the standardized ITI form that technology vendors complete to disclose accessibility conformance; the filled-out document is formally called an Accessibility Conformance Report (ACR). The latest VPAT 2.5 comes in four editions — WCAG, Section 508, EU (EN 301 549), and INT — with the INT edition satisfying procurement requirements across both U.S. and EU markets. The article explains how to critically evaluate a vendor VPAT: check the template version (must be 2.5+), the evaluation date (no older than 12-18 months), who performed the audit (self-assessed vs. independent firms like Level Access or Deque), and focus on the remarks column over conformance-level checkboxes. For PDF-heavy workflows, the author highlights PDF/UA (ISO 14289) as an additional standard that WCAG alone does not cover, and explains how automated tools (axe, Lighthouse, WAVE) detect roughly 57% of issues by volume while manual screen reader testing with NVDA, JAWS, or VoiceOver remains essential.
Polypane 29: New Network Panel, Snippet Store, and Chromium 148
Polypane 29 ships a ground-up network panel with multi-pane awareness, showing domContentLoaded and load timings, Web Vitals, per-origin connection breakdowns, and a sortable waterfall request table with per-pane header diffing. A new snippet store lets developers browse and one-click-install community CSS and JS snippets, with live CSS preview returning to let edits reflect immediately across all panes. The outline panel gains a custom selectors overview — any CSS selector (such as [aria-live] or button, [role="button"]) can be queried to get a color-coded overlay of matching elements for accessibility auditing. Polypane Peek now visualizes grid and flex layouts including child node alignment, and the Elements panel's A11y tab exposes aria-describedby values and links labelledby element references. The release also adds macOS passkey keychain integration and builds on Chromium 148.
Announcing the CSS Property Type Validator Extension for VSCode
A new VSCode extension validates CSS @property registrations and flags incompatible var() usage as you type, addressing a gap in design token tooling. When a custom property like --surface-primary is registered as a color type and a developer (or coding agent) mistakenly writes gap: var(--surface-primary), the browser silently falls back to the initial value — this extension surfaces the mismatch immediately as a native diagnostic squiggle. It supports workspace-level registry files via registryFiles configuration so tokens defined once are validated everywhere. Known v1 limitations include plain CSS files only (no SCSS, Less, Vue, Svelte, or JSX), no autofix, and no support for web-based VSCode hosts. A Zed extension, Stylelint adapter, and proposed Biome integration are on the roadmap.
The week opened with a ShopTalk Show episode featuring Brad Frost and Ian Frost discussing how AI is reshaping design system workflows. Brad described anchoring AI sessions to a spec markdown file tied to his Eddie Design System — covering core components, design tokens, recipes, and Nuxt/Eleventy boilerplates — as the antidote to the persistent problem of AI-generated approximations rather than genuine system consumption. Storybook stories and a Figma console MCP (built by collaborator TJ Pitre) were cited as fidelity enforcers, and the brothers emphasized storing design system decisions in CLAUDE.md or process repos rather than ephemeral context windows for consistent cross-session outputs.
Two tooling articles addressed gaps in the design token workflow. A structured guide categorized token linting rules into three tiers: critical commit-blocking rules (broken references, circular dependencies, type-value mismatches), quality warning rules (WCAG contrast at the component token level, dark mode completeness, naming convention), and nice-to-have rules for long-term health. It also distinguished W3C DTCG dollar-prefixed token formats from common toolchain formats. Separately, a new VSCode extension was announced that validates CSS @property registrations and flags incompatible var() usage — for example, catching gap: var(--surface-primary) when --surface-primary is registered as a color type — with workspace-level registryFiles support.
The accessibility-adjacent compliance space also featured prominently. The U.S. HHS extended its Section 504 digital accessibility deadline by one year: organizations with 15 or more employees now have until May 11, 2027 to reach WCAG 2.1 Level A/AA. A companion explainer covered VPAT 2.5 evaluation best practices — noting that the INT edition satisfies both U.S. and EU procurement requirements, that audits should be no older than 12-18 months, and that automated tools like axe and Lighthouse catch only about 57% of issues by volume, making manual screen reader testing with NVDA, JAWS, or VoiceOver still essential.
Key Takeaways
Grounding AI sessions in a spec markdown tied to your actual design system (components, tokens, recipes) is the practical defense against AI-generated design system approximations, not better prompting.
Design token linting should start with four critical rules — broken references, circular dependencies, type-value mismatches, and incomplete token structure — which catch 80% of real problems before adding quality or style checks.
The HHS Section 504 deadline extended to May 11, 2027 (15+ employee orgs) changes only the timeline, not the scope: inaccessible digital experiences still expose organizations to complaints and lawsuits today.
