(BUSAN.SASHIMI)
terminal
Weekly Digest // DESIGN_SYSTEMS — Week 17-2026
architectureWeekly Report

Design Systems — 2026 Week 17

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 17-2026
TOKENS

Design Token Naming Conventions: A Practical Guide

Consistent token naming is one of the hardest parts of scaling a design system, and this guide walks through the three-tier model — primitive, semantic, and component tokens — and five concrete naming conventions including Category-Property-Modifier, Object-Property-Modifier, and context-first patterns. The article explains how to handle variants, states, modes, and numbered scales in a predictable, position-stable way, drawing on the Design Tokens Community Group specification and tooling like Tokens Studio and Style Dictionary. Six practical rules are outlined: consistency over perfection, clarity over brevity, semantic names that express intent rather than visual value, broad-to-specific ordering, self-explanatory names, and growth-aware patterns. The piece closes with lightweight governance recommendations — a canonical naming guide, a review checklist, and shared cross-discipline ownership — to keep conventions stable as systems evolve.

Design Token Naming Conventions: A Practical Guide
Read Articlearrow_forward
Video · AI WORKFLOW

My Design-to-Code Process with AI

Flux Academy walks through a complete design-to-code workflow using Figma and Claude Code connected via the Figma MCP server, converting a multi-screen conceptual app — dashboard, analytics table, filterable notifications, and tabbed settings — into working HTML, CSS, and JavaScript. Key preparation steps before handing off to the AI include applying auto layout throughout (so the AI reads flex containers instead of absolute pixel positions), renaming layers with Figma AI, establishing text and color styles that the MCP server forwards to Claude, and keeping component variants organized. The video demonstrates two prompt iterations: the first generates a visually accurate skeleton from Figma design specs, and the second adds real functionality — working CSV export, filter chips, mark-all-as-read with toast feedback, and editable form inputs. The presenter notes that the workflow is tool-agnostic at its core: design fundamentals, clean file structure, and evaluative judgment remain the designer's irreplaceable contribution.

AI_INFOGRAPHIC
My Design-to-Code Process with AI — infographicWATCH_VIDEOarrow_forward
Article · REAL-TIMEREAD TIME: 9m

How CRDTs and Sync Engines Keep Realtime Lists Ordered with Fractional Indexing

Regular array indexing breaks down in multiplayer apps because a single insert or reorder requires shifting every subsequent index — producing conflicts when two clients edit concurrently. Fractional indexing solves this by giving each item its own positional value between 0 and 1, so only one index updates per operation and concurrent edits from different clients converge automatically. The article covers three practical challenges Liveblocks solved in production: floating-point precision exhaustion after roughly 50 end-insertions (fixed by storing indices as strings), runaway index length growth from repeated pushes (addressed with a viewport-based growth algorithm that jumps ahead by 3 characters then increments by 1), and data size (reduced by switching from decimal to base-96 encoding using printable ASCII for lexicographic sorting). Liveblocks exposes this as LiveList, its conflict-free multiplayer array, and shows React integration via useStorage and useMutation.

READ_FULL_LOGarrow_forward
Article · ACCESSIBILITYREAD TIME: 9m

Session Timeouts: The Overlooked Accessibility Barrier in Authentication Design

Session timeouts disproportionately harm users with motor, cognitive, and visual impairments — a population that includes an estimated 1.3 billion people globally and roughly 20% of any site's audience who are neurodivergent. Motor impairments slow input speed so users appear idle; users with ADHD experience time blindness that makes countdowns meaningless; and screen reader users navigating by headings and form fields take inherently longer, while live countdown timers can spam them with a status announcement every second. Common failure patterns include silent timeouts, non-extendable sessions, and full form data loss on expiration. The article recommends advance warnings with extend-session dialogs, activity-based vs. absolute timeout distinctions, and auto-save via localStorage or sessionStorage. Compliance with WCAG 2.2 Guideline 2.9.2 — which requires adjustable or dismissible time limits — is the baseline standard covered.

READ_FULL_LOGarrow_forward
Article · REACTREAD TIME: 3m

A Guide to React Compiler Rendering

Mark Erikson published slides and video links for his talk on React rendering fundamentals and React Compiler internals, delivered at React Miami 2026 and in an extended version at Devoxx UK 2026. The talk revisits the core mental model of React's re-render behavior — the subject of Erikson's widely-read reference post — and then examines the actual compiled component output to demystify what the React Compiler does under the hood. A key theme is how the compiler inverts React's default rendering behavior, memoizing components automatically rather than relying on manual useMemo and useCallback calls, and what that shift means for how developers should think about component design going forward. Both the standard and extended slide decks are linked from this post.

READ_FULL_LOGarrow_forward
Article · OPEN SOURCEREAD TIME: 6m

Digital Independence

Web designer Thomas Gunther reflects on his personal shift toward digital independence, prompted by Elon Musk's acquisition of Twitter and Tim Cook's political positioning. He moved from Twitter to Mastodon, adopted privacy-respecting alternatives for search (Ecosia), browser (Ungoogled Chromium), payments (Wero), and messaging (Signal), and is actively exploring Linux ultrabooks like the TUXEDO InfinityBook Pro 14 as potential MacBook replacements. The article argues that the design quality of open-source software has meaningfully improved — citing the Audacity v4 redesign and the Linux design community on Mastodon — pushing back against the assumption that free software must look bad. Woven throughout is a short piece of sci-fi fiction using an alien perspective to illustrate how engagement-optimized algorithms exploit human attention, framing enshittification and web centralization as systemic problems worth confronting.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

This week's design systems coverage centered on token naming, accessibility, and the emerging design-to-code AI workflow. A comprehensive naming guide laid out the three-tier token model — primitive, semantic, and component — alongside five concrete naming conventions including Category-Property-Modifier and Object-Property-Modifier patterns. Drawing on the Design Tokens Community Group spec and tools like Tokens Studio and Style Dictionary, it distilled six rules: consistency over perfection, clarity over brevity, semantic intent rather than visual value, broad-to-specific ordering, self-explanatory names, and growth-aware patterns — plus lightweight governance via naming guides, review checklists, and cross-discipline ownership.

An Smashing Magazine deep-dive exposed session timeouts as a critical but overlooked accessibility barrier under WCAG 2.2 Guideline 2.9.2. Motor impairments slow input speed so users appear idle; ADHD-related time blindness makes countdowns meaningless; screen readers navigating by headings take inherently longer and can be spammed by live countdown announcements. Recommended patterns include advance extend-session dialogs, distinguishing activity-based from absolute timeouts, and auto-saving via localStorage or sessionStorage.

On real-time collaboration, Liveblocks published a detailed technical post on fractional indexing for conflict-free list ordering in CRDTs — covering floating-point precision exhaustion after ~50 end-inserts (solved by string storage), runaway index-length growth (solved by a viewport-based growth algorithm), and a base-96 encoding switch for data efficiency. Their React API exposes this as LiveList via useStorage and useMutation. A Flux Academy video also showed a complete Figma-to-code workflow using the Figma MCP server with Claude Code, emphasizing that auto layout, semantic layer naming, and design tokens are prerequisites for reliable AI handoff.

Key Takeaways
  • Design token naming must follow a three-tier model (primitive, semantic, component) with broad-to-specific ordering; governance tools like Tokens Studio and Style Dictionary need a canonical naming guide and cross-discipline review checklist to stay stable.
  • Session timeouts violate WCAG 2.2 Guideline 2.9.2 for motor-impaired, ADHD, and screen-reader users — implement extend-session dialogs and auto-save via localStorage or sessionStorage.
  • Fractional indexing solves CRDT list ordering conflicts, but requires string-stored indices (not floats), a viewport-based growth algorithm, and base-96 encoding to remain production-viable.