Brand Guidelines v3

FloBuild
Brand
Guidelines
About Flobuild 01
Logo Mark 02
Color Palette 06
07
Table Of
Typography & It’s Usage
Current Application Pain Points 09
Contents UX Solutions
Grid System
10
11
Icons Size 12
Buttons 13
Graphic Works 14
Sample Screens 17
Brand GUIDELINES 01
About Flobuild
Flobuild is a Lowcode platform and it has the power of building applications
in weeks for web and mobile views and accelerate development.
Brand GUIDELINES 02
Logo Mark
Horizontal lock-up
We recommend always leading with the right aligned logo
FloBuild
lock-up across all brand applications.
Stacked lock-up
We utilize the stacked version of the logo when
creating social media avatars, end frames,
and in applications where dual language is required. FloBuild

Brand GUIDELINES 03
Logo Mark | Clear space

This example demonstrates the logomark scaled at 50% to define the
minimum safety area. This area must not be imposed upon by other
graphics.
Logomark at 100% Logomark scaled 50% to
define safety margin

Brand GUIDELINES 04
Logo Mark | Scaling

The logomark should always be scaled while maintaining its original
proportions.
Width - 750% Width-550% Width- 450% Width- 338% Width- 250% Width- 200%
Height - 750% Height-550% Height-450% Height- 338% Height-250% Height-200%
Brand GUIDELINES 05
Logo Mark | Positioning

Primary Horizontal lock-up Secondary Stacked lock-up
We always align our logo to the right. In the top or bottom position. We always align our stacked lockup
to the centre in the top position.

FloBuild FloBuild
FloBuild
FloBuild FloBuild
Brand GUIDELINES 06
Color Palette
Trust and Reliability: Blue is often associated with Primary Color
trustworthiness and reliability. Users may perceive this color as
conveying a sense of professionalism and trust, which can be Blue Blue
important in web apps related to finance, healthcare, or other
serious matters
Positive Emotions: Blue is generally seen as a positive and

pleasant color. Users may have a generally positive emotional #4C7AD2 #E2EAF8
response when they see this color in the UI
Cool and Modern Aesthetic: Blue is often associated with a

cool and modern aesthetic. Using #4C7AD2 can make your UI Secondary Color
appear stylish and contemporary
Black Gray Gray
Professionalism: If your web app is related to business or
professional services, the use of this color can reinforce a sense
of professionalism and seriousness
Modern Aesthetic: Blue is often associated with a modern and #333333 #888888 #F4F4F4
stylish aesthetic. Users may perceive the web app as
contemporary and visually appealing when this color is used
effectively
Brand GUIDELINES 07
Typography & It’s Usage

DM Sans Regular ABCDEFGHIJKLMNOPQRSTUWXYZ
is our official font ABCDEFGHIJKLMNOPQRSTUWXYZ
1234567890!@#$%^&*()<>?/
DM Sans is known for its exceptional readability, features a modern
and clean design with a geometric influence. It aligns with Medium ABCDEFGHIJKLMNOPQRSTUWXYZ
contemporary design trends, making it a suitable choice for projects ABCDEFGHIJKLMNOPQRSTUWXYZ
aiming for a modern and visually appealing look.
1234567890!@#$%^&*()<>?/
Heading 1 - 16 px Bold ABCDEFGHIJKLMNOPQRSTUWXYZ

ABCDEFGHIJKLMNOPQRSTUWXYZ
Heading 2 - 14 px 1234567890!@#$%^&*()<>?/
Heading 3 - 12 px
Brand GUIDELINES 08
Let’s conclude
We’ve established a few
Things to avoid Things to achieve
guiding principles to ensure
Too many weights
Don’t use too many weights of the typeface
Hierarchy
Ensure to create a central point and clear hierarchy
we treat typography
when laying out type. when working with typograph
consistently throughout
the entire Flobuild Using wrong typefaces

Legibility
Always use our brand typeface for

Always make sure the design and colour usage is
all communications. accessible; use contrasting colours, and sizes.

Overlapping type and graphics
Thin creatively
Don’t place any type on the graphics to ensure

Don’t be afraid to pull out important information and
consistency in design and legibility. make it large, make the page sing.
Avoid b sy layo
u ut
To ensure e erything looks structured,
considered and hierarchical.

Brand GUIDELINES 09
Current Application Pain Points

Editor screen is constrained in size, making it convenient to design the page while building
There is an excessive amount of empty space throughout the low-code system
The font color in properties does not provide an appealing visual experience
User-friendliness is lacking, with some workflows proving challenging for users to grasp, leading to difficulties in problem-solving
The absence of shortcuts for essential functionalities
Properties could be better organized for user comprehension
Application mapping is complex and challenging for users to comprehend
The filter design hiding the header of the grid, affecting visibility and usability
Limited size issue on writing formulas and java script in properties
The workflow requires improved user-friendliness. Currently, if any changes are needed at the top of a created workflow, it necessitates the
deletion and re-creation of all cases, which can significantly increase the time required for updates and modifications.
Brand GUIDELINES 10
UX Solutions
User may have large editor screen in size, So that it will be convenient to develop or design the page while building the application
Managing the white space to separate content and create visual hierarchy & also applied whitespace can improve readability and focus
Using Selected fonts that are easy to read and choose relevant font sizes for different types of properties & also Maintain consistency in font
colors throughout the application
User-friendliness is lacking, So making into streamline and simplify complex workflows. Clear and Concise Labels
Absence of shortcuts: We may come up with keyboard shortcuts, Visual Indicators (like tooltips to inform the Shortcut)
Making the properties tabbed or accordion-style layouts to divide properties into sections or categories, Include icons or symbols next to
properties to visually represent their meaning or function
Application mapping complexity: We may come up with Organize the mapping information hierarchically, with high-level
categories and subcategories

Filter UI : Coming up with Dropdown Filters, Filter Sidebar, Expandable Filters
Writing Formulas in Properties: Zoom In/Out, Full-Screen Mode, Resizable Text Areas
Workflow Creation Issues: Undo and Redo Functionality, Version Control, Change Tracking and Notifications.
Brand GUIDELINES 11
Grid System
1920 x 1080
Side Menu:
Menu:
Height- 92%
Height- 92 %
Width- 10% Width- 22%

Brand GUIDELINES 12
Nav Bar: If we click the flowbuild logo it will redirect to Homepage

Top Padding 2%
Height- 8%
Bottom Padding 2%
Width- 100%
Footer:
Height- 6% Top Padding 1%
102% Powered by
Bottom Padding 1%
Width- 42%
If we click the powered by floki labs it will redirect to floki website
Icons Size
Height- 20 px
Icons are maintained in standard size of 20 x 20 Width- 20 px

Brand GUIDELINES 13
Buttons
Primary Button Secondary Button Disabled Button Danger Button Ghost Button
Button Secondary Disabled Exit Cancel
Color Code: 4C7AD2 Color Code: 4C7AD2 Color Code: A5BCE8 Color Code: FC3333 Color Code: CCCCCC
Size
10px 10px 10px
Small Button Medium Button Large Button
Button 24px Button 40px Button 48px
Vertical Padding: 8px Vertical Padding: 12px Vertical Padding: 16px

Horizontal Padding: 16px Horizontal Padding: 16px Horizontal Padding: 24px
Brand GUIDELINES 14
Graphic Works
Email: Letterhead (PDF): Invoice:
New Message
FloBuild Invoice
Recipients Billed to
Good morning Mark,  Company Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Company address
Subjects ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation City, Country - 00000
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
Good morning Mark,   laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Invoice # Services Qty Rate Line total
AB2324-01
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
Item Name 1 $3,000.00 $3,000.00
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Invoice date Item Name 1 $3,000.00 $3,000.00
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 01 Aug, 2023
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor Item Name 1 $1,500.00 $1,500.00
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
culpa qui officia deserunt mollit anim id est laborum.
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Reference Item Name 1 $1,500.00 $1,500.00
laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor INV-057
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Subtotal $9,000.00
Thanks, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor Tax (10%) $900.00
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Due date
Name 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 15 Aug, 2023 Total due US$ 9,900.00
Title  laborum.
[email protected] 
FloBuild phone No Thanks, Please pay within 15 days of receiving this invoice.
Powered by
Send
Powered by
www.website.com +91 00000 00000 [email protected] Powered by
1920 x 1080 resolution Sample Screen- Side menu and properties Slider Open
The editor screen, set at default 102% R esolution, editor screen size 1175 px in w idth and 898 px in height w ith the margin of 15 px. wh en the both
panel is open, side menu panel 250px in width and 1020px in height and the Properties panel is 350 px in width and 972px in height. The top menu
bar has a w idth of px and a height of
1920 60 px. The left side menu is 115px w idth and 1020 px height. The toolbar w idth 1205 px and height
45px.When Properties menu open, measures 350px in width and 972px in height. Editor sidemenu width of 80px and 898px in height.The footer has
a width of 1555px and a height of 48px."
FloBuild Top Menu Bar

Tool Bar
App Explorer Layer Manager Properties
New Screen Row Properties CSS
Search
Side menu Components
Section
AD Admin
Column 1
Components Layout
Column 1 Style
Tree view 2 Column Font Family DM Sans

1 Column
Text Format Text
Side menu panel Workflow

3 Columns More Columns
Text Style Normal
Text Align Left
Status
Basic
Transition Text Shadow 2
Check List Text Box Dropdown

Line Space 2
Properties
Editor Side menu
Dimension
Desktop Width Auto fill

Entity
Relationship Multi Select Date

Tab Width Auto fill
Mobile Width Auto fill
Radio Text Box Size 14
Special Height Static Text
Editor Screen Align Vertically Top
Hide on Mobile
Hide on Tablet
Hide on Desktop
Powered by
Footer
124%
Zooming Calculation
Margin 15+15= 30, Screen width =1920, Screen height=1080
W idth = 30 + 1920 =1950
Height = 30 + 1080 =1110
Visible Area = 1950 + 1110 = 3060
Artboard Area = 1920 + 1080 = 3000
Zoom Level = Visible Area

x 100
Artboard Area
= 3060
x 100
3000
= 102%
1920 x 1080 Sample Screen- Side menu Slider Closed, Properties open
Editor Screen width including editor menu 1426 px , margin of 15px; without editor menu 1346 px, height 898px
Editor menu width=80px height=898px;
Properties panel is open, width=350px, 25% and height=972px,91%
Top Menu bar width = 1920px,100%; height 60px,5%
Side menu width = 115px ,10%; height 1020px 95%
Footer width = 1805px ,90%; height 48px 4% if we click the floki logo it will redirect to floki website
Default Zoom =102%
Slider width = 12px; height 45px from 23% from the bottom of the footer
Tool Bar width = 1456px; height 45px
Top Menu bar FloBuild 5%
4%
Tool Bar
Properties
4%
New Screen
Row Properties CSS
AD Admin
Section
Column 1
Components
Column 1
Style
Side menu
Tree view Font Family DM Sans
Text Format Text
Workflow Text Style Normal
Property Panel
Text Align Left
Status
Please Enter Numbers only
Line Space 2
Check List
Dimension
83%
Entity
Relationship
Tab Width Auto fill
Slider
Size 14
Height Static Text
Align Vertically Top
Hide on Mobile
Hide on Tablet
Editor Screen Hide on Desktop
102% Powered by 4%
10% 1% 8% 55% 1% 25%
Editor Side menu Footer

1920 x 1080 Sample Screen-Side menu & Properties Slider Closed
Editor Screen width including editor menu 1777 px ,88% with a margin of 15px; without editor menu 1697 px,80% height 898px
Default Zoom =102%
Tool Bar New Screen

4%
1%
AD Admin 4%
Section
Components
Column 1
Side menu Tree view
Workflow
Status
Transition
Check List
82%
Entity
Relationship
Slider
Editor Screen
102% Powered by 4%
10% 1% 8% 80%
1%

1920 x 1080 -Sample Screen-Side menu open & Properties Closed
Editor Screen width including editor menu 1526 px ,with a margin of 15px; without editor menu 1446 px, height 898px
Default Zoom =102%
Tool Bar New Screen

App Explorer Layer Manager 4%
1%
Search
AD Admin 4%
Components
Section
Components Layout
Column 1
Side menu Tree view

1 Column 2 Column
Workflow
Status
Basic
Transition
Check List Text Box Dropdown

82%
Entity
Relationship Multi Select Date
Slider Radio Check Box
Special
Editor Screen
102% Powered by 4%
10% 22% 1% 8% 58%

1%
Footer
Editor Side menu
1024 x 1366 Tab view -Sample Screen-Side menu open & Properties Closed
Editor Screen width including editor menu 879 px ,with a margin of 15px; without editor menu 1446px, height 1208px
Default Zoom =102%
Top Menu bar 5%
Tool Bar
FloBuild
4%
New Screen 1%
AD Admin 4%
Components Section
Column 1
Tree view
Workflow
Status
Transition
Side menu Check List
Entity
Relationship
82%
Slider
Editor Screen
102% Powered by 4%
10% 1% 8% 80% 1%

1024 x 1366 Tab view -Sample Screen-Side menu open & Properties Closed
Editor Screen width including editor menu 629 px ,with a margin of 15px; without editor menu 1446px, height 1208px

Default Zoom =102%

Top Menu bar 5%
Tool Bar
FloBuild
App Explorer Layer Manager 4%

New Screen 1%
Search
AD Admin 4%
Components
Section Section
Components Layout
Column 1
Tree view 1 Column 2 Column
Workflow
Status
Basic
Transition
e enu
Sid m Check List Text Box Dropdown
Entity
Multi Select Date
Relationship
Radio Text Box
Special
82%
Slider
Editor Screen
102% Powered by 4%
10% 22% 1% 8% 58% 1%
F ooter
Edit or Side menu
Wh en the side menu panel is open, the properties panel will remain closed, and when the properties
are open, the side menu will be closed."
1920 x 1080 Sample Screen- Side menu Slider Closed, Properties open
Zoom =125%
Properties 4%
Tool Bar New Screen
Row Properties CSS 4%
Column 1
Components
Section
Style
Column 1
Side menu Text Format Text
Text Align Left
Status

Property Panel
Line Space 2
Check List
Dimension
83%
Entity
Relationship
Tab Width Auto fill
Slider Size 14
Height Static Text
Hide on Mobile
Hide on Tablet
125% Powered by 4%
10% 1% 8% 55% 1% 25%

1920 x 1080 Sample Screen- Side menu Slider Closed, Properties open Zoom out 75%
Zoom =75%
4%
Tool Bar
Properties
4%
New Screen
Row Properties CSS
AD Admin
Section
Column 1
Column 1
Components
Style
Side menu
Text Format Text
Property Panel
Text Align Left
Status
Line Space 2
Check List
Dimension
83%
Entity
Relationship
Tab Width Auto fill
Slider
Size 14
Height Static Text
Hide on Mobile
Hide on Tablet
75% Powered by 4%
10% 28% 25%

1% 8% 28%

1920 x 1080 Sample Screen- Side menu Slider Closed, Properties open Browser Zoom 75%
FloBuild
Properties
New Screen
AD Admin Row Properties CSS
Section
Column 1 Column 1
Components
Style
Font Family DM Sans

Tree view
Text Format Text
Text Style Normal

Workflow
Text Align Left
Text Shadow 2
Status
Transition
Line Space 2
Dimension
Check List
Tab Width Auto fill

75% Powered by
Entity
Relationship Mobile Width Auto fill

Brand Guidelines v3

Uploaded by

Copyright:

Available Formats

Brand Guidelines v3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Brand Guidelines v3

Uploaded by

Copyright:

Available Formats

FloBuild

creating social media avatars, end frames,

and in applications where dual language is required. FloBuild

Logo Mark | Clear space

Logomark at 100% Logomark scaled 50% to

define safety margin

Logo Mark | Scaling

Logo Mark | Positioning

to the centre in the top position.

Positive Emotions: Blue is generally seen as a positive and

Cool and Modern Aesthetic: Blue is often associated with a

Typography & It’s Usage

Heading 1 - 16 px Bold ABCDEFGHIJKLMNOPQRSTUWXYZ

Don’t use too many weights of the typeface

Ensure to create a central point and clear hierarchy

the entire Flobuild Using wrong typefaces

Always use our brand typeface for

all communications. accessible; use contrasting colours, and sizes.

Don’t place any type on the graphics to ensure

To ensure e erything looks structured,

considered and hierarchical.

Current Application Pain Points

categories and subcategories

Width- 10% Width- 22%

Nav Bar: If we click the flowbuild logo it will redirect to Homepage

Icons are maintained in standard size of 20 x 20 Width- 20 px

Vertical Padding: 8px Vertical Padding: 12px Vertical Padding: 16px

FloBuild Top Menu Bar

Tree view 2 Column Font Family DM Sans

Side menu panel Workflow

Check List Text Box Dropdown

Desktop Width Auto fill

Relationship Multi Select Date

Special Height Static Text

Editor Screen Align Vertically Top

Margin 15+15= 30, Screen width =1920, Screen height=1080

W idth = 30 + 1920 =1950

Height = 30 + 1080 =1110

Visible Area = 1950 + 1110 = 3060

Artboard Area = 1920 + 1080 = 3000

Zoom Level = Visible Area

Default Zoom =102%

Top Menu bar FloBuild 5%

Text Format Text

Workflow Text Style Normal

Transition Text Shadow 2

Please Enter Numbers only

Height Static Text

Align Vertically Top

Editor Screen Hide on Desktop

10% 1% 8% 55% 1% 25%

Editor Side menu Footer

Top Menu bar width = 1920px,100%; height 60px,5%

Side menu width = 115px ,10%; height 1020px 95%

Default Zoom =102%

Tool Bar width = 1807px; height 45px

Top Menu bar FloBuild 5%

Tool Bar New Screen

Side menu Tree view

Editor Side menu Footer