Name the principle, then say what it means in practice.
Visual Identity Guideline
00
Introduction
Our mission is to assist companies in simplifying and optimizing their workflows by offering innovative solutions based on AI (Artificial Intelligence) and RPA (Robotic Process Automation). Through tailored automation solutions, we help our clients increase efficiency, reduce costs, and save valuable time.
ProcessAI is a consulting firm specializing in business process automation. Our mission is to assist companies in simplifying and optimizing their workflows by offering innovative solutions based on AI (Artificial Intelligence) and RPA (Robotic Process Automation). Through tailored automation solutions, we help our clients increase efficiency, reduce costs, and save valuable time.
About Us
The Values We Hold
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
About this guide
Contact
01
Logo
Overview
A good logo has a safe zone where it can be easily identified and recognized. the safe zone is the minimum limit where the logo is placed, both with objects and with other logos. A part from the reasons above, the function of the safe zone in the logo is to maintain the consistency of the brand image.
Primary logo
Logo scale
W:512pxW:320pxW:160pxW:96pxMinimum size
| Context | Minimum Width | |
|---|---|---|
| Website UI (navbar, footer) | 90 px | |
| Icon | 32 px |  |
| App icon (symbol) | 48–96 px | |
| Social media profile picture | 180 × 180 px | |
| Unit proporsi | x | 120px |
| Unit proporsi | 3x | 120px |
Partnerships
ProcessONE
38px38px
ProcessONE
38px38px
ProcessONE without safezone
ProcessONE without safezone
Logo on Color
The use of backgrounds needs to be a concern for the use of logos, to achieve good readability and recognition for users, here are some examples of using good backgrounds for logo readability
Logo Don'ts
02
Color
Overview
Color also has an important role in logos, colors can evoke certain emotions and help brands communicate with users. In bexy, colors are divided into 3, primary colors, secondary and supporting colors. Primary colors are the main colors of a brand, secondary colors are supporting colors. Each color category has supporting colors that make it easier for designers or developers to use digital products or marketing to maintain legibility and brand clarity in each media.
Primary color 1 1F1F2F4
Primary color 1 2B9C2CA
Primary color 111161ABase color
Primary color 1 44D6171
Primary color 1 5242F38
Primary color 2 1ECF9F2
Primary color 2 29AE9BE
Primary color 204C95FBase color
Primary color 2 40EB059
Primary color 2 5025A2B
Secondary color 1 1F5F9EB
Secondary color 1 2D0EA98
Secondary color 1BAFF2ABase color
Secondary color 1 47DB30B
Secondary color 1 53E5C00
Secondary color 2 1F2F2F3
Secondary color 2 2BDC1C5
Secondary color 2F4F5F6Base color
Secondary color 2 4575F67
Secondary color 2 5292E32
Color Combinations
Color combination
60%
30%
5%
5%
Color combination
60%
30%
5%
5%
Color combination
60%
30%
5%
5%
Color combination
60%
30%
5%
5%
Color combination
60%
30%
5%
5%
Color combination
60%
30%
5%
5%
03
Typography
Overview
we're your strategic ally in business process optimization. With a focus on innovation and excellence, we empower businesses across industries to thrive in the digital age.
Primary
UsageHeadingBody TextDescription
Font Bold
Glyph
Font style 12
Aa123
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()?+
| Scale Category | Typeface | Weight | Size | Case |
|---|---|---|---|---|
| Caption | — | Medium | 12 | Sentence |
| Header 1 | — | Semibold | 96 | Sentence |
| Header 2 | — | Medium | 60 | Sentence |
| Header 3 | — | Regular | 48 | Sentence |
| Body copy | — | Regular | 16 | Sentence |
| Small text | — | Regular | 12 | Sentence |
| CTA | — | Regular | 16 | Sentence |
Body style · Brand font · 16px / 500
Line length
Keep paragraphs comfortable to scan. Adjust the width for the typeface, text size, and screen; this is a preferred measure, not a fixed character count.
Preferred width · 65ch · narrows to fit the screen
Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.
Preferred measure: 65ch · fits available width
Line height
Give each line enough space to follow the next. Set heading and body spacing independently, and check longer passages at smaller screen sizes.
1.8× line height · 28.8px
Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.
Alignment
Use start alignment for paragraphs. Center alignment can emphasize a short statement; choose exceptions deliberately and check how the text wraps.
Preferred alignment · Left (start)
Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.
07
Tone and voice
Overview
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
04
Iconography
Principles
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
The Set
Drawn on
- Grid
- 30 × 30 px
- Stroke
- 2 px
- Corner radius
- 0 px
- Padding
- 3 px on every side
Sizes
Approved sizes, smallest last. Below the smallest, the stroke closes up and the icon stops reading.
32 px
24 px
20 px
16 px
Do and don't
Stroke
Do
Keep the set on one stroke width.
Don't
Scale an icon up and let its stroke thicken.
Color
Do
Inherit the text color around it.
Don't
Give a single icon its own accent color.
New icons
Do
Draw on the grid above and add it here.
Don't
Pull one in from a different icon library.
05
Photography
Overview
Principles
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Style
Treatment
Photography
| Aspect | Guideline |
|---|---|
| Light | Natural and soft, from one direction |
| Color | True to life, slightly warm, never filtered |
| Composition | Subject off center, clear space on one side |
| Crop | 2:1 for headers, 4:5 for cards |
Do's and Don'ts
People
Do
Show people focused on the activity they are doing.
Don't
Avoid models smiling directly at the camera.
Editing
Do
Correct exposure and white balance, then stop.
Don't
Add filters, vignette, or heavy contrast.
Text on images
Do
Place text in a calm part of the frame.
Don't
Put text over faces or busy details.
Source
Do
Commission or shoot images in-house.
Don't
Use stock photos that other brands also use.
06
Graphic Elements
Overview
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
07
Motion
Principles
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Name the principle, then say what it means in practice.
Curve
Signature — Arrive
cubic-bezier(0.2, 0, 0, 1)Fast 200ms · small thingsBase 360ms · most movesSlow 660ms · big moments
Fades take about 50% of the move they go with.
Code for
Copy for
:root {
--ease-arrive: cubic-bezier(0.2, 0, 0, 1);
--duration-fast: 960ms;
--duration-base: 300ms;
--duration-slow: 500ms;
}
.element {
transition: transform var(--duration-base) var(--ease-arrive);
}Application
In use
Toggle
Switching on and off. Fast · 960ms
Carousel
Moving through a set. Base · 300ms
Modal
Asking for a decision. Slow · 500ms
Options
Edit
Duplicate
Delete
Menu
Opening from what you clicked. Base · 300ms
Continue
Button
Pressing a button. Fast · 960ms
Card
Lifting under the pointer. Fast · 960ms
Overview
Specs
Files
Tabs
Moving between views. Fast · 960ms
Logo
Arriving on screen. Slow · 500ms
Copy link⋮
Tooltip
Explaining on hover. Fast · 960ms
When reduced motion is enabled, every motion becomes a brief fade. Nothing moves, rotates, or changes scale.
Do's and Don'ts
Appearance
Do
Fade in, then settle following our curve.
Don't
Bouncing, springing, or overshoot.
Waiting
Do
Move as soon as the work is done.
Don't
Holding anyone back just so an animation has time to finish.
Comfort
Do
When reduced motion is active, replace every motion with a brief fade.
Don't
Shaking, flashing, or spinning large parts of the screen.
08
Application
Overview
processone.example
ProcessONE
ProcessONE · processone.example
ProcessONE•••
ProcessONE
ProcessONE
processone.example
08
Resources
Overview
Logo packPro
Color palettePro
TypographyPro
Social media kitPro
Brand file for AIPro
FilePro