Variables (design tokens)

Think of variables, or design tokens, as small building blocks that store essential style information such as colours, type sizes and spacing. They are part of the designer's toolkit for ensuring a website or app continues to look and feel right after many updates. Variables have been used in programming for a long time, and design tools such as Figma and Webflow now apply the same approach. This lets designers—not only developers—fine-tune the appearance of a website or app with great precision.

Variables in practice

Variables make changing a design much easier. If a company wants to update its primary colour, for example, a designer can change the colour variable once and have it reflected throughout the entire site. This saves time and reduces the risk of mistakes.

Variables are also used to construct components—reusable design elements such as buttons and form fields. Each component draws on variables that define how it looks. Using these ready-made components, designers can assemble new pages or features quickly and consistently, improving both efficiency and cost.

The benefits of variables

Variables help a design remain consistent and recognizable across digital touchpoints. They also create flexibility, making it easier for teams to collaborate and for businesses to adapt to new trends and customer preferences.

At Lumeno, we integrate variables into every project to ensure our digital solutions are not only visually strong, but functional and easy to update. This approach prepares them for today's digital challenges and those still to come.