top of page

Finansia's Design System

Role

Specialist UI Designer

Duration

6 months

Catagory

Design System

Design Tokens

Project Overview

A design system is a collection of reusable components, guided by clear standards, that can be assembled to create a responsive website design. The need for design systems aligns with the demands for scalability, efficiency, and consistency in design. In this project, you will see some of the components built for this design system from scratch, including design tokens and documentation.

Objectives

To establish standards and consistency in design, we consolidate reusable components and clear guidelines.

This enables design and related teams to work together efficiently, reducing redundancy and speeding up the design process.

Acceptance Criteria
The Challenge

Since there was no design system previously, I started from scratch. The problems we identified were:

  • Lack of consistency

  • Outdated styles

  • Colors not following WCAG standards

  • Absence of a style guide

Given these issues, I developed a design system to establish a standard design process and provide a general design framework for other products produced by our team.

  1. Accessibility: Improves the user experience by following WCAG standards.
  2. Heuristic: Assesses design elements based on established usability principles.
  3. Design System Utilization: Every designer on the team can use the design system to streamline their work.
Process

Style Guide

Foundational Elements

Design Tokens

Component Library

Summary

01

Style Guide

Initially, our company lacked a clear style guide for website design, resulting in a wide variety of design styles and outdated. This was the first thing we started on the project.

Target User

Our website and application are currently being used by individuals belonging to the Generation X1965-1980) age group.

Gen X used technology but not as much as Millennials. 72% use internet for business research. consider the following:

  1. Simple and Straightforward Design

  2. Recognizable Design Patterns

  3. Accessibility Features

  4. Personalization Options

Our User
Outcome

We have created a new style guide to enhance the user experience by simplifying, making it more familiar, and increasing accessibility.

02

Foundational Elements

These establish the visual language, including the of elements and the overall voice and tone of the product, such as color and typography. They also typically include icons, logos, illustrations, as well as your accessibility and brand guidelines.

Pain Point

Designs that do not meet accessibility (WCAG) standards can be challenging for users to navigate, particularly due to inconsistent font sizes and color patterns that are not easily visible to adults. This necessitates a redesign, which must be approved by management.

Solution

Revise all of foundational elements to meet accessibility standards by following WCAG guidelines.

Outcome
Typography
typo.png

The font used by the company is the biggest issue.

Our font family has a significant issue: the 'DB Heavent' font does not conform to standard height metrics. This discrepancy necessitates modifications to align the font with standard values such as X-Height, Ascent, Descent, Line Gap, and EM square. As a result, I had to adjust 'DB Heavent' to 'DB Heavent FSS' using

Font Squirrel.

Color Palette
color.png

Using Figma Plugins :)

  • Foundation Color Generator : Create color palettes based on great design systems like Ant Design.

  • Color contrast : check contrast according to WCAG guidelines.

03

Design Tokens

Design tokens are the atomic elements of a design system - the smallest units that store visual design information. They can include colors, spacing, typography, or any other core elements that constitute the building blocks of a product's UI.

Token Naming

The naming convention that we use for our is kebab-case. We replace spaces with a hyphen "-" between each word and all of them lowercase. This convention is commonly used for CSS and HTML5.

 

After validating the naming tokens modal with our team, we have decided to use the

C-T-I approach.

Outcome
Light / Dark Theme
Frame 1321317098 1.png

Using Figma Variables, our team can easily switch between light and dark themes and reduce the time it takes to deliver designs to the development team.

Responsive
Screenshot 2567-09-02 at 00.59.50.png

To change the font size from desktop to mobile size, simply click on the icon in the variable and adjust the font size accordingly. This feature is incredibly helpful for our team and we hope it makes your website creation process easier as.

04

Component Library

These are reusable visual elements and interaction patterns, such as templates, layouts, code snippets, and components, that define your product's interface and behaviors, all supported by detailed documentation.

cover.png
content.png

05

Summary

Our design system and library provide pre-defined components and guidelines that speed up workflows and streamline the design-to-development handoff, resulting in increased efficiency. Additionally, it minimizes design and development costs, cuts down on revisions, and leads to a 70% increase in design consistency within the team.

Screenshot 2567-09-02 at 01.14.58.png
Keep up the good work!

Sharing knowledge with our team is a great way to improve collaboration and productivity.

Screenshot 2567-09-02 at 01.19.22.png
bottom of page