Matter design system

An adaptable system of guidelines and components that support the best practices of user interface design.

design system illustration

Atomic design system

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems. Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.

atmoic design example

Multi brand design system

This is the structure to follow for a design system that caters for one identical Experience for multiple brands

Template design System
This will include a wireframe like design system, it will include all atoms, molecules, organisms, templates and pages

Brand design system
The design system is implemented on a project, but the specific style is implemented, which would cater the each unique brand

design system chart

Universal design

Components are designed with multiple variants to make sure they can fit any project and any state by easily toggling the component properties.

text field variation

Fully scalable and adaptable components

All components are built using auto layouts, to make sure they adapt to all screen sizes

responsive component example

Well documented

Matter is an adaptable system of guidelines and components. The design system is well documented on Figma to help designers best use the components and make sure they are following best practices

documentation example

From wireframes to UI in half the time

The design system was built to build wireframes, with most components being interactive by design it makes the wireframing and rapid prototyping a breeze. Once the wireframes are done, it’s a matter of changing the style guide and adjusting the components and you have a fully done UI in half the time.

device template tablehost
tablehost ui
template alj
alj ui

Interesting case studies

Case Study
Learn more
chevron icon
The floor plan on tablet and event on mobile app

TableHost

A platform that that facilitates and enhances all aspects of planning and booking for a night out with friends.

Case study
Discover
chevron icon

CCI

A b2b Marketplace that allows it's network of clients to make their recurrent purchases from CCI and other vendors online through, digitizing the experience.

Case study
Discover
chevron icon

PMI-IQOS

An E-comerce website for users to purchase IQOS devices and accessories.

Case study
Discover
chevron icon

Goody Kitchen AR experience

A website that celebrates the love of food, with a decade of inspiring the community with delicious food solutions