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

**Client:** sila

## Contents

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

## Introduction

### Visual Identity Guideline

*00*


#### About Us

#### The Values We Hold

#### About this guide

#### Contact

## Logo

*01*


### Overview

#### Primary logo

**Primary logo**

![Primary logo](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/256a7d3e-65dd-4165-ac63-c56ca5b7ace4-Frame_45.svg)

**Logomark**

![Logomark](https://bymarkah.com/api/assets/logos/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/icon/6f62c35f-681e-4c9d-9c83-b3f3f94e18a0-Group_1321314796.svg)

### Logo scale

**Main logo**

![Main logo](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/256a7d3e-65dd-4165-ac63-c56ca5b7ace4-Frame_45.svg)

Sizes: 512px, 310px, 160px, 90px

**Logomark**

![Logomark](https://bymarkah.com/api/assets/logos/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/icon/6f62c35f-681e-4c9d-9c83-b3f3f94e18a0-Group_1321314796.svg)

Sizes: 220px, 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 | 190 × 190 px |

### Partnerships

- Main logo + Partner

- Logomark + Partner

Clear zone: X / 3

### Logo on Color

#### Logo

![Logo](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/256a7d3e-65dd-4165-ac63-c56ca5b7ace4-Frame_45.svg)

#### Logo

![Logo](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/256a7d3e-65dd-4165-ac63-c56ca5b7ace4-Frame_45.svg)

#### Logo

![Logo](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/256a7d3e-65dd-4165-ac63-c56ca5b7ace4-Frame_45.svg)

#### Header 3

![Header 3](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/256a7d3e-65dd-4165-ac63-c56ca5b7ace4-Frame_45.svg)

#### Logo

![Logo](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/256a7d3e-65dd-4165-ac63-c56ca5b7ace4-Frame_45.svg)

#### Logo

![Logo](https://bymarkah.com/api/assets/imagery/452fa986-1cbe-4b26-b3c4-d173d95728a1/r2/image/c9f0aa04-6d40-4eb0-9d73-74cf9e3c25ec-Frame_32.svg)

### Logo Don'ts

#### Logo don'ts

- 
- 
- 
- 
- 
- 

## Color

*02*


### Overview

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Primary 1 | `#ECF0F8` | 236, 240, 248 | 5/3/0/3 |  |  |
| Primary 2 | `#9FB4E3` | 159, 180, 227 | 30/21/0/11 |  |  |
| Primary | `#2563EB` | 37, 99, 235 | 84/58/0/8 |  | Base color |
| Primary 4 | `#1945A5` | 25, 69, 165 | 85/58/0/35 |  |  |
| Primary 5 | `#082054` | 8, 32, 84 | 90/62/0/67 |  |  |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| White 1 | `#F2F2F2` | 242, 242, 242 | 0/0/0/5 |  |  |
| White 2 | `#C1C1C1` | 193, 193, 193 | 0/0/0/24 |  |  |
| White | `#FFFFFF` | 255, 255, 255 | 0/0/0/0 |  | Base color |
| White 4 | `#5F5F5F` | 95, 95, 95 | 0/0/0/63 |  |  |
| White 5 | `#2E2E2E` | 46, 46, 46 | 0/0/0/82 |  |  |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Ink 1 | `#F2F2F2` | 242, 242, 242 | 0/0/0/5 |  |  |
| Ink 2 | `#C1C1C1` | 193, 193, 193 | 0/0/0/24 |  |  |
| Ink | `#1F1F1F` | 31, 31, 31 | 0/0/0/88 |  | Base color |
| Ink 4 | `#5F5F5F` | 95, 95, 95 | 0/0/0/63 |  |  |
| Ink 5 | `#2E2E2E` | 46, 46, 46 | 0/0/0/82 |  |  |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Primary | `#CECECE → #ECECEC` |  |  |  | Primary |

| Name | Value | RGB | CMYK | Pantone | Usage |
|---|---|---|---|---|---|
| Secondary | `#CECECE → #A1BBF6 → #F2F2F2` |  |  |  | Primary |

### Color Combinations

#### Color combination

- foundation: `#2563EB` — 60%
- supporting: `#DBEAFE` — 30%
- accent: `#FFFFFF` — 5%
- highlight: `#1F1F1F` — 5%

#### Color combination

- foundation: `#2563EB` — 60%
- supporting: `#DBEAFE` — 30%
- accent: `#FFFFFF` — 5%
- highlight: `#F2F2F2` — 9%

#### Color combination

- foundation: `#2563EB` — 60%
- supporting: `#DBEAFE` — 30%
- accent: `#FFFFFF` — 5%
- highlight: `#1F1F1F` — 5%

#### Color combination

- foundation: `#2563EB` — 60%
- supporting: `#DBEAFE` — 30%
- accent: `#FFFFFF` — 5%
- highlight: `#1F1F1F` — 5%

#### Color combination

- foundation: `#2563EB` — 60%
- supporting: `#DBEAFE` — 30%
- accent: `#FFFFFF` — 5%
- highlight: `#1F1F1F` — 5%

#### Color combination

- foundation: `#2563EB` — 60%
- supporting: `#DBEAFE` — 30%
- accent: `#FFFFFF` — 5%
- highlight: `#1F1F1F` — 5%

## Typography

*03*


### Overview

#### Roboto

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

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

**Example**

**Example**

**Example**

## Photography

*05*


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

## Graphic Elements

*06*


### Overview

![Image]()

![Image]()

![Image]()

![Image]()

![Image]()

## Motion

*07*


#### Principles

#### 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: #2563EB
- Supporting surface: #DBEAFE
- Website: processone.example

## Resources

*08*


#### Overview

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