Design System Starter Kit

What words and phrases come to mind when you think about your website?

Wild? Not accessible? Expensive to maintain? If so, you're not alone. I see it again and again: many digital presences grow organically. A page here, a form there — each one from scratch and, where needed, cobbled together from existing components, with plenty of compromises. The content is live, sure, but not the way you pictured it. Yet during the day to day there's barely time to question how pages are built, let alone to implement new requirements. At some point, another question lands on the table: how is all of this supposed to become accessible? And suddenly you realise that every colour, every font size, every button in this tangle would have to be checked and fixed one by one. Accessibility as an afterthought, a huge effort if tacked on at the end, slows teams down and eats up budgets.

That's precisely where the accessible Design System Starter Kit comes in. Instead of repairing your design page by page after the fact, we build a central, accessible foundation from which every future page and component can be derived — consistent, documented and accessible from the start.

What is an accessible design system?

An accessible design system is a central, documented collection of all the design building blocks of your digital products and ultimately of your brand — colours, typography, spacing, components — captured as reusable design tokens in Figma. "Accessible" here means that criteria such as sufficient contrast, legible font sizes and easy-to-use targets are built straight into these building blocks, complying with WCAG 2.1 AA standards and in line with the EAA and the BFSG.

Once something is decided properly, it applies automatically across every page.

The Starter Kit is the clear, manageable way into this foundation: in just a few days, a ready-to-use framework for your accessible design system takes shape — including training, so that internal teams, for example, can carry on with it themselves straight away.

Key terms, briefly explained:

• WCAG 2.1 AA — the Web Content Accessibility Guidelines, the international standard for accessible digital content. "AA" is the conformance level usually and currently required of companies and public bodies.
• EAA — the European Accessibility Act, an EU directive that sets uniform accessibility requirements for many digital products and services.
• BFSG — the Barrierefreiheitsstärkungsgesetz (Germany's Accessibility Strengthening Act), the German implementation of the EAA. Since 28 June 2025, it has required many companies to offer digital products and services accessibly.

Who is the Design System Starter Kit for?

The accessible Design System Starter Kit is for any company or organisation that wants to bring its corporate design into a digital, scalable, accessible form: whether it has grown organically or is just taking shape. We hand over a system your team understands and can even carry on independently.

What you get: accessible tokens and base components your design can grow with

Your team receives a three-tier design system, built in Figma, that covers all the basics a design toolkit needs with exactly the right selection and number of components to build an individual design effectively. In a hands-on workshop, your team learns how new components can be created from individual design elements: lean, fast and accessible. The three tiers of the design system enable agile, sustainable growth of your design, for example as new requirements come in from users or stakeholders:

• Tier 1: Global tokens form the basis of the entire design system and define raw base values — context- and component-neutral, e.g. a specific shade of blue used within the design system.
• Tier 2: Semantic tokens define a meaning or role within a theme (e.g. light or dark), independent of any single component, e.g. that said shade of blue is the primary brand colour.
• Tier 3: Component tokens define the design of a component or component type, e.g. that buttons use the primary brand colour.

Among other things, this structure means design changes can be made centrally, in one place and take effect globally, across the entire design. The benefits: in the design process, dependencies become visible and traceable immediately, before a single line of code is written. In development, changes can be implemented faster and more reliably. But a design system has many more benefits. Want to learn more about them? Take a look at this article: Do I need a design system? 7 benefits for your team.

Options und investment

Both options of the Design System Starter Kit include the same design and training services. The only difference is whether we work with an existing design, a legacy design, or build an entirely new one.

Design System Starter Kit · Legacy designs (accessible)

Project duration: 5 work days from kick-off to handover

Investment: €4,800 excl. VAT

For organisations with an organically grown design that needs to be updated, made accessible and/or made scalable. We review your existing setup, translate the existing design elements into global and semantic tokens, and adapt them for accessibility.

Design System Starter Kit · New designs (accessible)

Project duration: minimum 7 work days from kick-off to handover

Investment: approx. €8,300 excl. VAT

For organisations with a new design that needs to be translated into the digital world or scaled with a design system. We bring your fresh design into a digital, scalable system, with accessibility built in from day one. The investment depends on a number of factors, such as what you already have: just a logo, or a logo plus colours, typefaces and print layouts. That’s why the figure is a guideline, which we’ll refine together in a conversation.

What's included in both options:

• Your brand design elements (colours, typography, spacing and more) translated into global and semantic design tokens — the foundation of your system
• Up to 40 sample component tokens, e.g. buttons, teasers or form elements, that act as a concrete starting point
• Accessibility evaluation of the tokens and components to WCAG 2.1 AA
• A layout preview across three core page types, as a template for your further work or our collaboration
• A presentation of the new accessible design and a joint round of adjustments
• A hands-on training session, after which internal teams understand the structure and can make their first adjustments themselves
• In the end you have a software-independent design system that is built in Figma but also exported as a JSON file so it doesn't have to be continued in Figma.

What sets the options apart

• Legacy designs can be delivered faster because we build on what already exists. For the same reason, the resulting component list may be more individual.
• New designs are created entirely from scratch: where there was no complete design before, the process takes longer; the result is a base design with the components that typically appear in every design system — a basis you can keep building on and scaling.

The Starter Kit is deliberately designed as a clearly defined entry point: a defined starting point with a manageable scope that gives you and your team a solid foundation. It's the ideal basis for the next steps: from expanding the design system yourself or in an ongoing collaboration, for example in the form of a Maturity Retainer.

Why the Starter Kit from Truly XD?

Truly XD is a Maturity-Minded Experience Design studio for value-driven organisations. Accessible design systems are part of our core: a design principle from the very start. Your design becomes a scalable, and therefore sustainable, system with accessibility built in from the ground up. Ideal for growing automatically with every new requirement. What matters most is what happens after handover: you don't get a system only we can operate, but a documented foundation plus the training to work with it yourself.

The Design System Starter Kit is part of Truly XD's UX capability-building series. Every offer in this series is designed to introduce user-centred design processes to organisations and teams — for the first time, where needed — and to embed them for the long term. They're deliberately compact, easy to access and closely aligned with one another, all to build UX capability. You'll find all the other offers in this series here.