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

Design Systems — 2026 Week 31

UI component architecture, design tokens, and semantic theming

calendar_todaysummarizeWeek 31-2026
DATA MODEL

Attio Built a Typed Formula Language for Multi-Tenant Scale

Attio built formula attributes around a custom grammar powered by Lezer and CodeMirror, gaining incremental parsing, error highlighting, autocomplete, and domain-specific references. A declarative type system represents record attributes, historical values, phone numbers, and actor references while supporting generics and runtime coercion. Large recomputations fan out in batches; SQL-backed functions run in Spanner, and every batch reads from a common transaction timestamp for a consistent snapshot. Pub/Sub ordering keys based on workspace ID limit each tenant to a fair slice of workers. The formula-writing agent receives schema context, then uses type and reference errors as feedback until its custom-DSL output validates.

Read Articlearrow_forward
Article · ACCESSIBILITYREAD TIME: 4m

Axe Monitor MCP Turns Accessibility Scans into Sprint Plans

Deque's Axe Monitor MCP integration lets accessibility managers query scan history from an AI assistant instead of manually comparing reports. Teams can identify new regressions, high-impact components, and the pages that matter to an upcoming sprint, then ask for a prioritized remediation plan with full issue details. The integration can model goals such as reaching a target score over several sprints and can create or configure scans in bulk for designated administrators. It complements rather than replaces human judgment: the useful shift is faster analysis and planning around existing scan evidence. Access requires Axe Monitor 8.8 and enrollment in the MCP Server offering.

READ_FULL_LOGarrow_forward
Article · LOCALIZATIONREAD TIME: 4m

Buttondown Uses One Localization Contract Across Django, Vue, and Email

Buttondown stores localization in one portable JSON file whose keys map each locale to a translated value. A Django template tag, a Vue wrapper component, and background transactional-email jobs all read that same source, avoiding separate translation paths for different runtimes. CI checks missing and malformed strings and even concatenates the codebase to reject unused keys. The team deliberately localized subscriber-facing surfaces but not the author dashboard because its documentation and support remain English-only. The investment proved material: 75% of paid authors choose a non-English locale, more than 40% of subscribers live in non-English-speaking countries, and open strings have attracted community-contributed locales and fixes.

READ_FULL_LOGarrow_forward
Article · VISUAL QAREAD TIME: 8m

Visual Regression Tests Protect the Interface Beyond Functional Coverage

Functional tests can pass while a shared icon, stylesheet, or responsive layout is visibly broken. Visual regression testing renders a page or component in a real browser, compares it with an approved baseline, and requires review when pixels change. Percy, Chromatic, and Vitest Browser Mode cover different scopes, from full pages to Storybook components and browser-mode unit tests. Reliable suites must wait for fonts and images, disable or mask animation, and stabilize dates and other dynamic data to avoid noise. The author recommends starting with selective high-value surfaces, because huge snapshots create review fatigue and recurring false failures.

READ_FULL_LOGarrow_forward
Article · COLLABORATIONREAD TIME: 2m

LiveFile Makes Files First-Class Collaborative Storage Values

Liveblocks' public-beta LiveFile adds arbitrary files to the same synchronized Storage document used by collaborative application state. A whiteboard or editor can upload through useUploadFile, attach the returned value in a mutation, and resolve it with useFileUrl; connected users see file changes live without a separate storage integration. Documents, archives, presentations, and media are all supported. Server workflows can call liveblocks.uploadFile and mutate Storage through an API, which also supports background agents that generate or process assets. Applications on Liveblocks 3.17 or earlier need to follow the upgrade guides before adopting the feature.

READ_FULL_LOGarrow_forward
Video · CREATIVE CODING8:29

I used Claude to design… too much

Flux Academy argues that delegating research and ideation to Claude can remove both creative ownership and the productive discomfort that precedes a distinctive idea. Drawing on James Webb Young's A Technique for Producing Ideas, the process starts with project research, combines it with a designer's personal interests, and allows an incubation period before concepts emerge. AI-generated concepts instead tend toward an average because they are disconnected from that individual source material. The revised workflow keeps reference gathering, sketching, walking, ideation, and trusted human feedback in human hands. AI enters only during execution—images, video, code, renders, angles, and styles—so human creativity plus AI execution expands what a chosen idea can become.

AI_INFOGRAPHIC
I used Claude to design… too much — infographicWATCH_VIDEOarrow_forward
summarizeDigest_Summary

Week 31's design-systems stories are really about turning product rules into executable contracts. Attio built a typed formula language with Lezer and CodeMirror, executes large recomputations in consistent Spanner snapshots, and uses Pub/Sub ordering keys to preserve fairness between tenants. Its formula-writing agent is constrained by the same type system, so invalid references are returned for correction instead of becoming silent product errors.

The surrounding workflow needs equally concrete checks. Deque's Axe Monitor MCP integration turns scan history into prioritized remediation plans, while visual regression tests compare rendered output rather than class names or component internals. Buttondown keeps one portable localization JSON file for Django, Vue, and background email rendering, then enforces missing, malformed, and unused keys in CI. A design system becomes dependable when tokens and components are joined by machine-checkable guarantees for accessibility, localization, visual output, and data semantics.

Liveblocks' public-beta LiveFile shows the same consolidation at runtime: files become synchronized Storage values, update live for every collaborator, and can be uploaded from either React hooks or server-side agent workflows. The practical lesson is to keep system capabilities inside shared primitives rather than recreating parallel paths for each surface.

Flux Academy adds a human boundary to those machine-checkable systems. Its revised process keeps research, sketching, incubation, and trusted feedback with the designer, then uses Claude for execution rather than idea ownership. That division treats human creativity plus AI execution as a system constraint: automation expands a deliberate concept instead of selecting the concept by default.

Key Takeaways
  • Give AI-generated product logic a deterministic validator: Attio feeds type and reference errors back to its formula agent before any expression is accepted.
  • Add visual snapshots at component and responsive-page boundaries, stabilize fonts, animations, and dynamic data first, and require an explicit approval for every intended baseline change.
  • Keep research, ideation, incubation, and trusted feedback human-owned; bring AI in after the concept is chosen to expand execution rather than average away the idea.