Product Design

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

Page 1 of 4

Design

Multi-brand design tokens: 6 steps from one primitive layer

One primitive layer, one alias-only file per brand, components that read only semantic names: six steps built on the DTCG 2025.10 spec and Figma variables.

A dark form card on the left with a white button; a white line leaves the button, breaks into a dashed gap, then fans out into six quiet curves, each ending at a small dark screen lit in a different place: a field outline, a dialog, half of a split view, a countdown bar, a top banner, a single dot

Design

Error state UX design: what to show when a request fails

A request can fail six ways, from a rejected field to a dropped connection. What each needs on screen, how to make retry safe, and the copy to write.

Design

Figma MCP design-to-code handoff: 6 steps and its limits

The Figma MCP server gives coding agents design context and a code starting point. Six steps to a clean handoff, and the four gaps it still leaves.

Three identical cards in a row on a dark grid: the first drawn only by a white outline, the second lifted above the page by a soft white shadow, the third filled with solid white, each holding the same quiet lines of text

Design

Border vs shadow in UI: when each wins, and when a fill does

Shadows vanish in forced colors mode and fade in dark themes, input borders need 3:1 under WCAG 1.4.11. When to separate UI regions with border, shadow or fill.

Left, six dark cards in a grid, each with a white bar in a different corner; right, a dark table of nine rows whose white bars line up in one column, the longest one brighter

Design

Data table vs card layout: when a table beats a card grid

In a table people compare records without holding values in memory; cards make them reorient at every card. Five questions decide what a screen needs.

Left, a dark document sheet of quiet lines topped by a lit check tile; right, seven dark screen tiles climbing like steps, joined by a white thread broken in six places, each gap marked by a dashed circle

Design

EAA enforcement: 6 reasons compliant-on-paper products fail audits

WebAIM found WCAG failures on 95.9% of top home pages in 2026. Six ways an EAA statement, a Lighthouse 100 and an overlay still fail an accessibility audit.

Design

Brand motion design: how one easing curve sets a product's tone

Material 3 eases on cubic-bezier(0.2, 0, 0, 1), Carbon splits productive from expressive. How to pick one signature curve, test it and ship it as tokens.

Two dark interface panels side by side: the left one uneven, with nine small white rings marking its faults, the right one the same screen aligned, with flush numbers and a lit focused button

Design

Why your UI looks unprofessional: 9 details to fix before launch

Off-scale spacing, radii that don't nest, wobbling numbers, missing focus states: nine details that make a UI look unfinished, each with its fix.

Four dark form pages in a row, each with a section pill and three fields of different widths filled in white, joined by a lit line that ends in a lit tile with a dark check

Design

Long form UX best practices: 12 rules for forms people finish

The average checkout asks for 11.3 fields when 8 would do. Twelve rules for long forms: what to cut, how to split pages, when to validate, what to save.

Left, scattered dark tiles in loose clusters joined by broken lines; right, one tight block of white tiles joined as a single shape

Design

Digital product design studio vs web agency in Italy: what differs

Italy's ICT sector counts 132,832 companies, so the label proves nothing. Eight axes, four call checks, and where a web agency is the better buy.

A two-page spread laid out on a column grid: a huge headline bar, a picture with a caption, text columns, a wide margin and a white pull quote

Design

Editorial web layout: 5 magazine devices that work on screen

Five print devices that survive on screen: a real grid, scale contrast, captions, margins and pull quotes. Plus the CSS that carries them in 2026.

A paragraph of quiet text lines whose ends all fall inside one white band, with even white steps marking the spacing down the margin

Design

Optimal line length and line height: 6 steps to set both

Body text reads best at 50 to 75 characters per line. Here is how to set measure and leading in CSS, with the numbers, the WCAG floor, and real browser support.

Back to Field notes