Collections

We structured the entire site in Figma into four collections, each containing related pages and features. This approach allowed us to maintain a clear hierarchy, streamline design iterations, and make it easy for the team to navigate and collaborate efficiently.

Index of White Label Library

Master Components

Core Components

Come from backend, so they do not allow configuration from SmartEdit.

Contributable Components

Components that can be customised and used via SmartEdit or Backoffice.

Break Points

Tokens

For the icon library, we used Font Awesome across all in-house brands to ensure consistency and scalability throughout the design system.

We established a comprehensive system of design tokens—covering colors, typography, spacing, and components—to ensure consistency across all in-house brands. Combined with the icon library using Font Awesome, this approach streamlined collaboration and made the design system scalable and easy to maintain.

Foundations

Typography

Colour

Spacing

Grids

Icons

Image Aspect Ratio

Accessibility + COLOUR PALETTE

Atoms

Product thumbnail

Homepage(WL)

Through different platform

Homepage

(In-house brands)