A Figma design system with tokens, themes and built-in accessibility checks

Ledgerly's web app lets small businesses send invoices and chase payments. Over five years four designers have each added their own styles. A quick count of the main Figma file found 37 shades of grey, 11 button variants that do roughly the same thing, 9 font sizes between 12 and 16 px, and three different date pickers. Developers rebuild components for each new feature, and a recent accessibility review by a customer in the public sector flagged 46 contrast and focus issues.

The head of design wants a small, solid design system, not a giant one. She has set the scope: - design tokens for colour, type, spacing, radius and elevation-style shadows, defined as Figma variables with a light and a dark mode; - 12 core components (button, text input, select, checkbox, radio, toggle, date input, alert, badge, modal, table row and toast), each with all states; - every colour pairing used by a component passes WCAG 2.2 AA contrast in both themes; - a documentation page per component that says when to use it and when not to.

You do not have Ledgerly's real files, so you will audit a real public web app with similar screens, such as a public invoicing or accounting tool's marketing demo, or an open-source admin dashboard, and treat its inconsistencies as Ledgerly's. Take screenshots and count what you find.

Done looks like an audit, a token sheet, a Figma library file with variables and components, an accessibility report for every colour pair, documentation pages, and a short adoption plan. The goal is to cut the grey shades from 37 to 10 or fewer and the button variants from 11 to 4 or fewer.