Product Design

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

Page 2 of 4

Thirteen black tiles on a white ground, one showing colour stripes and twelve showing size, weight, timing, easing, shadow and other token types

Design

Design tokens beyond color: behavior and context in 2026

The stable DTCG format has 13 token types. One is color. The other 12 carry size, time, easing and state, and most systems never define them.

A browser window holding a landing page, eight white markers on its parts, four parts struck through, and a pointer on the lit call-to-action button

Design

What makes a landing page convert: 8 factors and 4 killers

Median landing page conversion sits at 6.6%, SaaS at 3.8%. The top quartile wins on message match, load time and form friction, then on design.

Three screen cards: one with a composed white illustration, one with a grid of identical stock marks, one with text only

Design

Illustration systems: when to draw, when to buy, when to skip

Custom product illustrations run $300 to $1,200 each. Here is how we decide which screens earn one, which take a library set, and which need none.

A single white thread passing through six white hoops in a row, then running onto a document and becoming its signature

Design

SaaS design agency in Spain: what to check before you sign

Since June 2025, Spain's Ley 11/2023 puts accessibility duties on private digital products, with sanctions reaching one million euros. Six questions to ask.

A grey-only interface panel with a clear order of headline, text, buttons and cards, seven white markers in its margin pointing at the parts

Design

Visual hierarchy without color: 7 tools that replace the accent

Two greys can carry a whole interface. Size, weight, spacing and value do the work an accent color takes credit for, in the order that actually works.

Four empty screens in a grid, each with one quiet sign (an empty slot, a search that found nothing, a finished check, a broken piece) and one lit button

Design

Empty state design: the 4 states every screen needs

A screen needs four empty states: first use, no results, cleared, and error. Baymard finds close to half of sites leave the no-results screen a dead end.

A film strip of seven frames, the picture in each more composed and brighter than the last, the seventh framed by white viewfinder corners

Design

Website photography for software: the 7-step shot list

Software has no object to photograph, so most product sites default to stock. The 7 steps we use to pick, grade and ship a set of 8 to 12 images.

Four tall tubes, each with its own threshold mark at a different height, filled past the mark, lit above it and dark below

Design

When to hire an agency for a design system (and when to wait)

Four thresholds decide it: repeated surfaces, release cadence, who owns it after handover, a fixed date. Below them a design system costs more than it returns.

$Seven lit shapes on two rows of guide lines, each over a dashed ghost of its mathematical position, circles and points overshooting the lines$ Design

Optical alignment in UI: 7 spacing fixes math gets wrong

Round letters overshoot flat ones by 1% to 3% of cap height, and UI inherits the same problem. Seven optical fixes, and what CSS now handles for you.

Three pricing cards side by side, the middle one raised and white with six ticked rows, the outer two dark and quiet

Design

SaaS pricing page design: 6 fixes that stop losing deals

Gartner puts 67% of B2B buyers on a rep-free path, and rep-free buyers report 23% more purchase regret. Six fixes that make a pricing page decide.

Five tall day cards joined by a lit line: a component inventory, four scored bars, a focus ring test, paired duplicates, and a ticked list

Design

How to run a design system audit in 5 days: a checklist

A day-by-day checklist to audit a design system: inventory components, score four kinds of drift, test accessibility, and ship a fix list in five days.

Left, a stack of identical grey page layouts; right, the same page with an oversize headline and a large white circle running off its edge

Design

SaaS Art Direction: How a Product Stops Looking Like a Template

SaaS art direction is the deliberate visual point of view that separates a product from the template it launched on. Here is where to push and where to leave the conventions alone.

Back to Field notes