A design system in Aha! Builder is a reusable set of design tokens — colors, typography, spacing, and shapes — together with customized components. It gives every screen in your application a consistent, on-brand appearance, so people can recognize your product and move through it with confidence.
The Theme controls set the overall look of an application. A design system goes further: it captures the specific tokens and components Elle applies as you build, so your styling stays consistent everywhere and is simple to update in one place. Elle generates the design system from the inputs you provide, then displays it visually so you can review and refine it.
Click any of the following links to skip ahead:
How design systems work
A design system has two parts, and you manage both from the Design system tab on your application's Design page:
Design tokens: The foundational styles Elle reuses across your application. These are grouped into Colors, Typography, Spacing, and Shapes.
Components: Customized versions of your application's built-in components, such as buttons and cards, that carry your design system's styling.
Elle saves your design system as an editable Markdown file and presents it visually on the Design system tab.
A design system is part of the Aha! Builder Team and Scale plans. On the Pro plan, use the Theme tab to style your application.
Create a design system
Create a design system inside a single application or prototype, and give Elle a starting point that reflects your brand.
Navigate to the Design page for your application, then select the Design system tab.
-
Select Create a modern design system. You can also describe what you want in the Elle panel, or add source material for Elle to work from:
Upload screenshots of an existing product or interface.
Add files, such as brand documentation or individual images. You can upload files from design systems in other tools.
Describe the look and feel you are aiming for.
Aha! Builder supports SVG uploads, so you can bring in vector assets exported from design tools.
Answer Elle's questions about the look and feel. Elle will ask about your color palette, typography, and layout and density before generating anything.
Review the result. Elle generates your design tokens and components. Navigate to the Design system page to review the output.
Review your design system
Once Elle generates your design system, review it on the Design system tab.
-
In the left panel, select any item under Design to view its tokens:
Colors displays each color token with its name and hex value. Use the light and dark mode toggle to preview both.
Typography, Spacing, and Shapes display the type styles, spacing scale, and corner and border treatments Elle generated.
Select any item under Components to see how that component looks with your design system applied.
For advanced edits, open the design system file directly. Elle saves it as an editable Markdown file in your application's code, though most people work from the visual Design system tab.
Modify and add components
Refine your design system at any time by working with Elle.
Use the selector tool at the top of the Design system tab to choose a component, then describe your changes in the Elle panel.
Select Add a new component in the Elle panel to create something new. Elle can build complex, custom components — for example, a site header or a button with an animation.
As you refine components, Elle updates the customized versions stored in your design system so they stay consistent across your application.
Update your application
Your design system keeps styling consistent as your application changes. When you update a component in the design system, every instance of that component across your application updates automatically.
Updating a component changes your application in Preview. You must still deploy your application to release those changes to Production.
Reuse a design system
A design system belongs to the application or prototype where you created it. You cannot yet apply an existing design system to a different application. To reuse a design system, duplicate the application or prototype. The duplicate includes a copy of the design system, which you can then adapt for the new application.
If you get stuck, please reach out to our Customer Success team. Our team is made up entirely of product experts and responds fast.