01
Visual Identity Guideline
00
Introduction
About Us
The Values We Hold
About this guide
Contact
01
Logo
Overview
Primary logo
Logo scale
W:512pxW:310pxW:160pxW:90pxMinimum size
| Context | Minimum Width | |
|---|---|---|
| Website UI (navbar, footer) | 90 px | |
| Icon | 32 px |  |
| App icon (symbol) | 48–96 px |  |
| Social media profile picture | 190 × 190 px | |
Partnerships
ProcessONE
38px38px
ProcessONE
38px38px
ProcessONE without safezone
ProcessONE without safezone
Logo on Color
Logo Don'ts
02
Color
Overview
Primary 1ECF0F8
Primary 29FB4E3
Primary2563EBBase color
Primary 41945A5
Primary 5082054
White 1F2F2F2
White 2C1C1C1
WhiteFFFFFFBase color
White 45F5F5F
White 52E2E2E
Ink 1F2F2F2
Ink 2C1C1C1
Ink1F1F1FBase color
Ink 45F5F5F
Ink 52E2E2E
Color Combinations
Color combination
60%
30%
5%
5%
Color combination
60%
30%
5%
9%
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
Primary
UsageHeadingBody TextDescription
Roboto
Glyph
Font style 12
Aa123
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()?+
| Scale Category | Typeface | Weight | Size | Case |
|---|---|---|---|---|
| Caption | Roboto | Medium | 12 | Sentence |
| Header 1 | Roboto | Semibold | 96 | Sentence |
| Header 2 | Roboto | Medium | 60 | Sentence |
| Header 3 | Roboto | Regular | 48 | Sentence |
| Body copy | Roboto | Regular | 16 | Sentence |
| Small text | Roboto | Regular | 12 | Sentence |
| CTA | Roboto | 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
Example
Example
Example
05
Photography
Overview
Principles
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
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.example
08
Resources
Overview
Logo packPro
Color palettePro
TypographyPro
Social media kitPro
Brand file for AIPro
FilePro