Logo guidelines, variants, and assets for knowthyself360.

Type

Color

Background

Size

WCAG AAA

Logo · light mode · 64px

Landing pages, marketing materials


Introduction

The KT360 logo represents growth through reflection. It is built around two core elements that work together:

Container

A safe space for reflection — the boundary that holds the process of growth.

Perspectives

The circles represent the people in your community. Your change impacts those around you — and circle sizes show how that change ripples and grows over time.

Growth happens inside a safe space, between perspectives, through shared understanding.

Tone & Expression

Calm

Intelligent

Human

Corporate

Cold

Overly playful

Color Versions

The logo comes in four color variants, each designed for specific background contexts.

Icon + Wordmark

Light Mode

For light backgrounds

Dark Mode

For dark backgrounds

Black

Monochrome — print and high-contrast use

White

Monochrome — dark backgrounds

Icon Only

Icon light mode

Light Mode

Icon dark mode

Dark Mode

Icon black

Black

Icon white

White

Sizing

Each size is optimized for a specific context. Use the size that matches your surface.

Icon Sizes

Icon 16px
16px

Favicons, browser tabs

Icon 24px
24px

Navigation bars, compact UI

Icon 32px
32px

App icons, toolbar buttons

Icon 48px
48px

Profile pictures, feature icons

Icon 64px
64px

Card headers, modal icons

Icon 128px
128px

App launchers, large panels

Icon 256px
256px

High-res displays, print

Logo Sizes (Horizontal)

24px

Compact headers, email signatures

32px

Navigation bars, subheaders

48px

Page headers, presentations

64px

Landing pages, marketing materials

High Resolution

High-resolution versions (1024px and 2048px) are available for print, presentations, and large-format use. Download them from the asset browser below.

Structure & Spacing

Icon only

Icon only

Icon + wordmark

The icon stays exactly the same size — the brand expands outward with the wordmark.

Clear Space

Always keep empty space around the logo equal to the height of the icon itself. This breathing room protects the logo from competing elements and keeps it legible at any size. Never crowd it.

x x x x

x = icon height — maintain on all sides. The faded logos show the minimum boundary; nothing should be closer.

Core Rules

  • Perspectives must feel related — they belong to the same community
  • Circle sizes are intentional — they represent scale of change, not randomness
  • The container defines the boundary of safety — never remove it
  • No element is decorative — all elements serve meaning
  • Relationships must remain clear in both static and motion use

Color Usage

Primary Purple

Growth, transformation, and the core identity of the brand.

Neutral Dark

Structure and wordmark — grounding the mark in clarity.

Color should support meaning, not decoration.

Allowed Variants

Icon only

Icon Only

Small spaces, app icons, favicons

Icon + Wordmark

Headers, marketing, presentations

Monochrome black Monochrome white

Monochrome

Print, embossing, single-color contexts

Misuse

The logo is a system. Protect its integrity by avoiding these common mistakes.

Don't distort or stretch

Maintain original proportions at all times.

Don't rotate or animate randomly

Motion must be calm, intentional, and guided.

Don't overcomplicate

One logo per layout. No stacking or layering of marks.

Don't use as decoration

Every element serves meaning. Nothing is a pattern or texture.

Accessibility

Every color variant is designed to pass WCAG AAA contrast on its intended background. Always match the logo variant to its correct surface.

WCAG AAA

light mode

White background · Primary — light surfaces

  • Maintain strong contrast on all backgrounds
  • Works on both light and dark backgrounds — use the correct variant for each
  • Remains clear and legible at small sizes (minimum 16px)
  • Motion should not reduce clarity or legibility

Motion

The logo system supports motion. Allowed behaviors include perspectives shifting position, signals appearing gradually, and the container holding space. All motion should feel calm and purposeful — never decorative.

Calm

Intentional

Guided

Chaotic movement

Decorative animation

Loss of structure

Download Assets

Browse and download all logo assets. Filter by type, color variant, and format.

Type
Color
Format

104 assets

Logo · 24px

light mode · SVG

.png

Logo · 24px

light mode · PNG

Logo · 32px

light mode · SVG

.png

Logo · 32px

light mode · PNG

Logo · 48px

light mode · SVG

.png

Logo · 48px

light mode · PNG

Logo · 64px

light mode · SVG

.png

Logo · 64px

light mode · PNG

Logo · 24px

dark mode · SVG

.png

Logo · 24px

dark mode · PNG

Logo · 32px

dark mode · SVG

.png

Logo · 32px

dark mode · PNG

Logo · 48px

dark mode · SVG

.png

Logo · 48px

dark mode · PNG

Logo · 64px

dark mode · SVG

.png

Logo · 64px

dark mode · PNG

Logo · 24px

black · SVG

.png

Logo · 24px

black · PNG

Logo · 32px

black · SVG

.png

Logo · 32px

black · PNG

Logo · 48px

black · SVG

.png

Logo · 48px

black · PNG

Logo · 64px

black · SVG

.png

Logo · 64px

black · PNG

Logo · 24px

white · SVG

.png

Logo · 24px

white · PNG

Logo · 32px

white · SVG

.png

Logo · 32px

white · PNG

Logo · 48px

white · SVG

.png

Logo · 48px

white · PNG

Logo · 64px

white · SVG

.png

Logo · 64px

white · PNG

Icon light-mode 16px

Icon · 16px

light mode · SVG

.png

Icon · 16px

light mode · PNG

Icon light-mode 24px

Icon · 24px

light mode · SVG

.png

Icon · 24px

light mode · PNG

Icon light-mode 32px

Icon · 32px

light mode · SVG

.png

Icon · 32px

light mode · PNG

Icon light-mode 48px

Icon · 48px

light mode · SVG

.png

Icon · 48px

light mode · PNG

Icon light-mode 64px

Icon · 64px

light mode · SVG

.png

Icon · 64px

light mode · PNG

Icon light-mode 128px

Icon · 128px

light mode · SVG

.png

Icon · 128px

light mode · PNG

Icon light-mode 256px

Icon · 256px

light mode · SVG

.png

Icon · 256px

light mode · PNG

Icon dark-mode 16px

Icon · 16px

dark mode · SVG

.png

Icon · 16px

dark mode · PNG

Icon dark-mode 24px

Icon · 24px

dark mode · SVG

.png

Icon · 24px

dark mode · PNG

Icon dark-mode 32px

Icon · 32px

dark mode · SVG

.png

Icon · 32px

dark mode · PNG

Icon dark-mode 48px

Icon · 48px

dark mode · SVG

.png

Icon · 48px

dark mode · PNG

Icon dark-mode 64px

Icon · 64px

dark mode · SVG

.png

Icon · 64px

dark mode · PNG

Icon dark-mode 128px

Icon · 128px

dark mode · SVG

.png

Icon · 128px

dark mode · PNG

Icon dark-mode 256px

Icon · 256px

dark mode · SVG

.png

Icon · 256px

dark mode · PNG

Icon black 16px

Icon · 16px

black · SVG

.png

Icon · 16px

black · PNG

Icon black 24px

Icon · 24px

black · SVG

.png

Icon · 24px

black · PNG

Icon black 32px

Icon · 32px

black · SVG

.png

Icon · 32px

black · PNG

Icon black 48px

Icon · 48px

black · SVG

.png

Icon · 48px

black · PNG

Icon black 64px

Icon · 64px

black · SVG

.png

Icon · 64px

black · PNG

Icon black 128px

Icon · 128px

black · SVG

.png

Icon · 128px

black · PNG

Icon black 256px

Icon · 256px

black · SVG

.png

Icon · 256px

black · PNG

Icon white 16px

Icon · 16px

white · SVG

.png

Icon · 16px

white · PNG

Icon white 24px

Icon · 24px

white · SVG

.png

Icon · 24px

white · PNG

Icon white 32px

Icon · 32px

white · SVG

.png

Icon · 32px

white · PNG

Icon white 48px

Icon · 48px

white · SVG

.png

Icon · 48px

white · PNG

Icon white 64px

Icon · 64px

white · SVG

.png

Icon · 64px

white · PNG

Icon white 128px

Icon · 128px

white · SVG

.png

Icon · 128px

white · PNG

Icon white 256px

Icon · 256px

white · SVG

.png

Icon · 256px

white · PNG

High-res light-mode 1024px

High-res · 1024px

light mode · SVG

.png

High-res · 1024px

light mode · PNG

High-res light-mode 2048px

High-res · 2048px

light mode · SVG

.png

High-res · 2048px

light mode · PNG

High-res dark-mode 1024px

High-res · 1024px

dark mode · SVG

.png

High-res · 1024px

dark mode · PNG

High-res dark-mode 2048px

High-res · 2048px

dark mode · SVG

.png

High-res · 2048px

dark mode · PNG

High-res black 1024px

High-res · 1024px

black · SVG

.png

High-res · 1024px

black · PNG

High-res black 2048px

High-res · 2048px

black · SVG

.png

High-res · 2048px

black · PNG

High-res white 1024px

High-res · 1024px

white · SVG

.png

High-res · 1024px

white · PNG

High-res white 2048px

High-res · 2048px

white · SVG

.png

High-res · 2048px

white · PNG

The KT360 logo is a system.

Simple. Intentional. Consistent. Recognizable — across all contexts.