Image of a design system

Roles

  • Research
  • Design

Tools

  • Papers
  • Figma

Overview

The key use of this design system is to foster my progress when working on personal projects for my social media pages. The key is using the same style and component taxonomy for my projects.
Below are some of the key pillars of the system, which I get still update from time to time.

Atomic Design Elements

Typography styles, color palettes, icons and visual styles form the basis of my atomic elements.
I defined the styles, font sizes and components, for my own personal projects. This format was guided by Human Interface Guidelines and Material Design.

Image of typography
Image of color codes
Image of icons
Image of design buttons

Organisms

An organism is a combination of molecules to form various UI designs. Here I took the privilege of showing you how some of the atoms and molecules can be used to create an organism.

Image of design organisms
Branding pictures of colors, typography, logos and icons

Branding

I was responsible for developing the app’s brand identity. This involved creating a visual representation of the app that reflected its mission, values, and target audience.

Based on my research findings, I developed a brand identity that included a logo, color scheme, typography, and other visual elements. The visual elements of the brand identity were carefully chosen to convey the app’s key values, such as affordability, convenience, and accessibility.

Throughout the design process, I collaborated with stakeholders to ensure that the brand identity aligned with the app’s overall mission and vision. I also worked closely with developers to ensure that the branding elements were technically feasible and could be implemented effectively in the app.