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.
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.