Next Design System

ENSURING CUSTOMERS A SEAMLESS DIGITAL EXPERIENCE

The development of NEXT, the Design System tailor-made for CRIF, marks a new phase in the evolution of digital products and the company's identity. The request arises from the need to standardize the ecosystem of solutions through guidelines aimed at promoting greater formal and stylistic consistency throughout the full user experience.


NEXT is the result of a dedicated and collaborative effort by our Design Team.


After months of interviews, proposals, and testing, we've worked closely with developers to refine every detail, ensuring a seamless and effective user experience.
NEXT is a design tool composed of modular elements that easily adapt to changes and product evolutions. It streamlines the process of creating a product or service, ensuring greater efficiency in development time and costs.

What is a Design System?

A Design System is a connected collection of patterns and best practices coherently organized for a digital product. Its purpose is to systematize design, generating efficiency and scalability in interface design, and ensuring quality and consistency within their environment.

The primary goal was to create a Design System capable of standardizing all CRIF products with a single visual identity, to integrate user experiences and journeys across all the services provided.

NEXT has been designed keeping in consideration the Guidelines for Accessibility WCAG 2.1, and it is compliant with the “AA” certification on all its elements. That is to ensure readability throughout platforms and to provide an accessible navigation to all, despite visual impairments.

During the ideation phase we used various plug-ins to guarantee that all elements of NEXT are checked with regards to text sizes, contrast and colour blindness; icons are extensively used to ease the understanding and improve the quick and direct readability of the web pages.

  • WHITE LABEL

    The objective of NEXT Design System is to align the visual identity of CRIF’s Digital and Global Solutions, providing a consistent experience for our digital products. The basic White Label version reflects CRIF’s brand identity and guidelines, bringing together CRIF’s offer through a common visual style.

  • ADJUSTMENTS

    NEXT provides a solid foundation used to meet the needs of customers who want to brand the solution with their visual identity. NEXT rules and guidelines should be followed to avoid any disharmony with CRIF's product identity.

  • CUSTOMIZATION

    NEXT follows an atomic design structure; its elements are easily customizable, in case of tailor UX and UI modifications based on customer needs. The Design Team can support the project from the kick-off stage onwards to co-design the solution with the customer, prioritizing their requirements.

  • CROSS PLATFORM

    NEXT shapes the experience across all platforms, ensuring consistency and responsiveness on mobile, desktop, and tablet. It adapts seamlessly to different devices, providing users with a cohesive and intuitive experience.

  • GUIDELINES

    NEXT supports developers by streamlining the implementation of design changes across CRIF's digital products. It provides clear guidelines and resources, making it easier to apply consistent design elements to existing platforms while ensuring efficiency and maintaining the brand's identity.

ABOUT NEXT DESIGN SYSTEM

The definition of the system’s tone of voice pinpoints CRIF’s visual identity as a starting point to create a new style that could reflect the company's identity. NEXT follows the Atomic Design approach: components are organized into atoms, molecules, and organisms, based on the complexity of the function.

The templates and guidelines are shared with project managers and developers, and a CSS library has been created to allow developers to update or create solutions according to CRIF’s Design System.

NEXT can be navigated by following the dedicated link. The index on the homepage leads to style guidelines, main template elements, examples, and components. Each section has a detailed description and several related images to illustrate each topic thoroughly.

The Design System is designed to facilitate usability and comprehension. Interfaces created following the rules and respecting the constraints of the Design System will have a high level of accessibility in terms of both UX and UI.


We aim to ensure that the user can experience as few frictions as possible, providing a clear understanding of the current state and anticipating what is about to happen. Achieving visual consistency across all websites ensures a fresh and modern look.

Color is an essential element in our brand and provides a strong visual link to our brand identity across a wide range of applications. Consistent use of our colors will encourage a stronger recall of our brand identity.


Consistent use of typography helps to make our brand identity strong and cohesive across all applications. The general rule is to use our primary typeface whenever and wherever possible.


Imagery helps support and convey our brand message by capturing the essence of our core businesses. Images that portray modern business settings, people engaged in business activities, various business situations, customer challenges and experiences speak volumes and are a key component to creating a successful brand communication. Imagery should tell a story, it should be warm, authentic, yet modern and cutting edge.


Icons are a great way to highlight key messages and content. The icons should never substitute the main logo, but they can still be used across the entire brand. Incorporating icons into layouts is a great way to break up large portions of text and images. They also make content more visually appealing and easily digestible.

Our content strategy is focused on clarity, inclusivity, and user engagement. Actionable language ensures that users can easily understand and follow instructions, leading to more efficient interactions and task completion.


Error messages are crafted to be clear and informative, helping users quickly identify and correct issues. We opt for plain language that guides users towards resolution, minimizing frustration.
Inclusive language is a cornerstone of our communication. We strive to use terms that are respectful and considerate of all individuals, avoiding any biased or discriminatory language. This practice not only reflects our values but also enhances the user experience by making everyone feel valued and respected.


Our voice and tone are tailored to be consistent and recognizable, yet adaptable to different contexts. A consistent voice and tone maintain a friendly, professional, and approachable brand presence across all communications. This helps in building a strong connection with our audience, fostering trust and loyalty.


By adhering to these principles, we ensure that our content is not only effective and engaging but also aligned with our brand values and goals.

NEXT DESIGN SYSTEM BOOTSTRAP-5 LIBRARY

Next-design-system-bootstrap5 library provides a basic CSS implementation of NEXT based on the Bootstrap@5.3 CSS framework.

This library is intended as a starting point for frontend developers that need to update or create a web application according to Next Guidelines.

GET IN TOUCH WITH THE SALES TEAM

What does the next digital journey of your business look like? Let's find out together.