Relume's Style Guide Builder revolutionizes style guide creation thanks to AI! We take a look at this tool, which allows you to generate and project a style guide on your models in just one click.
Style Guide Builder Relume overview
In the process of creating a website, designers face many challenges when it comes to creating style guides. Choosing the ideal color palette, selecting the right typography, and ensuring visual harmony are key elements in developing a coherent brand identity.
This is precisely where Relume's new tool - Style Guide Builder - comes in. Already known for its AI-based site map and wireframe generation features, and its library of Figma, Webflow and React components, Relume is finally adding UI functionality! To the delight of designers, who can now generate and test any guiding style in just a few clicks.
Key features for UI design
The Style Guide Builder offers a set of essential functions to meet the needs of UI designers in creating a style guide for a consistent brand identity:
- Color palette creation: A single click generates a complete color palette, including neutrals, primaries, secondaries and accents, as well as their variations. The palette is then automatically projected onto UI elements such as buttons, backgrounds and placeholders - allowing you to better visualize the rendering.
- Font selection: Connected to the Google Font library, the tool lets you quickly select fonts for headlines and body text, with several default styles to adjust thickness and size parameters as required.
- UI elements (coming soon): A feature that will customize the use of colors and typography for the main elements of the design system, such as buttons, cards and text fields.
- Projection on mock-ups: The integrated AI allows you to apply styles to your models previously created in Relume. You can also test Dark and Light modes to see which works best for your project.
- AI generation: in need of inspiration? Relume automatically generates a style guide with a single click, so you can iterate and test more quickly.
→ Test the Style Guide generation tool
Why is this style guide generator a game changer?
Until now, Relume has been particularly appreciated by a large community of designers and developers for its library of Webflow and React components. These components, reusable at the click of a button, primarily addressed UX needs with basic HTML structures and pre-configured animations. This left UI aspects, and in particular guide style elements, out of the equation.
Style Guide Builder fills the gap! It offers a more complete workflow, now covering the following aspects:
- Creating detailed sitemaps
- Generation of UX wireframes for each page
- Integrating first draft copywriting with AI
- Quickly design and apply a style guide to models
The whole package can be easily exported to Figma, Webflow and soon to React, making it a complete solution for designers and developers alike.
A TOOL for designers, not a designer
As you can see, Relume is becoming a more complete tool than ever for designers, supporting the first design and iteration phases in the creation of a website.
The guide style generation tool remains, however, a tool designed for designers and at the service of designers. It will enable your teams to iterate more quickly, more precisely and to facilitate the visual projection of the project.
In other words, it's a solid base on which to test and refine your choices, which is essential when you know how subjective the UI stage of a project can be.
However, Relume in no way replaces the creative work of a designer. If the aim is to avoid a "template" rendering and give a real identity to the site, it remains essential to go further in the creation of mock-ups.
If you'd like to learn more, you might like to watch this video: Figma to Webflow: How to prepare your Design System
