Recite Me Design System

Intro

As the Recite Me product offerings expand, we needed a way to keep a consistent design and experience across all of the products. We decided the best option for this would be to create a design system. The following are some of the key examples of the design system. 


The Design System was originally created with Adobe XD and is currently being converted into Figma.

Foundations

To start the design system we looked at the foundations these included, the spacing system, colour, and typography.


For our design system, we incorporated an 8px spacing system, this helped limit the amount of options in the spacing when compared to a 4px spacing system.

Recite Me Design System

Intro

As the Recite Me product offerings expand, we needed a way to keep a consistent design and experience across all of the products. We decided the best option for this would be to create a design system. The following are some of the key examples of the design system. 


The Design System was originally created with Adobe XD and is currently being converted into Figma.

Foundations

To start the design system we looked at the foundations these included, the spacing system, colour, and typography.


For our design system, we incorporated an 8px spacing system, this helped limit the amount of options in the spacing when compared to a 4px spacing system.

Recite Me Design System

Intro

As the Recite Me product offerings expand, we needed a way to keep a consistent design and experience across all of the products. We decided the best option for this would be to create a design system. The following are some of the key examples of the design system. 


The Design System was originally created with Adobe XD and is currently being converted into Figma.

Foundations

To start the design system we looked at the foundations these included, the spacing system, colour, and typography.


For our design system, we incorporated an 8px spacing system, this helped limit the amount of options in the spacing when compared to a 4px spacing system.

8px Spacing System
8px Spacing System
8px Spacing System
Typography System
Colour System

Components

Components

Components

Components are the elements that the user interacts with as part of the product. Using the foundations set out above we are able to create a consistent feeling across all of the components of the products.

Buttons
Cards
Menu

Accessibility

Accessibility

Accessibility

When creating the Recite Me Design System, we had accessibility at the center of every decision. We carefully followed WCAG to insure that our system followed important compliences such as colour contrast and keyboard navigation. 


Below is an example of the steps we took for accessibility in the design system. Keyboard focus allows users who are unable to use their mouse as an imput, use a keyboard instead. For this I was taksed in designing a way for our products to indicate to the keyboard user which elements on the screen where in focus.

Accessibility Keyboard Focus

Globalisation

Recite Me is an international company with users around the world. Because of this its important that our products are able to be adapted to suit the needs of users around the world.


One key example of this is the need to adapt designs for Right to Left (RTL) languages such as Arabic. Below is an example from the Design System showing products in RTL language.

RTL System