Product Design

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

Page 3 of 4

A phone, a tablet and a monitor side by side, each holding the same eight rows of text in stepped sizes, white guide lines running level through all three

Design

Typographic scale for product UI: sizes that hold on every screen

Build a product type scale of 7 to 9 sizes, named as tokens, that holds from a 320px phone to a 1440px monitor and survives 200% zoom. The exact numbers and the floors.

Six lit steps rising from left to right toward a large lit tile, dots of users standing on each step, a few faded dots falling below the first ones

Design

SaaS onboarding UX patterns that cut first-week churn

Median SaaS activation sits at 37.5%. Six onboarding patterns, from empty states to role-based checklists, move new users to first value faster.

Two lines on a chart, a rising one and a flat one, each bright only where it is lower, crossing at a ringed point, a cluster of small tiles and one single tile at their ends

Design

In-house vs agency for a design system: when each wins

A dedicated in-house design system hire runs $145k to $185k a year loaded; an agency retainer $5k to $15k a month. Here is when each one wins.

A large circle split down the middle: its left half a loose mosaic of small dark and white tiles scattering outward, its right half one smooth glowing white surface

Design

Hybrid craft: the AI-and-human design workflow in 2026

Figma's 2026 survey puts generative AI in 72% of design workflows. Hybrid craft splits the work: AI drafts, humans own taste, brand, and the final finish.

Three rows of twelve tiles, small, medium and large, the middle row lit, beside a vertical scale with three white segments

Design

Product design retainer pricing in 2026: the real monthly ranges

Product design retainers run from about $2,000 to $30,000 a month in 2026. Here is what sits inside each band, and when a retainer beats a scoped project.

A dot plot with three humps of dots in rising shades from grey to white above a range slider with two white handles and a lit track

Design

SaaS website design cost in 2026: a founder's pricing guide

A B2B SaaS website runs $5K to $150K in 2026. What sets the number: freelancer vs boutique vs agency, and how clear your positioning is before design starts.

On a white ground, three rows of monthly bars: one tall block then empty months, twelve equal bars, and twelve bars split in two with the lower part growing

Design

Design system pricing in 2026: project, retainer, or shared ownership

A design system costs $5,000 to $60,000+ to build, then needs upkeep. We compare project, retainer, and shared-ownership pricing, and which fits your stage.

A clean dashboard window with three summary cards and one lit chart, folded rows beneath, and a crowd of faint widget shapes behind it

Design

SaaS dashboard design: show data without drowning users

Most SaaS dashboards fail by showing everything at once. Here is the summary-first layout, the widget limit, and progressive disclosure that keeps users oriented.

Three stacked isometric planes: a dense grid of colour swatches at the bottom, a few tiles in the middle, one component card on top, joined by a lit line

Design

Design token naming conventions: a 3-tier system that scales

A three-tier scheme (primitive, semantic, component) keeps token names stable as a system grows. Here is how to structure and name each layer.

A row of six identical white components above, and below it six copies that tilt, shift and fade further each time, each with a dashed outline of the original over it

Design

Component drift: how design systems decay and how to catch it

Only 8% of teams call their design system stable. Component drift is the gap between the system you designed and the UI that ships. Here is how to catch it.

Seven stacked tiers narrowing upward, the lower four lit in white and the upper three in dashed outline, a zigzag line climbing through them in order

Design

Design system structure: the 7 categories and the build order

A design system holds or rots based on the order you build its parts. Here are the seven categories every scalable system needs, and the sequence.

Four groups of lit tile columns growing toward a dashed ceiling, cut back between groups, with dashed outlines where tiles were removed and dark tiles falling below

Design

Why we kill components instead of adding them: the design system diet

Most design systems grow until they break. We treat the component count as a number to keep small. Here is the rule set we use to prune ours every quarter.

Back to Field notes