#design systems
28 pieces filed under “design systems”.
Focus-visible: designing the ring, not removing it
Keyboard focus styles are a design problem most teams delete instead of solve. How to design focus rings that are visible, beautiful and part of the identity system.
Focus states are a design system feature, not a browser default
Stop inheriting the browser's focus ring. Design it: tokens, 3:1 contrast on every surface, dark-theme variants, and the overrides that silently break keyboards.
Icon systems: SVG discipline for the web
Most icon sets decay into a junk drawer of mismatched SVGs. Grid rules, stroke discipline, sprite strategy and the build-time pruning that keeps an icon system honest.
OG images: the growth surface hiding in your metadata
Your pages are shared thousands of times, and most preview cards are a cropped hero or nothing. A system for OG images that earn the click — and how to measure it.
Design system buy-in: the internal sales playbook
Design systems don't fail at build; they fail at buy-in. The cost-of-inconsistency maths, the pilot-component strategy, and the executive story that lands.
One system, many sites: multi-property brand design
Running several web properties off one brand system without blurring them: shared tokens, house vs. property layers, cross-site navigation and honest governance.
Drag handles, sliders and the affordance problem
Draggable UI fails quietly: nobody drags, keyboards can't, layouts forget themselves. How to build handles and sliders that people actually find, use and keep.
Dark mode is a second design system
Treating dark mode as a CSS inversion is how you ship a grey smear. Design dark themes as a second, deliberate system — tokens, elevation, contrast, CI tests.
Print stylesheets: the forgotten design surface
Most web teams ship print CSS by accident. Here's @media print done properly: receipts, itineraries, tickets, page breaks, link URLs, and testing without a printer.
Web Components vs React in 2026: a studio's scorecard
We build with both. An honest scorecard across portability, SSR, theming, a11y and hiring — plus where each earns its place on real projects.
Container queries: finally designing components, not pages
Media queries ask the viewport; container queries ask the room. Production notes: containment costs, cqi type, fallbacks, and cards that go anywhere.
Illustration systems that don't go stale
One-off illustration ages like milk. Here's how we build illustration languages as systems: primitives, composition rules, generators and maintenance models that survive.
Design tokens that survive contact with engineering
Most token pipelines rot within a year. Here's the architecture we use at Brassfern to keep design decisions flowing from Figma to production without drift.
Accessibility starts in the design file
Most accessibility rework is a design-file problem found too late. The annotations, contrast workflows and focus specs that stop retrofits before they start.
Aspect-ratio systems for editorial imagery
Stop cropping at random. A small, deliberate set of aspect ratios — what each says editorially, how object-fit discipline works, and how ratios survive art direction.
An illustration system is rules, not a folder of PNGs
Illustration that stays consistent after the artist leaves: principles with forbiddens, per-artist commissioning briefs, rarity budgets, and storage that survives churn.
Accessibility is an engineering discipline, not a ticket queue
Treating accessibility as infrastructure: axe in CI, linting, component contracts, keyboard hierarchies, and who on the squad owns what. WCAG AA as a floor.
Testing design tokens in CI like the API they are
Design tokens are an API contract between design and engineering. The CI pipeline that enforces it: grammar linting, ancestry checks, contrast tests.
Colour systems that survive dark mode and rebrands
Literal palettes break the moment a brand shifts or dark mode ships. Here's the semantic colour architecture that has survived both — twice — on real client work.
Design tokens are an API: building a pipeline from Figma to production
How we build a design-token pipeline from Figma to CSS, Tailwind and native — one source of truth, versioned releases, and semver for visual decisions.
i18n beyond the strings file
The hard 20% of internationalisation: plural rules, dates and currency, RTL layout, locale-aware content modelling, and design tokens that change per language.
Design logo systems, not logos
A logo is judged at 16 pixels and on an invoice footer, not the presentation wall. How we build tiered identity systems — marks, motion, rules — that survive.
Empty, loading, error: the states that carry your trust
A field guide to the 20% of screens that carry 80% of trust: zero-data dashboards, skeletons vs spinners, and error copy that admits fault without over-apologising.
Type pairing for brand systems: two voices, one argument
How we pair display and text faces in identity work: contrast logic, superfamilies vs strangers, the third-face rule, and testing in the ugliest context first.
Design handoff that doesn't decay in a sprint
Why handoffs rot and how we stop it: living tokens, component specs over pixel mocks, motion specs with real easing values, annotations that survive sprints.
Fernway College: admissions journeys without the paper cuts
One editorial platform for a school's admissions, alumni and news — with an enrolment journey that saves progress and a CMS the comms team actually runs.
Case studySummit & Still: booking UX for a yoga studio group with a calm nervous system
Five studios, one timetable, zero countdown timers. Rebuilding Summit & Still's booking around teacher loyalty, ethical intro offers and empathetic emails.
Case studyQuill Legal: a document platform lawyers actually enjoy
A legal-tech SaaS had a brilliant document-automation engine trapped in a 2016 UI. We redesigned the product end-to-end and shipped its design system, Precedent.