Vective AI Brand Kit

Logo & Mark

The Vective AI logo mark combines a thick V with a breached hexagonal border. The V extends beyond the hex at both arm tops, creating a dynamic, integrated feel that signals boundary-breaking capability.

Primary Mark Variants

vective-mark-cyan.svg

512 x 512 · SVG

Download SVG

PNG

vective-mark-white.svg

512 x 512 · SVG

Download SVG

PNG

vective-mark-dark.svg

512 x 512 · SVG

Download SVG

PNG

Context Variants

vective-mark-on-dark.svg

512 x 512 · SVG

Download SVG

PNG

vective-mark-on-light.svg

512 x 512 · SVG

Download SVG

PNG

Wordmarks

vective-wordmark-dark.svg

520 x 120 · SVG

Download SVG

vective-wordmark-white.svg

520 x 120 · SVG

Download SVG

vective-wordmark-cyan.svg

520 x 120 · SVG

Download SVG

vective-ai-wordmark-dark.svg

520 x 120 · SVG

Download SVG

vective-ai-wordmark-white.svg

520 x 120 · SVG

Download SVG

vective-ai-wordmark-cyan.svg

520 x 120 · SVG

Download SVG

Sacred V

Every Vective mark contains the sacred V path at its center. This geometry is immutable across all products and variants.

/* Sacred V path — never modify */
d="M 100 108 L 256 392 L 412 108"
stroke-width="48"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
/* Always stroke, never fill */

Clear Space

Maintain a minimum clear space equal to the width of one V-arm (approximately 25% of the mark width) on all sides. No text, graphics, or other visual elements should intrude into this zone.

1x 1x

Minimum Sizes

The full logo mark (hex + V) should not be rendered smaller than 32px. Below 32px, use the simplified favicon variant (V-only at 16px). The wordmark lockup minimum width is 120px.

64px

32px (min full mark)

16px (simplified)

Usage Rules

Do

Use provided SVG or PNG assets for consistency
Maintain the original proportions of the mark
Use dark mark on light backgrounds, cyan/white on dark
Use brand cyan (#22D3EE) for decorative/marketing uses on dark
Use authority cyan (#0891B2) for functional/UI contexts
Allow adequate clear space around the mark

Do Not

Rotate, skew, or distort the logo
Add drop shadows, glows, or other effects
Place on busy backgrounds without sufficient contrast
Change the stroke widths or proportions
Use green/emerald for the logo mark (emerald is status only)
Render the full mark below 32px (use simplified favicon)

Product Marks

Each product in the Vective ecosystem has a distinct mark that wraps the sacred V in a unique visual metaphor. All marks share the same V geometry, ensuring brand coherence while communicating each product's purpose.

MAGIC

Command rings + AI spark stars — Platform orchestration, AI authority

magic-mark-cyan.svg

512 x 512 · SVG

SVG

PNG

magic-mark-dark.svg

512 x 512 · SVG

SVG

PNG

magic-mark-white.svg

512 x 512 · SVG

SVG

PNG

magic-wordmark-dark.svg

520 x 120 · SVG

Download SVG

magic-wordmark-white.svg

520 x 120 · SVG

Download SVG

magic-badge.svg

160 x 32 · SVG

Download SVG

Trivium

Knowledge rings (grammar/logic/rhetoric) — Compounding knowledge

trivium-mark-cyan.svg

512 x 512 · SVG

SVG

PNG

trivium-mark-dark.svg

512 x 512 · SVG

SVG

PNG

trivium-mark-white.svg

512 x 512 · SVG

SVG

PNG

trivium-wordmark-dark.svg

520 x 120 · SVG

Download SVG

trivium-wordmark-white.svg

520 x 120 · SVG

Download SVG

trivium-badge.svg

160 x 32 · SVG

Download SVG

Maestro

Hex border + connection nodes — Agent orchestration hub

maestro-mark-cyan.svg

512 x 512 · SVG

SVG

PNG

maestro-mark-dark.svg

512 x 512 · SVG

SVG

PNG

maestro-mark-white.svg

512 x 512 · SVG

SVG

PNG

maestro-wordmark-dark.svg

520 x 120 · SVG

Download SVG

maestro-wordmark-white.svg

520 x 120 · SVG

Download SVG

maestro-badge.svg

160 x 32 · SVG

Download SVG

Assistant

Speech bubble + typing dots — Conversational AI interface

assistant-mark-cyan.svg

512 x 512 · SVG

SVG

PNG

assistant-mark-dark.svg

512 x 512 · SVG

SVG

PNG

assistant-mark-white.svg

512 x 512 · SVG

SVG

PNG

assistant-wordmark-dark.svg

520 x 120 · SVG

Download SVG

assistant-wordmark-white.svg

520 x 120 · SVG

Download SVG

assistant-badge.svg

160 x 32 · SVG

Download SVG

Watcher

Radar/lens rings + scan arcs — Monitoring and observation

watcher-mark-cyan.svg

512 x 512 · SVG

SVG

PNG

watcher-mark-dark.svg

512 x 512 · SVG

SVG

PNG

watcher-mark-white.svg

512 x 512 · SVG

SVG

PNG

watcher-wordmark-dark.svg

520 x 120 · SVG

Download SVG

watcher-wordmark-white.svg

520 x 120 · SVG

Download SVG

watcher-badge.svg

160 x 32 · SVG

Download SVG

Vective System

Layered hex + code brackets — Methodology and building blocks

vective-system-mark-cyan.svg

512 x 512 · SVG

SVG

PNG

vective-system-mark-dark.svg

512 x 512 · SVG

SVG

PNG

vective-system-mark-white.svg

512 x 512 · SVG

SVG

PNG

vective-system-wordmark-dark.svg

520 x 120 · SVG

Download SVG

vective-system-wordmark-white.svg

520 x 120 · SVG

Download SVG

vective-system-badge.svg

160 x 32 · SVG

Download SVG

Each product directory contains 3 mark variants (cyan/dark/white), 2 wordmarks (dark/white), 1 badge, and PNG rasters at 512, 256, 128, 64, and 32px.

Color Palette

The palette is cyan-driven with white surfaces. Emerald green appears sparingly as a secondary accent for success states and operational indicators.

Primary Accents

Authority Cyan

#0891B2

rgb(8, 145, 178)

CTAs, links, active nav, focus rings

Vective Cyan (Brand)

#22D3EE

rgb(34, 211, 238)

Logo on dark, decorative, marketing

Life Emerald

#059669

rgb(5, 150, 105)

Success states, "on target" only

Surfaces

Pure White

#FFFFFF

rgb(255, 255, 255)

Primary backgrounds, card surfaces

Slate Wash

#F8FAFC

rgb(248, 250, 252)

Panel backgrounds, sidebar fills

Cool Panel

#F1F5F9

rgb(241, 245, 249)

Data containers, code blocks

Text & Borders

Slate Deep

#0F172A

rgb(15, 23, 42)

Headings, body text, primary labels

Slate Mid

#64748B

rgb(100, 116, 139)

Descriptions, secondary labels

Steel Border

#E2E8F0

rgb(226, 232, 240)

Card borders, dividers

Print Color Reference (CMYK Approximations)

Color	Hex	CMYK (approx.)	Pantone (nearest)
Authority Cyan	#0891B2	C:80 M:15 Y:20 K:0	PMS 7710 C
Vective Cyan	#22D3EE	C:65 M:0 Y:5 K:0	PMS 311 C
Life Emerald	#059669	C:85 M:0 Y:65 K:15	PMS 7723 C
Slate Deep	#0F172A	C:85 M:70 Y:45 K:75	PMS Black 6 C

CMYK and Pantone values are approximations. Request press proofs to verify color accuracy before production runs.

Typography

Three typefaces form the Vective AI type system: Space Grotesk for display and headings, Inter for body text, and JetBrains Mono for data and code.

Display — Space Grotesk

Autonomous AI agents that deliver measurable results

Space Grotesk 700 36-48px letter-spacing: -0.02em

Predictive quality, autonomous scheduling, real-time optimization

Space Grotesk 600 20-28px letter-spacing: -0.01em

Body — Inter

Vective AI deploys autonomous agents that monitor, predict, and optimize business operations in real time. Our platform orchestrates AI workflows end-to-end, delivering measurable efficiency improvements within weeks.

Inter 400 15-16px line-height: 1.7

Labels, navigation items, and button text use Inter 600 for emphasis without shifting to a display face.

Inter 600 15-16px navigation, labels, buttons

Data — JetBrains Mono

      OEE: 87.4% | Availability: 92.1% | Performance: 95.3% | Quality: 99.6%

      [NOMINAL] Line 3 — OPC.DA://PLC01/ProductionCount = 14,287

JetBrains Mono 400-500 12-14px metrics, code, OPC paths

Google Fonts Import

/* Google Fonts CDN */
https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap

Favicon & App Icons

The full mark is used at 32px and above. At 16px, the hexagonal border details are not legible, so a simplified variant with just the V and minimal hex suggestion is used instead.

32px favicon

Download

16px favicon (simplified)

Download

Apple Touch Icon

Download

favicon.ico

Multi-resolution ICO file containing 16px, 32px, and 48px variants for maximum browser compatibility.

Download favicon.ico

HTML Implementation

<link rel="icon" type="image/svg+xml" href="/brand/favicon/favicon.svg">
<link rel="icon" type="image/x-icon" href="/brand/favicon/favicon.ico">
<link rel="apple-touch-icon" href="/brand/favicon/apple-touch-icon.svg">

Design Tokens

Consumable design tokens are available as CSS custom properties and JSON. Import the CSS file directly or use the JSON for build toolchains.

CSS Custom Properties

/* tokens/tokens.css */
:root {
  /* Colors */
  --vective-authority-cyan: #0891B2;
  --vective-brand-cyan: #22D3EE;
  --vective-life-emerald: #059669;
  --vective-slate-deep: #0F172A;
  --vective-white: #FFFFFF;

  /* Typography */
  --vective-font-display: 'Space Grotesk', sans-serif;
  --vective-font-body: 'Inter', sans-serif;
  --vective-font-mono: 'JetBrains Mono', monospace;
}

Download tokens.css Download tokens.json

CDN Usage

/* Link in your HTML */
<link rel="stylesheet" href="https://vectiveai.com/brand/tokens/tokens.css">

/* Then use in your CSS */
color: var(--vective-authority-cyan);
font-family: var(--vective-font-display);

Asset Inventory

All production assets are in the brand-kit/ directory. SVGs are the source of truth; PNGs are generated from them via the included script.

Directory Structure

brand-kit/
  logo-mark/svg/         # Standalone mark in 5 variants
  wordmark/svg/          # Mark + "Vective" and "Vective AI"
  products/{name}/        # Product marks: magic/, trivium/, maestro/, etc.
  favicon/               # Full, 32px, 16px, apple-touch-icon, favicon.ico
  social/svg/            # Profile pics, LinkedIn/Twitter/GitHub/OG
  banners/svg/           # Headers and hero banners
  email/                 # Signature banner and compact logo
  print/svg/             # Embroidery, business cards
  tokens/                # tokens.css and tokens.json
  generate-pngs.sh       # PNG batch generator
  brand-guidelines.html # This document

PNG Generation

# Install dependency
brew install librsvg

# Generate all PNGs
./generate-pngs.sh

# Generate specific sizes
./generate-pngs.sh --sizes 512,256

# Process only one directory
./generate-pngs.sh --dir logo-mark