Prospa: Member Points
Prospa: Accounts (Home)
Malva: Web3 Case Study
Salad: Design System
Crocs: Creative Direction
🔒 Prospa: Product Design
🔒 Fortuna: SaaS Platform
Case Study
Salad Design Academy
Role
Product Designer
Platform
Figma. Illustrator.
I created the design system for Salad Studio to set clear guidelines and standards to be assembled when building their web application. As a new company, it gave the opportunity to lay the foundational system needed to account for every potential UI element. This included colour systems, components, grid systems, spacing scale, typography scales, button behaviours, supporting graphics and interactive language. The Design System can be easily understood by any designer or developer that needs to execute.
01
Colour
02
Typography
03
Buttons
04
Component Library
05
Results & Documentation
01
Colour Palette
Colour plays a crucial role in any design system, and consistency in colour usage maintains a uniform design language. To achieve this, I created both light and dark variations for all buttons, inputs and interactions, allowing for greater flexibility in element placement on pages with different background colours. This approach not only maintained a consistent brand look and feel, but also ensured optimal contrast and improves the user experience.
The colour palette features Red ('Salad Red' - #FF3300) as the primary colour. In brand identity, symbolising passion and power, for a studio with the objective of being a powerhouse for people passionate about honing their digital skills. The secondary colours support the primary by communicating information hierarchy, interactive states and distinction between elements.
02
Typography
I started of the by pairing up 3 different fonts - Thonburi, Roboto and Inter. While these may one too many, each font type is used for a different purpose such as headings, body text, and captions.

Thonburi complements the logo font while communicating the brand's personality - loud but professional. Roboto and Inter have a visual harmony with the header font and holistically complement each other, creating a cohesive and consistent look and feel. It goes without saying that the different font sizes represent hierarchy and generally the font pairings prioritise legibility, harmony and consistency.
03
Buttons
Buttons have several different states, the most common being default, active, hover, disabled and occasionally a loading state. There are also 3 different button types - Primary, Secondary and Tertiary. You can see the different states below.
FONT + BUTTON PAIRING
04
Component Library
In a design system, each brand maintains a meticulous component library, featuring a comprehensive collection of reusable interface elements that are aligned with their foundations file. The library encompasses a variety of component types, including global, structural, content, data, and utility, which are seamlessly integrated throughout the design. By carefully defining the differences between these component classes, we can make informed and accurate design decisions that are tailored to the specific context of each page. This approach ensures that the design system is highly cohesive and consistent.

The form fields also accommodate several different states and prioritise accessibility by making sure that they title of the fields do not go away when selected and having indicators than just colour for errors. There are also components like dropdowns, radios, checkboxes, toggles, and others that are essential to have.
FORM FIELDS + LIGHT
FORM FIELDS + DARK
OTHER COMPONENTS + DARK
Here are cards created using the components defined in the design system that will be used throughout the interface.
CARDS
THE RESULTS
What's next?
It is expected that updates will be made to the design system as the brand grows, this lays out version 1.0 while the company builds its MVP. Documentation has been created to inform future designers on how to use it as well as brand guidelines. Accessibility requirements have also been defined.
FIGMA FILE