Vibe AI Branding Guidelines

A comprehensive guide to our visual identity, designed to create a cohesive and recognizable brand experience across all touchpoints.

Explore Guidelines Download Assets

Brand Overview

Vibe AI represents the intersection of cutting-edge artificial intelligence and human-centered design. Our brand identity reflects our commitment to creating AI solutions that are not only powerful and intelligent but also accessible, ethical, and emotionally resonant.

The Vibe AI brand is built on four core principles:

Our visual language combines elements of futuristic technology with warm, human touches. We use gradients to represent the fluid nature of intelligence, geometric shapes for precision and structure, and organic elements to symbolize growth and adaptability.

Innovation

We push boundaries and explore new frontiers in AI, constantly seeking novel solutions to complex problems.

Trust

We build AI systems that are transparent, explainable, and designed with human well-being as the primary concern.

Inclusivity

We create AI that works for everyone, respecting diversity and ensuring accessibility across all demographics.

Growth

We embrace continuous learning and improvement, both in our AI systems and in ourselves as an organization.

Color Palette

Our color palette is designed to convey innovation, trust, and accessibility. The primary purple represents creativity and vision, while the secondary cyan symbolizes technology and clarity. Together, they create a vibrant, forward-looking aesthetic that distinguishes Vibe AI in the marketplace.

Primary Colors

Primary
Primary
#6e44ff
Primary Light
Primary Light
#9e7dff
Primary Dark
Primary Dark
#4d2db7

Secondary Colors

Secondary
Secondary
#00e5ff
Secondary Light
Secondary Light
#73ffff
Secondary Dark
Secondary Dark
#00b2cc

Neutral Colors

Neutral 900
Neutral 900
#1f2933
Neutral 800
Neutral 800
#323f4b
Neutral 700
Neutral 700
#4a5568
Neutral 600
Neutral 600
#7b8794
Neutral 500
Neutral 500
#9aa5b1
Neutral 400
Neutral 400
#cbd2d9
Neutral 300
Neutral 300
#e4e7eb
Neutral 200
Neutral 200
#f5f7fa
Neutral 100
Neutral 100
#ffffff

Semantic Colors

Success
Success
#36b37e
Warning
Warning
#ffab00
Error
Error
#ff5630
Info
Info
#00b8d9

Gradients

Primary Gradient
Primary Gradient
linear-gradient(90deg, #6e44ff, #00e5ff)
Dark Gradient
Dark Gradient
linear-gradient(90deg, #4d2db7, #00b2cc)
Light Gradient
Light Gradient
linear-gradient(90deg, #9e7dff, #73ffff)

Typography

Our typography system combines the clean, modern aesthetic of Inter for body text with the distinctive personality of Space Grotesk for headings. This pairing creates a balance between readability and brand character, ensuring our communications are both accessible and memorable.

Primary Font: Inter

Body Text (Regular - 16px)

The quick brown fox jumps over the lazy dog. Vibe AI creates intelligent solutions that enhance human potential.

Body Text (Medium - 16px)

The quick brown fox jumps over the lazy dog. Vibe AI creates intelligent solutions that enhance human potential.

Body Text (Semibold - 16px)

The quick brown fox jumps over the lazy dog. Vibe AI creates intelligent solutions that enhance human potential.

Body Text (Bold - 16px)

The quick brown fox jumps over the lazy dog. Vibe AI creates intelligent solutions that enhance human potential.

Secondary Font: Space Grotesk

Heading 1 (Bold - 3.052rem)

Vibe AI

Heading 2 (Bold - 2.441rem)

Vibe AI

Heading 3 (Bold - 1.953rem)

Vibe AI

Heading 4 (Bold - 1.563rem)

Vibe AI

Monospace Font: JetBrains Mono

Code (Regular - 14px)
const vibeAI = {
  name: "Vibe AI",
  mission: "Enhancing human potential through intelligent systems",
  values: ["innovation", "trust", "inclusivity", "growth"]
};

Typography Guidelines

Hierarchy

Maintain clear typographic hierarchy using size, weight, and spacing to guide users through content. Never use more than three levels of headings in a single section.

Readability

Ensure text has sufficient contrast with backgrounds. Body text should be at least 16px. Line height should be 1.5-1.6 for optimal readability.

Consistency

Use the designated fonts consistently across all materials. Do not introduce additional typefaces without approval from the brand team.

UI Components

Our component library is designed to create consistent, accessible, and visually appealing interfaces across all Vibe AI products and touchpoints. Each component embodies our brand principles while ensuring optimal usability.

Buttons

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

Cards

Card Title

This is a sample card component used to display content in a contained format.

<div class="card">
  <h5 class="card-title">Card Title</h5>
  <p>Card content goes here.</p>
</div>

Text Gradient

Gradient Text

<h3 class="text-gradient">Gradient Text</h3>

Background Gradient

Gradient Background
<div class="bg-gradient">Gradient Background</div>

Icons

<i data-feather="cpu"></i>
<i data-feather="zap"></i>
<i data-feather="shield"></i>
<i data-feather="users"></i>

Logo

<div class="logo">
  <div class="logo-icon">
    <i data-feather="cpu"></i>
  </div>
  <span>Vibe AI</span>
</div>

Usage Guidelines

These guidelines ensure consistent application of our brand elements across all touchpoints. Proper usage strengthens brand recognition and maintains the integrity of our visual identity.

Do's

Use the complete logo

Always use the complete logo with both the icon and wordmark when possible. Maintain proper spacing around the logo.

Follow the color palette

Stick to the defined color palette for all brand applications. Use primary colors for emphasis and neutral colors for backgrounds and supporting elements.

Maintain typography hierarchy

Use Space Grotesk for headings and Inter for body text. Maintain proper sizing relationships between different text elements.

Use gradients purposefully

Apply gradients to create visual interest and emphasize important elements, but use them sparingly to maintain their impact.

Don'ts

Don't distort the logo

Never stretch, compress, or otherwise distort the logo. Always scale proportionally.

Don't use unauthorized colors

Avoid using colors outside our defined palette. Don't create new color combinations without approval.

Don't mix typefaces

Don't introduce additional typefaces or font styles that aren't part of our typography system.

Don't overuse effects

Avoid excessive use of gradients, shadows, or animations that could distract from the content or make interfaces difficult to use.

Brand Voice

Our written communication should reflect our brand personality: innovative yet approachable, expert yet inclusive, confident yet humble. When creating content for Vibe AI:

Be Clear

Explain complex AI concepts in accessible language. Avoid unnecessary jargon and acronyms. Focus on benefits rather than technical specifications.

Be Human

Write conversationally and with empathy. Address the reader directly. Share stories that illustrate the human impact of our technology.

Be Inspiring

Communicate the possibilities our AI creates. Focus on positive outcomes and future potential. Balance optimism with responsibility.

Download Brand Assets

Access our complete brand kit, including logo files, color palettes, typography, and templates for various applications.

Download Brand Kit