Design System
Personal Project
This is a complete design system for mobile devices made in the neumorphic style with light and dark modes. Build in a atomic model with components built in a nested way. This also includes style definitions with variables for colours, icons, styles.
Background
This design system was built as an exercise to build a complete design system with a neumorphic styling. At this point, there's no general established design system in this category. This also served as a practice to build an end-to-end design system on my own, as well as testing the capabilities of Figma for building such a system using variables for colour. This was completely built in Figma.
Methodology
This design system usesAtomic design to build components, sections and page templates.Variables in figma for light and dark modes.
Design System Elements
This design system consists of
Component library
Library consisting of components, sections and templates and pages built on an atomic design model
Style Guide
Consisting of colour palette with variables, typography, grids, basic icon pack and shadows
Design System Nomenclature
Design System Summary
Summary of the number of components and styles done as part of the design system on Figma
Style Guide
Some of the highlights of the style guide and their definitions and variations.
Typography
Sans-serif typefaces, Poppins is the main typeface and Archivo is the other typeface used in this design system.
Colour Palette
Elevation and Depression
Different levels of elevation and depression show hierarchy and state of the components in the applications
Light and Shadow
Based on the elevation and depression level of the component, different effects when viewed from top in a UI
Illumination
As the name of the design system suggests, this is focused on subtle illumination on dark screens to give the appearance of soft light spilling out through gaps.
Grids and Layouts
Columns and grids for screen layout and responsiveness in mobile systems.
Icons
Some of the icons that are used here in the design system. This is an expanding list and more will be added to this list. There is an illumination effect added to a few icons.
Component Library
Some of the component and their variants built into the design system
Sections
Sections are organisms built from the atomic and molecular components. Their use inside the pages and they are used to build templates by combining different organisms and component molecule and atoms. Few of the sections built up to this point in the design system are given below.
Templates
Templates are common pages which are built using sections and other components. They can be modified to use easily on existing or new projects. More templates are under progress.
