UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 8-2026
article
Design Token Naming Best Practices
TAG: TOKENS
Naming design tokens is not a cosmetic concern — it is core system architecture. Mary Achinger walks through a three-tier hierarchy (global, alias, and component-level tokens) using IBM Carbon's model as the reference: global tokens like color-blue-60 carry raw values, semantic aliases like color-primary enable theming, and component tokens like button-background allow localized overrides. For multi-brand systems the article recommends a stable alias structure such as color-brand-primary with brand-specific values resolved per theme, avoiding duplication across products. Platform-specific naming (e.g., elevation-medium-ios vs elevation-medium-web) keeps platform concerns explicit without polluting the global namespace. Tooling coverage includes Tokens Studio for Figma sync with GitHub/Style Dictionary and CI/CD linting to catch naming drift before deployment.
A well-built design system that nobody uses is a governance failure, not a design failure. Mary Achinger catalogs the most common adoption pitfalls: overengineering at launch (building every conceivable component before validating real demand), absent ownership causing documentation rot and delayed bug fixes, and tool fragmentation where design assets, documentation, and code live in separate silos. Low team buy-in — caused by building in isolation without stakeholder input — leads to shadow components and parallel workarounds that compound tech debt. The article distinguishes partial adoption signals (some teams using a few components) from full breakdown (teams rebuilding components from scratch). The key conclusion is that culture outweighs components: a system built *with* its users, backed by governance and feedback loops, outlasts any technically perfect but ignored library.
Designing A Streak System: The UX And Psychology Of Streaks — Smashing Magazine
TAG: UX
Victor Ayomipo grounds streak design in three psychological mechanisms: loss aversion (losing something hurts twice as much as gaining it — Duolingo's data confirms users protect long streaks out of fear of losing invested effort), BJ Fogg's B=MAP model (behavior requires Motivation, Ability, and Prompt to align simultaneously — Duolingo's red badge A/B test yielded a 6% DAU lift), and the Zeigarnik effect (incomplete tasks occupy more mental space, making a running streak a persistent open loop). On the UX side, Ayomipo recommends minimizing action friction (one lesson, one minute), using visual feedback like GitHub's contribution graph or Duolingo's animated milestone celebrations, timing push notifications to user behavior patterns rather than a universal schedule, and building grace mechanisms (streak freeze, 2–3 hour extension windows, decay models) to prevent demoralizing hard resets. For engineers, the article details a server-authoritative architecture: store IANA timezone strings per user, validate all events server-side with UTC timestamps, and maintain an admin backdoor for manual streak restoration when bugs cause unjust resets.
Notes on relying on the ARIA Authoring Practices Guide
TAG: ACCESSIBILITY
The ARIA Authoring Practices Guide (APG) lives on w3.org, looks authoritative, and explicitly promises "design patterns and functional examples" — so it is no surprise that developers treat it as a definitive accessibility reference. Stefan Judis, drawing on Eric Eggert's analysis, argues it should not be: the APG was created to *showcase* ARIA's capabilities, not to serve as a pattern library or single source of truth. Because demonstration was the goal, the examples disproportionately favor ARIA even where native HTML would suffice, and browser/screen-reader support gaps are outside the guide's stated scope. Judis identifies the genuinely valuable parts: standardized pattern names, the "About This Pattern" descriptions of what a UI does, and the Keyboard Interaction specifications. His three practical rules: always reach for native HTML first (<button> beats <div role="button">), test with assistive technology yourself, and follow practitioners like Adrian Roselli who publish real-world screen-reader compatibility findings.
How to Build a Figma Design System for 50+ Sports Brands
Cornelius, lead product designer at sports-ticketing startup Jump (recently announced as the fan app platform for the Minnesota Timberwolves), walks through how a two-person design team supports50+ sports brands from a single Figma library. The system uses Figma modes beyond the standard light/dark paradigm: each team gets a mode entry configuring five brand colors (brand-core, brand-light, brand-dark, interactive, inverted-interactive), a custom display font with per-team size and letter-spacing values, and optional UI overrides like border-radius — enabling a full screen flow to flip from North Carolina Courage to Bucknell Bison (or Minnesota's proprietary "wolf mode") by changing a single team ID variable. The file is split into an engineer-facing PM section (specs, states, token documentation) and a designer-facing section (components, explorations, graveyard). Interaction tokens abstract hover-scale and press-state overlays (mode-agnostic black/white at calibrated opacity), validated through a custom debug menu in the dev app and Storybook on web — replacing per-component scale negotiations with a single token reference like interaction-scale-700.
Naming design tokens is not a cosmetic concern — it is core system architecture. Mary Achinger walks through a three-tier hierarchy (global, alias, and component-level tokens) using IBM Carbon's model as the reference: global tokens like color-blue-60 carry raw values, semantic aliases like color-primary enable theming, and component tokens like button-background allow localized overrides. For multi-brand systems the article recommends a stable alias structure such as color-brand-primary with brand-specific values resolved per theme, avoiding duplication across products. Platform-specific naming (e.g., elevation-medium-ios vs elevation-medium-web) keeps platform concerns explicit without polluting the global namespace. Tooling coverage includes Tokens Studio for Figma sync with GitHub/Style Dictionary and CI/CD linting to catch naming drift before deployment.
How to Build a Figma Design System for 50+ Sports Brands
Cornelius, lead product designer at sports-ticketing startup Jump (recently announced as the fan app platform for the Minnesota Timberwolves), walks through how a two-person design team supports50+ sports brands from a single Figma library. The system uses Figma modes beyond the standard light/dark paradigm: each team gets a mode entry configuring five brand colors (brand-core, brand-light, brand-dark, interactive, inverted-interactive), a custom display font with per-team size and letter-spacing values, and optional UI overrides like border-radius — enabling a full screen flow to flip from North Carolina Courage to Bucknell Bison (or Minnesota's proprietary "wolf mode") by changing a single team ID variable. The file is split into an engineer-facing PM section (specs, states, token documentation) and a designer-facing section (components, explorations, graveyard). Interaction tokens abstract hover-scale and press-state overlays (mode-agnostic black/white at calibrated opacity), validated through a custom debug menu in the dev app and Storybook on web — replacing per-component scale negotiations with a single token reference like interaction-scale-700.
A well-built design system that nobody uses is a governance failure, not a design failure. Mary Achinger catalogs the most common adoption pitfalls: overengineering at launch (building every conceivable component before validating real demand), absent ownership causing documentation rot and delayed bug fixes, and tool fragmentation where design assets, documentation, and code live in separate silos. Low team buy-in — caused by building in isolation without stakeholder input — leads to shadow components and parallel workarounds that compound tech debt. The article distinguishes partial adoption signals (some teams using a few components) from full breakdown (teams rebuilding components from scratch). The key conclusion is that culture outweighs components: a system built *with* its users, backed by governance and feedback loops, outlasts any technically perfect but ignored library.
Designing A Streak System: The UX And Psychology Of Streaks — Smashing Magazine
Victor Ayomipo grounds streak design in three psychological mechanisms: loss aversion (losing something hurts twice as much as gaining it — Duolingo's data confirms users protect long streaks out of fear of losing invested effort), BJ Fogg's B=MAP model (behavior requires Motivation, Ability, and Prompt to align simultaneously — Duolingo's red badge A/B test yielded a 6% DAU lift), and the Zeigarnik effect (incomplete tasks occupy more mental space, making a running streak a persistent open loop). On the UX side, Ayomipo recommends minimizing action friction (one lesson, one minute), using visual feedback like GitHub's contribution graph or Duolingo's animated milestone celebrations, timing push notifications to user behavior patterns rather than a universal schedule, and building grace mechanisms (streak freeze, 2–3 hour extension windows, decay models) to prevent demoralizing hard resets. For engineers, the article details a server-authoritative architecture: store IANA timezone strings per user, validate all events server-side with UTC timestamps, and maintain an admin backdoor for manual streak restoration when bugs cause unjust resets.
Notes on relying on the ARIA Authoring Practices Guide
The ARIA Authoring Practices Guide (APG) lives on w3.org, looks authoritative, and explicitly promises "design patterns and functional examples" — so it is no surprise that developers treat it as a definitive accessibility reference. Stefan Judis, drawing on Eric Eggert's analysis, argues it should not be: the APG was created to *showcase* ARIA's capabilities, not to serve as a pattern library or single source of truth. Because demonstration was the goal, the examples disproportionately favor ARIA even where native HTML would suffice, and browser/screen-reader support gaps are outside the guide's stated scope. Judis identifies the genuinely valuable parts: standardized pattern names, the "About This Pattern" descriptions of what a UI does, and the Keyboard Interaction specifications. His three practical rules: always reach for native HTML first (<button> beats <div role="button">), test with assistive technology yourself, and follow practitioners like Adrian Roselli who publish real-world screen-reader compatibility findings.
Design systems this week surfaced a recurring tension: the gap between building something architecturally sound and getting it actually adopted. The featured piece on token naming tackled the foundation layer directly — arguing that a three-tier hierarchy (global, alias, component) following IBM Carbon's model is not a cosmetic convention but load-bearing architecture, especially for multi-brand systems where a single alias like color-brand-primary must resolve to different values per theme without duplicating the namespace. The companion Figma video showed this principle applied at scale: a two-person team at Jump sports manages 50+ brands from a single library using Figma modes per team, changing one team ID variable to flip the entire UI from one brand to another.
The ARIA Authoring Practices Guide critique injected an important accessibility corrective: the APG was designed to showcase ARIA capabilities, not to serve as a production pattern library, and its examples over-rely on ARIA where native HTML suffices. Stefan Judis' practical rules — native HTML first, test with assistive technology, follow practitioners like Adrian Roselli — apply equally to design system component documentation. The adoption pitfalls article made the cultural case: governance and feedback loops outlast any technically perfect library that teams build around rather than adopt.
The streak UX deep dive on engagement psychology rounded out the category as a reminder that the behavioral design layer — loss aversion, the Zeigarnik effect, grace mechanisms — matters as much as the component layer when a design system ships user-facing features.
Key Takeaways
Token naming is architecture: a global-alias-component three-tier hierarchy prevents multi-brand duplication and enables single-variable theme switching
The ARIA APG was built to showcase ARIA, not as a pattern library — always reach for native HTML first and test with real assistive technology
Design system adoption fails from governance and culture gaps, not component quality; building with users and maintaining feedback loops is the differentiator
