Designing the system AmaliTech’s products are built from

components, from buttons and inputs to data tables, steppers and a text editor

61

components, from buttons and inputs to data tables, steppers and a text editor

live examples in Storybook

957

live examples in Storybook

releases since July 2025, now on version 3.2

62

releases since July 2025, now on version 3.2

ways to use it: Angular, React, Vue or plain HTML

4

ways to use it: Angular, React, Vue or plain HTML

the accessibility level the components are built to meet

AA

the accessibility level the components are built to meet

tools in its MCP server, so AI assistants answer from the real component API

16

tools in its MCP server, so AI assistants answer from the real component API

Why a design system

AmaliTech builds products on several frameworks for clients and for itself. Without a shared system, every team designs and builds its own buttons, forms, tables and date pickers, and the products drift apart in how they look, behave and meet accessibility standards.

The Unified Design System gives every product the same building blocks, designed once in Figma, built once in code and documented in one place. Because the colours, type and spacing are tokens, a new theme, including one for a client’s brand, is a change to the tokens rather than a rebuild.

Try it

These are the real components, running live from the design system’s Storybook. Pick one and use it. They follow this site’s light or dark mode.

What’s in it

• Figma libraries, so designers work with the same components developers ship.
• 61 components across forms, buttons, data, panels, overlays, files, menus, messages, media and typography, each with usage guidance and live examples.
• Design tokens for colour, spacing, type and radius, with semantic tokens that switch automatically in dark mode and brand presets in dark blue and orange.
• Setup guides for Angular, React, Vue and plain TypeScript, plus a testing guide.
• AI tooling: an MCP server, agent skills and editor setup, so AI assistants generate code that uses the real components and props instead of guessing.

How it’s built

• Web components built with Stencil, wrapped for Angular, React and Vue, and published as a private npm package.
• Theming runs on tokens: a default theme ships in the stylesheet, and one data-theme switch on the page turns on dark mode.
• Components are built to meet WCAG 2.1 level AA, with keyboard support and screen reader announcements.

Where it started

The system grew out of the first AmaliTech Design System, a Stencil library of 27 components released between 2023 and 2024.