01 — Logo

## Primary Logo

The ResolutionFlow logo combines the icon mark with the wordmark. Use the horizontal lockup as the primary logo in most applications.

### Primary — Dark Background

Use on dark backgrounds (#09090b to #18181b)

### Primary — Light Background

Use on light backgrounds (#fafafa to #ffffff)

### Reversed — Gradient Background

White version for gradient or colored backgrounds

### Icon Only

Use when space is limited or brand is established

02 — Icon Anatomy

## Understanding the Mark

Every element of the icon has meaning, representing the core value proposition of ResolutionFlow.

- 1

  #### Decision Points (Circles)

  Four filled circles represent the choices and decisions made during troubleshooting. Varying opacity shows frequency of use.

- 2

  #### Flow Lines

  Solid lines represent common paths, dotted lines represent less frequent choices. Together they show the decision flow.

- 3

  #### Convergence Node

  The glowing center node represents where all decisions converge into a single resolution. The glow emphasizes this focal point.

- 4

  #### Output Arrow

  The bold arrow represents the final output — the automatically generated documentation that flows from the resolution.

03 — Color

## Color Palette

A focused palette built around the indigo-to-violet gradient, supported by neutral dark tones.

Primary Gradient

Start: #818cf8 End: #a78bfa

Indigo

HEX: #818cf8 RGB: 129, 140, 248

Violet

HEX: #a78bfa RGB: 167, 139, 250

Background Dark

HEX: #09090b RGB: 9, 9, 11

Surface

HEX: #18181b RGB: 24, 24, 27

White

HEX: #ffffff RGB: 255, 255, 255

04 — Typography

## Type System

Plus Jakarta Sans for headings and brand elements, Inter for body text and UI.

Display / Logo

Plus Jakarta Sans Bold

Font-weight: 700 • Letter-spacing: -0.03em

Headings

Plus Jakarta Sans Semibold

Font-weight: 600 • Letter-spacing: -0.02em

Body Text

Inter Regular & Medium

The quick brown fox jumps over the lazy dog. ResolutionFlow transforms chaotic technical troubleshooting into guided workflows with automatic documentation generation.

05 — App Icons

## Application Icons

App icons at various sizes for different platforms and use cases.

512×512 (App Store)
Gradient Variant
Favicon (32×32)
16×16

06 — Usage

## Do's and Don'ts

Guidelines for maintaining brand consistency across all applications.

Do

Use the logo with adequate clear space around it

Don't

Don't change the logo colors

Do

Use the icon alone when brand is established

Don't

Don't rotate or distort the logo

Do

Use white version on gradient backgrounds

Don't

Don't reduce the logo opacity