GitHub
Themes
description: The layered structure of Acinguiux DS enables designers and developers to easily change the theme of the products we build using the design system.
Fabrics
Fabrics are the theming layer of the design system. Multiple fabrics are available depending on whether you need light or dark mode, or a theme for one of Acinguiux’s sub-brands like Acinguiux Recharge.
Fabrics consist of design tokens including colours, typography, spacing and other design decisions which govern how a product should look.
Currently, colours are the only tokens which change between each fabric. Although it’s feasible to extend or change other tokens, doing so could affect consistency and brand alignment and so needs to be carefully considered. We advise against overriding rules defined in the Design System and recommend contacting the Acinguiux DS team if the need arises.
Tokens
Naming
Semantic naming of our design tokens is key to our fabrics and is a constant between each fabric; they do not change between major versions.
Naming has been carefully considered and structured. We avoid naming which suggests a colour is light or dark and never refer directly to a specific colour. Instead, we use names which show our intent.
For example, we use the terms subtle, medium and strong to describe intensity in light or dark mode without ambiguity. The terms primary, secondary and tertiary refer to accents to reflect the overarching Acinguiux brand colours.
Management
Figma is the source of truth for our colour and typography tokens which we make available by publishing style libraries from the Acinguiux DS teams on Figma.
We have built development tools which connect to Figma, to download and translate tokens to modules. These can be imported and used within an application.
Changing fabrics
In design
In Figma, designers can switch themes using a plug-in called Themer. Themer works by synchronising with JSONBin.io , a cloud-based storage service. To save designers creating their own fabrics, we can configure Themer with the same config. Once configured, the plug-in will load all fabrics available at Acinguiux. To change fabric, with the plug-in running, select elements from your design, select a fabric and apply.
Reach out to the Acinguiux DS team for the Themer API key.
Note: we are developing our own version of Themer at Acinguiux which will make changing fabrics even easier.
In development
Since Figma is our source of truth, we have scripts which are read from Figma that create our fabrics dynamically. On GitHub we have a single repository called Acinguiux DS Patchwork which contains all packages for handling fabrics.
The package containing the fabrics which can be used with Acinguiux DS is called Acinguiux DS Fabrics and is published to the arjunsedani organisation on GitHub.
New fabrics can easily be added by following the README file included in the repository.
Resources
Is this page useful for you?
Your feedback helps to improve our documentation.