VoiceLock™ Brand Voice Setup Kit

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}

.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
text-align: center;
}

.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}

.lock-icon {
font-size: 3em;
margin-bottom: 15px;
}

.promise {
font-size: 1.1em;
opacity: 0.95;
margin-top: 15px;
}

.content {
padding: 40px;
}

.section {
margin-bottom: 40px;
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
border-left: 5px solid #667eea;
}

.section h2 {
color: #667eea;
margin-bottom: 20px;
font-size: 1.8em;
}

.section-intro {
color: #666;
margin-bottom: 20px;
font-style: italic;
}

.slider-container {
margin: 25px 0;
}

.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-weight: 600;
color: #333;
}

.slider-endpoints {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 0.9em;
color: #666;
}

input[type=”range”] {
width: 100%;
height: 8px;
border-radius: 5px;
background: #ddd;
outline: none;
-webkit-appearance: none;
}

input[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input[type=”range”]::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.cta-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}

.cta-option {
padding: 15px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
}

.cta-option:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.cta-option.selected {
background: #667eea;
color: white;
border-color: #667eea;
}

textarea, input[type=”text”] {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-family: inherit;
font-size: 1em;
margin-top: 10px;
transition: border-color 0.3s;
}

textarea:focus, input[type=”text”]:focus {
outline: none;
border-color: #667eea;
}

textarea {
min-height: 120px;
resize: vertical;
}

.example-box {
background: white;
padding: 20px;
border-radius: 10px;
margin: 15px 0;
border-left: 4px solid #667eea;
}

.example-label {
font-weight: 600;
color: #667eea;
margin-bottom: 10px;
}

.tag-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}

.tag {
background: #fff;
border: 2px solid #e0e0e0;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
}

.tag:hover {
border-color: #667eea;
background: #f0f4ff;
}

.tag.selected {
background: #667eea;
color: white;
border-color: #667eea;
}

.prompt-box {
background: #2d3748;
color: #e2e8f0;
padding: 20px;
border-radius: 10px;
margin: 15px 0;
position: relative;
}

.prompt-box pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: ‘Monaco’, ‘Courier New’, monospace;
font-size: 0.9em;
line-height: 1.6;
}

.copy-btn {
position: absolute;
top: 15px;
right: 15px;
background: #667eea;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 0.9em;
transition: background 0.3s;
}

.copy-btn:hover {
background: #5568d3;
}

.copy-btn.copied {
background: #48bb78;
}

.generate-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 40px;
border-radius: 10px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
width: 100%;
margin-top: 20px;
transition: transform 0.3s, box-shadow 0.3s;
}

.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.output-section {
background: #f0f4ff;
padding: 30px;
border-radius: 15px;
margin-top: 30px;
display: none;
}

.output-section.visible {
display: block;
}

.output-title {
font-size: 1.5em;
color: #667eea;
margin-bottom: 20px;
font-weight: 600;
}

.timer {
text-align: center;
font-size: 3em;
color: #667eea;
margin: 20px 0;
font-weight: 700;
}

.input-group {
margin-bottom: 20px;
}

.input-label {
font-weight: 600;
color: #333;
margin-bottom: 8px;
display: block;
}

.dos-donts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}

.do-column, .dont-column {
background: white;
padding: 20px;
border-radius: 10px;
}

.do-column {
border-left: 4px solid #48bb78;
}

.dont-column {
border-left: 4px solid #f56565;
}

.column-title {
font-weight: 600;
margin-bottom: 15px;
font-size: 1.1em;
}

.do-column .column-title {
color: #48bb78;
}

.dont-column .column-title {
color: #f56565;
}

@media (max-width: 768px) {
.dos-donts {
grid-template-columns: 1fr;
}

.header h1 {
font-size: 1.8em;
}

.content {
padding: 20px;
}
}

VoiceLock

Lock in your brand voice in 15 minutes. Never sound generic again.

15:00

Sliders

Slide to set your brand’s personality dimensions

Tone
Professional

Formal/Corporate
Casual/Conversational

Energy
Balanced

Calm/Understated
Energetic/Excitable

Complexity
Moderate

Simple/Direct
Sophisticated/Nuanced

Humor
Occasional

Serious/Straightforward
Playful/Witty

Empathy
Supportive

Direct/Efficient
Warm/Nurturing

CTA Menu

Select your go-to calls-to-action (choose up to 5)

Get started
Learn more
Try it free
Book a demo
Join now
Grab yours
Dive in
Start building
Sign up
Get the guide
Download now
See it in action

Custom CTAs (comma-separated):

Sound-Like-Me Examples

Paste 3 examples of your best copy that captures your voice

Example 1: (Headline, social post, or email)

Example 2: (Different format or context)

Example 3: (Different tone or purpose)

Dos & Don’ts

Define your non-negotiables

Always Do

Never Do

Taboo Words & Phrases

Words and phrases to NEVER use in your copy

Synergy
Leverage
Disrupt
Game-changer
Best-in-class
Cutting-edge
Innovative solution
Revolutionary
Utilize
Empower
Ecosystem
Seamless

Add your own taboo words/phrases (comma-separated):

Generate My VoiceLock™ Prompts

Your VoiceLock™ Prompts Are Ready!

Starter Prompt #1: General Content Creation

Copy

Starter Prompt #2: Email/Sales Copy

Copy

Starter Prompt #3: Social Media

Copy

“Make It More Me” Fix Prompts

Use these when the output doesn’t quite sound like you

Fix #1: Too Formal/Stiff

Copy
Rewrite this in my brand voice. Make it less formal and more conversational. Reference my voice profile where I specified [insert your tone preference]. Keep the key points but make it sound like I’m talking to a friend.

Fix #2: Too Generic/Bland

Copy
This sounds too generic. Add more personality based on my voice examples. Make it more specific, use my typical CTAs, and inject some of my characteristic [energy/humor/empathy]. Avoid any taboo words from my list.

Fix #3: Wrong Energy Level

Copy
Adjust the energy level of this copy. Based on my voice profile, I need this to be [more/less] energetic. Dial it to a [1-5] on the energy scale I specified, while keeping the core message intact.

Fix #4: Breaking Voice Rules

Copy
Review this against my voice “Don’ts” list and rewrite to fix any violations. Check for: taboo words, sentence length issues, jargon, and formatting problems. Keep what works, fix what doesn’t.

// Timer functionality
let timeLeft = 15 * 60; // 15 minutes in seconds
let timerInterval;

function startTimer() {
timerInterval = setInterval(() => {
timeLeft–;
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
document.getElementById(‘timer’).textContent =
`${minutes.toString().padStart(2, ‘0’)}:${seconds.toString().padStart(2, ‘0’)}`;

if (timeLeft {
const element = document.getElementById(`${slider}-slider`);
const valueDisplay = document.getElementById(`${slider}-value`);

element.addEventListener(‘input’, (e) => {
const value = parseInt(e.target.value);
valueDisplay.textContent = sliders[slider][value – 1];
});
});

// CTA selection
const ctaGrid = document.getElementById(‘cta-grid’);
const selectedCTAs = new Set();

ctaGrid.addEventListener(‘click’, (e) => {
if (e.target.classList.contains(‘cta-option’)) {
const cta = e.target.dataset.cta;

if (selectedCTAs.has(cta)) {
selectedCTAs.delete(cta);
e.target.classList.remove(‘selected’);
} else if (selectedCTAs.size < 5) { selectedCTAs.add(cta); e.target.classList.add('selected'); } else { alert('You can select up to 5 CTAs. Deselect one first.'); } } }); // Taboo words selection const tagContainer = document.querySelector('.tag-container'); const selectedTaboos = new Set(); tagContainer.addEventListener('click', (e) => {
if (e.target.classList.contains(‘tag’)) {
const word = e.target.textContent;

if (selectedTaboos.has(word)) {
selectedTaboos.delete(word);
e.target.classList.remove(‘selected’);
} else {
selectedTaboos.add(word);
e.target.classList.add(‘selected’);
}
}
});

// Generate prompts
function generatePrompts() {
// Collect all data
const voiceProfile = {
tone: document.getElementById(‘tone-slider’).value,
toneLabel: sliders.tone[document.getElementById(‘tone-slider’).value – 1],
energy: document.getElementById(‘energy-slider’).value,
energyLabel: sliders.energy[document.getElementById(‘energy-slider’).value – 1],
complexity: document.getElementById(‘complexity-slider’).value,
complexityLabel: sliders.complexity[document.getElementById(‘complexity-slider’).value – 1],
humor: document.getElementById(‘humor-slider’).value,
humorLabel: sliders.humor[document.getElementById(‘humor-slider’).value – 1],
empathy: document.getElementById(’empathy-slider’).value,
empathyLabel: sliders.empathy[document.getElementById(’empathy-slider’).value – 1],
ctas: Array.from(selectedCTAs),
customCTAs: document.getElementById(‘custom-ctas’).value,
example1: document.getElementById(‘example1’).value,
example2: document.getElementById(‘example2’).value,
example3: document.getElementById(‘example3’).value,
dos: document.getElementById(‘dos’).value,
donts: document.getElementById(‘donts’).value,
taboos: Array.from(selectedTaboos),
customTaboos: document.getElementById(‘custom-taboos’).value
};

// Combine CTAs
let allCTAs = voiceProfile.ctas;
if (voiceProfile.customCTAs) {
allCTAs = allCTAs.concat(voiceProfile.customCTAs.split(‘,’).map(s => s.trim()));
}

// Combine taboos
let allTaboos = voiceProfile.taboos;
if (voiceProfile.customTaboos) {
allTaboos = allTaboos.concat(voiceProfile.customTaboos.split(‘,’).map(s => s.trim()));
}

// Generate Prompt 1: General Content
const prompt1 = `BRAND VOICE PROFILE – VoiceLock™

Write all content using this exact voice profile:

TONE & STYLE:
– Tone: ${voiceProfile.toneLabel} (${voiceProfile.tone}/5)
– Energy: ${voiceProfile.energyLabel} (${voiceProfile.energy}/5)
– Complexity: ${voiceProfile.complexityLabel} (${voiceProfile.complexity}/5)
– Humor: ${voiceProfile.humorLabel} (${voiceProfile.humor}/5)
– Empathy: ${voiceProfile.empathyLabel} (${voiceProfile.empathy}/5)

PREFERRED CTAs:
${allCTAs.map(cta => `- ${cta}`).join(‘n’)}

VOICE EXAMPLES (match this style):
Example 1: ${voiceProfile.example1 || ‘[Not provided]’}

Example 2: ${voiceProfile.example2 || ‘[Not provided]’}

Example 3: ${voiceProfile.example3 || ‘[Not provided]’}

ALWAYS DO:
${voiceProfile.dos || ‘- [Not specified]’}

NEVER DO:
${voiceProfile.donts || ‘- [Not specified]’}

TABOO WORDS/PHRASES (never use these):
${allTaboos.join(‘, ‘)}

—
Now write [describe your content need here] using this exact voice profile.`;

// Generate Prompt 2: Email/Sales Copy
const prompt2 = `VOICELOCK™ PROFILE – EMAIL/SALES COPY

Write this email/sales copy matching my brand voice exactly:

VOICE SETTINGS:
– Tone: ${voiceProfile.toneLabel}
– Energy: ${voiceProfile.energyLabel}
– Empathy: ${voiceProfile.empathyLabel}

USE THESE CTAs ONLY:
${allCTAs.join(‘, ‘)}

MATCH THESE WRITING EXAMPLES:
${voiceProfile.example1 ? `”${voiceProfile.example1.substring(0, 150)}…”` : ‘[No examples provided]’}

WRITING RULES:
Do: ${voiceProfile.dos ? voiceProfile.dos.split(‘n’)[0] : ‘Follow brand guidelines’}
Don’t: ${voiceProfile.donts ? voiceProfile.donts.split(‘n’)[0] : ‘Break brand voice’}

BANNED WORDS: ${allTaboos.slice(0, 10).join(‘, ‘)}

—
Subject: [Your topic]
Write the email/sales copy here, maintaining my exact voice throughout.`;

// Generate Prompt 3: Social Media
const prompt3 = `VOICELOCK™ – SOCIAL MEDIA VOICE

Create social media content in my brand voice:

PERSONALITY SETTINGS:
– ${voiceProfile.toneLabel} tone
– ${voiceProfile.energyLabel} energy
– ${voiceProfile.humorLabel} humor level

VOICE REFERENCE:
Study how I write: ${voiceProfile.example1 ? `”${voiceProfile.example1.substring(0, 100)}…”` : ‘[Paste your examples in main profile]’}

CALLS-TO-ACTION TO USE:
${allCTAs.slice(0, 5).join(‘ | ‘)}

NEVER USE: ${allTaboos.slice(0, 8).join(‘, ‘)}

RULES:
${voiceProfile.dos ? ‘ ‘ + voiceProfile.dos.split(‘n’).slice(0, 3).join(‘n ‘) : ‘ Stay on brand’}

—
Platform: [Instagram/LinkedIn/Twitter/etc]
Topic: [Your topic]
Write the post in my voice:`;

// Display prompts
document.getElementById(‘prompt1’).textContent = prompt1;
document.getElementById(‘prompt2’).textContent = prompt2;
document.getElementById(‘prompt3’).textContent = prompt3;

// Show output section
document.getElementById(‘output-section’).classList.add(‘visible’);

// Scroll to output
document.getElementById(‘output-section’).scrollIntoView({ behavior: ‘smooth’ });
}

// Copy prompt functionality
function copyPrompt(button, promptId) {
const promptText = document.getElementById(promptId).textContent;
navigator.clipboard.writeText(promptText).then(() => {
button.textContent = ‘Copied! ✓’;
button.classList.add(‘copied’);

setTimeout(() => {
button.textContent = ‘Copy’;
button.classList.remove(‘copied’);
}, 2000);
});
}