UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 7-2026
article
Designing For Agentic AI: Practical UX Patterns For Control, Consent, And Accountability — Smashing Magazine
TAG: AGENTIC AI
Victor Yocco presents six concrete UX patterns organized around the full lifecycle of an agentic interaction: Intent Preview, Autonomy Dial, Explainable Rationale, Confidence Signal, Action Audit & Undo, and Escalation Pathway. Each pattern is paired with specific success metrics — for example, an Intent Preview acceptance ratio target above 85%, an Undo reversion rate cap of 5%, and an Escalation recovery success rate above 90%. The article then covers error-recovery design using the "service recovery paradox," and proposes a phased rollout roadmap (Foundational Safety → Calibrated Autonomy → Proactive Delegation) backed by a cross-functional Agentic AI Ethics Council. Required governance artifacts include an Agent Risk Register and a formal Autonomy Policy Document.
Using Notion With Style Dictionary for Design Tokens Management
TAG: TOKENS
This tutorial walks through wiring Notion as a collaborative, non-technical-friendly interface in front of a Style Dictionary build pipeline. A Notion database is set up with columns for Token Path (dot-notation like color.brand.primary), Value, Type, Category, Description, and a Status field (Draft / Review / Approved / Deprecated) that gates which tokens reach the build. A fetch-tokens.js script handles pagination from the Notion API, converts flat results into a nested JSON tree Style Dictionary can consume, and stores Notion metadata in the $extensions field for audit trails and back-linking. A companion push-tokens.js script enables bidirectional sync: developers can edit the JSON locally and push diffs back to Notion, with the live Notion database always acting as the single source of truth. The package.json scripts surface sync, push, build, sync:build, and watch commands.
Maximilian Kaske from OpenStatus explains how splitting their Next.js project into three apps (dashboard, status-page, web) created a shared-component problem they solved with a public shadcn registry — without bundlers or webpack aliases. Three approaches failed: using a @/ alias (breaks when imported by apps), bundling with tsup (adds rebuild latency), and webpack alias remapping (creates @/ conflicts). The winning approach maps internal imports to @openstatus/ui/* via TypeScript path aliases, then transforms them to @/* at publish time with a regex in transform-imports.mjs. This lets npx shadcn add and npx shadcn diff work natively inside packages/ui, while a three-stepregistry:build script (transform → shadcn build → copy to apps/web/public/r/) publishes components that any user can install via npx shadcn@latest add https://openstatus.dev/r/status-banner.json.
Does your navigation need an ARIA menu? Probably not. - Pope Tech Resources
TAG: ACCESSIBILITY
Elle Smith clarifies a pervasive accessibility misunderstanding: ARIA menu, menubar, and menuitem roles are designed to replicate OS application menus — think File/Edit/View dropdowns in Google Docs — not standard site navigation. Applying these roles to a nav element incorrectly signals to screen readers that arrow-key navigation is required, but without the 100+ lines of JavaScript needed to implement that behavior, users get broken keyboard interactions. A comparison table shows exactly how Tab, Arrow Keys, Home/End, and Escape behave differently between a true ARIA menu widget and a standard <nav> with links. WebAIM data shows roughly 7% of home pages use ARIA menu roles, and over a quarter of those produce detectable accessibility errors in WAVE scans.
Building Digital Trust: An Empathy-Centred UX Framework For Mental Health Apps — Smashing Magazine
TAG: UX
Kat Homan presents a three-pillarEmpathy-Centred UX framework grounded in real product work across Teeni (a parenting app) and Bear Room (an instant stress-relief app). The onboarding pillar replaces data-collection checklists with validating language and a city-at-night narrative metaphor that normalizes users' struggles. The emotional interface pillar applies WCAG 2.2 as a baseline, then layers a low-arousal earthy palette, opt-in tactile micro-interactions (bubble-wrap popping), and voice-first flows for users too overwhelmed to type. The retention pillar replaces punitive streaks with a "Key" economy earned every third day — keys can be gifted to other users — and an AI-powered anonymous letter exchange. The framework explicitly bans gating crisis tools behind paywalls or key locks.
10 Senior Designers Show how they Organize their Figma Files
Host Jay interviews senior designers from Figma, Slack, Firefox, Webflow, and Hex to reveal how they structure their Figma files in practice. Common patterns include a cover page with color-coded status thumbnails (green = shipped, yellow = WIP), a README block linking to Slack channels and PRDs, and a strict separation between "Ready for Dev" frames at the top and a messy exploration basement below. Firefox's team uses a single "mobile assembly file" for all designers across time zones, with surfaces (onboarding, toolbar, homepage) as top-level sections to encourage shared ownership. Several designers embed Gantt-chart timeline sections directly in Figma for milestone planning. Sections are color-coded (purple vs. blue workflow paths) and temporary archives are offloaded to separate archive files to keep the working file lightweight.
Designing For Agentic AI: Practical UX Patterns For Control, Consent, And Accountability — Smashing Magazine
Victor Yocco presents six concrete UX patterns organized around the full lifecycle of an agentic interaction: Intent Preview, Autonomy Dial, Explainable Rationale, Confidence Signal, Action Audit & Undo, and Escalation Pathway. Each pattern is paired with specific success metrics — for example, an Intent Preview acceptance ratio target above 85%, an Undo reversion rate cap of 5%, and an Escalation recovery success rate above 90%. The article then covers error-recovery design using the "service recovery paradox," and proposes a phased rollout roadmap (Foundational Safety → Calibrated Autonomy → Proactive Delegation) backed by a cross-functional Agentic AI Ethics Council. Required governance artifacts include an Agent Risk Register and a formal Autonomy Policy Document.
10 Senior Designers Show how they Organize their Figma Files
Host Jay interviews senior designers from Figma, Slack, Firefox, Webflow, and Hex to reveal how they structure their Figma files in practice. Common patterns include a cover page with color-coded status thumbnails (green = shipped, yellow = WIP), a README block linking to Slack channels and PRDs, and a strict separation between "Ready for Dev" frames at the top and a messy exploration basement below. Firefox's team uses a single "mobile assembly file" for all designers across time zones, with surfaces (onboarding, toolbar, homepage) as top-level sections to encourage shared ownership. Several designers embed Gantt-chart timeline sections directly in Figma for milestone planning. Sections are color-coded (purple vs. blue workflow paths) and temporary archives are offloaded to separate archive files to keep the working file lightweight.
Using Notion With Style Dictionary for Design Tokens Management
This tutorial walks through wiring Notion as a collaborative, non-technical-friendly interface in front of a Style Dictionary build pipeline. A Notion database is set up with columns for Token Path (dot-notation like color.brand.primary), Value, Type, Category, Description, and a Status field (Draft / Review / Approved / Deprecated) that gates which tokens reach the build. A fetch-tokens.js script handles pagination from the Notion API, converts flat results into a nested JSON tree Style Dictionary can consume, and stores Notion metadata in the $extensions field for audit trails and back-linking. A companion push-tokens.js script enables bidirectional sync: developers can edit the JSON locally and push diffs back to Notion, with the live Notion database always acting as the single source of truth. The package.json scripts surface sync, push, build, sync:build, and watch commands.
Maximilian Kaske from OpenStatus explains how splitting their Next.js project into three apps (dashboard, status-page, web) created a shared-component problem they solved with a public shadcn registry — without bundlers or webpack aliases. Three approaches failed: using a @/ alias (breaks when imported by apps), bundling with tsup (adds rebuild latency), and webpack alias remapping (creates @/ conflicts). The winning approach maps internal imports to @openstatus/ui/* via TypeScript path aliases, then transforms them to @/* at publish time with a regex in transform-imports.mjs. This lets npx shadcn add and npx shadcn diff work natively inside packages/ui, while a three-stepregistry:build script (transform → shadcn build → copy to apps/web/public/r/) publishes components that any user can install via npx shadcn@latest add https://openstatus.dev/r/status-banner.json.
Does your navigation need an ARIA menu? Probably not. - Pope Tech Resources
Elle Smith clarifies a pervasive accessibility misunderstanding: ARIA menu, menubar, and menuitem roles are designed to replicate OS application menus — think File/Edit/View dropdowns in Google Docs — not standard site navigation. Applying these roles to a nav element incorrectly signals to screen readers that arrow-key navigation is required, but without the 100+ lines of JavaScript needed to implement that behavior, users get broken keyboard interactions. A comparison table shows exactly how Tab, Arrow Keys, Home/End, and Escape behave differently between a true ARIA menu widget and a standard <nav> with links. WebAIM data shows roughly 7% of home pages use ARIA menu roles, and over a quarter of those produce detectable accessibility errors in WAVE scans.
Building Digital Trust: An Empathy-Centred UX Framework For Mental Health Apps — Smashing Magazine
Kat Homan presents a three-pillarEmpathy-Centred UX framework grounded in real product work across Teeni (a parenting app) and Bear Room (an instant stress-relief app). The onboarding pillar replaces data-collection checklists with validating language and a city-at-night narrative metaphor that normalizes users' struggles. The emotional interface pillar applies WCAG 2.2 as a baseline, then layers a low-arousal earthy palette, opt-in tactile micro-interactions (bubble-wrap popping), and voice-first flows for users too overwhelmed to type. The retention pillar replaces punitive streaks with a "Key" economy earned every third day — keys can be gifted to other users — and an AI-powered anonymous letter exchange. The framework explicitly bans gating crisis tools behind paywalls or key locks.
This week's design systems category is dominated by the AI-in-UX conversation. The featured article from Smashing Magazine lays out six concrete UX patterns — Intent Preview, Autonomy Dial, Explainable Rationale, Confidence Signal, Action Audit and Undo, and Escalation Pathway — for designing trustworthy agentic AI interfaces, complete with success metric targets and a phased rollout roadmap. It is the most rigorous framework to date for treating AI agents not as features but as actors that users must be able to oversee and reverse.
Accessibility gets a sharp correction this week: the common practice of applying ARIA menu and menuitem roles to site navigation is exposed as actively harmful, producing broken keyboard interactions in over a quarter of the sites that use it. Mental health app UX gets equal attention, with a three-pillar empathy framework covering onboarding language, low-arousal palettes, and a replacement for punitive streak mechanics.
On the tooling side, a workflow tutorial shows how to wire Notion as a non-technical-friendly front end for Style Dictionary token pipelines, and OpenStatus shares a clever import-transform trick for publishing shadcn components from a monorepo without any bundler overhead. A video roundup of how senior designers at Figma, Slack, and Firefox organize their Figma files closes the week with practical file-hygiene conventions.
Key Takeaways
The six agentic UX patterns from Smashing Magazine — especially Action Audit and Undo with a 5% reversion rate cap — offer the clearest published checklist yet for building trustworthy AI-driven product features.
Applying ARIA menu roles to standard site navigation is a widespread mistake: it signals arrow-key behavior to screen readers that JavaScript never implements, breaking keyboard access for real users.
Notion can serve as a non-developer-friendly token authoring interface in front of Style Dictionary by using a Status field to gate which tokens reach the build pipeline.
