System Architecture

Ultraviolet Design System Architecture, a project about crafting a scalable and cohesive system architecture.

Role:

Lead Designer

Team:

Matthias Prost, Mathieu HERVOUËT

Project Overview

Led the design and implementation of the Ultraviolet Design System, developing a comprehensive architecture that supports the entire system. The goal was to define and build a scalable framework that forms the core structure of the system. By meticulously crafting these parts, I ensured Ultraviolet provides a consistent, scalable, and cohesive structure that will be used by all system users. This effort not only streamlined collaboration between design and development teams but also laid the groundwork for the system’s future growth and adaptability.

Ultraviolet Parts

Ultraviolet provides a set of reusable components, design tokens, patterns and templates for teams to efficiently build high-quality and accessible user interfaces.

Design Tokens

Design tokens are distributed through product libraries and packages. They have a consistent structure and it is followed by all our packages. Moreover, when it's needed their values change depending the needs of the product.

Foundations

Foundations were split into two main libraries. Foundations are distributed differently depending on the needs and the usage.

Components & Framework

Components are the building blocks of our system, forming a library of reusable elements that enable scalable, responsive online experiences at Scaleway. Organized using atomic logic, the component libraries are structured into four levels, ranging from the least specific to the most specific, depending on the use case and complexity. This library is always evolving, ensuring a comprehensive selection of components.

Patterns

Patterns are a collection of reusable design decisions that help to solve common use cases. They are best practices for designing experiences using our components and layouts.

Templates

Templates exist to document the layout and user interface patterns and work as examples on how to combine them in the different parts of Ultraviolet system and assist system users to build complete product views.

© 2024 Pantelis Petmezas

© 2024 Pantelis Petmezas

© 2024 Pantelis Petmezas

© 2024 Pantelis Petmezas