Pocket Piggy Bank

Pocket Piggy Bank

Pocket Piggy Bank

Design System

Design System

Design System

A collection of reusable UI elements, patterns, style guidelines and more, which serve as a set of standards for designing my project, Pocket Piggy Bank. 

A collection of reusable UI elements, patterns, style guidelines and more, which serve as a set of standards for designing my project, Pocket Piggy Bank. 

A collection of reusable UI elements, patterns, style guidelines and more, which serve as a set of standards for designing my project, Pocket Piggy Bank. 


Style Guide

Colors

Primary, secondary and accent colors

Typography

Font, weight and usage

Logo

Correct usage and placement

Imagery

How and where to use images

Writing & Content

Communication style and approach

In the design of the Pocket Piggy Bank app, the strategic use of color plays a crucial role in enhancing user experience and conveying the brand's values. Warm and inviting tones like friendly purples and refreshing greens are intentionally chosen to evoke feelings of prosperity, growth, and financial well-being.

The color scheme creates an environment that is not only visually pleasing but also conveys a positive association with money and savings. This thoughtful use of color enhances the overall user experience, aligning with the app's core values of being Trustworthy, Accessible, and Stress-Free, and encouraging users to embark on their savings journey with confidence and enthusiasm. 

Component Library

Buttons

Primary, secondary and icon buttons

Icons

Visual communicators for simple actions

Cards

Interactive containers

Chips

Visual selectors

Carousels

Multiple pieces of content in one container

Progress Bars

Snapshot of a user's progress

Lists

Content displayed in list form

Calendars

Date-pickers

Input

Allows users to input information

Bottom Navigation

Navigation bars on each screen

Menu

Overflow navigation items

Colors

Primary, secondary and accent colors

Typography

Font, weight and usage

Logo

Correct usage and placement

Imagery

How and where to use images

Writing & Content

Communication style and approach

In the design of the Pocket Piggy Bank app, the strategic use of color plays a crucial role in enhancing user experience and conveying the brand's values. Warm and inviting tones like friendly purples and refreshing greens are intentionally chosen to evoke feelings of prosperity, growth, and financial well-being.

The color scheme creates an environment that is not only visually pleasing but also conveys a positive association with money and savings. This thoughtful use of color enhances the overall user experience, aligning with the app's core values of being Trustworthy, Accessible, and Stress-Free, and encouraging users to embark on their savings journey with confidence and enthusiasm. 

Colors

Primary, secondary and accent colors

Typography

Font, weight and usage

Logo

Correct usage and placement

Imagery

How and where to use images

Writing & Content

Communication style and approach

In the design of the Pocket Piggy Bank app, the strategic use of color plays a crucial role in enhancing user experience and conveying the brand's values. Warm and inviting tones like friendly purples and refreshing greens are intentionally chosen to evoke feelings of prosperity, growth, and financial well-being.

The color scheme creates an environment that is not only visually pleasing but also conveys a positive association with money and savings. This thoughtful use of color enhances the overall user experience, aligning with the app's core values of being Trustworthy, Accessible, and Stress-Free, and encouraging users to embark on their savings journey with confidence and enthusiasm. 


Style Guide

Component Library

Buttons

Primary, secondary and icon buttons

Icons

Visual communicators for simple actions

Cards

Interactive containers

Chips

Visual selectors

Carousels

Multiple pieces of content in one container

Progress Bars

Snapshot of a user's progress

Lists

Content displayed in list form

Calendars

Date-pickers

Input

Allows users to input information

Bottom Navigation

Navigation bars on each screen

Menu

Overflow navigation items

Buttons

Primary, secondary and icon buttons

Icons

Visual communicators for simple actions

Cards

Interactive containers

Chips

Visual selectors

Carousels

Multiple pieces of content in one container

Progress Bars

Snapshot of a user's progress

Lists

Content displayed in list form

Calendars

Date-pickers

Input

Allows users to input information

Bottom Navigation

Navigation bars on each screen

Menu

Overflow navigation items

Style Guide

Colors

Typography

Logo

Imagery

Writing & Content

Component Library

Buttons

Icons

Cards

Chips

Carousels

Progress Bars

Lists

Calendars

Input

Bottom Navigation

Menu