Web style guide
Generali Global Assistance
Goal: Transform the new graphic design style guide into a comprehensive web style guide and develop a new set of reusable components for a consistent and efficient design system.
Result: The Figma project titled “Branding” has been created, encompassing a comprehensive design toolkit. This kit includes a Web Style Guide, a wireframe components library, and a reusable web component set, ensuring consistency and efficiency across all design projects.
Idea
To ensure consistency in UI design, a brand must have a well-documented style guide. In Generali’s case, the existing style guide was provided in PDF format and primarily focused on graphic design. However, there was a growing need for a digital version tailored to web requirements, allowing web designers and media designers to reference a unified set of guidelines for a cohesive digital experience.
Furthermore, there was a pressing need to establish a comprehensive library of web elements to ensure design consistency and streamline the workflow for all UI designers. To achieve this, creating a component library document became essential, providing a structured reference for reusable design elements across digital products.
Additionally, two more supporting documents were essential to this project. The first was a research and design decision documentation, capturing the rationale behind key choices. The second was a wireframe elements library, designed to streamline visual logic creation and iteration.
To accommodate different types of design projects, these documents were structured as separate Figma files. For example, graphic designers could leverage the Style Guide document, benefiting from predefined design rules, without needing to interact with the web components library. Meanwhile, UX designers working on new web service functionality could rely solely on the Wireframes document, allowing them to focus on layout and logic without getting distracted by styling details.
This approach ensured that each design discipline had access to the most relevant resources, optimizing efficiency and collaboration.
Style guide
Color palette
The Style Guide file is designed to be the single source of truth for all aspects of Generali Global Assistance's design work. It provides designers with automated presets for the color palette and typography, ensuring consistency across projects. Additionally, it includes a reference library featuring different versions of the company logo, commonly used icons, and reusable graphics, making it a comprehensive resource for maintaining brand cohesion.
The color palette is traditionally built around the brand’s primary colors. However, to serve as a practical and comprehensive guide, all colors in use should be documented and automatically pre-set for designers. This includes defining neutral colors, such as the specific shades of gray, tints, and shadows used in Generali’s brand identity. Additionally, the Style Guide provides a selection of commonly used gradients and complementary colors, ensuring consistency in illustrations and data visualizations.
Typography
The Typography section of the Style Guide serves as a comprehensive reference for designers, featuring all predefined typography presets to streamline their workflow. Additionally, it offers guidance on optimal color combinations, including recommended background and foreground pairings for accessibility and readability.
This section is designed to provide visual direction to UI designers, particularly in adapting typography sizes for responsive design. By leveraging data on the most common screen sizes and aspect ratios of popular devices, we can refine our design recommendations to create an optimal user experience tailored to Generali users.