Design System Foundations

Post a job once, and FactoryFix distributes it across job boards, collects applicants in one place, and lets recruiters text candidates directly through its built-in messenger.

Design System Foundations

Post a job once, and FactoryFix distributes it across job boards, collects applicants in one place, and lets recruiters text candidates directly through its built-in messenger.

Problem

As a team we kept designing and redesigning common elements like buttons, colours and even fonts.

This left us with inconsistent visuals across the platform, creating visual friction with users and redundant design/engineering work.

Role

  • Built the design system with input from the team from the ground up.

  • Booked and ran review sessions to review new element with team.

  • Keeping accessibility standards by measure contrast against our stand dark and light background colours.

Tints

Used in common elements like backgrounds, borders, buttons, text and icons.

Tints

Used in common elements like backgrounds, borders, buttons, text and icons.

Shades

Used in common elements like backgrounds, borders, buttons, text and icons.

Shades

Used in common elements like backgrounds, borders, buttons, text and icons.

Brand & success colour

Success indicator. Also used for our Brand colours since FactoryFix's brand colour is green.

Brand & success colour

Success indicator. Also used for our Brand colours since FactoryFix's brand colour is green.

Warning

Warn the user or indicate an in-progress state.

Warning

Warn the user or indicate an in-progress state.

Danger

Errors, failures and dangerous actions.

Danger

Errors, failures and dangerous actions.

Emphasis

We're moving away from green as our emphasis colour, purple will now be used as a high emphasis colour to focus the user on the main task at hand.

Emphasis

We're moving away from green as our emphasis colour, purple will now be used as a high emphasis colour to focus the user on the main task at hand.

Inform

Use in tutorials, onboarding and other temporary elements that teach the user about the product.

Inform

Use in tutorials, onboarding and other temporary elements that teach the user about the product.

Museo - Display Font

Display fonts are used uncommonly as headers for marketing and onboarding related information. It is used in larger sizes to excite the user.

FactoryFix

Display Large

Font size:

64px

;

Line height:

72px

;

Font weight:

700

;

FactoryFix

Display Medium

Font size:

56px

;

Line height:

64px

;

Font weight:

700

;

FactoryFix

Display Small

Font size:

40px

;

Line height:

48px

;

Font weight:

700

;

Inter - Headings, Text & Labels

This is the standard font family for almost all text that is not considered "Display."

FactoryFix

Heading Extra Large

Font size:

48px

;

Line height:

72px

;

Font weight:

600

;

FactoryFix

Heading Large

Font size:

40px

;

Line height:

60px

;

Font weight:

600

;

FactoryFix

Heading Medium

Font size:

32px

;

Line height:

48px

;

Font weight:

700

;

FactoryFix

Heading Small

Font size:

24px

;

Line height:

36px

;

Font weight:

700

;

FactoryFix

Heading Extra Small

Font size:

18px

;

Line height:

27px

;

Font weight:

700

;

FactoryFix

Text Bold

Font size:

16px

;

Line height:

24px

;

Font weight:

700

;

FactoryFix

Text

Font size:

16px

;

Line height:

24px

;

Font weight:

500

;

FactoryFix

Text Small Bold

Font size:

14px

;

Line height:

21px

;

Font weight:

700

;

FactoryFix

Text Small

Font size:

14px

;

Line height:

21px

;

Font weight:

500

;

FactoryFix

Text Extra Small Bold

Font size:

12px

;

Line height:

18px

;

Font weight:

700

;

FactoryFix

Text Extra Small

Font size:

12px

;

Line height:

18px

;

Font weight:

500

;

FactoryFix

Label Bold

Font size:

16px

;

Line height:

24px

;

Font weight:

700

;

FactoryFix

Label

Font size:

16px

;

Line height:

24px

;

Font weight:

500

;

FactoryFix

Label Small Bold

Font size:

12px

;

Line height:

18px

;

Font weight:

700

;

FactoryFix

Label Small

Font size:

12px

;

Line height:

18px

;

Font weight:

500

;

Inform

Use in tutorials, onboarding and other temporary elements that teach the user about the product.

Buttons

Keeping it I simple I started with a button to help us understand how well our colour palette and fonts adapt in a real component.

Quick and wide adoption

Longlasting design system foundations still being as of 2026, created summer 2023.

< Back home