Product Design

Design systems, UX patterns, motion, accessibility, design tokens, Figma to code workflows.

Page 4 of 4

Two columns of seven tracks: on the left white dots easing to a stop, on the right grey dots jerking past the end of the track to a barred ring

Design

Functional UI animation in 2026: the checklist before it ships

The 7 do, 7 don't checklist we apply on every product we ship: durations from 100 to 500ms, opacity and transform only, prefers-reduced-motion honored at the root.

Six dark cards in a grid, each a small diagram of one lit tile and dark tiles in a different relationship: handed over, embedded, linked by recurring dots, feeding three, overlapping, orbiting

Design

Design system as a service: 6 agency models compared in 2026

Design system as a service is an ongoing engagement: an agency builds, governs, and evolves your system instead of handing it off. Six models compared.

A grid of nine columns and seven rows of tiles; six rows end at a struck-out cell, one lit row runs through all nine to a large lit tile

Design

How to choose a B2B SaaS design agency in 2026

Most agency hires fail before the contract is signed. A 9-step process to pick a B2B SaaS design agency that ships strategy, not just screens.

Six dark squares growing from tiny to very large along a baseline, one of them lit, with a slider under the row set beneath the lit one

Design

Best SaaS design agencies in 2026: how to actually compare them

Best SaaS design agencies in 2026 span six archetypes priced from $3k to $500k+. The right one depends on your stage, not on a ranked list. Here is the comparison.

Seven phone screens in a row shading from light to dark in steps, under an arc of dots from a glowing sun to the horizon

Design

Dark mode is not a toggle: context-aware theming in 2026

Dark mode adoption hit 82% on mobile in 2025, but a header toggle still ignores ambient light, time of day, and task. Here is the fix.

On a white ground, a ring of twelve black dots around a black form card whose fields are joined by a dashed keyboard path ending in a white focus ring on the button

Design

Accessibility-first design after the EU Accessibility Act

The EAA became enforceable on 28 June 2025. Here is what changes for product teams shipping to the EU and what accessibility-first design actually means.

Grey tiles tumbling along a wide wave on the left that dies away to a flat line, ending in one still white tile on the right

Design

Calm UI in 2026: the shift away from animation theatrics

Calm UI keeps interface motion in the user's periphery, animates only when state changes carry meaning, and treats animation as a cost not a default.

A central white tile with nine lit tiles on an inner orbit joined by solid lines, and three dark tiles on a wider dashed orbit joined by dashed lines

Design

How to govern a design system across 10+ consumer projects

A practical playbook for governing a design system across many consumer projects: contribution model, versioning, codemods, and adoption tracking.

A grid of identical dark pills with ten that break the pattern in white: wider, taller, square, tilted, shifted or doubled

Design

10 design system mistakes that wreck consistency at scale

Buttons multiply, tokens drift, components fork. The 10 design system mistakes that quietly turn a product into a parts bin, and the fixes.

Three stacked bands: three lit tiles on top, six swatch pills in the middle and eighteen small chips at the bottom, each joined by lines to the one above

Design

Design tokens vs CSS variables vs Tailwind, explained (2026)

Design tokens, CSS variables, and Tailwind sit at three layers: meaning, runtime values, and utility classes. How to pick, and how they stack together.

From a tile on the left, a high white arc studded with small lit tiles reaches a lit tile on the right, while a straight grey line below loops three times and stops short

Design

Third-party component libraries: an expensive shortcut

Third-party component libraries promise speed but lock you into upgrade hell, brand sameness, and rewrites every two years. Here is what actually works.

Five rows with partly filled score bars on the left, lines crossing and reordering them into a ranked roadmap of five steps on the right, the first one lit

Design

Design system audit: the 5 checks and the repair roadmap

A design system audit scores token usage, component drift, accessibility, governance, and adoption, then returns a ranked fix list and a repair roadmap.

Back to Field notes