Artfinder Design System

The 4px, Tokenisation, and Accessibility

Rebuilt Artfinder’s design system in Figma—introducing a 4px grid, structured tokens, and WCAG-compliant components—to deliver a scalable, consistent, and accessible UI foundation.

3D Render
3D Render
3D Render

Context

Sage, a leading provider of accounting software, observed that its mobile product detail pages (PDPs) were underperforming compared to desktop versions. With mobile traffic constituting over 60% of total visits, the company aimed to optimize the mobile PDP to improve user engagement and conversion rates.


Challenge

  • Problem: Legacy 5px grid system

    Impact: Layout gaps and misalignments made it hard for designers and developers to build cohesive pages at scale.


  • Problem: Unstructured color and typography tokens

    Impact: Inconsistent use of brand colors and text styles across screens led to visual drift and slowed hand-off.


  • Problem: Accessibility failures in key components

    Impact: Primary CTAs and error states didn’t meet WCAG AA contrast thresholds, risking exclusion of users with visual impairments.


  • Problem: Platform migration from InVision to Figma

    Impact: Component library was fragmented, creating duplicated work and stalling new feature development.


Results

  • WCAG Compliance: Primary CTA now passes WCAG AA (Failed → Passed)

  • Grid Adoption: 4px grid implemented across 100% of core screens

  • Component Coverage: 100% of legacy UI components rebuilt as Figma variants

  • Token Consistency: Primitive & semantic tokens established for colors, typography, spacing, and elevation


Process

  • Audit & Strategy

    Conducted a system audit of grids, tokens, and accessibility gaps; defined goals and success metrics with stakeholders.


  • Foundation Build

    Implemented a 4px base grid; structured primitive (raw values) and semantic (meaning-driven) tokens for color, typography, spacing, border radius, and elevation.


  • Accessibility Review

    Ran contrast scans and WCAG checks; adjusted primary palette and introduced semantic typography tokens for accessible CTAs and error states.


  • Component Library Construction

    Following atomic design, rebuilt atoms → molecules → organisms as Figma components/variants, ensuring each was responsive and token-driven.


  • Collaboration & Roll-out

    Held weekly syncs with engineering to align on token naming conventions and CSS export; rolled out a Figma design kit and documentation portal.


Key UX Problems & Solutions

Problem: Outdated Grid System

  • Issue: 5px increments led to uneven spacing and unpredictable resize behavior.

  • Solution: Switched to a 4px grid, enabling modular spacing and fluid layouts

Problem: Inconsistent Tokens

  • Issue: Colors and font styles were defined ad hoc, causing design debt.

  • Solution: Created a two-tier token hierarchy—primitive tokens for raw values, semantic tokens for UI roles (e.g., “primary-bg,” “heading-2”)—to enforce consistency.

Problem: Accessibility Failures

  • Issue: Primary CTAs and form error messages lacked sufficient contrast.

  • Solution: Refined the primary color and introduced bold typography tokens on buttons; updated error styles to meet WCAG AA.


Problem: Fragmented Component Library

  • Issue: Migrating from InVision broke links between components, leading to versions proliferation.

  • Solution: Rebuilt the entire library in Figma as scalable variants, complete with auto-layout and responsive constraints.

Conclusion

By laying a strong foundation—a 4px grid, clear token structure, and accessibility baked in—we delivered a design system that’s consistent, future-proof, and developer-friendly. This overhaul not only accelerates new feature delivery but also ensures every art lover and creator experiences Artfinder with clarity and confidence.