Overview of the Relume Style Guide Builder
In the process of creating a website, designers face numerous challenges when it comes to crafting style guides. Choosing the perfect color palette, selecting the right typography, and ensuring visual harmony are key elements in developing a cohesive brand identity.
This is exactly where Relume's new tool - Style Guide Builder - comes into play. Already known for its AI-generated site map features, wireframes, and its library of components for Figma, Webflow, and React, Relume finally adds UI capabilities! To the delight of designers, this tool now allows them to generate and test any style guide in just a few clicks.
Key Features for UI Design
The Style Guide Builder offers a comprehensive set of essential features to meet the needs of UI designers in creating a style guide for a cohesive brand identity:
- Creating Color Palettes: A simple click to generate a complete color palette, including neutral, primary, secondary, and accent colors, along with their variations. The palette is then automatically applied to UI elements like buttons, backgrounds, and placeholders - allowing for a better visualization of the outcome.
- Choosing Typography: Connected to the Google Fonts library, the tool allows for quick selection of fonts for headings and body text, with several default styles to adjust weight and size settings as needed.
- UI Elements (coming soon): A feature that will offer customization of color and typography usage for key components of the design system, such as buttons, cards, and text fields.
- Application on Mockups: The AI integration allows you to apply styles to your previously created mockups in Relume. You can also test both Dark and Light modes to evaluate what works best for your project.
- AI Generation: Lacking inspiration? Relume enables automatic generation of a style guide with just one click, facilitating quicker iteration and testing.
→ Try the Style Guide Generation Tool
Why this Style Guide Generator is a Game-Changer?
Until now, Relume was particularly valued by a large community of designers and developers for its Webflow and React component library. These reusable components addressed primarily UX needs with basic HTML structures and pre-configured animations. However, they fell short when it came to UI aspects, especially the elements of the style guide.
The Style Guide Builder now fills this gap! It provides a more comprehensive workflow, covering the following aspects:
- Creation of detailed sitemaps
- Generation of UX wireframes for each page
- Integration of a first draft of copywriting using AI
- Quick design and application of a style guide on mockups
All of this is easily exportable to Figma, Webflow, and soon to React, making it a comprehensive solution for both designers and developers.
A TOOL for Designers, Not a Designer
As you can see, Relume is becoming a more complete tool than ever for designers, supporting the initial phases of design and iteration in website creation.
However, the style guide generation tool remains a tool created for designers and serving designers. It will enable your teams to iterate more quickly, with greater precision, and facilitate the visual projection of the project.
In other words, it provides a solid foundation upon which you can rely to test and refine your choices, which is essential given the subjectivity of the UI stage in a project.
However, Relume does not replace the design and creativity of a designer. If the goal is to avoid a “template” look and give a true identity to the site, it is still crucial to push further the execution of the mockups.
To delve deeper into this topic, you might find this video interesting: Figma to Webflow: How to Prepare Your Design System
