Perfect — I have everything I need. Here's the complete structure before I write it:

- **Phase 0** — What is a Brand? (teaching: brand vs. brand identity, real examples, key insight)
- **Phase 1** — What is a Personal Brand? (4 components, first impression reflection)
- **Phase 2** — Reflect on Yourself (values, strengths, differentiator, voice adjectives, audience, UVP) → **Check in with Russ**
- **Phase 3** — Design Your Brand (archetype, color psychology, typography, brand-in-3-words) → **Review with Maria & Kayt**
- **Phase 4** — Build & Deliver (style guide, logo, LinkedIn, business card, portfolio entry) → **Final review with Russ**

Writing it now.


1. Yes. 2. Yes. Could be check in with me, Maria, and/or Kayt 3. Drop it 4. Let's start with what you think is appropriate


Write

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Brand Studio | Waukee APEX DCS</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

            Dashboard
            S4 Portfolio
            Personal Brand

Waukee APEX · DCS Standard 4

Personal Brand Studio

0 of 5 phases complete

            Phase 0 · Foundations
            <button class="step-btn active" id="btn-orientation" onclick="showSection('orientation')">

                🎯 What is a Brand?
            </button>

            Phase 1 · Context
            <button class="step-btn" id="btn-personal" onclick="showSection('personal')">

                👤 Personal Brand
            </button>

            Phase 2 · Discovery
            <button class="step-btn" id="btn-reflect" onclick="showSection('reflect')">

                🪞 Reflect on Yourself
            </button>

            Phase 3 · Design
            <button class="step-btn" id="btn-design" onclick="showSection('design')">

                🎨 Design Your Brand
            </button>

            Phase 4 · Deliver
            <button class="step-btn" id="btn-deliver" onclick="showSection('deliver')">

                🚀 Build & Deliver
            </button>

            <button class="btn-reset" onclick="clearData()">Reset All Data</button>

◆ Phase 0 · Foundations

What is a Brand?

Before you can design one, you need to understand what a brand actually is — and it's not what most people think.

                💡

A brand is not a logo. A logo is a mark. A brand is the total impression you make — the feeling, reputation, and associations that come to mind when someone thinks of you or an organization. You can design a logo in an afternoon. Building a brand takes years of consistent decisions.

Brand vs. Brand Identity — Know the Difference

Brand Identity is everything you can design: the logo, colors, fonts, tone of voice, and imagery. These are the tools you'll create in this project.

Brand is what people actually think, feel, and remember. It lives in the mind of the audience — not on your style guide.

Jeff Bezos described it this way: "Your brand is what people say about you when you're not in the room."

Your job as a brand designer is to close the gap — to make the identity so intentional and consistent that it shapes the brand in the direction you want. You can't fully control it, but you can deliberately shape it.

Real Brands — What They Actually Communicate

None of these brands are defined by their logo alone. They're defined by every consistent decision they make — what they say, how they say it, what they show, and what they don't.

Nike

Minimal, bold, black-and-white. "Just Do It." What do you feel? Determination. Performance. Challenge. The swoosh took $35 to design. The brand took decades of consistent messaging to build.

Apple

White space, one product per screen, no clutter. What do you feel? Simplicity. Innovation. Premium quality. They could show specs. They show feelings instead.

Patagonia

Earthy tones, rugged photography, no-frills type. What do you feel? Environmentalism. Authenticity. Anti-corporate. Their brand is built on what they refuse to do as much as what they do.

                🔑

The key insight. These brands didn't design a logo first and build a brand around it. They knew who they were and what they stood for — then designed everything to express that. That's the order this project follows too.

                <button class="btn-next" onclick="markVisited('orientation'); showSection('personal');">I Understand What a Brand Is →</button>

◆ Phase 1 · Context

What is a Personal Brand?

You already have one. The question is whether you're building it intentionally.

                ⚠

Every professional already has a personal brand — most people just haven't thought carefully about theirs. Your LinkedIn profile, how you introduce yourself, the quality of your work, the way you follow up after a meeting — all of it communicates something about you. Right now, that communication is either intentional or accidental.

Personal Branding in a Professional Context

Personal branding is the practice of intentionally shaping how others perceive you professionally. It's your reputation — and the story you tell about your skills, values, and approach.

For a student-associate at Waukee APEX, your personal brand is how clients, mentors, potential employers, and collaborators experience you. It shows up in:

The way you introduce yourself in a client meeting

Your LinkedIn profile and portfolio

The quality and consistency of your deliverables

How you follow up after a conversation

Your email signature, your business card, your online presence

You're building a brand whether you're intentional about it or not. This project makes it intentional.

The 4 Components of a Personal Brand

ValuesWhat you stand for. Your professional non-negotiables. The principles that guide your work even when no one is watching.

VoiceHow you communicate. Formal or conversational? Direct or diplomatic? Technical or accessible? Your voice should feel consistent across all your writing and presentations.

Visual IdentityThe colors, fonts, and imagery that represent you consistently — across your portfolio, LinkedIn, business card, and any materials you produce.

PresenceWhere and how you show up — LinkedIn, portfolio, in-person meetings, business card, handshake. Presence is where brand becomes real.

🪞 Reflection: Before You Design Anything

Take 5 minutes and answer both of these honestly. Don't edit yourself — first drafts are more useful than polished ones.

                How do you currently come across to a professional you've just met? What impression do you leave?
                <textarea class="field-input" id="impression-current" rows="3" placeholder="Be honest..." oninput="autoSave()"></textarea>
                How would you WANT to come across? What do you want people to remember about you?
                <textarea class="field-input" id="impression-goal" rows="3" placeholder="Be specific..." oninput="autoSave()"></textarea>

                <button class="btn-next" onclick="markVisited('personal'); showSection('reflect');">Start My Self-Reflection →</button>

◆ Phase 2 · Discovery

Reflect on Yourself

This is the most important phase. Everything you design will come from here. Don't rush it.

                ⚠

Most students want to skip to the design phase. Don't. The quality of your brand depends entirely on the quality of your self-reflection. A logo that doesn't come from real values is just decoration.

💎 Your Core Values

Select the 3 values that best describe what you stand for professionally. Not what you aspire to — what actually drives you right now.

                Why these three? Give a specific example of one showing up in your work.
                <textarea class="field-input" id="values-reflection" rows="3" placeholder="e.g., Reliability showed up when a client needed a last-minute edit and I stayed late to finish it..." oninput="autoSave()"></textarea>

💪 Your Strengths

What are you actually good at? Not what you want to be good at — what do you reliably deliver well? Think about feedback you've received from clients, teachers, or teammates.

                <textarea class="field-input" id="strengths" rows="3" placeholder="e.g., I'm good at asking the right questions in client meetings, staying organized, and editing under tight deadlines..." oninput="autoSave()"></textarea>

✨ What Makes You Different?

Every student in APEX has skills. What's your angle? What do you bring that's hard to find, or that makes people want to work with you specifically?

                <textarea class="field-input" id="differentiator" rows="3" placeholder="e.g., I'm the person who actually follows up. I ask clients what they were hoping for before I start, not after..." oninput="autoSave()"></textarea>

🗣 Your Brand Voice

Pick 3 adjectives that describe how you want to communicate. Your LinkedIn About section, your emails, the way you present to clients — all of it should feel like these 3 words.

🎯 Your Audience

Who do you want to work with or impress? Be specific — types of clients, industries, employers, or collaborators. Generic brands try to speak to everyone and connect with no one.

                <textarea class="field-input" id="audience" rows="3" placeholder="e.g., Local nonprofits and small businesses in the Des Moines area who need video storytelling but don't have the budget for a production agency..." oninput="autoSave()"></textarea>

🚀 Your Unique Value Proposition (UVP)

Use everything above to draft a single sentence that captures your professional brand.

Formula: I help [specific audience] achieve [specific outcome] through [specific approach or skill].

Example: "I help local nonprofits tell their stories through professional video that moves audiences to action."

                Your UVP
                <textarea class="field-input" id="uvp" rows="2" placeholder="I help..." oninput="autoSave()"></textarea>

👨🏫

Russ Goerend

Instructor · Designing Communication Solutions & Business Startup

Bring these questions to your check-in

Is my UVP specific enough, or does it still feel generic?

Do my values and strengths actually show up in my APEX work so far?

Is there a gap between how I currently come across and how I want to?

Is there anything surprising or true in what I wrote that I should lean into?

                Notes from your check-in with Russ
                <textarea class="field-input" id="russ-notes" rows="3" placeholder="What did Russ say? What did you refine or reconsider?" oninput="autoSave()"></textarea>
                <button class="btn-checkpoint" onclick="markVisited('reflect'); showSection('design');">✓ Checked In with Russ — Move to Design →</button>

◆ Phase 3 · Design

Design Your Brand

Now translate who you are into something people can see. Every visual choice should connect back to your reflection.

                🎨

Before you open Canva, re-read your UVP and your three voice adjectives. Keep them visible while you make every decision below. Good design isn't decoration — it's translation. Every choice should feel like a deliberate expression of the values and voice you defined in Phase 2.

🎭 Brand Archetype

Archetypes are universal personality patterns. Identifying yours helps ensure your visual choices feel coherent and intentional — not just pretty. Pick the one that most closely matches who you are professionally.

🎨 Color Psychology

Colors communicate before words do. Choose colors that reinforce your values and archetype — not just colors you personally like.

Purple

Creativity, wisdom, originality

Blue

Trust, reliability, calm

Green

Growth, health, balance

Orange

Energy, warmth, enthusiasm

Black

Sophistication, precision, power

Gold

Confidence, optimism, ambition

                Primary Color — hex code (explore at Coolors.co)
                <input class="field-input" type="text" id="color-primary" placeholder="#500778" oninput="autoSave()">
                Secondary Color
                <input class="field-input" type="text" id="color-secondary" placeholder="#c4d600" oninput="autoSave()">

✍ Typography

Fonts have personalities. Match yours to your brand voice.

Serif (Georgia, Garamond, Playfair Display) — Traditional, authoritative, trustworthy. Finance, law, journalism, or classic creative work.

Sans-serif (Inter, Montserrat, Helvetica) — Modern, clean, approachable. Works for most professional and digital-first contexts.

Script — Creative, personal, elegant. Use for accents only — never body text.

Monospace (Source Code Pro, Courier) — Technical, precise. Good for development or highly technical brands.

                Heading Font (explore at Google Fonts)
                <input class="field-input" type="text" id="font-heading" placeholder="e.g., Montserrat" oninput="autoSave()">
                Body Font
                <input class="field-input" type="text" id="font-body" placeholder="e.g., Inter" oninput="autoSave()">

💬 Your Brand in 3 Words

Before you build anything, write 3 words that describe how your brand should feel. Not what it does — how it feels. These should connect directly to your voice adjectives and archetype.

Examples: "Bold. Precise. Human." / "Warm. Creative. Reliable." / "Ambitious. Clear. Grounded."

                My brand feels...
                <input class="field-input" type="text" id="brand-words" placeholder="e.g., Bold. Precise. Human." oninput="autoSave()">

👩💼

Maria & Kayt

Social Media Mentors · Content Strategy & Brand Alignment

Bring these questions to your review

Do my color and font choices reflect the values and archetype from Phase 2?

Does anything feel chosen because it looks nice rather than because it communicates something?

Is there visual coherence — do the colors and fonts feel like they belong to the same brand?

What's one thing I should reconsider before building assets?

                Notes from your review with Maria & Kayt
                <textarea class="field-input" id="maria-kayt-notes" rows="3" placeholder="What did they recommend? What did you change?" oninput="autoSave()"></textarea>
                <button class="btn-checkpoint" onclick="markVisited('design'); showSection('deliver');">✓ Reviewed with Maria & Kayt — Move to Build →</button>

◆ Phase 4 · Deliver

Build & Deliver

Now build the real things. Every deliverable below should feel like a consistent expression of the brand you defined.

                ✅

Consistency is the hardest part of branding. Your logo, LinkedIn header, business card, and the way you introduce yourself in a meeting should all feel like they came from the same person. That's the goal of everything below.

📋 Deliverables

1. Brand Style Guide

Create a one-page document (Google Slides or Canva) capturing all your brand decisions: colors with hex codes, font names and usage, logo usage rules, and your 3 voice adjectives. This is your reference for every future piece of work — and your strongest Standard 4 portfolio artifact.

                    Link to Style Guide
                    <input class="field-input" type="text" id="link-style-guide" placeholder="Paste Google Slides or Canva link..." oninput="autoSave()">

2. Logo

Design a primary logo and a simplified icon version (for profile photos, favicons, etc.). Your logo should work in both color and black-and-white. Tools: Canva, Adobe Express, or Adobe Illustrator.

                    Link to Logo Files (PNG/SVG)
                    <input class="field-input" type="text" id="link-logo" placeholder="Paste Google Drive or Canva link..." oninput="autoSave()">

3. LinkedIn Profile

Update your profile with: a headline using your role + value statement, an About section written in your brand voice, an on-brand header image, and a professional profile photo.

                    LinkedIn Headline Draft
                    <input class="field-input" type="text" id="linkedin-headline" placeholder="e.g., Video Producer & Brand Storyteller | Waukee APEX" oninput="autoSave()">
                    Link to LinkedIn Profile
                    <input class="field-input" type="text" id="link-linkedin" placeholder="linkedin.com/in/..." oninput="autoSave()">

4. Business Card

Design a business card (physical or digital) using your brand colors and fonts. Must include your name, role/title, email, and LinkedIn URL. Canva has free templates — start there.

                    Link to Business Card (PDF or Mockup)
                    <input class="field-input" type="text" id="link-biz-card" placeholder="Paste Canva or Drive link..." oninput="autoSave()">

5. Portfolio Entry

Add at least one artifact from this project to your Standard 4 portfolio. The Style Guide is the strongest choice — it demonstrates strategic thinking, visual design skill, and professional self-awareness in one document.

                    Link to Portfolio Entry
                    <input class="field-input" type="text" id="link-portfolio" placeholder="Paste portfolio or artifact link..." oninput="autoSave()">

👨🏫

Russ Goerend

Instructor · Designing Communication Solutions & Business Startup

Final review — walk Russ through your complete brand system

Do all the deliverables feel consistent — could someone tell they came from the same person?

Does the brand system reflect the values and UVP you built in Phase 2?

Which deliverable are you most proud of, and why?

What would you do differently if you started this project again?

                Notes from your final review
                <textarea class="field-input" id="final-notes" rows="3" placeholder="Reflection from your final check-in..." oninput="autoSave()"></textarea>
                <button class="btn-checkpoint" onclick="markVisited('deliver');">✓ Final Review Complete — Brand Launched</button>


The file /Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html has been updated successfully. (file state is current in your context — no need to Read it back)

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Brand Studio | Waukee APEX DCS</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

            Dashboard
            S4 Portfolio
            Personal Brand

Waukee APEX · DCS Standard 4

Personal Brand Studio

0 of 5 phases complete

            Phase 0 · Foundations
            <button class="step-btn active" id="btn-orientation" onclick="showSection('orientation')">

                🎯 What is a Brand?
            </button>

            Phase 1 · Context
            <button class="step-btn" id="btn-personal" onclick="showSection('personal')">

                👤 Personal Brand
            </button>

            Phase 2 · Discovery
            <button class="step-btn" id="btn-reflect" onclick="showSection('reflect')">

                🪞 Reflect on Yourself
            </button>

            Phase 3 · Design
            <button class="step-btn" id="btn-design" onclick="showSection('design')">

                🎨 Design Your Brand
            </button>

            Phase 4 · Deliver
            <button class="step-btn" id="btn-deliver" onclick="showSection('deliver')">

                🚀 Build & Deliver
            </button>

            <button class="btn-reset" onclick="clearData()">Reset All Data</button>

◆ Phase 0 · Foundations

What is a Brand?

Before you can design one, you need to understand what a brand actually is — and it's not what most people think.

                💡

A brand is not a logo. A logo is a mark. A brand is the total impression you make — the feeling, reputation, and associations that come to mind when someone thinks of you or an organization. You can design a logo in an afternoon. Building a brand takes years of consistent decisions.

Brand vs. Brand Identity — Know the Difference

Brand Identity is everything you can design: the logo, colors, fonts, tone of voice, and imagery. These are the tools you'll create in this project.

Brand is what people actually think, feel, and remember. It lives in the mind of the audience — not on your style guide.

Jeff Bezos described it this way: "Your brand is what people say about you when you're not in the room."

Your job as a brand designer is to close the gap — to make the identity so intentional and consistent that it shapes the brand in the direction you want. You can't fully control it, but you can deliberately shape it.

Real Brands — What They Actually Communicate

None of these brands are defined by their logo alone. They're defined by every consistent decision they make — what they say, how they say it, what they show, and what they don't.

Nike

Minimal, bold, black-and-white. "Just Do It." What do you feel? Determination. Performance. Challenge. The swoosh took $35 to design. The brand took decades of consistent messaging to build.

Apple

White space, one product per screen, no clutter. What do you feel? Simplicity. Innovation. Premium quality. They could show specs. They show feelings instead.

Patagonia

Earthy tones, rugged photography, no-frills type. What do you feel? Environmentalism. Authenticity. Anti-corporate. Their brand is built on what they refuse to do as much as what they do.

                🔑

The key insight. These brands didn't design a logo first and build a brand around it. They knew who they were and what they stood for — then designed everything to express that. That's the order this project follows too.

                <button class="btn-next" onclick="markVisited('orientation'); showSection('personal');">I Understand What a Brand Is →</button>

◆ Phase 1 · Context

What is a Personal Brand?

You already have one. The question is whether you're building it intentionally.

                ⚠

Every professional already has a personal brand — most people just haven't thought carefully about theirs. Your LinkedIn profile, how you introduce yourself, the quality of your work, the way you follow up after a meeting — all of it communicates something about you. Right now, that communication is either intentional or accidental.

Personal Branding in a Professional Context

Personal branding is the practice of intentionally shaping how others perceive you professionally. It's your reputation — and the story you tell about your skills, values, and approach.

For a student-associate at Waukee APEX, your personal brand is how clients, mentors, potential employers, and collaborators experience you. It shows up in:

The way you introduce yourself in a client meeting

Your LinkedIn profile and portfolio

The quality and consistency of your deliverables

How you follow up after a conversation

Your email signature, your business card, your online presence

You're building a brand whether you're intentional about it or not. This project makes it intentional.

The 4 Components of a Personal Brand

ValuesWhat you stand for. Your professional non-negotiables. The principles that guide your work even when no one is watching.

VoiceHow you communicate. Formal or conversational? Direct or diplomatic? Technical or accessible? Your voice should feel consistent across all your writing and presentations.

Visual IdentityThe colors, fonts, and imagery that represent you consistently — across your portfolio, LinkedIn, business card, and any materials you produce.

PresenceWhere and how you show up — LinkedIn, portfolio, in-person meetings, business card, handshake. Presence is where brand becomes real.

🪞 Reflection: Before You Design Anything

Take 5 minutes and answer both of these honestly. Don't edit yourself — first drafts are more useful than polished ones.

                How do you currently come across to a professional you've just met? What impression do you leave?
                <textarea class="field-input" id="impression-current" rows="3" placeholder="Be honest..." oninput="autoSave()"></textarea>
                How would you WANT to come across? What do you want people to remember about you?
                <textarea class="field-input" id="impression-goal" rows="3" placeholder="Be specific..." oninput="autoSave()"></textarea>

                <button class="btn-next" onclick="markVisited('personal'); showSection('reflect');">Start My Self-Reflection →</button>

◆ Phase 2 · Discovery

Reflect on Yourself

This is the most important phase. Everything you design will come from here. Don't rush it.

                ⚠

Most students want to skip to the design phase. Don't. The quality of your brand depends entirely on the quality of your self-reflection. A logo that doesn't come from real values is just decoration.

💎 Your Core Values

Select the 3 values that best describe what you stand for professionally. Not what you aspire to — what actually drives you right now.

                Why these three? Give a specific example of one showing up in your work.
                <textarea class="field-input" id="values-reflection" rows="3" placeholder="e.g., Reliability showed up when a client needed a last-minute edit and I stayed late to finish it..." oninput="autoSave()"></textarea>

💪 Your Strengths

What are you actually good at? Not what you want to be good at — what do you reliably deliver well? Think about feedback you've received from clients, teachers, or teammates.

                <textarea class="field-input" id="strengths" rows="3" placeholder="e.g., I'm good at asking the right questions in client meetings, staying organized, and editing under tight deadlines..." oninput="autoSave()"></textarea>

✨ What Makes You Different?

Every student in APEX has skills. What's your angle? What do you bring that's hard to find, or that makes people want to work with you specifically?

                <textarea class="field-input" id="differentiator" rows="3" placeholder="e.g., I'm the person who actually follows up. I ask clients what they were hoping for before I start, not after..." oninput="autoSave()"></textarea>

🗣 Your Brand Voice

Pick 3 adjectives that describe how you want to communicate. Your LinkedIn About section, your emails, the way you present to clients — all of it should feel like these 3 words.

🎯 Your Audience

Who do you want to work with or impress? Be specific — types of clients, industries, employers, or collaborators. Generic brands try to speak to everyone and connect with no one.

                <textarea class="field-input" id="audience" rows="3" placeholder="e.g., Local nonprofits and small businesses in the Des Moines area who need video storytelling but don't have the budget for a production agency..." oninput="autoSave()"></textarea>

🚀 Your Unique Value Proposition (UVP)

Use everything above to draft a single sentence that captures your professional brand.

Formula: I help [specific audience] achieve [specific outcome] through [specific approach or skill].

Example: "I help local nonprofits tell their stories through professional video that moves audiences to action."

                Your UVP
                <textarea class="field-input" id="uvp" rows="2" placeholder="I help..." oninput="autoSave()"></textarea>

👨🏫

Russ Goerend

Instructor · Designing Communication Solutions & Business Startup

Bring these questions to your check-in

Is my UVP specific enough, or does it still feel generic?

Do my values and strengths actually show up in my APEX work so far?

Is there a gap between how I currently come across and how I want to?

Is there anything surprising or true in what I wrote that I should lean into?

                Notes from your check-in with Russ
                <textarea class="field-input" id="russ-notes" rows="3" placeholder="What did Russ say? What did you refine or reconsider?" oninput="autoSave()"></textarea>
                <button class="btn-checkpoint" onclick="markVisited('reflect'); showSection('design');">✓ Checked In with Russ — Move to Design →</button>

◆ Phase 3 · Design

Design Your Brand

Now translate who you are into something people can see. Every visual choice should connect back to your reflection.

                🎨

Before you open Canva, re-read your UVP and your three voice adjectives. Keep them visible while you make every decision below. Good design isn't decoration — it's translation. Every choice should feel like a deliberate expression of the values and voice you defined in Phase 2.

🎭 Brand Archetype

Archetypes are universal personality patterns. Identifying yours helps ensure your visual choices feel coherent and intentional — not just pretty. Pick the one that most closely matches who you are professionally.

🎨 Color Psychology

Colors communicate before words do. Choose colors that reinforce your values and archetype — not just colors you personally like.

Purple

Creativity, wisdom, originality

Blue

Trust, reliability, calm

Green

Growth, health, balance

Orange

Energy, warmth, enthusiasm

Black

Sophistication, precision, power

Gold

Confidence, optimism, ambition

                Primary Color — hex code (explore at Coolors.co)
                <input class="field-input" type="text" id="color-primary" placeholder="#500778" oninput="autoSave()">
                Secondary Color
                <input class="field-input" type="text" id="color-secondary" placeholder="#c4d600" oninput="autoSave()">

✍ Typography

Fonts have personalities. Match yours to your brand voice.

Serif (Georgia, Garamond, Playfair Display) — Traditional, authoritative, trustworthy. Finance, law, journalism, or classic creative work.

Sans-serif (Inter, Montserrat, Helvetica) — Modern, clean, approachable. Works for most professional and digital-first contexts.

Script — Creative, personal, elegant. Use for accents only — never body text.

Monospace (Source Code Pro, Courier) — Technical, precise. Good for development or highly technical brands.

                Heading Font (explore at Google Fonts)
                <input class="field-input" type="text" id="font-heading" placeholder="e.g., Montserrat" oninput="autoSave()">
                Body Font
                <input class="field-input" type="text" id="font-body" placeholder="e.g., Inter" oninput="autoSave()">

💬 Your Brand in 3 Words

Before you build anything, write 3 words that describe how your brand should feel. Not what it does — how it feels. These should connect directly to your voice adjectives and archetype.

Examples: "Bold. Precise. Human." / "Warm. Creative. Reliable." / "Ambitious. Clear. Grounded."

                My brand feels...
                <input class="field-input" type="text" id="brand-words" placeholder="e.g., Bold. Precise. Human." oninput="autoSave()">

👩💼

Maria & Kayt

Social Media Mentors · Content Strategy & Brand Alignment

Bring these questions to your review

Do my color and font choices reflect the values and archetype from Phase 2?

Does anything feel chosen because it looks nice rather than because it communicates something?

Is there visual coherence — do the colors and fonts feel like they belong to the same brand?

What's one thing I should reconsider before building assets?

                Notes from your review with Maria & Kayt
                <textarea class="field-input" id="maria-kayt-notes" rows="3" placeholder="What did they recommend? What did you change?" oninput="autoSave()"></textarea>
                <button class="btn-checkpoint" onclick="markVisited('design'); showSection('deliver');">✓ Reviewed with Maria & Kayt — Move to Build →</button>

◆ Phase 4 · Deliver

Build & Deliver

Now build the real things. Every deliverable below should feel like a consistent expression of the brand you defined.

                ✅

Consistency is the hardest part of branding. Your logo, LinkedIn header, business card, and the way you introduce yourself in a meeting should all feel like they came from the same person. That's the goal of everything below.

📋 Deliverables

1. Brand Style Guide

Create a one-page document (Google Slides or Canva) capturing all your brand decisions: colors with hex codes, font names and usage, logo usage rules, and your 3 voice adjectives. This is your reference for every future piece of work — and your strongest Standard 4 portfolio artifact.

                    Link to Style Guide
                    <input class="field-input" type="text" id="link-style-guide" placeholder="Paste Google Slides or Canva link..." oninput="autoSave()">

2. Logo

Design a primary logo and a simplified icon version (for profile photos, favicons, etc.). Your logo should work in both color and black-and-white. Tools: Canva, Adobe Express, or Adobe Illustrator.

                    Link to Logo Files (PNG/SVG)
                    <input class="field-input" type="text" id="link-logo" placeholder="Paste Google Drive or Canva link..." oninput="autoSave()">

3. LinkedIn Profile

Update your profile with: a headline using your role + value statement, an About section written in your brand voice, an on-brand header image, and a professional profile photo.

                    LinkedIn Headline Draft
                    <input class="field-input" type="text" id="linkedin-headline" placeholder="e.g., Video Producer & Brand Storyteller | Waukee APEX" oninput="autoSave()">
                    Link to LinkedIn Profile
                    <input class="field-input" type="text" id="link-linkedin" placeholder="linkedin.com/in/..." oninput="autoSave()">

4. Business Card

Design a business card (physical or digital) using your brand colors and fonts. Must include your name, role/title, email, and LinkedIn URL. Canva has free templates — start there.

                    Link to Business Card (PDF or Mockup)
                    <input class="field-input" type="text" id="link-biz-card" placeholder="Paste Canva or Drive link..." oninput="autoSave()">

5. Portfolio Entry

Add at least one artifact from this project to your Standard 4 portfolio. The Style Guide is the strongest choice — it demonstrates strategic thinking, visual design skill, and professional self-awareness in one document.

                    Link to Portfolio Entry
                    <input class="field-input" type="text" id="link-portfolio" placeholder="Paste portfolio or artifact link..." oninput="autoSave()">

👨🏫

Russ Goerend

Instructor · Designing Communication Solutions & Business Startup

Final review — walk Russ through your complete brand system

Do all the deliverables feel consistent — could someone tell they came from the same person?

Does the brand system reflect the values and UVP you built in Phase 2?

Which deliverable are you most proud of, and why?

What would you do differently if you started this project again?

                Notes from your final review
                <textarea class="field-input" id="final-notes" rows="3" placeholder="Reflection from your final check-in..." oninput="autoSave()"></textarea>
                <button class="btn-checkpoint" onclick="markVisited('deliver');">✓ Final Review Complete — Brand Launched</button>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

-    <title>Waukee APEX Brand Launchpad</title>

+    <title>Personal Brand Studio | Waukee APEX DCS</title>

+        *, *::before, *::after { box-sizing: border-box; }

+        body { font-family: 'Inter', 'Segoe UI', sans-serif; margin: 0; background: var(--bg); color: var(--text-main); padding-top: var(--nav-height); }

-        body { font-family: 'Inter', sans-serif; margin: 0; display: flex; background-color: var(--light-bg); color: #333; height: 100vh; overflow: hidden; }

+        .main-nav { background: var(--primary); height: var(--nav-height); width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; border-bottom: 4px solid var(--secondary); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }

+        .nav-container { max-width: 100%; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }

+        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); }

+        .nav-logo-img { height: 100%; width: auto; }

+        .nav-links { display: flex; gap: 8px; align-items: center; }

+        .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; }

+        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }

+        .nav-links a.active { background: var(--secondary); color: var(--primary); }

-        nav { width: 280px; background: var(--apex-navy); color: white; display: flex; flex-direction: column; padding: 40px 0; flex-shrink: 0; box-shadow: 4px 0 15px rgba(0,0,0,0.2); }

-        nav h1 { padding: 0 30px; font-size: 1.4rem; margin-bottom: 50px; line-height: 1.2; }

-        nav h1 span { color: var(--waukee-gold); font-weight: 800; text-transform: uppercase; font-size: 0.85rem; display: block; margin-bottom: 5px; }

-        nav button { background: none; border: none; color: rgba(255,255,255,0.6); padding: 18px 30px; text-align: left; font-size: 1rem; cursor: pointer; transition: 0.3s; border-left: 5px solid transparent; font-weight: 500; }

-        nav button.active { color: white; background: rgba(255,255,255,0.1); border-left: 5px solid var(--waukee-gold); font-weight: 700; }

-        .nav-footer { margin-top: auto; padding: 20px; }

-        .btn-reset { color: #ffab91; background: none; border: 1px solid #ffab91; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; width: 100%; }

+        .app-shell { display: flex; min-height: calc(100vh - var(--nav-height)); }

-        main { flex-grow: 1; padding: 60px; overflow-y: auto; }

-        .section { display: none; max-width: 1000px; animation: fadeIn 0.3s ease-out; }

-        .section.active { display: block; }

-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

+        .sidebar { width: 280px; min-width: 280px; background: white; border-right: 1px solid #E5E7EB; position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; display: flex; flex-direction: column; flex-shrink: 0; }

+        .sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid #E5E7EB; }

+        .sidebar-std-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #6B7280; margin-bottom: 4px; }

+        .sidebar-std-title { font-size: 1rem; font-weight: 800; color: var(--primary); line-height: 1.3; margin-bottom: 14px; }

+        .progress-bar-wrap { background: #E5E7EB; border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 6px; }

+        .progress-bar-fill { height: 100%; background: var(--secondary); border-radius: 4px; transition: width 0.4s; }

+        .progress-label { font-size: 0.72rem; color: #6B7280; }

+        .phase-group { padding: 8px 0; border-bottom: 1px solid #F3F4F6; }

+        .sidebar-phase-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 18px 4px; color: var(--primary); display: block; opacity: 0.6; }

+        .step-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 18px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 0.84rem; color: #374151; border-left: 3px solid transparent; transition: all 0.15s; font-weight: 500; }

+        .step-btn:hover { background: #F9FAFB; }

+        .step-btn.active { background: #FBF5FF; border-left-color: var(--primary); color: var(--primary); font-weight: 700; }

+        .step-btn.done .step-check { background: #10B981; border-color: #10B981; }

+        .step-btn.done .step-check::after { content: '✓'; }

+        .step-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D1D5DB; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: white; transition: all 0.2s; }

+        .step-name { flex: 1; line-height: 1.3; }

+        .sidebar-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid #E5E7EB; }

+        .btn-reset { width: 100%; padding: 9px; background: none; border: 1px solid #FCA5A5; color: #DC2626; border-radius: 8px; font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }

+        .btn-reset:hover { background: #FEE2E2; }

-        h2 { color: var(--apex-navy); font-size: 2.5rem; margin-top: 0; font-weight: 800; margin-bottom: 25px; }

+        main { flex-grow: 1; padding: 40px 60px 80px; }

+        .step-section { display: none; max-width: 860px; }

+        .step-section.active { display: block; animation: fadeIn 0.25s ease-out; }

+        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

-        /* CEM-Style Phase Overview Card */

-        .phase-overview { background: white; border: 2px solid var(--waukee-gold); border-radius: 12px; padding: 30px; margin-bottom: 35px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

-        .overview-item h4 { margin: 0 0 10px 0; color: var(--waukee-purple); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }

-        .overview-item p { margin: 0; font-size: 0.8rem; line-height: 1.5; color: #555; }

+        .phase-badge { display: inline-flex; align-items: center; padding: 4px 12px; background: #F5F3FF; color: var(--primary); border-radius: 20px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }

+        .step-title { font-size: 2rem; font-weight: 800; color: var(--primary); margin: 0 0 8px 0; line-height: 1.15; }

+        .step-subtitle { font-size: 1rem; color: var(--text-sub); margin: 0 0 28px 0; line-height: 1.6; }

-        .card { background: var(--white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 25px; border-top: 1px solid #eee; }

-        .card h3 { margin-top: 0; color: var(--waukee-purple); font-size: 1.3rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }

-        .card-desc { font-size: 0.9rem; color: #666; margin-bottom: 20px; line-height: 1.4; }

+        .card { background: white; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px 26px; margin-bottom: 20px; }

+        .card-title { font-size: 1rem; font-weight: 800; color: var(--primary); margin: 0 0 12px 0; }

+        .card p { font-size: 0.92rem; line-height: 1.65; color: #374151; margin: 0 0 12px 0; }

+        .card p:last-child { margin-bottom: 0; }

+        .card ul { font-size: 0.92rem; line-height: 1.7; color: #374151; padding-left: 20px; margin: 8px 0 0 0; }

+        .card ul li { margin-bottom: 6px; }

-        .selection-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }

-        .pill { padding: 10px 20px; background: #fff; border: 2px solid var(--border); border-radius: 50px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }

-        .pill.selected { background: var(--waukee-purple); color: white; border-color: var(--waukee-purple); }

-        textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; margin-top: 10px; box-sizing: border-box; resize: vertical; line-height: 1.5; }

-        input[type="text"] { width: 95%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }

+        .callout { border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 0.92rem; line-height: 1.6; }

+        .callout-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }

+        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }

+        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }

+        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }

+        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }

-        .bridge { margin: 50px 0; padding: 40px; border-radius: 12px; text-align: center; border: 2px dashed #3b82f6; background: #f0f7ff; color: #0d47a1; }

-        .bridge h4 { margin: 0 0 15px 0; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; color: #3b82f6; }

-        .bridge p { font-size: 1rem; font-weight: 500; margin-bottom: 25px; line-height: 1.6; max-width: 700px; margin-left: auto; margin-right: auto; }

+        .brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }

+        .brand-example { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; padding: 16px; }

+        .brand-name { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); margin-bottom: 6px; }

+        .brand-example p { font-size: 0.84rem; margin: 0; color: #374151; line-height: 1.5; }

-        .example-drawer { display: none; background: #fdfdfd; border-left: 5px solid var(--waukee-gold); padding: 25px; border-radius: 8px; margin-top: 15px; font-size: 0.9rem; line-height: 1.6; }

-        .btn-toggle { background: #f3e5f5; border: 1px solid var(--waukee-purple); color: var(--waukee-purple); padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; }

-        .resource-link { color: var(--link-color); text-decoration: none; font-weight: 700; }

+        .components-list { list-style: none; padding: 0; margin: 10px 0 0 0; }

+        .components-list li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.92rem; line-height: 1.5; }

+        .components-list li:last-child { border-bottom: none; }

+        .component-label { font-weight: 800; color: var(--primary); min-width: 110px; flex-shrink: 0; }

-        .btn-action { padding: 18px 30px; border-radius: 8px; font-weight: 800; font-size: 1.1rem; cursor: pointer; width: 100%; text-transform: uppercase; border: none; transition: 0.2s; }

-        .btn-gold { background: var(--waukee-gold); color: var(--apex-navy); }

-        .btn-purple { background: var(--waukee-purple); color: white; }

-        table { width: 100%; border-collapse: collapse; }

-        th { text-align: left; font-size: 0.8rem; color: #888; text-transform: uppercase; padding-bottom: 10px; }

-        td { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }

+        .field-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-sub); margin: 16px 0 6px 0; }

+        .field-label:first-child { margin-top: 0; }

+        .field-input { width: 100%; padding: 10px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.92rem; color: var(--text-main); background: white; outline: none; transition: border-color 0.2s; }

+        .field-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(80,7,120,0.08); }

+        textarea.field-input { resize: vertical; min-height: 80px; }

-        #prompt-output { background: #fff; border: 2px dashed var(--waukee-gold); padding: 25px; border-radius: 8px; white-space: pre-wrap; margin-top: 20px; font-family: monospace; font-size: 0.85rem; }

+        .pill-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 0; }

+        .pill { padding: 8px 18px; background: white; border: 2px solid #E5E7EB; border-radius: 50px; cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: all 0.15s; color: var(--text-main); font-family: inherit; }

+        .pill:hover { border-color: var(--primary); color: var(--primary); }

+        .pill.selected { background: var(--primary); color: white; border-color: var(--primary); }

+        .archetype-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0 0 0; }

+        .archetype-card { padding: 14px 16px; border: 2px solid #E5E7EB; border-radius: 10px; cursor: pointer; transition: all 0.15s; text-align: left; background: white; font-family: inherit; width: 100%; }

+        .archetype-card:hover { border-color: var(--primary); background: #FBF5FF; }

+        .archetype-card.selected { border-color: var(--primary); background: #F5F3FF; }

+        .archetype-name { font-size: 0.85rem; font-weight: 800; color: var(--primary); margin-bottom: 4px; }

+        .archetype-desc { font-size: 0.78rem; color: #6B7280; line-height: 1.4; }

+        .archetype-examples { font-size: 0.72rem; color: #9CA3AF; margin-top: 4px; font-style: italic; }

+        .color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }

+        .color-swatch { border-radius: 8px; padding: 12px 14px; }

+        .color-swatch-name { font-size: 0.78rem; font-weight: 800; margin-bottom: 4px; }

+        .color-swatch-desc { font-size: 0.72rem; line-height: 1.4; }

+        .deliverable-row { padding: 18px 0; border-bottom: 1px solid #F3F4F6; }

+        .deliverable-row:last-child { border-bottom: none; }

+        .deliverable-title { font-size: 0.95rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }

+        .deliverable-desc { font-size: 0.84rem; color: var(--text-sub); line-height: 1.55; margin-bottom: 10px; }

+        .checkpoint-card { background: white; border: 2px solid #FDE68A; border-radius: 14px; padding: 24px 26px; margin-bottom: 20px; }

+        .checkpoint-mentor { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

+        .mentor-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--secondary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }

+        .mentor-name { font-size: 1rem; font-weight: 800; color: var(--primary); }

+        .mentor-role { font-size: 0.8rem; color: var(--text-sub); margin-top: 2px; }

+        .checkpoint-questions { background: #FFFBEB; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }

+        .checkpoint-questions h4 { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #92400E; margin: 0 0 8px 0; }

+        .checkpoint-q-list { list-style: none; padding: 0; margin: 0; }

+        .checkpoint-q-list li { padding: 5px 0 5px 20px; position: relative; font-size: 0.88rem; color: #78350F; line-height: 1.4; border-bottom: 1px solid rgba(253,230,138,0.5); }

+        .checkpoint-q-list li:last-child { border-bottom: none; }

+        .checkpoint-q-list li::before { content: '→'; position: absolute; left: 0; color: #D97706; font-weight: 700; }

+        .step-nav { display: flex; justify-content: flex-end; margin-top: 32px; padding-top: 24px; border-top: 1px solid #E5E7EB; }

+        .btn-next { padding: 14px 28px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-size: 0.92rem; font-weight: 800; cursor: pointer; transition: background 0.2s; }

+        .btn-next:hover { background: #3d0560; }

+        .btn-checkpoint { padding: 14px 28px; background: var(--secondary); color: var(--primary); border: none; border-radius: 8px; font-family: inherit; font-size: 0.92rem; font-weight: 800; cursor: pointer; transition: background 0.2s; margin-top: 12px; width: 100%; }

+        .btn-checkpoint:hover { background: #b5c500; }

-        <button onclick="showSection('discovery')" id="btn-discovery" class="active">1. Core Strategy</button>

-        <button onclick="showSection('visuals')" id="btn-visuals">2. Visual Identity</button>

-        <button onclick="showSection('assets')" id="btn-assets">3. Digital Assets</button>

-
<button class="btn-reset" onclick="clearData()">Reset Project</button>

+        <a href="APEX_Professional_Dashboard.html" class="nav-logo-link">

+            <img src="APEX Vertical.png" alt="Waukee APEX Logo" class="nav-logo-img">

+            <div class="progress-bar-wrap">

+            <button class="step-btn active" id="btn-orientation" onclick="showSection('orientation')">

+            <button class="step-btn" id="btn-personal" onclick="showSection('personal')">

+            <button class="step-btn" id="btn-reflect" onclick="showSection('reflect')">

+            <button class="step-btn" id="btn-design" onclick="showSection('design')">

+            <button class="step-btn" id="btn-deliver" onclick="showSection('deliver')">

+            <button class="btn-reset" onclick="clearData()">Reset All Data</button>

-        <div id="discovery" class="section active">

-            <div class="phase-overview">

-

1. Brand DNA

Map your professional values and skills. This reflection is the fuel for your brand.

-

2. The UVP

Draft your Unique Value Proposition—the elevator pitch for your professional self.

-

3. Archetype Sync

Identify your "Brand Vibe" to ensure your personality matches your goals.

-

4. AI Strategy

Synthesize your DNA into a cohesive creative brief using guided AI prompts.

+        <!-- ══════════════════════ PHASE 0: WHAT IS A BRAND? -->

+        <div class="step-section active" id="step-orientation">

+
Before you can design one, you need to understand what a brand actually is — and it's not what most people think.

+            <div class="callout callout-blue">

+
A brand is not a logo. A logo is a mark. A brand is the total impression you make — the feeling, reputation, and associations that come to mind when someone thinks of you or an organization. You can design a logo in an afternoon. Building a brand takes years of consistent decisions.

-
Select 3 values that define your work ethic.

+
Brand vs. Brand Identity — Know the Difference

+
Brand Identity is everything you can design: the logo, colors, fonts, tone of voice, and imagery. These are the tools you'll create in this project.

+
Brand is what people actually think, feel, and remember. It lives in the mind of the audience — not on your style guide.

+
Jeff Bezos described it this way: "Your brand is what people say about you when you're not in the room."

+
Your job as a brand designer is to close the gap — to make the identity so intentional and consistent that it shapes the brand in the direction you want. You can't fully control it, but you can deliberately shape it.

-                <h3>🚀 Unique Value Proposition (UVP)</h3>

-                <button class="btn-toggle" onclick="toggleEx('ex-uvp')">Show Formula & Examples</button>

-                <div id="ex-uvp" class="example-drawer">

-                    Formula: I help [Who] achieve [What] by [How].

+
Real Brands — What They Actually Communicate

+
None of these brands are defined by their logo alone. They're defined by every consistent decision they make — what they say, how they say it, what they show, and what they don't.

+                <div class="brand-grid">

+                    <div class="brand-example">

+
Minimal, bold, black-and-white. "Just Do It." What do you feel? Determination. Performance. Challenge. The swoosh took $35 to design. The brand took decades of consistent messaging to build.

+
White space, one product per screen, no clutter. What do you feel? Simplicity. Innovation. Premium quality. They could show specs. They show feelings instead.

+
Earthy tones, rugged photography, no-frills type. What do you feel? Environmentalism. Authenticity. Anti-corporate. Their brand is built on what they refuse to do as much as what they do.

-                <textarea id="uvp-text" rows="3" placeholder="I help... by..." oninput="autoSave()"></textarea>

-
Now that we've defined Who you are and What you do, it's time to decide what that looks like. In the next phase, we'll translate your values into colors and fonts.

-                <button class="btn-action btn-purple" onclick="showSection('visuals')">START VISUAL IDENTITY</button>

+            <div class="callout callout-purple">

+
The key insight. These brands didn't design a logo first and build a brand around it. They knew who they were and what they stood for — then designed everything to express that. That's the order this project follows too.

+                <button class="btn-next" onclick="markVisited('orientation'); showSection('personal');">I Understand What a Brand Is →</button>

-        <div id="visuals" class="section">

+        <!-- ══════════════════════ PHASE 1: PERSONAL BRAND -->

+        <div class="step-section" id="step-personal">

+
You already have one. The question is whether you're building it intentionally.

-            <div class="phase-overview">

-

1. Color Theory

Select a palette that communicates trust, energy, or innovation.

-

2. Typography

Choose fonts that tell your brand's story before someone reads a word.

-

3. AI Designer

Use AI to generate logo concepts and mood boards based on your DNA.

-

4. Style Guide

Document your rules to ensure your brand looks the same everywhere.

+            <div class="callout callout-yellow">

+
Every professional already has a personal brand — most people just haven't thought carefully about theirs. Your LinkedIn profile, how you introduce yourself, the quality of your work, the way you follow up after a meeting — all of it communicates something about you. Right now, that communication is either intentional or accidental.

-                <h3>🎭 Brand Archetype</h3>

-                <button class="btn-toggle" onclick="toggleEx('ex-archetype')">What is an Archetype?</button>

-                <div id="ex-archetype" class="example-drawer">

-                    The Creator: Innovative/Unique (Apple) | The Sage: Knowledgeable (Google)

+
Personal Branding in a Professional Context

+
Personal branding is the practice of intentionally shaping how others perceive you professionally. It's your reputation — and the story you tell about your skills, values, and approach.

+
For a student-associate at Waukee APEX, your personal brand is how clients, mentors, potential employers, and collaborators experience you. It shows up in:

+
The way you introduce yourself in a client meeting

+
The quality and consistency of your deliverables

+
How you follow up after a conversation

+
Your email signature, your business card, your online presence

+
You're building a brand whether you're intentional about it or not. This project makes it intentional.

-                <h3>🎨 Visual Standards</h3>

-                <button class="btn-toggle" onclick="toggleEx('ex-tools')">Design Tools</button>

-                <div id="ex-tools" class="example-drawer">

-                    ✨ Coolors (Palette Gen) | 🔡 Google Fonts

+                <ul class="components-list">

+
ValuesWhat you stand for. Your professional non-negotiables. The principles that guide your work even when no one is watching.

+
VoiceHow you communicate. Formal or conversational? Direct or diplomatic? Technical or accessible? Your voice should feel consistent across all your writing and presentations.

+
Visual IdentityThe colors, fonts, and imagery that represent you consistently — across your portfolio, LinkedIn, business card, and any materials you produce.

+
PresenceWhere and how you show up — LinkedIn, portfolio, in-person meetings, business card, handshake. Presence is where brand becomes real.

+
🪞 Reflection: Before You Design Anything

+
Take 5 minutes and answer both of these honestly. Don't edit yourself — first drafts are more useful than polished ones.

+                <label class="field-label">How do you currently come across to a professional you've just met? What impression do you leave?</label>

+                <textarea class="field-input" id="impression-current" rows="3" placeholder="Be honest..." oninput="autoSave()"></textarea>

+                <label class="field-label">How would you WANT to come across? What do you want people to remember about you?</label>

+                <textarea class="field-input" id="impression-goal" rows="3" placeholder="Be specific..." oninput="autoSave()"></textarea>

+                <button class="btn-next" onclick="markVisited('personal'); showSection('reflect');">Start My Self-Reflection →</button>

+        <!-- ══════════════════════ PHASE 2: REFLECT -->

+        <div class="step-section" id="step-reflect">

+
This is the most important phase. Everything you design will come from here. Don't rush it.

+            <div class="callout callout-yellow">

+
Most students want to skip to the design phase. Don't. The quality of your brand depends entirely on the quality of your self-reflection. A logo that doesn't come from real values is just decoration.

+
Select the 3 values that best describe what you stand for professionally. Not what you aspire to — what actually drives you right now.

+                <label class="field-label">Why these three? Give a specific example of one showing up in your work.</label>

+                <textarea class="field-input" id="values-reflection" rows="3" placeholder="e.g., Reliability showed up when a client needed a last-minute edit and I stayed late to finish it..." oninput="autoSave()"></textarea>

+
What are you actually good at? Not what you want to be good at — what do you reliably deliver well? Think about feedback you've received from clients, teachers, or teammates.

+                <textarea class="field-input" id="strengths" rows="3" placeholder="e.g., I'm good at asking the right questions in client meetings, staying organized, and editing under tight deadlines..." oninput="autoSave()"></textarea>

+
Every student in APEX has skills. What's your angle? What do you bring that's hard to find, or that makes people want to work with you specifically?

+                <textarea class="field-input" id="differentiator" rows="3" placeholder="e.g., I'm the person who actually follows up. I ask clients what they were hoping for before I start, not after..." oninput="autoSave()"></textarea>

+
Pick 3 adjectives that describe how you want to communicate. Your LinkedIn About section, your emails, the way you present to clients — all of it should feel like these 3 words.

+
Who do you want to work with or impress? Be specific — types of clients, industries, employers, or collaborators. Generic brands try to speak to everyone and connect with no one.

+                <textarea class="field-input" id="audience" rows="3" placeholder="e.g., Local nonprofits and small businesses in the Des Moines area who need video storytelling but don't have the budget for a production agency..." oninput="autoSave()"></textarea>

+
Use everything above to draft a single sentence that captures your professional brand.

+
Formula: I help [specific audience] achieve [specific outcome] through [specific approach or skill].

+
Example: "I help local nonprofits tell their stories through professional video that moves audiences to action."

+                <label class="field-label">Your UVP</label>

+                <textarea class="field-input" id="uvp" rows="2" placeholder="I help..." oninput="autoSave()"></textarea>

+            <div class="checkpoint-card">

+                <div class="checkpoint-mentor">

+
Instructor · Designing Communication Solutions & Business Startup

-
Primary Color	<input type="text" id="color-primary" placeholder="#000000" oninput="autoSave()">

-
Secondary Color	<input type="text" id="color-secondary" placeholder="#FFFFFF" oninput="autoSave()">

-
Heading Font	<input type="text" id="font-primary" placeholder="e.g., Montserrat" oninput="autoSave()">

+                <div class="checkpoint-questions">

+
Bring these questions to your check-in

+                    <ul class="checkpoint-q-list">

+
Is my UVP specific enough, or does it still feel generic?

+
Do my values and strengths actually show up in my APEX work so far?

+
Is there a gap between how I currently come across and how I want to?

+
Is there anything surprising or true in what I wrote that I should lean into?

+                <label class="field-label">Notes from your check-in with Russ</label>

+                <textarea class="field-input" id="russ-notes" rows="3" placeholder="What did Russ say? What did you refine or reconsider?" oninput="autoSave()"></textarea>

+                <button class="btn-checkpoint" onclick="markVisited('reflect'); showSection('design');">✓ Checked In with Russ — Move to Design →</button>

+        <!-- ══════════════════════ PHASE 3: DESIGN -->

+        <div class="step-section" id="step-design">

+
Now translate who you are into something people can see. Every visual choice should connect back to your reflection.

+            <div class="callout callout-blue">

+
Before you open Canva, re-read your UVP and your three voice adjectives. Keep them visible while you make every decision below. Good design isn't decoration — it's translation. Every choice should feel like a deliberate expression of the values and voice you defined in Phase 2.

-                <h3>✨ AI Design Consultant</h3>

-                <button class="btn-action btn-gold" onclick="generateBrandPrompt()">GENERATE DESIGN PROMPT</button>

-                <div id="output-container" style="display:none;">

-                    <button class="btn-action btn-purple" style="margin-top:10px" onclick="copyAndOpen()">COPY & OPEN AI</button>

+
Archetypes are universal personality patterns. Identifying yours helps ensure your visual choices feel coherent and intentional — not just pretty. Pick the one that most closely matches who you are professionally.

+
Colors communicate before words do. Choose colors that reinforce your values and archetype — not just colors you personally like.

+                <div class="color-grid">

+

Purple

Creativity, wisdom, originality

+

Black

Sophistication, precision, power

+                Primary Color — hex code (explore at Coolors.co)

+                <input class="field-input" type="text" id="color-primary" placeholder="#500778" oninput="autoSave()">

+                <label class="field-label">Secondary Color</label>

+                <input class="field-input" type="text" id="color-secondary" placeholder="#c4d600" oninput="autoSave()">

-
Your strategy is set and your "look" is decided. Now it's time to build. In Phase 3, you will create your final logo, LinkedIn profile, and business cards.

-                <button class="btn-action btn-purple" onclick="showSection('assets')">GO TO PRODUCTION LAB</button>

+
Fonts have personalities. Match yours to your brand voice.

+
Serif (Georgia, Garamond, Playfair Display) — Traditional, authoritative, trustworthy. Finance, law, journalism, or classic creative work.

+
Sans-serif (Inter, Montserrat, Helvetica) — Modern, clean, approachable. Works for most professional and digital-first contexts.

+
Script — Creative, personal, elegant. Use for accents only — never body text.

+
Monospace (Source Code Pro, Courier) — Technical, precise. Good for development or highly technical brands.

+                Heading Font (explore at Google Fonts)

+                <input class="field-input" type="text" id="font-heading" placeholder="e.g., Montserrat" oninput="autoSave()">

+                <label class="field-label">Body Font</label>

+                <input class="field-input" type="text" id="font-body" placeholder="e.g., Inter" oninput="autoSave()">

+
Before you build anything, write 3 words that describe how your brand should feel. Not what it does — how it feels. These should connect directly to your voice adjectives and archetype.

+
Examples: "Bold. Precise. Human." / "Warm. Creative. Reliable." / "Ambitious. Clear. Grounded."

+                <label class="field-label">My brand feels...</label>

+                <input class="field-input" type="text" id="brand-words" placeholder="e.g., Bold. Precise. Human." oninput="autoSave()">

+            <div class="checkpoint-card">

+                <div class="checkpoint-mentor">

+
Social Media Mentors · Content Strategy & Brand Alignment

+                <div class="checkpoint-questions">

+                    <ul class="checkpoint-q-list">

+
Do my color and font choices reflect the values and archetype from Phase 2?

+
Does anything feel chosen because it looks nice rather than because it communicates something?

+
Is there visual coherence — do the colors and fonts feel like they belong to the same brand?

+
What's one thing I should reconsider before building assets?

+                <label class="field-label">Notes from your review with Maria & Kayt</label>

+                <textarea class="field-input" id="maria-kayt-notes" rows="3" placeholder="What did they recommend? What did you change?" oninput="autoSave()"></textarea>

+                <button class="btn-checkpoint" onclick="markVisited('design'); showSection('deliver');">✓ Reviewed with Maria & Kayt — Move to Build →</button>

-        <div id="assets" class="section">

+        <!-- ══════════════════════ PHASE 4: DELIVER -->

+        <div class="step-section" id="step-deliver">

+
Now build the real things. Every deliverable below should feel like a consistent expression of the brand you defined.

-            <div class="phase-overview">

-

1. Bio Copy

Translate your UVP into a high-impact LinkedIn headline and bio.

-

2. Logo Kit

Produce a primary logo and an icon version for your social profiles.

-

3. Network Tools

Design a business card that serves as your physical professional handshake.

-

4. Final Launch

Compile everything into a Style Guide for your APEX Portfolio.

+            <div class="callout callout-green">

+
Consistency is the hardest part of branding. Your logo, LinkedIn header, business card, and the way you introduce yourself in a meeting should all feel like they came from the same person. That's the goal of everything below.

-                <h3>💼 Professional Copy</h3>

-                <button class="btn-toggle" onclick="toggleEx('ex-li')">LinkedIn Formulas</button>

-                <div id="ex-li" class="example-drawer">

-                    Headline: [Job Title/Specialty] | [Value Statement] | [Industry Keyword]

+                <div class="deliverable-row">

+
Create a one-page document (Google Slides or Canva) capturing all your brand decisions: colors with hex codes, font names and usage, logo usage rules, and your 3 voice adjectives. This is your reference for every future piece of work — and your strongest Standard 4 portfolio artifact.

+                    <label class="field-label">Link to Style Guide</label>

+                    <input class="field-input" type="text" id="link-style-guide" placeholder="Paste Google Slides or Canva link..." oninput="autoSave()">

-                <textarea id="linkedin-copy" rows="2" placeholder="Professional Headline..." oninput="autoSave()"></textarea>

+
Design a primary logo and a simplified icon version (for profile photos, favicons, etc.). Your logo should work in both color and black-and-white. Tools: Canva, Adobe Express, or Adobe Illustrator.

+                    <label class="field-label">Link to Logo Files (PNG/SVG)</label>

+                    <input class="field-input" type="text" id="link-logo" placeholder="Paste Google Drive or Canva link..." oninput="autoSave()">

+
Update your profile with: a headline using your role + value statement, an About section written in your brand voice, an on-brand header image, and a professional profile photo.

+                    <label class="field-label">LinkedIn Headline Draft</label>

+                    <input class="field-input" type="text" id="linkedin-headline" placeholder="e.g., Video Producer & Brand Storyteller | Waukee APEX" oninput="autoSave()">

+                    <label class="field-label">Link to LinkedIn Profile</label>

+                    <input class="field-input" type="text" id="link-linkedin" placeholder="linkedin.com/in/..." oninput="autoSave()">

+
Design a business card (physical or digital) using your brand colors and fonts. Must include your name, role/title, email, and LinkedIn URL. Canva has free templates — start there.

+                    <label class="field-label">Link to Business Card (PDF or Mockup)</label>

+                    <input class="field-input" type="text" id="link-biz-card" placeholder="Paste Canva or Drive link..." oninput="autoSave()">

+
Add at least one artifact from this project to your Standard 4 portfolio. The Style Guide is the strongest choice — it demonstrates strategic thinking, visual design skill, and professional self-awareness in one document.

+                    <label class="field-label">Link to Portfolio Entry</label>

+                    <input class="field-input" type="text" id="link-portfolio" placeholder="Paste portfolio or artifact link..." oninput="autoSave()">

-                <h3>📦 Submission Tracking</h3>

-
Final Logo File	<input type="text" placeholder="Link to PNG/SVG...">

-
LinkedIn Profile Draft	<input type="text" placeholder="Link to Word/Doc...">

-
Business Card PDF	<input type="text" placeholder="Link to Mockup...">

+            <div class="checkpoint-card">

+                <div class="checkpoint-mentor">

+
Instructor · Designing Communication Solutions & Business Startup

+                <div class="checkpoint-questions">

+
Final review — walk Russ through your complete brand system

+                    <ul class="checkpoint-q-list">

+
Do all the deliverables feel consistent — could someone tell they came from the same person?

+
Does the brand system reflect the values and UVP you built in Phase 2?

+
Which deliverable are you most proud of, and why?

+
What would you do differently if you started this project again?

+                <label class="field-label">Notes from your final review</label>

+                <textarea class="field-input" id="final-notes" rows="3" placeholder="Reflection from your final check-in..." oninput="autoSave()"></textarea>

+                <button class="btn-checkpoint" onclick="markVisited('deliver');">✓ Final Review Complete — Brand Launched</button>

-        // JS remains largely the same, ensuring 'id' tags match the updated HTML

-        const values = ["Creativity", "Efficiency", "Reliability", "Innovation", "Empathy", "Precision", "Leadership", "Ambition", "Curiosity", "Authenticity"];

-        const archetypes = ["The Creator", "The Sage", "The Hero", "The Explorer", "The Everyman", "The Magician", "The Ruler"];

-        let selections = { values: [], archetype: [] };

+    const STORAGE_KEY = 'apex_s4dcs_v1';

+    const PHASES = ['orientation', 'personal', 'reflect', 'design', 'deliver'];

-            const vGrid = document.getElementById('values-grid');

-                let p = document.createElement('div'); p.className = 'pill'; p.innerText = v;

-                p.onclick = () => toggle(p, 'values', 3); vGrid.appendChild(p);

-            const aGrid = document.getElementById('archetype-grid');

-                let p = document.createElement('div'); p.className = 'pill'; p.innerText = a;

-                p.onclick = () => toggle(p, 'archetype', 1); aGrid.appendChild(p);

+    const valueOptions = ['Achievement', 'Authenticity', 'Creativity', 'Curiosity', 'Empathy', 'Excellence', 'Integrity', 'Innovation', 'Leadership', 'Precision', 'Reliability', 'Service'];

+    const voiceOptions = ['Warm', 'Direct', 'Bold', 'Thoughtful', 'Energetic', 'Precise', 'Creative', 'Professional', 'Playful', 'Calm', 'Ambitious', 'Empathetic'];

+        { name: 'The Creator', desc: 'Makes things. Innovative, expressive, original.', examples: 'Apple, LEGO, Adobe' },

+        { name: 'The Sage', desc: 'Shares knowledge. Thoughtful, credible, research-driven.', examples: 'Google, TED, The Economist' },

+        { name: 'The Hero', desc: 'Gets things done. Determined, confident, results-focused.', examples: 'Nike, FedEx' },

+        { name: 'The Explorer', desc: 'Finds new paths. Independent, curious, adventurous.', examples: 'Patagonia, Jeep, REI' },

+        { name: 'The Everyman', desc: 'Connects with everyone. Relatable, genuine, unpretentious.', examples: 'IKEA, Target' },

+        { name: 'The Magician', desc: 'Creates transformation. Visionary, inspiring, wonder-making.', examples: 'Disney, Dyson, Tesla' },

+        { name: 'The Ruler', desc: 'Commands authority. Polished, prestigious, leadership-focused.', examples: 'Rolex, Mercedes, Harvard' },

-        function toggle(el, type, max) {

-            if (el.classList.contains('selected')) {

-                el.classList.remove('selected'); selections[type] = selections[type].filter(x => x !== el.innerText);

-                if (selections[type].length >= max) {

-                        const first = el.parentElement.querySelector('.selected');

-                        if (first) first.classList.remove('selected');

-                        selections[type] = [];

-                el.classList.add('selected'); selections[type].push(el.innerText);

+    let selections = { values: [], voice: [], archetype: [] };

-            let el = document.getElementById(id);

-            el.style.display = (el.style.display === 'block' ? 'none' : 'block');

+        buildPills('values-grid', valueOptions, 'values', 3);

+        buildPills('voice-grid', voiceOptions, 'voice', 3);

-        function generateBrandPrompt() {

-            const prompt = `Act as a professional Brand Strategist. Analyze my DNA:

-- Values: ${selections.values.join(", ")}

+    function buildPills(gridId, options, type, max) {

+        const grid = document.getElementById(gridId);

+            const btn = document.createElement('button');

+            btn.onclick = () => togglePill(btn, type, max);

-1. Three logo concepts (minimalist, bold, and geometric).

-2. A typography pairing recommendation.

-3. Three adjectives for my brand's voice.`;

-            document.getElementById('output-container').style.display = 'block';

-            document.getElementById('prompt-output').innerText = prompt;

+        const grid = document.getElementById('archetype-grid');

+            const card = document.createElement('button');

+            card.className = 'archetype-card';

+            card.innerHTML = `<div class="archetype-name">${a.name}</div><div class="archetype-desc">${a.desc}</div><div class="archetype-examples">${a.examples}</div>`;

+                document.querySelectorAll('.archetype-card').forEach(c => c.classList.remove('selected'));

+                card.classList.add('selected');

+                selections.archetype = [a.name];

-            const txt = document.getElementById('prompt-output').innerText;

-            navigator.clipboard.writeText(txt).then(() => { window.open(`https://gemini.google.com/`, "_blank"); });

+    function togglePill(el, type, max) {

+        if (el.classList.contains('selected')) {

+            el.classList.remove('selected');

+            selections[type] = selections[type].filter(x => x !== el.textContent);

+        } else if (selections[type].length < max) {

+            el.classList.add('selected');

+            selections[type].push(el.textContent);

-            document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));

-            document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));

-            document.getElementById(id).classList.add('active');

-            document.getElementById('btn-' + id).classList.add('active');

+        document.querySelectorAll('.step-section').forEach(s => s.classList.remove('active'));

+        document.querySelectorAll('.step-btn').forEach(b => b.classList.remove('active'));

+        document.getElementById('step-' + id).classList.add('active');

+        document.getElementById('btn-' + id).classList.add('active');

-                uvp: document.getElementById('uvp-text').value,

-                cp: document.getElementById('color-primary').value,

-                cs: document.getElementById('color-secondary').value,

-                fp: document.getElementById('font-primary').value,

-                li: document.getElementById('linkedin-copy').value

-            localStorage.setItem('apex_brand_v3', JSON.stringify(data));

+        const btn = document.getElementById('btn-' + id);

+        if (btn) btn.classList.add('done');

-            const saved = localStorage.getItem('apex_brand_v3'); if (!saved) return;

-            const data = JSON.parse(saved); selections = data.selections;

-            document.getElementById('uvp-text').value = data.uvp || "";

-            document.getElementById('color-primary').value = data.cp || "";

-            document.getElementById('color-secondary').value = data.cs || "";

-            document.getElementById('font-primary').value = data.fp || "";

-            document.getElementById('linkedin-copy').value = data.li || "";

-            document.querySelectorAll('.pill').forEach(p => {

-                if (selections.values.includes(p.innerText) || selections.archetype.includes(p.innerText)) p.classList.add('selected');

+        const done = PHASES.filter(id => {

+            const btn = document.getElementById('btn-' + id);

+            return btn && btn.classList.contains('done');

+        const pct = Math.round((done / PHASES.length) * 100);

+        document.getElementById('progress-fill').style.width = pct + '%';

+        document.getElementById('progress-label').textContent = done + ' of 5 phases complete';

-        function clearData() { if (confirm("Reset everything?")) { localStorage.clear(); location.reload(); } }

+    function getVal(id) { const el = document.getElementById(id); return el ? el.value : ''; }

+    function setVal(id, val) { const el = document.getElementById(id); if (el && val !== undefined) el.value = val; }

+        const visited = PHASES.filter(id => {

+            impressionCurrent: getVal('impression-current'),

+            impressionGoal: getVal('impression-goal'),

+            valuesReflection: getVal('values-reflection'),

+            strengths: getVal('strengths'),

+            differentiator: getVal('differentiator'),

+            audience: getVal('audience'),

+            russNotes: getVal('russ-notes'),

+            colorPrimary: getVal('color-primary'),

+            colorSecondary: getVal('color-secondary'),

+            fontHeading: getVal('font-heading'),

+            fontBody: getVal('font-body'),

+            brandWords: getVal('brand-words'),

+            mariaKaytNotes: getVal('maria-kayt-notes'),

+            linkStyleGuide: getVal('link-style-guide'),

+            linkLogo: getVal('link-logo'),

+            linkedinHeadline: getVal('linkedin-headline'),

+            linkLinkedIn: getVal('link-linkedin'),

+            linkBizCard: getVal('link-biz-card'),

+            linkPortfolio: getVal('link-portfolio'),

+            finalNotes: getVal('final-notes'),

+        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));

+        const saved = localStorage.getItem(STORAGE_KEY);

+        const data = JSON.parse(saved);

+        selections = data.selections || { values: [], voice: [], archetype: [] };

+        setVal('impression-current', data.impressionCurrent);

+        setVal('impression-goal', data.impressionGoal);

+        setVal('values-reflection', data.valuesReflection);

+        setVal('strengths', data.strengths);

+        setVal('differentiator', data.differentiator);

+        setVal('audience', data.audience);

+        setVal('russ-notes', data.russNotes);

+        setVal('color-primary', data.colorPrimary);

+        setVal('color-secondary', data.colorSecondary);

+        setVal('font-heading', data.fontHeading);

+        setVal('font-body', data.fontBody);

+        setVal('brand-words', data.brandWords);

+        setVal('maria-kayt-notes', data.mariaKaytNotes);

+        setVal('link-style-guide', data.linkStyleGuide);

+        setVal('link-logo', data.linkLogo);

+        setVal('linkedin-headline', data.linkedinHeadline);

+        setVal('link-linkedin', data.linkLinkedIn);

+        setVal('link-biz-card', data.linkBizCard);

+        setVal('link-portfolio', data.linkPortfolio);

+        setVal('final-notes', data.finalNotes);

+        document.querySelectorAll('#values-grid .pill').forEach(p => {

+            if (selections.values.includes(p.textContent)) p.classList.add('selected');

+        document.querySelectorAll('#voice-grid .pill').forEach(p => {

+            if (selections.voice.includes(p.textContent)) p.classList.add('selected');

+        document.querySelectorAll('.archetype-card').forEach(c => {

+            const name = c.querySelector('.archetype-name')?.textContent;

+            if (name && selections.archetype.includes(name)) c.classList.add('selected');

+        (data.visited || []).forEach(id => {

+            const btn = document.getElementById('btn-' + id);

+            if (btn) btn.classList.add('done');

+        if (confirm('Reset all data? This cannot be undone.')) {

+            localStorage.removeItem(STORAGE_KEY);


Bash

Verify key elements are present


Done. Here's what was built:

**5 phases, all linear:**
- **Phase 0** — Brand vs. brand identity teaching, real examples (Nike/Apple/Patagonia), the Bezos quote, key insight callout
- **Phase 1** — Personal brand context, 4 components (values/voice/visual identity/presence), first-impression reflection prompts
- **Phase 2** — Values pills (select 3), strengths, differentiator, voice adjectives pills (select 3), audience, UVP builder → **Russ checkpoint**
- **Phase 3** — Archetype selector (7 cards with descriptions + examples), color psychology swatches with teaching, typography guide with font inputs → **Maria & Kayt checkpoint**
- **Phase 4** — 5 deliverables (style guide, logo, LinkedIn with headline draft, business card, portfolio entry) → **Final review with Russ**

All selections and text inputs save to localStorage. Visited state persists across page reloads. The AI prompt builder is gone.


I think It's great! Good work!


Thank you! It came together well — the progression from "what is a brand" through to actual deliverables gives the project real educational scaffolding that the old version completely lacked.

Good session today. A lot shipped.


So, technically speaking the file that's currently labeled Standard4.html is actually for my Business Startup course (BSU) and should probably be renamed Standard4BSU.html.

I'm left with a conundrum, as I lead those two courses (BSU and DCS). Do I need to have a separate set of files for each course, or could you make a "Standard4 switcher" or something to navigate between those two Standard4 files? Or do you have a better idea? Does the conundrum make sense?


The conundrum makes complete sense. You have two courses sharing Standard 4, and students in each course need access to their own version.

A few options:

**Option 1 — Keep them as separate files, add a landing page**
Create a `Standard4.html` that's just a simple chooser: two cards — "I'm in DCS" and "I'm in BSU" — that link to `Standard4DCS.html` and `Standard4BSU.html`. Clean, zero confusion. The dashboard links to `Standard4.html` and students self-select from there.

**Option 2 — Tabs inside one file**
One `Standard4.html` with a "DCS" / "BSU" toggle at the top of the page. Both portfolios live in the same file, localStorage is namespaced by course. Feels seamless but adds complexity, and a student who switches tabs could accidentally see the wrong course's content.

**Option 3 — Course-aware dashboard**
The dashboard asks students which course they're in (stored in localStorage) and the S4 link goes directly to the right file. Elegant, but requires touching the dashboard and relies on students setting up correctly once.

**My recommendation: Option 1.** It's the simplest, most foolproof, and easiest to maintain. The landing page takes 20 minutes to build, each course file stays completely independent, and there's no risk of data or content bleeding between them. If you add a third course someday, you just add a third card.

Want me to rename `Standard4.html` to `Standard4BSU.html`, update all the links, and build the landing page?


Yes please. I've turned on "Edit automatically" and I'm going to walk away and eat dinner. Have fun building!


The user wants me to:
1. Rename `Standard4.html` to `Standard4BSU.html`
2. Update all links across all files that reference `Standard4.html`
3. Build a `Standard4.html` landing page with two cards — "I'm in DCS" and "I'm in BSU"

Let me start by finding all references to `Standard4.html` across all files, then make the changes.

Steps:
1. Find all files that reference `Standard4.html`
2. Read `Standard4.html` to understand its nav/structure for renaming
3. Create `Standard4BSU.html` (copy of Standard4.html with updated self-references)

4. Create the new landing page with the two navigation cards
5. Update all cross-file links to point to the renamed version

Now I'm searching through the files to locate every reference to `Standard4.html` so I can update them systematically.


Let me start by finding every reference to `Standard4.html` across all files, then map out exactly what needs to change.


grep -rn "Standard4\.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html"

Find all references to Standard4.html


/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html:158:            S4 Portfolio
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html:329:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX Professional Dashboard.html:483:
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:244:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:294:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html:234:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html:239:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:260:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:649:        addToQueue(titleText, 'Standard4.html', brief);


grep -rn "Standard4DCS\.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html"

Find all references to Standard4DCS.html


/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html:159:            Personal Brand


Good. Now I have a clear picture:

**Files that reference `Standard4.html`:**
1. `Standard4DCS.html` — line 158: `<a href="Standard4.html">S4 Portfolio</a>` → change to `Standard4BSU.html`? No wait — this should link to the new `Standard4.html` landing page since it's a neutral S4 hub.

Actually, let me think about this. The Standard4DCS.html file has a nav link "S4 Portfolio" that links to Standard4.html. After the rename and creation of the landing page:

- The new `Standard4.html` will be the landing page/switcher
- `Standard4BSU.html` will be the renamed BSU version
- `Standard4DCS.html` stays as is

For the DCS file's nav link, I'm torn between pointing it to the new landing page for consistency or to the BSU version since DCS students wouldn't need the switcher. But linking to the landing page probably makes more sense for a unified experience.

Actually, I'm realizing the "S4 Portfolio" link in the DCS nav is confusing—it's already on the DCS portfolio page, so that link should probably point to the main Standard 4 hub so students can navigate back to the central landing page.

Now I'm going through each file to verify all the Standard 4 links are pointing to the right place. Most of them already link to `Standard4.html`, which is correct for the new landing page structure.

The key insight is that `Standard4.html` itself needs to be split: I'll rename the current file to `Standard4BSU.html` and update its internal self-references, then create a fresh `Standard4.html` as the landing page. The `Standard4DCS.html` file's existing link to `Standard4.html` will work perfectly as-is since that's now the landing page. I need to verify whether the underscore version of that file also contains a link to `Standard4.html` that would need updating.


Good. Now let me also check the actual working dashboard and read Standard4.html before I start making changes.


grep -n "Standard4" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html"

Check Standard4 references in main dashboard


(Bash completed with no output)


250
251

252
253
254
255

256	            Dashboard
257	            S1
258	            S2
259	            S3
260	            S4
261	            S5
262	            <button id="sidebarToggle" style="color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;padding:8px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.2s;background:none;border:none;cursor:pointer;">📌 Queue</button>
263

264

265
266
267

268
269
🚀 BSU Professional Sprint Portfolio v3

            Dashboard
            S1
            S2
            S3
            S4
            S5
            <button id="sidebarToggle" style="color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;padding:8px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.2s;background:none;border:none;cursor:pointer;">📌 Queue</button>

🚀 BSU Professional Sprint Portfolio v3


The main working dashboard (`APEX_Professional_Dashboard.html`) has no Standard4 links — interesting. That's because the dashboard cards link using different references. Let me check the full dashboard file for Standard4 links.

Wait, the grep showed no output for `APEX_Professional_Dashboard.html` — so the main working dashboard doesn't directly link to Standard4.html. The links found in the grep were in `APEX Professional Dashboard.html` (with space, the old one) and other files.

Now let me check what the Standard 4 card on the main dashboard links to.


grep -n "Standard4\|S4\|standard-4\|standard4" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html"

Check all S4 references in main dashboard


The main working dashboard (`APEX_Professional_Dashboard.html`) has no Standard4 references at all. That means it doesn't link to Standard4.html. That's a gap to address — I should add a link to the new Standard4.html landing page in the dashboard's standards section.

Wait, but looking at earlier in our conversation, we removed the Portfolio Standards section from the dashboard. So the dashboard doesn't have Standard links at all (we removed them). Let me re-read the dashboard structure to understand what's there.

Actually, looking at the grep results from early in the session, the dashboard has:

Navigation links and a Quick Access section with cards, but no direct standards links. The standards navigation lives in the nav bar of each standard page and in the Portfolio page, where the Standard4 links already point to the new landing page. The other standards pages also have nav links that route to Standard4.html, so the cross-linking is already set up correctly.

My approach is solid: I'll duplicate the current Standard4.html as Standard4BSU.html and update its self-references, then create a fresh Standard4.html landing page. Everything else stays as-is since all the existing links already target Standard4.html. Now I need to examine the full Standard4.html file to identify what needs copying over to the BSU version, particularly the self-referencing links and any queue-related functions.


The main dashboard doesn't link to Standard4 at all — that's fine. Now I have a clear picture of all the changes needed:

- **Create `Standard4BSU.html`** — copy of current `Standard4.html` with two self-references updated
- **Create new `Standard4.html`** — the landing page/switcher
- **No other files need changes** — they all already link to `Standard4.html`, which will be the new landing page

Let me read the two self-referencing lines in Standard4.html to make precise replacements.


645	        const titleText = [...h4.childNodes]
646	            .filter(n => n.nodeType === Node.TEXT_NODE)
647	            .map(n => n.textContent).join('').trim();
648	        const brief = card.querySelector('.instruction-text')?.textContent.trim() || 'Technical skill development sprint';
649	        addToQueue(titleText, 'Standard4.html', brief);
650	        const btn = h4.querySelector('.bookmark-btn');
651	        btn.innerText = '✓ Bookmarked';
652	        btn.style.background = '#10B981';

        const titleText = [...h4.childNodes]
            .filter(n => n.nodeType === Node.TEXT_NODE)
            .map(n => n.textContent).join('').trim();
        const brief = card.querySelector('.instruction-text')?.textContent.trim() || 'Technical skill development sprint';
        addToQueue(titleText, 'Standard4.html', brief);
        const btn = h4.querySelector('.bookmark-btn');
        btn.innerText = '✓ Bookmarked';
        btn.style.background = '#10B981';


265
266
267

268
269
🚀 BSU Professional Sprint Portfolio v3

🚀 BSU Professional Sprint Portfolio v3


Now I have what I need. Let me:

1. Read the full Standard4.html to copy it and create Standard4BSU.html with the two self-reference changes
2. Create new Standard4.html landing page

Actually, instead of reading the whole file and writing it, I can use Bash to copy the file and then edit the two references. That's more efficient.


I'll copy the file via bash, then fix the two self-references, then build the landing page.


cp "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html"

Copy Standard4.html to Standard4BSU.html


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


Good. Now fix the two self-references in Standard4BSU.html:


The file /Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html has been updated successfully. (file state is current in your context — no need to Read it back)


.filter(n => n.nodeType === Node.TEXT_NODE)

const brief = card.querySelector('.instruction-text')?.textContent.trim() || 'Technical skill development sprint';

-        addToQueue(titleText, 'Standard4.html', brief);

+        addToQueue(titleText, 'Standard4BSU.html', brief);

const btn = h4.querySelector('.bookmark-btn');


Now I'll also update the page title in Standard4BSU.html to make it clear which file is which:


5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>BSU Portfolio v3 | Professional Sprint Log</title>
7	    <style>
8	        :root {
9	            --primary: #500778;    /* APEX Purple */

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BSU Portfolio v3 | Professional Sprint Log</title>
    <style>
        :root {
            --primary: #500778;    /* APEX Purple */


Good — the title already says BSU. Now let me build the landing page. I want it to match the design system, be clean and fast to understand, and make it obvious which card is for which course.