MyContactApp — Visual Reference

Complete visual specifications for developer implementation

📦 Final Developer Package — November 2025

💬 Chat Window Preview

👤
M.I.C.A.H.
John Smith's Assistant • 🔥 3-day streak
Hi! I'm M.I.C.A.H., John's AI assistant. 👋

How can I help you today?
Powered by MyContactApp

📐 Chat Window Specs

Size 350 × 500px
Position Fixed, bottom-right, 20px offset
Border Radius 20px
Background #1a1a2e or user brand
Border 2px solid PRIMARY_COLOR
Box Shadow 0 0 30px rgba(PRIMARY, 0.3)

Message Bubbles

User (right) Gradient: SECONDARY → PRIMARY
Radius: 18px 18px 4px 18px
AI (left) rgba(255,255,255,0.1)
Radius: 18px 18px 18px 4px
Max Width 85%
Padding 12px 16px

Input Area

📎 Attach file/image
😊 Emoji picker
🎤 tap Speech-to-text
🎤 hold Record voice message
➤ Send

Expandable Input

Default 44px (single line)
Auto-expand Up to 4 lines (120px)
User drag Up to 50% of window

📱 QR Pop Modal Preview

The new way to share a link

Send Email
TAP or SCAN
QR CODE
 

📐 QR Pop Modal Specs

⚠️ ONLY TWO WHITE ELEMENTS:
1. QR code background
2. "Copy" button text

Everything else = brand colors or black

Clickable Elements

X button ✅ Closes modal
Label text ❌ Display only
"TAP or SCAN" ❌ Instruction only
"QR CODE" ❌ Instruction only
QR code image ✅ Tap OR Scan → opens link
Copy button ✅ Copies URL
Share This ✅ Native share

Text Animation

"TAP or SCAN" and "QR CODE" have:

  • Brand gradient (not solid color)
  • Breathing — subtle scale pulse
  • Gradient wave — slow sweep left ↔ right

Element Colors

Background #000000 (black)
Label #9CA3AF (muted gray)
TAP or SCAN Brand gradient
QR CODE Brand gradient
QR pattern Brand color (dark)
QR background #FFFFFF (white)
Copy text #FFFFFF (white)
Share This Brand gradient

🎬 Animation CSS

.qr-modal-tap-scan,
.qr-modal-qr-text {
    /* Brand gradient on text */
    background: linear-gradient(
        90deg,
        var(--brand-primary),
        var(--brand-secondary),
        var(--brand-primary)
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Bold italic */
    font-weight: bold;
    font-style: italic;
    
    /* Breathing + Wave animations */
    animation: 
        breathing 3s ease-in-out infinite,
        gradient-wave 4s ease-in-out infinite;
}

@keyframes breathing {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.02); opacity: 1; }
}

@keyframes gradient-wave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

🎭 Tone Selector (8 Tones)

Button Size 44 × 44px
Shape Circle
Active BG Brand gradient
Inactive BG rgba(255,255,255,0.1)
Active Scale 1.1
Gap 8px

Standard Tones (7)

🎯

Straight

Animation: Quick pulse

"Investment consulting, portfolio analysis, strategy sessions. Book below."
💼

Professional

Animation: Smooth glow

"John offers investment consulting, portfolio analysis, and strategic planning sessions tailored to your goals."
📚

Educational

Animation: Floating 💡

"John specializes in: (1) Investment consulting, (2) Portfolio analysis, (3) Strategy sessions..."
🚀

Hype

Animation: Confetti 🎉

"John's got the FULL package! 🔥 Let's BUILD that wealth! 💪💰"
😂

Comedy

Animation: Emoji rain 😂🤣

"John's basically a money whisperer 💰 — unlike your last financial advisor... 😏"
🤝

Empathetic

Animation: Heart pulse 💚

"I understand navigating finances can feel overwhelming — you're not alone."
⚡

Quick

Animation: Lightning flash

"• Investment consulting
• Portfolio analysis
• Strategy sessions
→ [Book Now]"

🏴‍☠️ Secret Tone: Pirate (Easter Egg)

Unlock Keywords: "pirate", "arrr", "ahoy"

Animation: Skull + waves 🏴‍☠️🌊

Badge Awarded: Pirate Captain 🏴‍☠️

"Ahoy, landlubber! Captain John be offerin' treasure huntin' (investment consultin'), map readin' (portfolio analysis), and voyage plannin'! Set sail, matey! 🏴‍☠️💰⚓"
// Unlock Logic
if (message.includes('pirate') || 
    message.includes('arrr') || 
    message.includes('ahoy')) {
    unlockPirateTone();
    awardBadge('pirate-captain');
}

🔘 Button System

Core Principle: NO hardcoded buttons. Admin creates ANY button with ANY label. System tracks clicks on ALL buttons equally.

Button Display

Button Specs

Padding 14px 18px
Background rgba(255,255,255,0.05)
Border 1px solid rgba(PRIMARY, 0.3)
Border Radius 12px
Width Full width
Icon Size 20px
Gap 12px

Button Configuration

Label Free text
Icon Emoji or upload
URL Any link
Track Clicks On/Off
Link Behavior Direct OR QR Pop Modal
Animation None/Pulse/Glow/Bounce/Confetti
Badge Trigger Award badge after X clicks

Link Behavior Options

Direct Click → Opens URL immediately
QR Pop Modal Click → Modal appears first

🎨 Brand Color System

Auto-Apply Logic:
User has brand colors → Use THEIR colors
User has no brand colors → Use MCA defaults

Default MCA Colors

 
Green
#00ff66
 
Blue
#17a9e3
 
Dark
#0d1117
 
Red
#ff4444
 
Orange
#ff9600
 
Purple
#9333ea

Gradient

 
background: linear-gradient(270deg, SECONDARY, PRIMARY);

Where Brand Colors Apply

Element Uses
Chat border PRIMARY
Chat box shadow PRIMARY (0.3 opacity)
Send button PRIMARY → SECONDARY gradient
Active tone PRIMARY → SECONDARY gradient
User messages SECONDARY → PRIMARY gradient
Quick reply borders PRIMARY (0.3 opacity)
QR Pop "TAP or SCAN" PRIMARY → SECONDARY gradient
QR code pattern PRIMARY (dark)
"Share This" button PRIMARY → SECONDARY gradient

📐 Quick Reference — All Measurements

Chat Window

Size 350 × 500px
Border Radius 20px
Border 2px solid PRIMARY
Shadow 0 0 30px rgba(PRIMARY, 0.3)

Tone Buttons

Size 44 × 44px
Shape Circle
Active Scale 1.1

Input Area

Min Height 44px
Max Height (auto) 120px
Max Height (drag) 50% of window
Border Radius 25px

Message Bubbles

Max Width 85%
Padding 12px 16px
Border Radius 18px (4px tail)

Quick Reply Buttons

Padding 14px 18px
Border Radius 12px
Width Full width

Accessibility

Touch Targets 44 × 44px min
Font Size 16px min
Contrast 4.5:1 min
MyContactApp Smart Advisor — Complete Developer Package — November 2025
Exchange Info 🌟
 Share