Component library creation

The project


The Press Loft website was started over a decade ago, and has been expanded over the years by different designers and developers. Although there had been some components designed many years ago, they had only been partially implemented across the site, meaning that the site was not consistent and sometimes appeared very outdated. Brand consistency is really important to create trust with users, so it was important to find a solution to this problem.

We needed to find a solution where we could consistently apply components during the design and build stages. This would mean we would be able to maintain consistency across the site, as well as speed up the design and build processes, which is essential for a small team.


  • Create a base component library in Figma that we can easily maintain and expand on.
  • Design a page which can be used internally by the dev team to quickly find and copy components and styles.
  • All colours, styles and components should be named consistently.
  • Components must be created with suitable variants. These include colour variants, as well as state variables such as hover, disabled, etc.
  • The development team will build the new component library in Tailwind.
  • The whole site will be gradually moved over to Tailwind and its new components over approx. 12 months.


Components created

Colour palette


Tertiary actions

Option toggles

Select buttons


Card actions

Radio buttons and checkboxes


Search fields



Date pickers

Alerts and information

Loading bars and spinners



Editor component examples

Country flags

Future components

  • This component library is a starting point and will grow and expand over time.
  • These components will be used in all designs going forward. If a design is created where there is no suitable component already in the library, a new component can be added to the Figma component library. A Jira ticket will then need to be created, so that the dev team can implement the new component and it can be used in further projects.
Using Format