Beefree is a quick, collaborative, friendly design suite to create emails and landing pages to be used anywhere.

Project Start



Pattern Library



Tech stack

React, Figma

What’s the current status?

We started documenting the inventory of used components in our product as a base for our Pattern library structure. Then we started designing our foundation elements such as colours, typography, iconography and so on. From that point, we moved to design all the components, to create a consistent user interface.
Today we are building our design system, starting from a shared platform such as  Storybook to move next to UI development, testing, and documentation.

What we have done


Creation of a Pattern Inventory.


First iteration of the Pattern Library.


Delivery to the developers for the Design System.


Creation of a documentation  and maintenance of the Design System.

Pattern library in Figma

To create our pattern library, we started from the foundations (colors, typography, spacing, etc..) than we realized the single components (buttons, cards, checkboxes, etc..) and finally we created the complex patterns.

Defining the Style Guideline

Before designing and defining all components of the Pattern Library, we put down the Style Guideline in order to have a cohesive visual identity. This was the part where we layed down the foundations and decided what was needed while we were defining the overall aspect of the product.

Documention (work in progress)

Next step we will create a design system documentation as a point of contact for our stakeholders. The main goal is helping teams to learn how and when to share the UI components.

Other Design Systems

Agile Telecom

Read more

Beefree SDK

Read more

Growens Website

Read more