A design system in Aha! Builder is a reusable set of design tokens — colors, typography, spacing, and shapes — together with customized components and page layouts. 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 three parts, and you manage all of them from the Design system tab on your application's Design page:
Design tokens: The foundational styles Elle reuses across your application. Elle groups them 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.
Layouts: Combinations of components that make up frequently used patterns, from a navigation bar or page header to an entire page. Use them as a starting point for new screens.
Elle saves your design system as an editable Markdown file and presents it visually on the Design system tab.
Create a design system
Create a design system inside a single application or prototype, and give Elle a starting point that reflects your brand. You can also start one from Library -> Design systems so it is available to every application from the beginning.
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.
Create and reuse layouts
Components style individual elements. Layouts combine them into larger patterns, up to an entire page, so you can start a new prototype or application from an interface people already recognize and focus on what is new.
You need permission to modify a design system to create or change its layouts. You do not need that permission to use a saved layout in a prototype or application.
Create a layout on the Design system tab. In the Elle panel, describe the layout you want, or upload a screenshot of an existing screen and ask Elle to create a layout from it.
Review the layout on the Design system tab. After you create your first layout, a Layouts section appears below Components. Select a layout there to preview it full screen.
Refine a saved layout by describing your changes in the Elle panel.
Use a layout by asking Elle for it by name as you build. For example, ask Elle to start a new page from your analytics layout and add a filter panel. Elle may also apply a layout when your request names the screen it covers, but asking for a layout by name gives you the most reliable result.
Elle copies a layout's files into your application rather than linking to them. Unlike components, a layout does not stay in sync: changes you make to a saved layout later do not update screens you already built from it.
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 starts in the application or prototype where you created it. To use it across applications, add it to your Library:
Navigate to Library -> Design systems.
Click Add design system, then select Create from Aha! Builder application.
Select the application whose design system you want to share.
To apply a library design system to another application, open that application's Design page, select the Design system tab, then choose it from the Design system dropdown.
If your account includes Aha! Roadmaps or another Aha! product with workspaces, you can also click the Design system actions button next to Application design system and select Save to a workspace.
If you get stuck, please reach out to our Customer Success team. Our team is made up entirely of product experts and responds fast.