Skip to content
Gallery
bubblingo
Bubblingo
Introduction to Design System
Design-Checklist
Style Checklist
Share
Explore

icon picker
Design-Checklist


info
This is a checklist styled, expandable list document. ( click on
⁠
to expand ) Click
!
⁠
to expand to find detailed steps and videos inside the collapsed topics.

⁠
⁠
Optimise Application
Settings> General> App File Management > Optimize Application
Video Explaination
⁠
Click to view on full page view
⁠
⁠
⁠
⁠
⁠
Step-by-step Slideshow
⁠
⁠
⁠
⁠
Design Properties
⁠
Click to View Video on Properties on full page
⁠
⁠

⁠
⁠
⁠
1. Responsiveness : Responsiveness refers to how your app adapts to different screen sizes and devices. By adjusting based on breakpoints.
Responsiveness Example for a Text Element
Text Breakpoints and Sizes:
Extra Small (<320px): 20px
Small (320-576px): 24px
Medium (577-768px): 28px
Large (769-1200px): 36px
Extra Large (>1200px): 48px
Every design element, like this H1 text, needs to include breakpoints and adjust sizes accordingly to ensure responsiveness across different screen sizes
2. States : States in design elements typically refer to the different conditions or variations an element can have based on user interaction or system status. Here are common states that might apply.
Default: The standard appearance of an element.
Hover: The appearance when a user hovers over an element with a pointer.
Pressed: The appearance when an element is being clicked or tapped.
Disabled: The appearance when an element is not interactive or unavailable.
Focused: The appearance when an element is focused, usually through keyboard navigation.
Selected: The appearance when an element is selected, often used in forms or lists.
Invalid: The appearance when an element has invalid input.
Example for a Input element
State
Description
1
Default
Standard input appearance
2
Hover
border color changes to indicate interactivity
3
Active
input appears pressed or highlighted when clicked
4
Disabled
input is grayed out and cannot be interacted with
5
Focused
input has a visible outline to indicate keyboard focus
6
Selected
input remains highlighted to show it is selected
There are no rows in this table
⁠
Motion in design refers to the use of transitions and animations to enhance the user experience by providing visual feedback and improving the flow of interactions. Motion can make interfaces feel more dynamic and responsive, and help guide users' attention.
Common Motion Types
Transitions: Smooth changes from one state to another (e.g., fading in/out, sliding).
Animations: Movements or visual effects when elements appear, disappear, or change position (e.g., slide transitions, element entrances/exits).
Example Table for Input Element Motion
Motion Type
Description
Behavior
1
Transition
Smooth change from one state to another
Border smoothly changes color from gray to blue
2
Animation
Visual effect when an element appears or hides
Input field shakes to let know some attention
There are no rows in this table
⁠
Feedback in design refers to the information and visual cues provided to users to indicate the status of their actions or the state of an element. This includes error messages, success messages, help text, and visual changes that communicate validation results.
Types of Feedback -
Tooltips: Short messages that appear when a user hovers over or focuses on an element, providing additional context or instructions.
Help Text: Static or dynamic text that provides guidance or clarification for an element.
Error Messages: Text and visual cues that appear when an input or action is incorrect, explaining what went wrong and how to fix it.
Success Messages: Text and visual cues that confirm a successful action or input.
Validation Feedback: Visual changes to elements, such as border color changes, to indicate valid or invalid input.
Loading Indicators: Visual cues that indicate a process is ongoing, such as spinners or progress bars.
Example Table for Input Element Feedback
Feedback Type
Description
Behavior
1
Tooltip
Provides additional context or instructions
"Enter your email address" (appears on hover or focus)
2
Help Text
Provides guidance or clarification
"Your email will be used to send order updates" (static text)
3
Error Message
Indicates incorrect input
"Invalid email address" (appears on invalid input)
4
Success Message
Confirms successful action or input
"Email successfully saved" (appears on successful submission)
5
Validation Feedback
Visual changes to indicate valid/invalid input
Border changes to green for valid input, red for invalid input
There are no rows in this table
⁠
Spacing in design refers to the use of margins, paddings, and gaps to create a visually appealing and well-structured layout. Proper spacing helps to improve readability, focus attention, and create a balanced design.
Types of Spacing
Margins: The space outside the elements, defining the distance between the element and its surroundings.
Paddings: The space inside the elements, defining the distance between the element's content and its border.
Gaps: The space between elements, particularly in grid or flex layouts.
White/Negative Space: The empty or unused space around and between elements in a design. It helps create balance, improves readability, and focuses attention on the key elements by giving the design "room to breathe."
⁠
⁠
Set Your Breakpoints
Mobile Small - Extra Small ( < 320px)
Mobile - Small (≥320px and ≤576px)
Mobile Medium - Medium (>576px and ≤768px)
Tablet - Large (>768px and ≤992px)
Laptop - Extra Large (>992px and ≤1200px)
Desktop - Very Large (>1200px)
⁠
⁠
Set Spacings
Base unit - 4
Scale - 4, 8, 12, 16, 24, 32, 40...
Types of spacing :
Margin
Padding
Gap
Line Spacing
Setting Spacings -
Element
Spacing
Desktop
Mobile
1
Base Page Left/Right Margins
Padding
80px – 120px
16px – 24px
2
Container Padding (Left/Right)
Padding
16px – 24px
8px - 16px
3
Container Vertical Padding
Padding
24px – 32px
24px – 32px
4
Gap Between Inputs (Vertical)
Gap
16px – 24px
12px – 16px
5
Gap Between Input + Label
Gap
8px
8px
6
Input Padding (Left/Right)
Padding
12px – 16px
8px – 12px
7
Header Padding (Top/Bottom)
Padding
24px – 32px
16px – 24px
8
Header Padding (Left/Right)
Padding
40px – 60px
16px – 24px
9
Card Padding (Inside)
Padding
24px – 32px
16px – 24px
10
Gap Between Cards
Gap
16px – 24px
12px – 16px
11
Gap Between List Items
Margin
16px – 24px
12px – 16px
12
Footer Padding (Top/Bottom)
Padding
32px – 48px
24px – 32px
13
Text - Line Spacing
Line spacing
1-2
1-2
There are no rows in this table
⁠
⁠
⁠
List of States
Default (Normal): The standard state of the element.
Neutral: The lightest shade of the color.
Hovered: The element is being pointed at by the cursor.
Pressed (Active): The element is being clicked.
Focused: The element is selected for input.
Disabled (Inactive): The element cannot be interacted with.
Selected: The element is marked as chosen.
Invalid/Error: The element indicates an error.
Valid/Success: The element shows successful action.
⁠
⁠
Color Palette
Color System1-
Color Type
Name
Code
1
Primary
Default
#0E82FF
2
Primary
Neutral
#06478D
3
Primary
Hovered
#0E82FF
4
Primary
Clicked
#06478D
5
Text
Default
#F9F9F9
6
Secondary Text
Default
#C0C0C0
7
Background
Default
#2B2B2B
8
Destructive
Default
#FF6F61
9
Destructive
Neutral
#AF453A
10
Destructive
Hovered
#FF6F61
11
Destructive
Clicked
#882F27
12
Success
Default
#3EB489
13
Success
Neutral
#C5E9DC
14
Success
Hovered
#3EB489
15
Success
Clicked
#194837
16
Alert
Default
#FFA500
17
Alert
Neutral
#FFDFA3
18
Alert
Hovered
#FFA500
19
Alert
Clicked
#AD7000
20
Emphasis
Default
#8A2BE2
21
Emphasis
Neutral
#D9BAF6
22
Emphasis
Hovered
#8A2BE2
23
Emphasis
Clicked
#601D9E
There are no rows in this table
⁠
⁠
⁠
Typography
Set Fonts
Primary -
Secondary -
Tertiary -
Set Styles
Text Styles
Text
Device
Font Size
Line Height
Letter Spacing
Font Weight
1
Display 1
Extra Small (<320px)
28px
1.1
-2px
600
2
​
Small (320-576px)
36px
1.1
-2px
600
3
​
Medium (577-768px)
48px
1.1
-2px
600
4
​
Large (769-1200px)
60px
1.1
-2px
600
5
​
Extra Large (>1200px)
72px
1.1
-2px
600
6
Display 2
Extra Small (<320px)
24px
1.2
-1px
600
7
​
Small (320-576px)
32px
1.2
-1px
600
8
​
Medium (577-768px)
40px
1.2
-1px
600
9
​
Large (769-1200px)
48px
1.2
-1px
600
10
​
Extra Large (>1200px)
60px
1.2
-1px
600
11
H1
Extra Small (<320px)
20px
1.2
-1px
600
12
​
Small (320-576px)
24px
1.2
-1px
600
13
​
Medium (577-768px)
28px
1.2
-1px
600
14
​
Large (769-1200px)
36px
1.2
-1px
600
15
​
Extra Large (>1200px)
48px
1.2
-1px
600
16
H2
Extra Small (<320px)
18px
1.2
-1px
600
17
​
Small (320-576px)
20px
1.2
-1px
600
18
​
Medium (577-768px)
24px
1.2
-1px
600
19
​
Large (769-1200px)
32px
1.2
-1px
600
20
​
Extra Large (>1200px)
40px
1.2
-1px
600
21
H3
Extra Small (<320px)
16px
1.3
0px
600
22
​
Small (320-576px)
18px
1.3
0px
600
23
​
Medium (577-768px)
20px
1.3
0px
600
24
​
Large (769-1200px)
28px
1.3
0px
600
25
​
Extra Large (>1200px)
32px
1.3
0px
600
26
H4
Extra Small (<320px)
14px
1.3
0px
600
27
​
Small (320-576px)
16px
1.3
0px
600
28
​
Medium (577-768px)
18px
1.3
0px
600
29
​
Large (769-1200px)
24px
1.3
0px
600
30
​
Extra Large (>1200px)
28px
1.3
0px
600
31
H5
Extra Small (<320px)
12px
1.4
0px
600
32
​
Small (320-576px)
14px
1.4
0px
600
33
​
Medium (577-768px)
16px
1.4
0px
600
34
​
Large (769-1200px)
20px
1.4
0px
600
35
​
Extra Large (>1200px)
24px
1.4
0px
600
36
H6
Extra Small (<320px)
10px
1.5
0px
600
37
​
Small (320-576px)
12px
1.5
0px
600
38
​
Medium (577-768px)
14px
1.5
0px
600
39
​
Large (769-1200px)
16px
1.5
0px
600
40
​
Extra Large (>1200px)
20px
1.5
0px
600
41
Body Large
Extra Small (<320px)
14px
1.5
0px
400
42
​
Small (320-576px)
16px
1.5
0px
400
43
​
Medium (577-768px)
18px
1.5
0px
400
44
​
Large (769-1200px)
20px
1.5
0px
400
45
​
Extra Large (>1200px)
20px
1.5
0px
400
46
Body Medium
Extra Small (<320px)
12px
1.5
0px
400
47
​
Small (320-576px)
14px
1.5
0px
400
48
​
Medium (577-768px)
16px
1.5
0px
400
49
​
Large (769-1200px)
18px
1.5
0px
400
50
​
Extra Large (>1200px)
18px
1.5
0px
400
51
Body Small
Extra Small (<320px)
10px
1.5
0px
400
52
​
Small (320-576px)
12px
1.5
0px
400
53
​
Medium (577-768px)
14px
1.5
0px
400
54
​
Large (769-1200px)
14px
1.5
0px
400
55
​
Extra Large (>1200px)
16px
1.5
0px
400
56
Body XSmall
Extra Small (<320px)
10px
1.5
0px
400
57
​
Small (320-576px)
10px
1.5
0px
400
58
​
Medium (577-768px)
12px
1.5
0px
400
59
​
Large (769-1200px)
12px
1.5
0px
400
60
​
Extra Large (>1200px)
14px
1
​
​
There are no rows in this table
⁠

⁠
⁠
Select Icon Library
Feather Icons
⁠
⁠
Brand Images(logos)
⁠
⁠
Images/illustrations
Welcome Screen/Onboarding
Permission Request
Empty States ( search, content, no network)
Error States
Loading
Success/Confirmation
Under Maintenance
Skeleton Loader
⁠
⁠
Style Elements and Inputs
Inputs types
⁠
⁠
ButtonTypes
Primary Button
Secondary Button
Tertiary Button
Disabled Button
Icon Button
Link
Input
multiline input
Dropdown
Multi dropdown
Search-box
file uploader
checkbox
slider
date-time
csv input
⁠
⁠
Style Containers
⁠
⁠
Components - Navigation
Header
Footer
Side Menu
Mobile-Footer Menu
Breadcrumbs
Pagination
⁠
⁠
Components - Forms
Sign Up form
Header Text
Email Input + Label
Password Input + label
Invalid Email/password notification/validation
Forgot Password
Terms and Conditions
Login/Signup Switch
Social Logins
Single Page ( Signup, etc)
Multipage ( Onboarding )
⁠
⁠
Components - Table
Basic Table
Data Table with Sorting and Filtering
Null Data
Loader
Skeleton Loader
Go to top/bottom navigation
⁠
⁠
Components - Modal Popups
Confirmation Modal - Two Buttons
Information Modal - Single Button
Form Modal - Inputs and Button
⁠
⁠
Components - Notifications/Alerts
Success Alert
Error Alert
Warning Alert
Information Alert
⁠
⁠
Null Data
Pages
Settings
Dashboard
Notifications
Home
List Page with filters
Product View Page
Cart
Orders
Add - Input Page
Favourites/Bookmarks




Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.