Pocket Piggy Bank
Pocket Piggy Bank
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.
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
Pocket Piggy Bank
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.
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.
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
Style Guide
Colors
Typography
Logo
Imagery
Writing & Content
Component Library