videos2

Vivun Unified Design System

Brand consistency elements that unify all gradient systems while maintaining distinct identities and purposes

What Keeps Our Brand Unified

Typography System

Poppins font family across all systems with consistent clamp() sizing and weight hierarchy

Glassmorphism

Unified blur effects, opacity values, and border treatments across all gradient systems

Spacing & Layout

Consistent clamp() spacing system and grid patterns that scale fluidly across devices

Border Radius

Standardized rounded corner system (8px to 24px) that creates cohesive visual rhythm

Animation Language

Consistent easing functions, duration scales, and purposeful motion across all systems

Shadow Hierarchy

Unified depth system with consistent shadow values that work across all gradient applications

Gradient Systems & Color Palettes

Vivun Corporate

Company-level messaging, corporate identity, and established brand recognition

Company Branding • Corporate Communications

Ava Agent Identity

Ava's personality, direct capabilities, and AI teammate characteristics

Ava Introductions • Capability Descriptions

Agent Intelligence

Sophisticated AI capabilities, enterprise-grade intelligence, technical infrastructure

Advanced AI Features • Technical Capabilities

More Power to Sales

Results, outcomes, and success metrics enabled by AI assistance

Performance Metrics • Success Indicators

Real-World Applications

Come work for Vivun!

Work with the best! Come change B2B sales for good.

Hi, I'm Ava!

Your AI Sales Teammate

I join your calls and offer real-time guidance

Advanced AI Engine

Performance Impact

+58%

Sales Velocity

Measurable outcomes and transformation

Missing Design System Elements

Essential patterns, messaging, and components found in project files that complete the Vivun design system

Messaging & Voice Patterns

Ava's Conversational Voice

Your AI Sales Teammate

First-person patterns: "I join your calls, do your work, and offer real-time guidance"

Capability statements: "Ask me anything about your deals, customers, or product"

Experience claims: "I've analyzed thousands of successful sales conversations"

Supportive language: "Let me handle that for you"

Performance Messaging Templates

Without Ava

2-3 hours

→

With Ava

Instant

Metric formats: "+58% boost", "-47% faster", "65% shorter"

Transformation language: "Accelerated", "Elevated", "Improved"

Sticky Navigation System

Viewport Centering Technique

.sticky-nav {
    position: sticky;
    top: 50vh; /* Viewport center */
    transform: translateY(-50%); /* Perfect center */
    z-index: 1000;
    pointer-events: none; /* Prevent blocking */
}
                    

Signature feature: Gradient underlines that slide in on hover using the More Power to Sales gradient

Ava Orb Animation System

Complete Orb with Data Rings

/* Responsive orb sizing */
width: clamp(240px, 26vw, 384px);
height: clamp(240px, 26vw, 384px);

/* Signature pulse animation */
animation: orbPulse 4s ease-in-out infinite;

/* Data flow rings */
animation: dataFlow 15s linear infinite;
                    

Agent Intelligence Hexagon System

Technical Capability Representation

Usage: Enterprise AI features, sophisticated capabilities, technical intelligence representations

Timeline & Flow Patterns

Vertical Timeline with Gradient Connector

Step 1: Discovery

Surface requests that impact revenue

Step 2: Capture

Reliable way to capture feedback

Step 3: Alignment

Keep Sales and Product in sync

Color Psychology & Funnel Progression

Sales Funnel Dark-to-Light Journey

First Call

Qualification

Solution

Business Case

Negotiation

Win

Color temperature progression: Cool navies (stability, trust) → Warm purples (innovation) → Energetic pinks (success)

Psychological journey: Unknown territory (#0f0d29) → Bright success (#f472b6)

White Background Strategy

Glassmorphism foundation: Requires white base for frosted glass effect
Text legibility: Ensures AAA contrast compliance (#13153c on white = 11.85:1)
Gradient separation: Neutral space prevents color conflicts
B2B psychology: Connotes professionalism, cleanliness, and trustworthiness

Component Isolation Strategy

Unique Class Prefixes & CSS Reset

Isolated Component Example

This component uses unique class prefixes and complete CSS isolation

/* Component isolation pattern */
.ava-component {
    all: initial; /* Reset everything */
    font-family: inherit;
    box-sizing: border-box;
    isolation: isolate; /* Create stacking context */
}

/* Scope all child elements */
.ava-component *,
.ava-component *::before,
.ava-component *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
                    

Prefix examples: ava-, vivun-, mps-, ai-, company-, brand-

Customer Testimonial Patterns

Premium Glassmorphism Testimonials

"One of the things that's been incredible with Ava has been our capacity to actually automate win reviews and create an artifact with all the detail to our questions, but it's backed actually by referenceable customer quotes."

James Frey

VP Sales, Coder

Key elements: MPS gradient accent line, animated avatar glow, glassmorphism background

Animation System Specifications

Consistent Easing & Duration

/* Standard easing function */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

/* Staggered animation delays */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

/* Motion preference accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
                    