<!-- ProcessONE - exported from Markah (bymarkah.com) -->

# ProcessONE

This file describes how ProcessONE looks and sounds. When you design, build or write
anything for this brand, follow it: use only the colors and typefaces listed here, and
write in the voice it describes. Where a value is given, use it exactly as written.
If something is not covered here, say so and ask — do not invent a rule.

## Contents

- [Introduction](/brand/processone/introduction)
- [Logo](/brand/processone/logo)
- [Color](/brand/processone/color)
- [Typography](/brand/processone/typography)
- [Tone and voice](/brand/processone/tone-and-voice)
- [Iconography](/brand/processone/iconography)
- [Photography](/brand/processone/photography)
- [Graphic Elements](/brand/processone/graphic-elements)
- [Motion](/brand/processone/motion)
- [Application](/brand/processone/application)
- [Resources](/brand/processone/resources)

## Introduction

### Visual Identity Guideline

*00*


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.

Name the principle, then say what it means in practice.

#### About this guide

#### Contact

## Logo

*01*


### 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

**Primary logo**

![Primary logo](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

**Logomark**

![Logomark](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/icon/b7f8d4af-3d1b-4e56-a6b8-09b401736356-Group_1321314796.svg)

### Logo scale

**Main logo**

![Main logo](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

Sizes: 512px, 320px, 160px, 96px

**Logomark**

![Logomark](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/icon/b7f8d4af-3d1b-4e56-a6b8-09b401736356-Group_1321314796.svg)

Sizes: 120px, 62px, 32px

### Minimum 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 |
| Unit proporsi | 3x |

### Partnerships

- Main logo + Partner

- Logomark + Partner

Clear zone: X / 3

### 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

![Logo](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

#### Logo

![Logo](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

#### Logo

![Logo](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

#### Header 3

![Header 3](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

#### Logo

![Logo](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

#### Logo

![Logo](https://www.bymarkah.com/api/assets/logos/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/primary/7d7c8b34-2f10-4384-9339-e9f7563ca536-Frame_45.svg)

### Logo Don'ts

#### Logo don'ts

- 
- 
- 
- 
- 
- 

## Color

*02*


### 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.

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Primary color 1 1 | `#F1F2F4` | 241, 242, 244 | 1/1/0/4 |  |  |
| Primary color 1 2 | `#B9C2CA` | 185, 194, 202 | 8/4/0/21 |  |  |
| Primary color 1 | `#11161A` | 17, 22, 26 | 35/15/0/90 |  | Base color |
| Primary color 1 4 | `#4D6171` | 77, 97, 113 | 32/14/0/56 |  |  |
| Primary color 1 5 | `#242F38` | 36, 47, 56 | 36/16/0/78 |  |  |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Primary color 2 1 | `#ECF9F2` | 236, 249, 242 | 5/0/3/2 |  |  |
| Primary color 2 2 | `#9AE9BE` | 154, 233, 190 | 34/0/18/9 |  |  |
| Primary color 2 | `#04C95F` | 4, 201, 95 | 98/0/53/21 |  | Base color |
| Primary color 2 4 | `#0EB059` | 14, 176, 89 | 92/0/49/31 |  |  |
| Primary color 2 5 | `#025A2B` | 2, 90, 43 | 98/0/52/65 |  |  |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Secondary color 1 1 | `#F5F9EB` | 245, 249, 235 | 2/0/6/2 |  |  |
| Secondary color 1 2 | `#D0EA98` | 208, 234, 152 | 11/0/35/8 |  |  |
| Secondary color 1 | `#BAFF2A` | 186, 255, 42 | 27/0/84/0 |  | Base color |
| Secondary color 1 4 | `#7DB30B` | 125, 179, 11 | 30/0/94/30 |  |  |
| Secondary color 1 5 | `#3E5C00` | 62, 92, 0 | 33/0/100/64 |  |  |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Secondary color 2 1 | `#F2F2F3` | 242, 242, 243 | 0/0/0/5 |  |  |
| Secondary color 2 2 | `#BDC1C5` | 189, 193, 197 | 4/2/0/23 |  |  |
| Secondary color 2 | `#F4F5F6` | 244, 245, 246 | 1/0/0/4 |  | Base color |
| Secondary color 2 4 | `#575F67` | 87, 95, 103 | 16/8/0/60 |  |  |
| Secondary color 2 5 | `#292E32` | 41, 46, 50 | 18/8/0/80 |  |  |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Primary color 1 | `#DFFF9C → #EAECEE` |  |  |  | Primary |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Primary color 2 | `#DFFF9C → #C1CDD6 → #F1F2F3` |  |  |  | Primary |

### Color Combinations

#### Color combination

- foundation: `#11161A` — 60%
- supporting: `#04C95F` — 30%
- accent: `#BAFF2A` — 5%
- highlight: `#F4F5F6` — 5%

#### Color combination

- foundation: `#11161A` — 60%
- supporting: `#04C95F` — 30%
- accent: `#BAFF2A` — 5%
- highlight: `#F4F5F6` — 5%

#### Color combination

- foundation: `#11161A` — 60%
- supporting: `#04C95F` — 30%
- accent: `#BAFF2A` — 5%
- highlight: `#F4F5F6` — 5%

#### Color combination

- foundation: `#11161A` — 60%
- supporting: `#04C95F` — 30%
- accent: `#BAFF2A` — 5%
- highlight: `#F4F5F6` — 5%

#### Color combination

- foundation: `#11161A` — 60%
- supporting: `#04C95F` — 30%
- accent: `#BAFF2A` — 5%
- highlight: `#F4F5F6` — 5%

#### Color combination

- foundation: `#11161A` — 60%
- supporting: `#04C95F` — 30%
- accent: `#BAFF2A` — 5%
- highlight: `#F4F5F6` — 5%

## Typography

*03*


### 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.

####  Bold

- Family: 
- Weight: 700 (Bold)
- Available weights: 400, 500, 600, 700, 300, 800
- Showcase weights: name 700, glyph 700, alphabet 700
- Source: custom
- Role: display
- Usage: Heading · Body Text · Description

| 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 brand font · 16px · weight 500

Preferred measure: 65ch (not an exact character count).

Line height: 1.8. Alignment: start.

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.

Give each line enough space to follow the next. Set heading and body spacing independently, and check longer passages at smaller screen sizes.

Use start alignment for paragraphs. Center alignment can emphasize a short statement; choose exceptions deliberately and check how the text wraps.

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.

## Tone and voice

*07*


### 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.

## Iconography

*04*


#### 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 a 30 x 30 px grid with a 2 px stroke, 0 px corner radius and 3 px of padding on every side. A new icon must match these before it joins the set.

8 icons: Instant settlement, Free send, Always on, Censorship-resistant, Global by default, Transparent, Open & immutable, Community .

Approved sizes: 32 px, 24 px, 20 px, 16 px. Below 16 px the stroke closes up and the icon stops reading, so do not use it smaller.

#### 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.

## Photography

*05*


### 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.

## Graphic Elements

*06*


### Overview

![Image]()

![Image]()

![Image]()

![Image]()

![Image]()

## Motion

*07*


#### 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 curve: `cubic-bezier(0.2, 0, 0, 1)` (Arrive). Use it for anything that moves, never a tool's default easing.

Durations: fast 200ms (small things), base 360ms (most moves), slow 660ms (big moments).

Fades take about 50% of the move they go with.

#### Code for

CSS:

```
: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);
}
```

Tailwind:

```
@theme {
  --ease-arrive: cubic-bezier(0.2, 0, 0, 1);
  --default-transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  --default-transition-duration: 300ms;
}

<div class="transition duration-[300ms] ease-arrive">
```

Framer Motion:

```
const transition = {
  duration: 0.30,
  ease: [0.2, 0, 0, 1],
}

<motion.div animate={{ opacity: 1 }} transition={transition} />
```

After Effects:

```
Arrive — Keyframe Velocity
Outgoing influence: 20%  ·  speed 0%
Incoming influence: 100%  ·  speed 0%

Fast 960ms = 23 frames @ 24fps
Base 300ms = 7 frames @ 24fps
Slow 500ms = 12 frames @ 24fps
```

#### Application

Signature curve: `cubic-bezier(0.2, 0, 0, 1)` (Arrive). Use it for anything that moves, never a tool's default easing.

When reduced motion is enabled, every motion becomes a brief fade. Nothing moves, rotates, or changes scale.

The curve applies to: toggle (fast, 960ms), carousel (base, 300ms), modal (slow, 500ms), menu (base, 300ms), button (fast, 960ms), card (fast, 960ms), tabs (fast, 960ms), logo (slow, 500ms), tooltip (fast, 960ms).

#### 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.

## Application

*08*


### Overview

#### Application mockups
- Set: recommended
- Brand: ProcessONE
- Primary surface: #11161A
- Supporting surface: #04C95F
- Website: processone.example

![Image](https://www.bymarkah.com/api/assets/imagery/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/imported/36cec836-db91-42a5-b524-2240cfa757ab-application-12.jpg)

![Image](https://www.bymarkah.com/api/assets/imagery/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/imported/601b10a3-2c5c-4937-814a-51165abc7a9c-application-13.jpg)

![Image](https://www.bymarkah.com/api/assets/imagery/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/imported/37a915b4-1950-460d-a32d-87422e68feec-application-14.jpg)

![Image](https://www.bymarkah.com/api/assets/imagery/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/imported/aa397ccc-14f2-4ffd-906c-4d7ea51b061d-application-17.jpg)

![Image](https://www.bymarkah.com/api/assets/imagery/7f3b186f-adf8-4cad-a0b4-98d8064f8a90/r2/imported/da8e16d2-4490-4a92-9870-31fb1fb4fd6c-application-18.jpg)

## Resources

*08*


#### Overview

- [Logo pack]()
- [Color palette]()
- [Typography]()
- [Social media kit]()
- [Brand file for AI]()
- [File]()